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

[CL-444] Use Canvas story wrapper properly (#13375)

Browse Source
This commit is contained in:
Vicki League
2025-02-12 11:26:21 -05:00
committed by GitHub
parent 9dd47a15ce
commit 2284fe32be
24 changed files with 120 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
apps/browser/src/platform/popup/layout/popup-layout.mdx
View File

@@ -100,9 +100,7 @@ Usage example:
### Transparent header ### Transparent header
<Canvas> <Canvas of={stories.TransparentHeader} />
<Story of={stories.TransparentHeader} />
</Canvas>
Common interactive elements to insert into the `end` slot are: Common interactive elements to insert into the `end` slot are:
@@ -113,9 +111,7 @@ Common interactive elements to insert into the `end` slot are:
### Notice ### Notice
<Canvas> <Canvas of={stories.Notice} />
<Story of={stories.Notice} />
</Canvas>
Common interactive elements to insert into the `full-width-notice` slot are: Common interactive elements to insert into the `full-width-notice` slot are:
@@ -160,29 +156,21 @@ View the story source code to see examples of how to construct these types of pa
Example of wrapping an extension page in the `popup-tab-navigation` component. Example of wrapping an extension page in the `popup-tab-navigation` component.
<Canvas> <Canvas of={stories.PopupTabNavigation} />
<Story of={stories.PopupTabNavigation} />
</Canvas>
## Extension Page ## Extension Page
Examples of using just the `popup-page` component, without and with a footer. Examples of using just the `popup-page` component, without and with a footer.
<Canvas> <Canvas of={stories.PopupPage} />
<Story of={stories.PopupPage} />
</Canvas>
<Canvas> <Canvas of={stories.PopupPageWithFooter} />
<Story of={stories.PopupPageWithFooter} />
</Canvas>
## Popped out ## Popped out
When the browser extension is popped out, the "popout" button should not be passed to the header. When the browser extension is popped out, the "popout" button should not be passed to the header.
<Canvas> <Canvas of={stories.PoppedOut} />
<Story of={stories.PoppedOut} />
</Canvas>
# Other stories # Other stories
@@ -190,14 +178,10 @@ When the browser extension is popped out, the "popout" button should not be pass
An example of how to center the default content. An example of how to center the default content.
<Canvas> <Canvas of={stories.CenteredContent} />
<Story of={stories.CenteredContent} />
</Canvas>
## Loading ## Loading
An example of what the loading state looks like. An example of what the loading state looks like.
<Canvas> <Canvas of={stories.Loading} />
<Story of={stories.Loading} />
</Canvas>

14
libs/components/src/avatar/avatar.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs"; import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./avatar.stories"; import * as stories from "./avatar.stories";
@@ -18,15 +18,15 @@ visual indicator to recognize which of a personal or work account a user is logg
### Large: 64px ### Large: 64px
<Story of={stories.Large} /> <Canvas of={stories.Large} />
### Default: 48px ### Default: 48px
<Story of={stories.Default} /> <Canvas of={stories.Default} />
### Small 28px ### Small 28px
<Story of={stories.Small} /> <Canvas of={stories.Small} />
## Background color ## Background color
@@ -37,9 +37,9 @@ priority:
- ID - ID
- Text, usually set to the user's Name field - Text, usually set to the user's Name field
<Story of={stories.ColorByText} /> <Canvas of={stories.ColorByText} />
Use the user 'ID' field if `Name` is not defined. Use the user 'ID' field if `Name` is not defined.
<Story of={stories.ColorByID} /> <Canvas of={stories.ColorByID} />
## Outline ## Outline
@@ -47,7 +47,7 @@ If the avatar is displayed on one of the theme's `background` color variables or
display the avatar with a 1 pixel `secondary-600` border to meet WCAG AA graphic contrast guidelines display the avatar with a 1 pixel `secondary-600` border to meet WCAG AA graphic contrast guidelines
for interactive elements. for interactive elements.
<Story of={stories.Border} /> <Canvas of={stories.Border} />
## Avatar as a button ## Avatar as a button

14
libs/components/src/badge/badge.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs"; import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./badge.stories"; import * as stories from "./badge.stories";
@@ -31,39 +31,39 @@ The story below uses the `<button>` element to demonstrate all the possible stat
The primary badge is used to indicate an active status (example: device management page) or provide The primary badge is used to indicate an active status (example: device management page) or provide
additional information (example: type of emergency access granted). additional information (example: type of emergency access granted).
<Story of={stories.Primary} /> <Canvas of={stories.Primary} />
### Secondary ### Secondary
The secondary badge style is typically is a default badge style. It is often used to indicate The secondary badge style is typically is a default badge style. It is often used to indicate
neutral information. neutral information.
<Story of={stories.Secondary} /> <Canvas of={stories.Secondary} />
### Success ### Success
The success badge is used to indicate a positive status, OR to indicate a feature requires a Premium The success badge is used to indicate a positive status, OR to indicate a feature requires a Premium
subscription. See [Premium Badge](?path=/docs/web-premium-badge--docs) subscription. See [Premium Badge](?path=/docs/web-premium-badge--docs)
<Story of={stories.Success} /> <Canvas of={stories.Success} />
### Danger ### Danger
The danger badge is used to indicate a negative status. The danger badge is used to indicate a negative status.
<Story of={stories.Danger} /> <Canvas of={stories.Danger} />
### Warning ### Warning
The warning badge is used to indicate a status waiting on an additional action from the active user. The warning badge is used to indicate a status waiting on an additional action from the active user.
<Story of={stories.Warning} /> <Canvas of={stories.Warning} />
### Info ### Info
The info badge is used to indicate a low emphasis informative information. The info badge is used to indicate a low emphasis informative information.
<Story of={stories.Info} /> <Canvas of={stories.Info} />
## Badges as counters ## Badges as counters

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

@@ -1,4 +1,4 @@
import { Meta, Story, Controls, Canvas, Primary } from "@storybook/addon-docs"; import { Meta, Controls, Canvas, Primary } from "@storybook/addon-docs";
import * as stories from "./banner.stories"; import * as stories from "./banner.stories";
@@ -31,25 +31,25 @@ Use the following guidelines to help choose the correct type of banner.
### Premium ### Premium
<Story of={stories.Premium} /> <Canvas of={stories.Premium} />
Used primarily to encourage user to upgrade to premium. Used primarily to encourage user to upgrade to premium.
### Info ### Info
<Story of={stories.Info} /> <Canvas of={stories.Info} />
Used to communicate release notes, server maintenance or other informative event. Used to communicate release notes, server maintenance or other informative event.
### Warning ### Warning
<Story of={stories.Warning} /> <Canvas of={stories.Warning} />
Used to alert the user of outdated info or versions. Used to alert the user of outdated info or versions.
### Danger ### Danger
<Story of={stories.Danger} /> <Canvas of={stories.Danger} />
Rarely used, but may be used to alert users over critical messages or very outdated versions. Rarely used, but may be used to alert users over critical messages or very outdated versions.

8
libs/components/src/breadcrumbs/breadcrumbs.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs"; import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./breadcrumbs.stories"; import * as stories from "./breadcrumbs.stories";
@@ -23,7 +23,7 @@ See [Header with Breadcrumbs](?path=/story/web-header--with-breadcrumbs).
When a user is 1 level deep into a tree, the top level is displayed as a single link above the page When a user is 1 level deep into a tree, the top level is displayed as a single link above the page
title. title.
<Story of={stories.TopLevel} /> <Canvas of={stories.TopLevel} />
### Second Level ### Second Level
@@ -31,7 +31,7 @@ When a user is 2 or more levels deep into a tree, the top level is displayed fol
<i class="bwi bwi-angle-right"></i> icon, and the following pages. <i class="bwi bwi-angle-right"></i> icon, and the following pages.
<Story of={stories.SecondLevel} /> <Canvas of={stories.SecondLevel} />
### Overflow ### Overflow
@@ -42,7 +42,7 @@ When a user is several levels deep into a tree, the top level or 2 are displayed
When the user selects the <i class="bwi bwi-ellipsis-h"></i> icon button, a menu opens displaying When the user selects the <i class="bwi bwi-ellipsis-h"></i> icon button, a menu opens displaying
the pages between the top level and the previous page. the pages between the top level and the previous page.
<Story of={stories.Overflow} /> <Canvas of={stories.Overflow} />
### Small screens ### Small screens

14
libs/components/src/button/button.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs"; import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./button.stories"; import * as stories from "./button.stories";
@@ -43,14 +43,14 @@ There are 3 main styles for the button: Primary, Secondary, and Danger.
### Primary ### Primary
<Story of={stories.Primary} /> <Canvas of={stories.Primary} />
Use the primary button styling for all Primary call to actions. An action is "primary" if it relates Use the primary button styling for all Primary call to actions. An action is "primary" if it relates
to the main purpose of a page. There should never be 2 primary styled buttons next to each other. to the main purpose of a page. There should never be 2 primary styled buttons next to each other.
### Secondary ### Secondary
<Story of={stories.Secondary} /> <Canvas of={stories.Secondary} />
The secondary styling should be used for secondary calls to action. An action is "secondary" if it The secondary styling should be used for secondary calls to action. An action is "secondary" if it
relates indirectly to the purpose of a page. There may be multiple secondary buttons next to each relates indirectly to the purpose of a page. There may be multiple secondary buttons next to each
@@ -58,20 +58,20 @@ other; however, generally there should only be 1 or 2 calls to action per page.
### Danger ### Danger
<Story of={stories.Danger} /> <Canvas of={stories.Danger} />
Use the danger styling only in settings when the user may preform a permanent action. Use the danger styling only in settings when the user may preform a permanent action.
## Disabled UI ## Disabled UI
<Story of={stories.Disabled} /> <Canvas of={stories.Disabled} />
## Block ## Block
Typically button widths expand with their text. In some causes though buttons may need to be block Typically button widths expand with their text. In some causes though buttons may need to be block
where the width is fixed and the text wraps to 2 lines if exceeding the button’s width. where the width is fixed and the text wraps to 2 lines if exceeding the button’s width.
<Story of={stories.Block} /> <Canvas of={stories.Block} />
## Accessibility ## Accessibility
@@ -96,7 +96,7 @@ Both submit and async action buttons use a loading button state while an action
button is preforming a long running task in the background like a server API call, be sure to review button is preforming a long running task in the background like a server API call, be sure to review
the [Async Actions Directive](?path=/story/component-library-async-actions-overview--page). the [Async Actions Directive](?path=/story/component-library-async-actions-overview--page).
<Story of={stories.Loading} /> <Canvas of={stories.Loading} />
### appA11yTitle ### appA11yTitle

10
libs/components/src/callout/callout.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs"; import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./callout.stories"; import * as stories from "./callout.stories";
@@ -28,7 +28,7 @@ Use the success callout to communicate a positive messaging to the user.
The success callout may also be used for the information related to a premium membership. In this 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> case, replace the icon with <i class="bwi bwi-star" title="bwi-star" aria-label="bwi-star"></i>
<Story of={stories.Success} /> <Canvas of={stories.Success} />
### Info ### Info
@@ -39,7 +39,7 @@ information.
**Example:** in the Domain Claiming modal, an info callout is used to tell the user the domain will **Example:** in the Domain Claiming modal, an info callout is used to tell the user the domain will
automatically be checked. automatically be checked.
<Story of={stories.Info} /> <Canvas of={stories.Info} />
### Warning ### Warning
@@ -49,7 +49,7 @@ irreversible results.
**Example:** the warning callout is used before the change master password and encryption key form **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. to alert the user that they will be logged out.
<Story of={stories.Warning} /> <Canvas of={stories.Warning} />
### Danger ### Danger
@@ -59,7 +59,7 @@ not reversible.
The danger callout can also be used to alert the user of an error or errors, such as a server side 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. errors after form submit or failed communication request.
<Story of={stories.Danger} /> <Canvas of={stories.Danger} />
## Accessibility ## Accessibility

10
libs/components/src/chip-select/chip-select.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls, Canvas } from "@storybook/addon-docs"; import { Meta, Primary, Controls, Canvas } from "@storybook/addon-docs";
import * as stories from "./chip-select.stories"; import * as stories from "./chip-select.stories";
@@ -12,9 +12,7 @@ import { ChipSelectComponent } from "@bitwarden/components";
`<bit-chip-select>` is a select element that is commonly used to filter items in lists or tables. `<bit-chip-select>` is a select element that is commonly used to filter items in lists or tables.
<Canvas> <Canvas of={stories.Default} />
<Story of={stories.Default} />
</Canvas>
## Options ## Options
@@ -91,9 +89,7 @@ const options = [
]; ];
``` ```
<Canvas> <Canvas of={stories.NestedOptions} />
<Story of={stories.NestedOptions} />
</Canvas>
## Placeholder Content ## Placeholder Content

