mirror of
https://github.com/bitwarden/browser
synced 2025-12-12 22:33:35 +00:00
[PM-2276] Upgrade Storybook to v7 (#5258)
This commit is contained in:
Oscar Hinton
GitHub
98
libs/components/src/button/button.mdx
Normal file
98
libs/components/src/button/button.mdx
Normal file
@@ -0,0 +1,98 @@
|
||||
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
|
||||
|
||||
import * as stories from "./button.stories";
|
||||
|
||||
<Meta of={stories} />
|
||||
|
||||
# Button
|
||||
|
||||
Buttons are interactive elements that can be triggered using a mouse, keyboard, or touch. They are
|
||||
used to indicate actions that can be performed by a user such as submitting a form.
|
||||
|
||||
<Primary />
|
||||
|
||||
<Controls />
|
||||
|
||||
## Guidelines
|
||||
|
||||
### Choosing the `<a>` or `<button>`
|
||||
|
||||
Buttons can use either the `<a>` or `<button>` tags. Choose which based on the action the button
|
||||
takes:
|
||||
|
||||
- If navigating to a new page, use `<a>`
|
||||
- If taking an action on the current page use `<button>`
|
||||
- If the button launches a dialog, use `<button>`
|
||||
|
||||
### Groups
|
||||
|
||||
Groups of buttons should be seperated by a `0.5` rem gap. Usually acomplished by using the
|
||||
`tw-gap-2` class in the button group container.
|
||||
|
||||
Groups within page content, dialog footers or forms should have the `primary` call to action placed
|
||||
to left. Groups in headers and navigational areas should have the `primary` call to action on the
|
||||
right.
|
||||
|
||||
## Accessibility
|
||||
|
||||
Please follow these guidelines to ensure that buttons are accessible to all users.
|
||||
|
||||
### Color contrast
|
||||
|
||||
All button styles are WCAG compliant when displayed on `background` and `background-alt` colors. To
|
||||
use a button on a different background, double check that the color contrast is sufficient in both
|
||||
the light and dark themes.
|
||||
|
||||
### Loading Buttons
|
||||
|
||||
Include an `aria-label` attribute that defaults to “loading” but can be configurable per
|
||||
implementation. On click, the screen reader should announce the `aria-label`. Once the action is
|
||||
compelted, use another messaging pattern to alert the user that the action is complete (example:
|
||||
success toast).
|
||||
|
||||
### Submit and async actions
|
||||
|
||||
Both submit and async action buttons use a loading button state while an action is taken. If your
|
||||
button is preforming a long running task in the background like a server API call, be sure to review
|
||||
the [Async Actions Directive](?path=/story/component-library-async-actions-overview--page).
|
||||
|
||||
<Story of={stories.Loading} />
|
||||
|
||||
## Styles
|
||||
|
||||
There are 3 main styles for the button: Primary, Secondary, and Danger.
|
||||
|
||||
### Primary
|
||||
|
||||
<Story of={stories.Primary} />
|
||||
|
||||
Use the primary button styling for all Primary call to actions. An action is "primary" if it relates
|
||||
to the main purpose of a page. There should never be 2 primary styled buttons next to each other.
|
||||
|
||||
### Secondary
|
||||
|
||||
<Story of={stories.Secondary} />
|
||||
|
||||
The secondary styling should be used for secondary calls to action. An action is "secondary" if it
|
||||
relates indirectly to the purpose of a page. There may be multiple secondary buttons next to each
|
||||
other; however, generally there should only be 1 or 2 calls to action per page.
|
||||
|
||||
### Danger
|
||||
|
||||
<Story of={stories.Danger} />
|
||||
|
||||
Use the danger styling only in settings when the user may preform a permanent action.
|
||||
|
||||
## Disabled UI
|
||||
|
||||
Both the disabled and loading states use the default state’s color with a 60% opacity or
|
||||
`tw-opacity-60`.
|
||||
|
||||
<Story of={stories.Disabled} />
|
||||
|
||||
## Block
|
||||
|
||||
Typically button widths expand with their text. In some causes though buttons may need to be block
|
||||
where the width is fixed and the text wraps to 2 lines if exceeding the button’s width.
|
||||
|
||||
<Story of={stories.Block} />
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story } from "@storybook/angular";
|
||||
import { Meta, StoryObj } from "@storybook/angular";
|
||||
|
||||
import { ButtonComponent } from "./button.component";
|
||||
|
||||
@@ -16,88 +16,96 @@ export default {
|
||||
url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=5115%3A26950",
|
||||
},
|
||||
},
|
||||
} as Meta;
|
||||
} as Meta<ButtonComponent>;
|
||||
|
||||
const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block">Button</button>
|
||||
<a bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" href="#" class="tw-ml-2">Link</a>
|
||||
`,
|
||||
});
|
||||
type Story = StoryObj<ButtonComponent>;
|
||||
|
||||
export const Primary = Template.bind({});
|
||||
Primary.args = {
|
||||
buttonType: "primary",
|
||||
export const Primary: Story = {
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block">Button</button>
|
||||
<a bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" href="#" class="tw-ml-2">Link</a>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
buttonType: "primary",
|
||||
},
|
||||
};
|
||||
|
||||
export const Secondary = Template.bind({});
|
||||
Secondary.args = {
|
||||
buttonType: "secondary",
|
||||
export const Secondary: Story = {
|
||||
...Primary,
|
||||
args: {
|
||||
buttonType: "secondary",
|
||||
},
|
||||
};
|
||||
|
||||
export const Danger = Template.bind({});
|
||||
Danger.args = {
|
||||
buttonType: "danger",
|
||||
export const Danger: Story = {
|
||||
...Primary,
|
||||
args: {
|
||||
buttonType: "danger",
|
||||
},
|
||||
};
|
||||
|
||||
const AllStylesTemplate: Story = (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<button bitButton [disabled]="disabled" [loading]="loading" [block]="block" buttonType="primary" class="tw-mr-2">Primary</button>
|
||||
<button bitButton [disabled]="disabled" [loading]="loading" [block]="block" buttonType="secondary" class="tw-mr-2">Secondary</button>
|
||||
<button bitButton [disabled]="disabled" [loading]="loading" [block]="block" buttonType="danger" class="tw-mr-2">Danger</button>
|
||||
`,
|
||||
});
|
||||
|
||||
export const Loading = AllStylesTemplate.bind({});
|
||||
Loading.args = {
|
||||
disabled: false,
|
||||
loading: true,
|
||||
export const Loading: Story = {
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<button bitButton [disabled]="disabled" [loading]="loading" [block]="block" buttonType="primary" class="tw-mr-2">Primary</button>
|
||||
<button bitButton [disabled]="disabled" [loading]="loading" [block]="block" buttonType="secondary" class="tw-mr-2">Secondary</button>
|
||||
<button bitButton [disabled]="disabled" [loading]="loading" [block]="block" buttonType="danger" class="tw-mr-2">Danger</button>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
disabled: false,
|
||||
loading: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const Disabled = AllStylesTemplate.bind({});
|
||||
Disabled.args = {
|
||||
disabled: true,
|
||||
loading: false,
|
||||
export const Disabled: Story = {
|
||||
...Loading,
|
||||
args: {
|
||||
disabled: true,
|
||||
loading: false,
|
||||
},
|
||||
};
|
||||
|
||||
const DisabledWithAttributeTemplate: Story = (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<ng-container *ngIf="disabled">
|
||||
<button bitButton disabled [loading]="loading" [block]="block" buttonType="primary" class="tw-mr-2">Primary</button>
|
||||
<button bitButton disabled [loading]="loading" [block]="block" buttonType="secondary" class="tw-mr-2">Secondary</button>
|
||||
<button bitButton disabled [loading]="loading" [block]="block" buttonType="danger" class="tw-mr-2">Danger</button>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!disabled">
|
||||
<button bitButton [loading]="loading" [block]="block" buttonType="primary" class="tw-mr-2">Primary</button>
|
||||
<button bitButton [loading]="loading" [block]="block" buttonType="secondary" class="tw-mr-2">Secondary</button>
|
||||
<button bitButton [loading]="loading" [block]="block" buttonType="danger" class="tw-mr-2">Danger</button>
|
||||
</ng-container>
|
||||
`,
|
||||
});
|
||||
|
||||
export const DisabledWithAttribute = DisabledWithAttributeTemplate.bind({});
|
||||
DisabledWithAttribute.args = {
|
||||
disabled: true,
|
||||
loading: false,
|
||||
export const DisabledWithAttribute: Story = {
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<ng-container *ngIf="disabled">
|
||||
<button bitButton disabled [loading]="loading" [block]="block" buttonType="primary" class="tw-mr-2">Primary</button>
|
||||
<button bitButton disabled [loading]="loading" [block]="block" buttonType="secondary" class="tw-mr-2">Secondary</button>
|
||||
<button bitButton disabled [loading]="loading" [block]="block" buttonType="danger" class="tw-mr-2">Danger</button>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!disabled">
|
||||
<button bitButton [loading]="loading" [block]="block" buttonType="primary" class="tw-mr-2">Primary</button>
|
||||
<button bitButton [loading]="loading" [block]="block" buttonType="secondary" class="tw-mr-2">Secondary</button>
|
||||
<button bitButton [loading]="loading" [block]="block" buttonType="danger" class="tw-mr-2">Danger</button>
|
||||
</ng-container>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
disabled: true,
|
||||
loading: false,
|
||||
},
|
||||
};
|
||||
|
||||
const BlockTemplate: Story<ButtonComponent> = (args: ButtonComponent) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<span class="tw-flex">
|
||||
<button bitButton [buttonType]="buttonType" [block]="block">[block]="true" Button</button>
|
||||
<a bitButton [buttonType]="buttonType" [block]="block" href="#" class="tw-ml-2">[block]="true" Link</a>
|
||||
|
||||
<button bitButton [buttonType]="buttonType" block class="tw-ml-2">block Button</button>
|
||||
<a bitButton [buttonType]="buttonType" block href="#" class="tw-ml-2">block Link</a>
|
||||
</span>
|
||||
`,
|
||||
});
|
||||
|
||||
export const Block = BlockTemplate.bind({});
|
||||
Block.args = {
|
||||
block: true,
|
||||
export const Block: Story = {
|
||||
render: (args: ButtonComponent) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<span class="tw-flex">
|
||||
<button bitButton [buttonType]="buttonType" [block]="block">[block]="true" Button</button>
|
||||
<a bitButton [buttonType]="buttonType" [block]="block" href="#" class="tw-ml-2">[block]="true" Link</a>
|
||||
|
||||
<button bitButton [buttonType]="buttonType" block class="tw-ml-2">block Button</button>
|
||||
<a bitButton [buttonType]="buttonType" block href="#" class="tw-ml-2">block Link</a>
|
||||
</span>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
block: true,
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user