bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-14 15:23:33 +00:00
Code Issues Releases Wiki Activity

[CL-444] Use Canvas story wrapper properly (#13375)

Browse Source
This commit is contained in:
Vicki League
2025-02-12 11:26:21 -05:00
committed by GitHub
parent 9dd47a15ce
commit 2284fe32be
24 changed files with 120 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./icon-button.stories";
@@ -38,48 +38,48 @@ button component styles.
Used for general icon buttons appearing on the theme’s main `background`
<Story of={stories.Main} />
<Canvas of={stories.Main} />
### Muted
Used for low emphasis icon buttons appearing on the theme’s main `background`
<Story of={stories.Muted} />
<Canvas of={stories.Muted} />
### Contrast
Used on a theme’s colored or contrasting backgrounds such as in the navigation or on toasts and
banners.
<Story of={stories.Contrast} />
<Canvas of={stories.Contrast} />
### Danger
Danger is used for “trash” actions throughout the experience, most commonly in the bottom right of
the dialog component.
<Story of={stories.Danger} />
<Canvas of={stories.Danger} />
### Primary
Used in place of the main button component if no text is used. This allows the button to display
square.
<Story of={stories.Primary} />
<Canvas of={stories.Primary} />
### Secondary
Used in place of the main button component if no text is used. This allows the button to display
square.
<Story of={stories.Secondary} />
<Canvas of={stories.Secondary} />
### Light
Used on a background that is dark in both light theme and dark theme. Example: end user navigation
styles.
<Story of={stories.Light} />
<Canvas of={stories.Light} />
**Note:** Main and contrast styles appear on backgrounds where using `primary-700` as a focus
indicator does not meet WCAG graphic contrast guidelines.
@@ -93,11 +93,11 @@ with less padding around the icon, such as in the navigation component.
### Small
<Story of={stories.Small} />
<Canvas of={stories.Small} />
### Default
<Story of={stories.Default} />
<Canvas of={stories.Default} />
## Accessibility