Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-25 12:15:18 +01:00
Code Issues Projects Releases Wiki Activity

[CL-99] Update icon-button.stories.ts (#5631)

Browse Source 
* 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 2023-07-18 08:28:43 -07:00 committed by GitHub
parent 9d8f52ef6a
commit 159fea6962
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 175 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
libs/components/src/icon-button/icon-button.mdx
View File

@ -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

180
libs/components/src/icon-button/icon-button.stories.ts
View File

@ -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,
},
};