8
libs/components/src/color-password/color-password.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs"; import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./color-password.stories"; import * as stories from "./color-password.stories";
@@ -18,15 +18,15 @@ the logic for displaying letters as `text-main`, numbers as `primary`, and speci
The password count option is used in the Login type form. It is used to highlight each character's The password count option is used in the Login type form. It is used to highlight each character's
position in the password string. position in the password string.
<Story of={stories.ColorPasswordCount} /> <Canvas of={stories.ColorPasswordCount} />
## Wrapped Password ## Wrapped Password
When the password length is longer than the container's width, it should wrap as shown below. When the password length is longer than the container's width, it should wrap as shown below.
<Story of={stories.WrappedColorPassword} /> <Canvas of={stories.WrappedColorPassword} />
<Story of={stories.WrappedColorPasswordCount} /> <Canvas of={stories.WrappedColorPasswordCount} />
## Accessibility ## Accessibility

16
libs/components/src/dialog/dialog/dialog.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs"; import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./dialog.stories"; import * as stories from "./dialog.stories";
@@ -35,7 +35,7 @@ Use the large size for dialogs that have many interactive elements or tabbed con
`max-w-3xl` 48rem `max-w-3xl` 48rem
<Story of={stories.Large} /> <Canvas of={stories.Large} />
### Default ### Default
@@ -46,7 +46,7 @@ Use the Default size for most dialogs that require some content and a few intera
`max-w-xl` 36rem `max-w-xl` 36rem
<Story of={stories.Default} /> <Canvas of={stories.Default} />
### Small ### Small
@@ -54,31 +54,31 @@ Use the Default size for most dialogs that require some content and a few intera
`max-w-sm` 24rem `max-w-sm` 24rem
<Story of={stories.Small} /> <Canvas of={stories.Small} />
## Long Title ## Long Title
If a dialog's title is too long to fully display. It should be truncated and on hover shown in a If a dialog's title is too long to fully display. It should be truncated and on hover shown in a
tooltip. tooltip.
<Story of={stories.LongTitle} /> <Canvas of={stories.LongTitle} />
## Loading ## Loading
Similar to a page loading state, a Dialog that takes more than a few seconds to load should use a Similar to a page loading state, a Dialog that takes more than a few seconds to load should use a
loading state. loading state.
<Story of={stories.Loading} /> <Canvas of={stories.Loading} />
## Tab Content ## Tab Content
Use tabs to separate related content within a dialog. Use tabs to separate related content within a dialog.
<Story of={stories.TabContent} /> <Canvas of={stories.TabContent} />
## Background Color ## Background Color
The `background` input can be set to `alt` to change the background color. This is useful for The `background` input can be set to `alt` to change the background color. This is useful for
dialogs that contain multiple card sections. dialogs that contain multiple card sections.
<Story of={stories.WithCards} /> <Canvas of={stories.WithCards} />

