mirror of
https://github.com/bitwarden/browser.git
synced 2024-10-08 05:47:50 +02:00
6ef6140b29
* 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>
67 lines
2.2 KiB
Plaintext
67 lines
2.2 KiB
Plaintext
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
|
|
|
|
import * as stories from "./callout.stories";
|
|
|
|
<Meta of={stories} />
|
|
|
|
# Callouts
|
|
|
|
Callouts are used to communicate important information to the user. Callouts should be used
|
|
sparingly, as they command a large amount of visual attention. Avoid using more than 1 callout in
|
|
the same location.
|
|
|
|
## Styles
|
|
|
|
Icons should remain consistent across these types. Do not change the icon without consulting a
|
|
designer. Use the following guidelines to help choose the correct type of callout.
|
|
|
|
### Success
|
|
|
|
Use the success callout to communicate a positive messaging to the user.
|
|
|
|
**Example:** a positive report results shows a success callout.
|
|
|
|
The success callout may also be used for the information related to a premium membership. In this
|
|
case, replace the icon with <i class="bwi bwi-star" title="bwi-star" aria-label="bwi-star"></i>
|
|
|
|
<Story of={stories.Success} />
|
|
|
|
### Info
|
|
|
|
Use an info callout to call attention to important information the user should be aware of, but has
|
|
low risk of the user receiving and unintended or irreversible results if they do not read the
|
|
information.
|
|
|
|
**Example:** in the Domain Claiming modal, an info callout is used to tell the user the domain will
|
|
automatically be checked.
|
|
|
|
<Story of={stories.Info} />
|
|
|
|
### Warning
|
|
|
|
Use a warning callout if the user is about to perform an action that may have unintended or
|
|
irreversible results.
|
|
|
|
**Example:** the warning callout is used before the change master password and encryption key form
|
|
to alert the user that they will be logged out.
|
|
|
|
<Story of={stories.Warning} />
|
|
|
|
### Danger
|
|
|
|
Use the danger callout to communicate an action the user is about to take is dangerous and typically
|
|
not reversible.
|
|
|
|
The danger callout can also be used to alert the user of an error or errors, such as a server side
|
|
errors after form submit or failed communication request.
|
|
|
|
<Story of={stories.Danger} />
|
|
|
|
## Accessibility
|
|
|
|
Use the `role=”alert”` only if the callout is appearing on a page after the user takes an action. If
|
|
the content is static, do not use the alert role. This will cause a screen reader to announce the
|
|
callout content on page load.
|
|
|
|
Ensure the title's color contrast remains WCAG compliant with the callout's background.
|