Skip to content

Commit

Permalink
docs: added icon only button doc & some other button doc improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@swapnilmmane
swapnilmmane committed Mar 6, 2025
1 parent 9ba5be5 commit 5baf205
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 35 deletions.
84 changes: 62 additions & 22 deletions packages/admin-ui/src/Button/Button.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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={[
Expand All @@ -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>
` } }
/>
Expand All @@ -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>
` } }
/>
Expand All @@ -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>
` } }
/>
Expand All @@ -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>
` } }
/>
Expand All @@ -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>
` } }
/>
Expand All @@ -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>
` } }
/>

Expand All @@ -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
Expand All @@ -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"/>

Expand Down
12 changes: 5 additions & 7 deletions packages/admin-ui/src/Button/Button.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
41 changes: 35 additions & 6 deletions packages/admin-ui/src/Button/IconButton.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" }
}
};
Expand Down Expand Up @@ -142,3 +161,13 @@ export const WithAsChild: Story = {
)
}
};

export const Documentation: Story = {
args: {
variant: "primary",
size: "md",
disabled: false,
icon: <AddIcon />,
iconSize: "default"
}
};

0 comments on commit 5baf205

Please sign in to comment.