mirror of
https://github.com/bitwarden/browser
synced 2024-12-24 17:11:55 +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:
Danielle Flinn
GitHub
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
|
||||
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
|
||||
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.
|
||||
|
||||
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 />
|
||||
<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
|
||||
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
|
||||
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
|
||||
[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-icon-button--small" />
|
||||
|
||||
<Story id="component-library-banner--premium" />
|
||||
### Default
|
||||
|
||||
<Story id="component-library-icon-button--default" />
|
||||
|
||||
## Accessibility
|
||||
|
||||
|
||||
@ -1,96 +1,47 @@
|
||||
import { Meta, StoryObj } from "@storybook/angular";
|
||||
|
||||
import { BitIconButtonComponent, IconButtonType } from "./icon-button.component";
|
||||
|
||||
const buttonTypes: IconButtonType[] = [
|
||||
"contrast",
|
||||
"main",
|
||||
"muted",
|
||||
"primary",
|
||||
"secondary",
|
||||
"danger",
|
||||
"light",
|
||||
];
|
||||
import { BitIconButtonComponent } from "./icon-button.component";
|
||||
|
||||
export default {
|
||||
title: "Component Library/Icon Button",
|
||||
component: BitIconButtonComponent,
|
||||
args: {
|
||||
bitIconButton: "bwi-plus",
|
||||
size: "default",
|
||||
disabled: false,
|
||||
},
|
||||
parameters: {
|
||||
design: {
|
||||
type: "figma",
|
||||
url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=4369%3A16686",
|
||||
},
|
||||
},
|
||||
args: {
|
||||
bitIconButton: "bwi-plus",
|
||||
size: "default",
|
||||
disabled: false,
|
||||
},
|
||||
argTypes: {
|
||||
buttonTypes: { table: { disable: true } },
|
||||
},
|
||||
} as Meta;
|
||||
} as Meta<BitIconButtonComponent>;
|
||||
|
||||
type Story = StoryObj<BitIconButtonComponent>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: (args: BitIconButtonComponent) => ({
|
||||
props: { ...args, buttonTypes },
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<table class="tw-border-spacing-2 tw-text-center tw-text-main">
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td *ngFor="let buttonType of buttonTypes" class="tw-capitalize tw-font-bold tw-p-4"
|
||||
[class.tw-text-contrast]="['contrast', 'light'].includes(buttonType)"
|
||||
[class.tw-bg-primary-500]="['contrast', 'light'].includes(buttonType)">{{buttonType}}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="tw-font-bold tw-p-4 tw-text-left">Default</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"
|
||||
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>
|
||||
<div class="tw-space-x-4">
|
||||
<button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="main" [size]="size">Button</button>
|
||||
<button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="muted" [size]="size">Button</button>
|
||||
<button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="primary" [size]="size">Button</button>
|
||||
<button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="secondary"[size]="size">Button</button>
|
||||
<button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="danger" [size]="size">Button</button>
|
||||
<div class="tw-bg-primary-500 tw-p-2 tw-inline-block">
|
||||
<button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="contrast" [size]="size">Button</button>
|
||||
</div>
|
||||
<div class="tw-bg-background-alt2 tw-p-2 tw-inline-block">
|
||||
<button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="light" [size]="size">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
size: "default",
|
||||
buttonType: "primary",
|
||||
},
|
||||
};
|
||||
|
||||
@ -98,5 +49,90 @@ export const Small: Story = {
|
||||
...Default,
|
||||
args: {
|
||||
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