4
libs/components/src/dialog/dialogs.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Source } from "@storybook/addon-docs"; import { Meta, Canvas, Source } from "@storybook/addon-docs";
import * as stories from "./dialog.service.stories"; import * as stories from "./dialog.service.stories";
@@ -30,7 +30,7 @@ dialog should become scrollable.
A backdrop should be used to hide the content below the dialog. Use `#000000` with `30% opacity`. A backdrop should be used to hide the content below the dialog. Use `#000000` with `30% opacity`.
<Story of={stories.Default} /> <Canvas of={stories.Default} />
## Accessibility ## Accessibility

4
libs/components/src/dialog/simple-dialog/simple-dialog.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs"; import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./simple-dialog.stories"; import * as stories from "./simple-dialog.stories";
@@ -48,4 +48,4 @@ the simple dialog's type is specified.
Simple dialogs can support scrolling content if necessary, but typically with larger quantities of 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). content a [Dialog component](?path=/docs/component-library-dialogs-dialog--docs).
<Story of={stories.ScrollingContent} /> <Canvas of={stories.ScrollingContent} />

4
libs/components/src/disclosure/disclosure.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs"; import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./disclosure.stories"; import * as stories from "./disclosure.stories";
@@ -34,7 +34,7 @@ To compose a disclosure and trigger:
<bit-disclosure #disclosureRef open>click button to hide this content</bit-disclosure> <bit-disclosure #disclosureRef open>click button to hide this content</bit-disclosure>
``` ```
<Story of={stories.DisclosureWithIconButton} /> <Canvas of={stories.DisclosureWithIconButton} />
<br /> <br />
<br /> <br />

