1
0
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:
Danielle Flinn
2023-06-27 12:46:44 -07:00
committed by GitHub
parent 683b7fea77
commit 6ef6140b29
21 changed files with 936 additions and 79 deletions

View 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} />