mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-25 12:15:18 +01:00
[CL-99] Update icon-button.stories.ts (#5631)
* Update icon-button.stories.ts separated out the icon-button stories by size, style, loading, and disabled * restructured icon button docs to use new stories
This commit is contained in:
parent
9d8f52ef6a
commit
159fea6962
@ -9,20 +9,76 @@ import * as stories from "./icon-button.stories";
|
|||||||
Icon buttons are used when no text accompanies the button. It consists of an icon that may be
|
Icon buttons are used when no text accompanies the button. It consists of an icon that may be
|
||||||
updated to any icon in the `bwi-font`, a `title` attribute, and an `aria-label`.
|
updated to any icon in the `bwi-font`, a `title` attribute, and an `aria-label`.
|
||||||
|
|
||||||
There are 3 common styles for button main, contrast, and danger. The main style is used on the
|
|
||||||
theme’s main `background`; and the contrast style is used on a theme’s colored or contrasting
|
|
||||||
backgrounds; danger is used for “trash” actions throughout the experience. The other styles are used
|
|
||||||
sparingly.
|
|
||||||
|
|
||||||
The most common use of the icon button is in the banner, toast, and modal components as a close
|
The most common use of the icon button is in the banner, toast, and modal components as a close
|
||||||
button. It can also be found in tables as the 3 dot option menu, or on navigation list items when
|
button. It can also be found in tables as the 3 dot option menu, or on navigation list items when
|
||||||
there are options that need to be collapsed into a menu.
|
there are options that need to be collapsed into a menu.
|
||||||
|
|
||||||
Similar to the main button components, spacing between icon buttons should be .5rem.
|
Similar to the main button components, spacing between multiple icon buttons should be .5rem.
|
||||||
|
|
||||||
<Primary />
|
<Primary />
|
||||||
<Controls />
|
<Controls />
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
Icon buttons can be found in other components such as: the
|
||||||
|
[banner](?path=/docs/component-library-banner--docs)
|
||||||
|
[dialog](?path=/docs/component-library-dialogs--docs), and
|
||||||
|
[table](?path=/docs/component-library-table--docs).
|
||||||
|
|
||||||
|
<Story id="component-library-banner--premium" />
|
||||||
|
|
||||||
|
## Styles
|
||||||
|
|
||||||
|
There are 4 common styles for button main, muted, contrast, and danger. The other styles follow the
|
||||||
|
button component styles.
|
||||||
|
|
||||||
|
### Main
|
||||||
|
|
||||||
|
Used for general icon buttons appearing on the theme’s main `background`
|
||||||
|
|
||||||
|
<Story id="component-library-icon-button--main" />
|
||||||
|
|
||||||
|
### Muted
|
||||||
|
|
||||||
|
Used for low emphasis icon buttons appearing on the theme’s main `background`
|
||||||
|
|
||||||
|
<Story id="component-library-icon-button--muted" />
|
||||||
|
|
||||||
|
### Contrast
|
||||||
|
|
||||||
|
Used on a theme’s colored or contrasting backgrounds such as in the navigation or on toasts and
|
||||||
|
banners.
|
||||||
|
|
||||||
|
<Story id="component-library-icon-button--contrast" />
|
||||||
|
|
||||||
|
### Danger
|
||||||
|
|
||||||
|
Danger is used for “trash” actions throughout the experience, most commonly in the bottom right of
|
||||||
|
the dialog component.
|
||||||
|
|
||||||
|
<Story id="component-library-icon-button--danger" />
|
||||||
|
|
||||||
|
### Primary
|
||||||
|
|
||||||
|
Used in place of the main button component if no text is used. This allows the button to display
|
||||||
|
square.
|
||||||
|
|
||||||
|
<Story id="component-library-icon-button--primary" />
|
||||||
|
|
||||||
|
### Secondary
|
||||||
|
|
||||||
|
Used in place of the main button component if no text is used. This allows the button to display
|
||||||
|
square.
|
||||||
|
|
||||||
|
<Story id="component-library-icon-button--secondary" />
|
||||||
|
|
||||||
|
### Light
|
||||||
|
|
||||||
|
Used on a background that is dark in both light theme and dark theme. Example: end user navigation
|
||||||
|
styles.
|
||||||
|
|
||||||
|
<Story id="component-library-icon-button--light" />
|
||||||
|
|
||||||
**Note:** Main and contrast styles appear on backgrounds where using `primary-700` as a focus
|
**Note:** Main and contrast styles appear on backgrounds where using `primary-700` as a focus
|
||||||
indicator does not meet WCAG graphic contrast guidelines.
|
indicator does not meet WCAG graphic contrast guidelines.
|
||||||
|
|
||||||
@ -33,14 +89,13 @@ There are 2 sizes for the icon button: `small` and `default`.
|
|||||||
Default is typically used for most instances. Small is used if the implementation needs a variant
|
Default is typically used for most instances. Small is used if the implementation needs a variant
|
||||||
with less padding around the icon, such as in the navigation component.
|
with less padding around the icon, such as in the navigation component.
|
||||||
|
|
||||||
## Usage
|
### Small
|
||||||
|
|
||||||
Icon buttons can be found in other components such as: the
|
<Story id="component-library-icon-button--small" />
|
||||||
[banner](?path=/docs/component-library-banner--docs)
|
|
||||||
[dialog](?path=/docs/component-library-dialogs--docs), and
|
|
||||||
[table](?path=/docs/component-library-table--docs).
|
|
||||||
|
|
||||||
<Story id="component-library-banner--premium" />
|
### Default
|
||||||
|
|
||||||
|
<Story id="component-library-icon-button--default" />
|
||||||
|
|
||||||
## Accessibility
|
## Accessibility
|
||||||
|
|
||||||
|
@ -1,96 +1,47 @@
|
|||||||
import { Meta, StoryObj } from "@storybook/angular";
|
import { Meta, StoryObj } from "@storybook/angular";
|
||||||
|
|
||||||
import { BitIconButtonComponent, IconButtonType } from "./icon-button.component";
|
import { BitIconButtonComponent } from "./icon-button.component";
|
||||||
|
|
||||||
const buttonTypes: IconButtonType[] = [
|
|
||||||
"contrast",
|
|
||||||
"main",
|
|
||||||
"muted",
|
|
||||||
"primary",
|
|
||||||
"secondary",
|
|
||||||
"danger",
|
|
||||||
"light",
|
|
||||||
];
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
title: "Component Library/Icon Button",
|
title: "Component Library/Icon Button",
|
||||||
component: BitIconButtonComponent,
|
component: BitIconButtonComponent,
|
||||||
|
args: {
|
||||||
|
bitIconButton: "bwi-plus",
|
||||||
|
size: "default",
|
||||||
|
disabled: false,
|
||||||
|
},
|
||||||
parameters: {
|
parameters: {
|
||||||
design: {
|
design: {
|
||||||
type: "figma",
|
type: "figma",
|
||||||
url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=4369%3A16686",
|
url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=4369%3A16686",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
args: {
|
} as Meta<BitIconButtonComponent>;
|
||||||
bitIconButton: "bwi-plus",
|
|
||||||
size: "default",
|
|
||||||
disabled: false,
|
|
||||||
},
|
|
||||||
argTypes: {
|
|
||||||
buttonTypes: { table: { disable: true } },
|
|
||||||
},
|
|
||||||
} as Meta;
|
|
||||||
|
|
||||||
type Story = StoryObj<BitIconButtonComponent>;
|
type Story = StoryObj<BitIconButtonComponent>;
|
||||||
|
|
||||||
export const Default: Story = {
|
export const Default: Story = {
|
||||||
render: (args: BitIconButtonComponent) => ({
|
render: (args) => ({
|
||||||
props: { ...args, buttonTypes },
|
props: args,
|
||||||
template: `
|
template: `
|
||||||
<table class="tw-border-spacing-2 tw-text-center tw-text-main">
|
<div class="tw-space-x-4">
|
||||||
<thead>
|
<button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="main" [size]="size">Button</button>
|
||||||
<tr>
|
<button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="muted" [size]="size">Button</button>
|
||||||
<td></td>
|
<button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="primary" [size]="size">Button</button>
|
||||||
<td *ngFor="let buttonType of buttonTypes" class="tw-capitalize tw-font-bold tw-p-4"
|
<button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="secondary"[size]="size">Button</button>
|
||||||
[class.tw-text-contrast]="['contrast', 'light'].includes(buttonType)"
|
<button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="danger" [size]="size">Button</button>
|
||||||
[class.tw-bg-primary-500]="['contrast', 'light'].includes(buttonType)">{{buttonType}}</td>
|
<div class="tw-bg-primary-500 tw-p-2 tw-inline-block">
|
||||||
</tr>
|
<button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="contrast" [size]="size">Button</button>
|
||||||
</thead>
|
</div>
|
||||||
|
<div class="tw-bg-background-alt2 tw-p-2 tw-inline-block">
|
||||||
<tbody>
|
<button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="light" [size]="size">Button</button>
|
||||||
<tr>
|
</div>
|
||||||
<td class="tw-font-bold tw-p-4 tw-text-left">Default</td>
|
</div>
|
||||||
<td *ngFor="let buttonType of buttonTypes" class="tw-p-2" [class.tw-bg-primary-500]="['contrast', 'light'].includes(buttonType)">
|
|
||||||
<button
|
|
||||||
[bitIconButton]="bitIconButton"
|
|
||||||
[buttonType]="buttonType"
|
|
||||||
[size]="size"
|
|
||||||
title="Example icon button"
|
|
||||||
aria-label="Example icon button"></button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="tw-font-bold tw-p-4 tw-text-left">Disabled</td>
|
|
||||||
<td *ngFor="let buttonType of buttonTypes" class="tw-p-2" [class.tw-bg-primary-500]="['contrast', 'light'].includes(buttonType)">
|
|
||||||
<button
|
|
||||||
[bitIconButton]="bitIconButton"
|
|
||||||
[buttonType]="buttonType"
|
|
||||||
[size]="size"
|
|
||||||
disabled
|
|
||||||
title="Example icon button"
|
|
||||||
aria-label="Example icon button"></button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="tw-font-bold tw-p-4 tw-text-left">Loading</td>
|
|
||||||
<td *ngFor="let buttonType of buttonTypes" class="tw-p-2" [class.tw-bg-primary-500]="['contrast', 'light'].includes(buttonType)">
|
|
||||||
<button
|
|
||||||
[bitIconButton]="bitIconButton"
|
|
||||||
[buttonType]="buttonType"
|
|
||||||
[size]="size"
|
|
||||||
loading="true"
|
|
||||||
title="Example icon button"
|
|
||||||
aria-label="Example icon button"></button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
`,
|
`,
|
||||||
}),
|
}),
|
||||||
args: {
|
args: {
|
||||||
size: "default",
|
size: "default",
|
||||||
|
buttonType: "primary",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -98,5 +49,90 @@ export const Small: Story = {
|
|||||||
...Default,
|
...Default,
|
||||||
args: {
|
args: {
|
||||||
size: "small",
|
size: "small",
|
||||||
|
buttonType: "primary",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Primary: Story = {
|
||||||
|
render: (args) => ({
|
||||||
|
props: args,
|
||||||
|
template: `
|
||||||
|
<button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size">Button</button>
|
||||||
|
`,
|
||||||
|
}),
|
||||||
|
args: {
|
||||||
|
buttonType: "primary",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Secondary: Story = {
|
||||||
|
...Primary,
|
||||||
|
args: {
|
||||||
|
buttonType: "secondary",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Danger: Story = {
|
||||||
|
...Primary,
|
||||||
|
args: {
|
||||||
|
buttonType: "danger",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Main: Story = {
|
||||||
|
...Primary,
|
||||||
|
args: {
|
||||||
|
buttonType: "main",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Muted: Story = {
|
||||||
|
...Primary,
|
||||||
|
args: {
|
||||||
|
buttonType: "muted",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Light: Story = {
|
||||||
|
render: (args) => ({
|
||||||
|
props: args,
|
||||||
|
template: `
|
||||||
|
<div class="tw-bg-background-alt2 tw-p-6 tw-w-full tw-inline-block">
|
||||||
|
<button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size">Button</button>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
}),
|
||||||
|
args: {
|
||||||
|
buttonType: "light",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Contrast: Story = {
|
||||||
|
render: (args) => ({
|
||||||
|
props: args,
|
||||||
|
template: `
|
||||||
|
<div class="tw-bg-primary-500 tw-p-6 tw-w-full tw-inline-block">
|
||||||
|
<button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size">Button</button>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
}),
|
||||||
|
args: {
|
||||||
|
buttonType: "contrast",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Loading: Story = {
|
||||||
|
...Default,
|
||||||
|
args: {
|
||||||
|
disabled: false,
|
||||||
|
loading: true,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Disabled: Story = {
|
||||||
|
...Default,
|
||||||
|
args: {
|
||||||
|
disabled: true,
|
||||||
|
loading: true,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user