8
libs/components/src/drawer/drawer.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs"; import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./drawer.stories"; import * as stories from "./drawer.stories";
@@ -83,13 +83,13 @@ directive:
Only one drawer can be open at a time, and they do not stack. If a drawer is already open, opening Only one drawer can be open at a time, and they do not stack. If a drawer is already open, opening
another will close and replace the one already open. another will close and replace the one already open.
<Story of={stories.MultipleDrawers} /> <Canvas of={stories.MultipleDrawers} />
## Headless ## Headless
Omitting `bit-drawer-header` and `bit-drawer-body` allows for fully customizable content. Omitting `bit-drawer-header` and `bit-drawer-body` allows for fully customizable content.
<Story of={stories.Headless} /> <Canvas of={stories.Headless} />
## Accessibility ## Accessibility
@@ -117,4 +117,4 @@ Omitting `bit-drawer-header` and `bit-drawer-body` allows for fully customizable
## Kitchen Sink ## Kitchen Sink
<Story of={KitchenSink} autoplay /> <Canvas of={KitchenSink} autoplay />

20
libs/components/src/form/forms.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Source } from "@storybook/addon-docs"; import { Meta, Canvas, Source } from "@storybook/addon-docs";
import * as formStories from "./form.stories"; import * as formStories from "./form.stories";
import * as fieldStories from "../form-field/form-field.stories"; import * as fieldStories from "../form-field/form-field.stories";
@@ -17,7 +17,7 @@ Component Library forms should always be built using [Angular Reactive Forms][re
[ADR-0001][adr-0001] for a background to this decision. In practice this means that forms should [ADR-0001][adr-0001] for a background to this decision. In practice this means that forms should
always use the native `form` element and bind a `formGroup`. always use the native `form` element and bind a `formGroup`.
<Story of={formStories.FullExample} /> <Canvas of={formStories.FullExample} />
<br /> <br />
@@ -69,25 +69,25 @@ is too long, such as info link buttons or badges.
#### Default with required attribute #### Default with required attribute
<Story of={fieldStories.Default} /> <Canvas of={fieldStories.Default} />
#### Password Toggle #### Password Toggle
<Story of={passwordToggleStories.Default} /> <Canvas of={passwordToggleStories.Default} />
### Search ### Search
<Story of={searchStories.Default} /> <Canvas of={searchStories.Default} />
### Selects ### Selects
#### Searchable single select (default) #### Searchable single select (default)
<Story of={selectStories.Default} /> <Canvas of={selectStories.Default} />
#### Multi-select #### Multi-select
<Story of={multiSelectStories.Members} /> <Canvas of={multiSelectStories.Members} />
### Radio group ### Radio group
@@ -113,11 +113,11 @@ using a radio group for more than 5 options even if the options require addition
#### Block #### Block
<Story of={radioStories.Block} /> <Canvas of={radioStories.Block} />
#### Inline #### Inline
<Story of={radioStories.Inline} /> <Canvas of={radioStories.Inline} />
### Checkbox ### Checkbox
@@ -140,7 +140,7 @@ If a checkbox group has more than 4 options a
#### Single checkbox #### Single checkbox
<Story of={checkboxStories.Default} /> <Canvas of={checkboxStories.Default} />
## Accessibility ## Accessibility

20
libs/components/src/icon-button/icon-button.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs"; import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./icon-button.stories"; import * as stories from "./icon-button.stories";
@@ -38,48 +38,48 @@ button component styles.
Used for general icon buttons appearing on the theme’s main `background` Used for general icon buttons appearing on the theme’s main `background`
<Story of={stories.Main} /> <Canvas of={stories.Main} />
### Muted ### Muted
Used for low emphasis icon buttons appearing on the theme’s main `background` Used for low emphasis icon buttons appearing on the theme’s main `background`
<Story of={stories.Muted} /> <Canvas of={stories.Muted} />
### Contrast ### Contrast
Used on a theme’s colored or contrasting backgrounds such as in the navigation or on toasts and Used on a theme’s colored or contrasting backgrounds such as in the navigation or on toasts and
banners. banners.
<Story of={stories.Contrast} /> <Canvas of={stories.Contrast} />
### Danger ### Danger
Danger is used for “trash” actions throughout the experience, most commonly in the bottom right of Danger is used for “trash” actions throughout the experience, most commonly in the bottom right of
the dialog component. the dialog component.
<Story of={stories.Danger} /> <Canvas of={stories.Danger} />
### Primary ### Primary
Used in place of the main button component if no text is used. This allows the button to display Used in place of the main button component if no text is used. This allows the button to display
square. square.
<Story of={stories.Primary} /> <Canvas of={stories.Primary} />
### Secondary ### Secondary
Used in place of the main button component if no text is used. This allows the button to display Used in place of the main button component if no text is used. This allows the button to display
square. square.
<Story of={stories.Secondary} /> <Canvas of={stories.Secondary} />
### Light ### Light
Used on a background that is dark in both light theme and dark theme. Example: end user navigation Used on a background that is dark in both light theme and dark theme. Example: end user navigation
styles. styles.
<Story of={stories.Light} /> <Canvas of={stories.Light} />
**Note:** Main and contrast styles appear on backgrounds where using `primary-700` as a focus **Note:** Main and contrast styles appear on backgrounds where using `primary-700` as a focus
indicator does not meet WCAG graphic contrast guidelines. indicator does not meet WCAG graphic contrast guidelines.
@@ -93,11 +93,11 @@ with less padding around the icon, such as in the navigation component.
### Small ### Small
<Story of={stories.Small} /> <Canvas of={stories.Small} />
### Default ### Default
<Story of={stories.Default} /> <Canvas of={stories.Default} />
## Accessibility ## Accessibility

20
libs/components/src/item/item.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs"; import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./item.stories"; import * as stories from "./item.stories";
@@ -15,14 +15,14 @@ import { ItemModule } from "@bitwarden/components";
It is a generic container that can be used for either standalone content, an alternative to tables, It is a generic container that can be used for either standalone content, an alternative to tables,
or to list nav links. or to list nav links.
<Story of={stories.Default} /> <Canvas of={stories.Default} />
<br /> <br />
Items used within a parent `bit-layout` component will not have a border radius, since the Items used within a parent `bit-layout` component will not have a border radius, since the
`bit-layout` background is white. `bit-layout` background is white.
<Story of={stories.WithoutBorderRadius} /> <Canvas of={stories.WithoutBorderRadius} />
<br /> <br />
<br /> <br />
@@ -49,7 +49,7 @@ The content can be a button, anchor, or static container.
</bit-item> </bit-item>
``` ```
<Story of={stories.ContentTypes} /> <Canvas of={stories.ContentTypes} />
### Content Slots ### Content Slots
@@ -82,7 +82,7 @@ The content can be a button, anchor, or static container.
</bit-item> </bit-item>
``` ```
<Story of={stories.ContentSlots} /> <Canvas of={stories.ContentSlots} />
## Secondary Actions ## Secondary Actions
@@ -129,19 +129,19 @@ This can be changed by passing `[truncate]="false"` to the `bit-item-content`.
### Truncation (Default) ### Truncation (Default)
<Story of={stories.TextOverflowTruncate} /> <Canvas of={stories.TextOverflowTruncate} />
### Wrap ### Wrap
<Story of={stories.TextOverflowWrap} /> <Canvas of={stories.TextOverflowWrap} />
## Item Groups ## Item Groups
Groups of items can be associated by wrapping them in the `<bit-item-group>`. Groups of items can be associated by wrapping them in the `<bit-item-group>`.
<Story of={stories.MultipleActionList} /> <Canvas of={stories.MultipleActionList} />
<Story of={stories.SingleActionList} /> <Canvas of={stories.SingleActionList} />
### A11y ### A11y
@@ -162,4 +162,4 @@ Use `aria-label` or `aria-labelledby` to give groups an accessible name.
### Virtual Scrolling ### Virtual Scrolling
<Story of={stories.VirtualScrolling} /> <Canvas of={stories.VirtualScrolling} />

4
libs/components/src/menu/menu.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs"; import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./menu.stories"; import * as stories from "./menu.stories";
@@ -9,7 +9,7 @@ import * as stories from "./menu.stories";
Menus are used to help organize related options. Menus are most often used for item options in Menus are used to help organize related options. Menus are most often used for item options in
tables. tables.
<Story of={stories.ClosedMenu} /> <Canvas of={stories.ClosedMenu} />
<br /> <br />

6
libs/components/src/popover/popover.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs"; import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./popover.stories"; import * as stories from "./popover.stories";
@@ -66,7 +66,7 @@ not work because there is not enough space to open the Popover to the right. The
The first position that "fits" is `left-start`, and therefore that is where the Popover will open. The first position that "fits" is `left-start`, and therefore that is where the Popover will open.
<Story of={stories.LeftStart} /> <Canvas of={stories.LeftStart} />
### Manually Setting a Position ### Manually Setting a Position
@@ -77,7 +77,7 @@ Popover's trigger element, such as:
<button [bitPopoverTriggerFor]="myPopover" [position]="'above-end'">Open Popover</button> <button [bitPopoverTriggerFor]="myPopover" [position]="'above-end'">Open Popover</button>
``` ```
<Story of={stories.AboveEnd} /> <Canvas of={stories.AboveEnd} />
Note that if the user resizes the page and the Popover no longer fits in the viewport, the Popover Note that if the user resizes the page and the Popover no longer fits in the viewport, the Popover
component will fall back to the list of default positions to find the best position. component will fall back to the list of default positions to find the best position.

6
libs/components/src/progress/progress.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs"; import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./progress.stories"; import * as stories from "./progress.stories";
@@ -19,14 +19,14 @@ allows those who may not be familiar with the pattern to be able to read and dig
It also allows assistive technology to accurately describe the indicator to those who may be unable It also allows assistive technology to accurately describe the indicator to those who may be unable
to see part or all of the indicator. to see part or all of the indicator.
<Story of={stories.Full} /> <Canvas of={stories.Full} />
## Text label ## Text label
When measuring something other than progress, such as password strength, update the label to fit the When measuring something other than progress, such as password strength, update the label to fit the
context of the implementation. context of the implementation.
<Story of={stories.CustomText} /> <Canvas of={stories.CustomText} />
### Strength indicator styles ### Strength indicator styles

22
libs/components/src/section/section.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls, Canvas } from "@storybook/addon-docs"; import { Meta, Primary, Controls, Canvas } from "@storybook/addon-docs";
import * as stories from "./section.stories"; import * as stories from "./section.stories";
@@ -26,9 +26,7 @@ the `disableMargin` input.
<bit-section disableMargin></bit-section> <bit-section disableMargin></bit-section>
``` ```
<Canvas> <Canvas of={stories.Default} />
<Story of={stories.Default} />
</Canvas>
## Section Header ## Section Header
@@ -61,16 +59,12 @@ padding to align the header with the border radius of the card/item.
</bit-section> </bit-section>
``` ```
<Canvas> <Canvas of={stories.HeaderWithPadding} />
<Story of={stories.HeaderWithPadding} />
</Canvas>
If placed inside of a section without a `bit-card` or `bit-item`, or with a `bit-card`/`bit-item` If placed inside of a section without a `bit-card` or `bit-item`, or with a `bit-card`/`bit-item`
that is not a descendant of the immediate next sibling, the padding is not applied. that is not a descendant of the immediate next sibling, the padding is not applied.
<Canvas> <Canvas of={stories.HeaderWithoutPadding} />
<Story of={stories.HeaderWithoutPadding} />
</Canvas>
### Section Header Content Slots ### Section Header Content Slots
@@ -89,14 +83,10 @@ Anything passed to the default slot will display as part of the title. The title
Title suffixes (typically an icon or icon button) can be added as well. A gap is automatically Title suffixes (typically an icon or icon button) can be added as well. A gap is automatically
applied between the children of the default slot. applied between the children of the default slot.
<Canvas> <Canvas of={stories.HeaderVariants} />
<Story of={stories.HeaderVariants} />
</Canvas>
#### End slot #### End slot
The `end` slot will typically be used for text or an icon button. The `end` slot will typically be used for text or an icon button.
<Canvas> <Canvas of={stories.HeaderEndSlotVariants} />
<Story of={stories.HeaderEndSlotVariants} />
</Canvas>

