mirror of
https://github.com/bitwarden/browser
synced 2025-12-14 15:23:33 +00:00
Storybook docs (#5552)
* updated sort order
* Update preview.tsx
* Create avatar.mdx
Added avatar documentation based on Figma docs
* Added badge docs
* fixed typos
* added breadcrumb docs
* Added callout docs
* added color password docs
* Added dialog docs
* fixed typo
* Updated Dialogs docs
Added a dialogs.mdx page for general docs that apply to both main Dialogs and Simple Dialogs.
Updated the sub-docs pages
* Update simple-dialog.mdx
* Added documentation from Figma to Forms docs
* Create icon-button.mdx
* added link docs
* Added menu docs
* Added progress indicator docs
* Updated table docs
* Added tab docs
* Added toggle group docs
* Revert "Update preview.tsx"
This reverts commit 4671d9726a.
* added docs for appA11yTitle
* Fixed typos
* Update libs/components/src/link/link.mdx
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
* Update libs/components/src/menu/menu.mdx
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
* Addressed feedback
* Addressed feedback on callout, menu, and progress
* moved stories mdx files to proper location
* Addressed feedback on dialogs.mdx
* Update libs/components/src/tabs/tabs.mdx
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
* Addressed feedback on Tabs
* ran prettier
* Fixed title formatting
* ran prettier
* Update libs/components/src/dialog/dialogs.mdx
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
* ran prettier
---------
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
This commit is contained in:
47
libs/components/src/dialog/simple-dialog/simple-dialog.mdx
Normal file
47
libs/components/src/dialog/simple-dialog/simple-dialog.mdx
Normal file
@@ -0,0 +1,47 @@
|
||||
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
|
||||
|
||||
import * as stories from "./simple-dialog.stories";
|
||||
|
||||
<Meta of={stories} />
|
||||
|
||||
# Simple Dialogs
|
||||
|
||||
Simple Dialogs are used throughout the app for simple alert or confirmation actions such as
|
||||
speedbumps.
|
||||
|
||||
For dialogs with a high number of interactive elements such as a form or content exceeding 384px,
|
||||
use the [Dialog component](?path=/docs/component-library-dialogs-dialog--docs).
|
||||
|
||||
<Primary />
|
||||
<Controls />
|
||||
|
||||
## Configurable Simple Dialog
|
||||
|
||||
The Simple Dialog contains the following configuration points:
|
||||
|
||||
- `title`: string
|
||||
- `content`: string
|
||||
- `type`: SimpleDialogType
|
||||
- `icon`: string – if empty, infer from type
|
||||
- `acceptButtonText`: string – if empty, default to "Yes"
|
||||
- `cancelButtonText`: string – if empty, default to "No", unless acceptButtonText is overridden, in
|
||||
which case default to "Cancel"
|
||||
|
||||
To increase consistency, the simple dialog service supports some automation for setting the `icon`
|
||||
and `color` based on the defined type. See the following for how properties will be configured when
|
||||
the simple dialog's type is specified.
|
||||
|
||||
| type | icon name | icon | color |
|
||||
| ------- | ------------------------ | -------------------------------------------- | ----------- |
|
||||
| primary | bwi-business | <i class="bwi bwi-business"></i> | primary-500 |
|
||||
| success | bwi-star | <i class="bwi bwi-star"></i> | success-500 |
|
||||
| info | bwi-info-circle | <i class="bwi bwi-info-circle"></i> | info-500 |
|
||||
| warning | bwi-exclamation-triangle | <i class="bwi bwi-exclamation-triangle"></i> | warning-500 |
|
||||
| danger | bwi-error | <i class="bwi bwi-error"></i> | danger-500 |
|
||||
|
||||
## Scrolling Content
|
||||
|
||||
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} />
|
||||
Reference in New Issue
Block a user