bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-16 08:13:42 +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

16
libs/components/src/dialog/dialog/dialog.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 "./dialog.stories";
@@ -35,7 +35,7 @@ Use the large size for dialogs that have many interactive elements or tabbed con
`max-w-3xl` 48rem
<Story of={stories.Large} />
<Canvas of={stories.Large} />
### Default
@@ -46,7 +46,7 @@ Use the Default size for most dialogs that require some content and a few intera
`max-w-xl` 36rem
<Story of={stories.Default} />
<Canvas of={stories.Default} />
### Small
@@ -54,31 +54,31 @@ Use the Default size for most dialogs that require some content and a few intera
`max-w-sm` 24rem
<Story of={stories.Small} />
<Canvas of={stories.Small} />
## Long Title
If a dialog's title is too long to fully display. It should be truncated and on hover shown in a
tooltip.
<Story of={stories.LongTitle} />
<Canvas of={stories.LongTitle} />
## Loading
Similar to a page loading state, a Dialog that takes more than a few seconds to load should use a
loading state.
<Story of={stories.Loading} />
<Canvas of={stories.Loading} />
## Tab Content
Use tabs to separate related content within a dialog.
<Story of={stories.TabContent} />
<Canvas of={stories.TabContent} />
## Background Color
The `background` input can be set to `alt` to change the background color. This is useful for
dialogs that contain multiple card sections.
<Story of={stories.WithCards} />
<Canvas of={stories.WithCards} />

4
libs/components/src/dialog/dialogs.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Source } from "@storybook/addon-docs";
import { Meta, Canvas, Source } from "@storybook/addon-docs";
import * as stories from "./dialog.service.stories";
@@ -30,7 +30,7 @@ dialog should become scrollable.
A backdrop should be used to hide the content below the dialog. Use `#000000` with `30% opacity`.
<Story of={stories.Default} />
<Canvas of={stories.Default} />
## Accessibility

4
libs/components/src/dialog/simple-dialog/simple-dialog.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 "./simple-dialog.stories";
@@ -48,4 +48,4 @@ the simple dialog's type is specified.
Simple dialogs can support scrolling content if necessary, but typically with larger quantities of
content a [Dialog component](?path=/docs/component-library-dialogs-dialog--docs).
<Story of={stories.ScrollingContent} />
<Canvas of={stories.ScrollingContent} />