4
libs/components/src/stories/compact-mode.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story } from "@storybook/addon-docs"; import { Meta, Story, Canvas } from "@storybook/addon-docs";
import * as itemStories from "../item/item.stories"; import * as itemStories from "../item/item.stories";
import * as popupLayoutStories from "../../../../apps/browser/src/platform/popup/layout/popup-layout.stories"; import * as popupLayoutStories from "../../../../apps/browser/src/platform/popup/layout/popup-layout.stories";
@@ -42,4 +42,4 @@ However, styling with the Tailwind variant should be used when possible as it is
### [Item](?path=/story/component-library-item--compact-mode) ### [Item](?path=/story/component-library-item--compact-mode)
<Story of={itemStories.CompactMode} /> <Canvas of={itemStories.CompactMode} />

9
libs/components/src/tabs/tabs.mdx
View File

@@ -1,6 +1,7 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs"; import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./tabs.stories"; import * as stories from "./tabs.stories";
import * as dialogStories from "../dialog/dialog/dialog.stories";
<Meta of={stories} /> <Meta of={stories} />
@@ -17,17 +18,17 @@ and 1rem of padding on the left and right.
## Content Tabs ## Content Tabs
<Story of={stories.ContentTabs} /> <Canvas of={stories.ContentTabs} />
## Navigation Tabs ## Navigation Tabs
<Story of={stories.NavigationTabs} /> <Canvas of={stories.NavigationTabs} />
## Content tabs in dialogs ## Content tabs in dialogs
Tabs can be used in dialogs to separate related content. Tabs can be used in dialogs to separate related content.
<Story id="component-library-dialogs-dialog--tab-content" /> <Canvas of={dialogStories.TabContent} />
## Accessibility ## Accessibility

2
libs/components/src/typography/typography.mdx
View File

@@ -22,4 +22,4 @@ For headings, note that the semantic element and the text style may not always b
<h2 bitTypography="h5">Semantically, I am an h2, but I use h5 styles.</h2> <h2 bitTypography="h5">Semantically, I am an h2, but I use h5 styles.</h2>
``` ```
<Canvas story={stories.Default} /> <Canvas of={stories.Default} />