mirror of
https://github.com/bitwarden/browser
synced 2025-12-14 15:23:33 +00:00
66d9ab5dc0
* add component import examples * component library story html formatting/cleanup nits * Update libs/components/src/dialog/dialog/dialog.mdx Co-authored-by: Will Martin <contact@willmartian.com> * Update libs/components/src/badge/badge.mdx Co-authored-by: Will Martin <contact@willmartian.com> * Update libs/components/src/dialog/simple-dialog/simple-dialog.mdx Co-authored-by: Will Martin <contact@willmartian.com> --------- Co-authored-by: Will Martin <contact@willmartian.com>
78 lines
1.7 KiB
Plaintext
78 lines
1.7 KiB
Plaintext
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
|
|
|
|
import * as stories from "./dialog.stories";
|
|
|
|
<Meta of={stories} />
|
|
|
|
```ts
|
|
import { DialogModule, DialogService } from "@bitwarden/components";
|
|
```
|
|
|
|
# Dialog
|
|
|
|
Dialogs are used throughout the app to help the user focus on a specific action. Use this dialog
|
|
component when content exceeds 384px width or there are a high number of interactive elements
|
|
needed. **Example:** The web app's edit vault item form dialog
|
|
|
|
For alerts or simple confirmation actions, like speedbumps, use the
|
|
[Simple Dialog](?path=/docs/component-library-dialogs-simple-dialog--docs).
|
|
|
|
Dialogs's should be used sparingly as they do call extra attention to themselves and can be
|
|
interruptive if overused.
|
|
|
|
<Primary />
|
|
<Controls />
|
|
|
|
## Size
|
|
|
|
There are 3 main dialog sizes:
|
|
|
|
### Large
|
|
|
|
Use the large size for dialogs that have many interactive elements or tabbed content.
|
|
|
|
**Tailwind styling:**
|
|
|
|
`max-w-3xl` 48rem
|
|
|
|
<Story of={stories.Large} />
|
|
|
|
### Default
|
|
|
|
Use the Default size for most dialogs that require some content and a few interactive elements.
|
|
**Example:** master password confirmation dialog
|
|
|
|
**Tailwind styling:**
|
|
|
|
`max-w-xl` 36rem
|
|
|
|
<Story of={stories.Default} />
|
|
|
|
### Small
|
|
|
|
**Tailwind styling:**
|
|
|
|
`max-w-sm` 24rem
|
|
|
|
<Story 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} />
|
|
|
|
## 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} />
|
|
|
|
## Tab Content
|
|
|
|
Use tabs to separate related content within a dialog.
|
|
|
|
<Story of={stories.TabContent} />
|