docs: added icon only button doc & some other button doc improvements

packages/admin-ui/src/Button/Button.mdx

@@ -6,7 +6,7 @@ import * as ButtonStories from './Button.stories';
 
 # Button
 
-The Button component is a key UI element that enables users to trigger actions or events, such as submitting forms, navigating pages, or interacting with system functionality. Its purpose is to provide a clear, intuitive way for users to interact with an system. Buttons are relevant in virtually all interfaces, ensuring user engagement by offering a simple, recognizable mechanism for executing commands. They are essential for usability, guiding user behavior and driving application workflows.
+The Button component is a key UI element that enables users to trigger actions or events, such as submitting forms, navigating pages, or interacting with system functionality. Its purpose is to provide a clear, intuitive way for users to interact with a system. Buttons are relevant in virtually all interfaces, ensuring user engagement by offering a simple, recognizable mechanism for executing commands. They are essential for usability, guiding user behavior and driving application workflows.
 
 ## Usage
 
@@ -15,15 +15,15 @@ import { Button } from '@webiny/admin-ui';
 ```
 
 ```jsx
-<Button variant="primary">Button</Button>
+<Button variant="primary" text={"Button"}></Button>
 ```
 ## Props
 
 <Canvas of={ButtonStories.Documentation}
     source={ { code:
-        ` // Code for a Primary, Medium sized button
+        ` // Code for a Primary button
         \n import { Button } from '@webiny/admin-ui';
-        \n <Button variant="primary" size="md">Button</Button>
+        \n <Button variant="primary" text={"Button"}></Button>
 
          ` } }
     additionalActions={[
@@ -47,9 +47,9 @@ import { Button } from '@webiny/admin-ui';
 
 <Canvas of={ButtonStories.Primary}
         source={ { code:
-        `// Code for a Primary, Medium sized button
+        `// Code for a Primary button
         \n import { Button } from '@webiny/admin-ui';
-        \n <Button variant="primary" size="md">Button</Button>
+        \n <Button variant="primary" text={"Button"}></Button>
 
         ` } }
 />
@@ -59,9 +59,9 @@ import { Button } from '@webiny/admin-ui';
 
 <Canvas of={ButtonStories.Secondary}
         source={ { code:
-        `// Code for a Secondary, Medium sized button
+        `// Code for a Secondary button
         \n import { Button } from '@webiny/admin-ui';
-        \n <Button variant="secondary" size="md">Button</Button>
+        \n <Button variant="secondary" text={"Button"}></Button>
 
 ` } }
 />
@@ -70,9 +70,9 @@ import { Button } from '@webiny/admin-ui';
 
 <Canvas of={ButtonStories.Tertiary}
         source={ { code:
-        `// Code for a Tertiary, Medium sized button
+        `// Code for a Tertiary button
         \n import { Button } from '@webiny/admin-ui';
-        \n <Button variant="tertiary" size="md">Button</Button>
+        \n <Button variant="tertiary" text={"Button"}></Button>
 
 ` } }
 />
@@ -81,9 +81,9 @@ import { Button } from '@webiny/admin-ui';
 
 <Canvas of={ButtonStories.Ghost}
         source={ { code:
-        `// Code for a Ghost, Medium sized button
+        `// Code for a Ghost button
         \n import { Button } from '@webiny/admin-ui';
-        \n <Button variant="ghost" size="md">Button</Button>
+        \n <Button variant="ghost" text={"Button"}></Button>
 
 ` } }
 />
@@ -92,9 +92,9 @@ import { Button } from '@webiny/admin-ui';
 
 <Canvas of={ButtonStories.GhostNegative}
         source={ { code:
-                `// Code for a Ghost Negative, Medium sized button
+                `// Code for a Ghost Negative button
         \n import { Button } from '@webiny/admin-ui';
-        \n <Button variant="ghost-negative" size="md">Button</Button>
+        \n <Button variant="ghost-negative" text={"Button"}></Button>
 
 ` } }
 />
@@ -103,11 +103,11 @@ import { Button } from '@webiny/admin-ui';
 
 <Canvas of={ButtonStories.WithIcon} story={ {inline: false}}
         source={ { code:
-                `// Code for a With Icon, Medium sized button
+                `// Code for a With Icon button
 
 import { Button } from '@webiny/admin-ui';
 import { ReactComponent as PencilIcon } from "@material-design-icons/svg/filled/edit.svg";
-\n<Button variant="primary" size="md" icon={<PencilIcon />} iconPosition="start">Button</Button>
+\n<Button variant="primary"  text={"Button"} size="md" icon={<PencilIcon />} iconPosition="start"></Button>
 ` } }
 />
 
@@ -118,16 +118,56 @@ The Button component can be used as a wrapper for other elements, allowing flexi
 <Canvas of={ButtonStories.WithAsChild} story={ {inline: false}}
         source={ { code:
                 `// Code for a As Child button
-
 \n import { Button } from '@webiny/admin-ui';
-\n import { ReactComponent as PencilIcon } from "@material-design-icons/svg/filled/edit.svg";
-<Button variant="primary" size="md" asChild=true>
+
+<Button variant="primary" size="md"  asChild={true}>
     <span>Button</span>
 </Button>
 
 ` } }
 />
 
+### Icon Only Button
+import * as IconButtonStories from './IconButton.stories';
+
+**We have a dedicated `IconButton` component for the Icon-only button. Please check the code below for more details.**
+
+#### Usage
+
+```jsx
+import { IconButton } from '@webiny/admin-ui';
+```
+
+```jsx
+import { ReactComponent as AddIcon } from "@material-design-icons/svg/outlined/add.svg";
+<IconButton icon={<AddIcon />} size={"md"}/>
+```
+
+<Canvas of={IconButtonStories.Documentation}
+        source={ { code:
+                ` // Code for a Icon Only Primary button
+        \n import { IconButton } from '@webiny/admin-ui';
+        \n import { ReactComponent as AddIcon } from "@material-design-icons/svg/outlined/add.svg";
+        \n <IconButton icon={<AddIcon />} size={"md"}/>
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Button/Button.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+#### Props
+
+<Controls of={IconButtonStories.Documentation} exclude={"onClick"} />
+
 ## Anatomy
 
 ### Construction
@@ -136,15 +176,15 @@ The Button component can be used as a wrapper for other elements, allowing flexi
 ### Options
 <img src="/images/storybook/button/options.png" alt="Options"/>
 
-### Type
-<img src="/images/storybook/button/type.png" alt="Type"/>
+### Variants
+<img src="/images/storybook/button/type.png" alt="Variants"/>
 
 ### Size
 Regular buttons come in four different sizes: small, medium, large, and xl. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.
 
 <img src="/images/storybook/button/size.png" alt="Size"/>
 
-Icon-only button come in six different sizes to accommodate for various component needs.
+**Icon-only button** come in six different sizes to accommodate for various component needs.
 
 <img src="/images/storybook/button/size-icon-only.png" alt="Size - Icon Only"/>
 

packages/admin-ui/src/Button/Button.stories.tsx

@@ -31,19 +31,17 @@ const meta: Meta<typeof Button> = {
             defaultValue: false
         },
         icon: {
-            description:
-                "Please refer to the '[With Icon](#with-icon)' button example below for details.",
+            description: "Please refer to the 'With Icon' button example below for details.",
             control: "none"
         },
         iconPosition: {
-            description: "Icon Position",
+            description: "Please refer to the 'With Icon' button example below for details.",
             control: "select",
-            options: ["start", "end"],
-            defaultValue: "start"
+            defaultValue: "start",
+            options: ["start", "end"]
         },
         asChild: {
-            description:
-                "Please refer to the '[As Child](#as-child)' button example below for details.",
+            description: "Please refer to the 'As Child' button example below for details.",
             control: "none"
         },
         // Note: after upgrading to Storybook 8.X, use `fn`from `@storybook/test` to spy on the onClick argument.

packages/admin-ui/src/Button/IconButton.stories.tsx

@@ -6,16 +6,35 @@ import { IconButton } from "./IconButton";
 const meta: Meta<typeof IconButton> = {
     title: "Components/Icon Button",
     component: IconButton,
-    tags: ["autodocs"],
+    tags: ["!autodocs"],
     argTypes: {
         variant: {
+            description: "Type",
             control: "select",
-            options: ["primary", "secondary", "tertiary", "ghost", "ghost-negative"]
+            options: ["primary", "secondary", "tertiary", "ghost", "ghost-negative"],
+            defaultValue: "primary"
+        },
+        size: {
+            description: "Size",
+            control: "select",
+            options: ["xxs", "xs", "sm", "md", "lg", "xl"],
+            defaultValue: "md"
+        },
+        iconSize: {
+            description: "Icon Size",
+            control: "select",
+            options: ["default", "lg"],
+            defaultValue: "default"
+        },
+        disabled: {
+            description: "State",
+            control: "boolean",
+            defaultValue: false
+        },
+        icon: {
+            description: "Please refer to the example above for usage information.",
+            control: "none"
         },
-        size: { control: "select", options: ["xxs", "xs", "sm", "md", "lg", "xl"] },
-        iconSize: { control: "select", options: ["default", "lg"] },
-        disabled: { control: "boolean" },
-        asChild: { control: "boolean" },
         onClick: { action: "onClick" }
     }
 };
@@ -142,3 +161,13 @@ export const WithAsChild: Story = {
         )
     }
 };
+
+export const Documentation: Story = {
+    args: {
+        variant: "primary",
+        size: "md",
+        disabled: false,
+        icon: <AddIcon />,
+        iconSize: "default"
+    }
+};