bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-16 00:03:56 +00:00
Code Issues Releases Wiki Activity

[CL-208][CL-339] Enhance Storybook docs pages (#14838)

Browse Source 
* rearrange button docs

* Enhance avatar docs

* Enhance badge  docs

* Enhance banner docs

* add util to format args for snippets

* update banner snippets

* WIP

* bind boolean args so they work correctly in Storybook

* simplify button stories

* Update callout docs

* use title component for checkbox docs

* use title and description  component for chip select docs

* update color password story docs

* update disclosure docs

* add import to icon docs

* updated icon-button docs

* update link docs

* Update prgress docs

* updated search field docs

* remove html type definitions

* add import for progress

* updated toast docs

* remove example from docs. format args for snippet

* Update badges docs

* handle array arg values correctly

* Update badges list docs

* fix dupe key error from taost story

* remove unnecessary typeof check

* remove banner usage example

* add breadcrumbs import statement and jsdoc

* add color password import statement

* fixing type mismaches

* fix typos

* Add missing generics to format function

* fix typo

* update callout icon spacing to match Figma

* add back max width container
This commit is contained in:
Bryan Cunningham
2025-05-30 12:38:40 -04:00
committed by GitHub
parent 4e07fd7666
commit 5eb8d7b181
44 changed files with 454 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
libs/components/src/banner/banner.mdx
View File

@@ -1,25 +1,16 @@
import { Meta, Controls, Canvas, Primary } from "@storybook/addon-docs";
import { Canvas, Controls, Description, Meta, Primary, Title } from "@storybook/addon-docs";
import * as stories from "./banner.stories";
<Meta of={stories} />
# Banner
Banners are used for important communication with the user that needs to be seen right away, but has
little effect on the experience. Banners appear at the top of the user's screen on page load and
persist across all pages a user navigates to.
- They should always be dismissible and never use a timeout. If a user dismisses a banner, it should
not reappear during that same active session.
- Use banners sparingly, as they can feel intrusive to the user if they appear unexpectedly. Their
effectiveness may decrease if too many are used.
- Avoid stacking multiple banners.
- Banners can contain a button or anchor that uses the `bitLink` directive with
`linkType="secondary"`.
```ts
import { BannerModule } from "@bitwarden/components";
```
<Title />
<Description />
<Primary />
<Controls />
## Types
@@ -56,5 +47,5 @@ Rarely used, but may be used to alert users over critical messages or very outda
## Accessibility
Banners sets the `role="status"` and `aria-live="polite"` attributes to ensure screen readers
announce the content prior to the test of the page. This behaviour can be disabled by setting
announce the content prior to the test of the page. This behavior can be disabled by setting
`[useAlertRole]="false"`.