From 2284fe32be781eeaed9cda7f6c0a81a3bedf2ab6 Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Wed, 12 Feb 2025 11:26:21 -0500
Subject: [PATCH] [CL-444] Use Canvas story wrapper properly (#13375)

---
 .../platform/popup/layout/popup-layout.mdx    | 32 +++++--------------
 libs/components/src/avatar/avatar.mdx         | 14 ++++----
 libs/components/src/badge/badge.mdx           | 14 ++++----
 libs/components/src/banner/banner.mdx         | 10 +++---
 .../src/breadcrumbs/breadcrumbs.mdx           |  8 ++---
 libs/components/src/button/button.mdx         | 14 ++++----
 libs/components/src/callout/callout.mdx       | 10 +++---
 .../src/chip-select/chip-select.mdx           | 10 ++----
 .../src/color-password/color-password.mdx     |  8 ++---
 libs/components/src/dialog/dialog/dialog.mdx  | 16 +++++-----
 libs/components/src/dialog/dialogs.mdx        |  4 +--
 .../dialog/simple-dialog/simple-dialog.mdx    |  4 +--
 libs/components/src/disclosure/disclosure.mdx |  4 +--
 libs/components/src/drawer/drawer.mdx         |  8 ++---
 libs/components/src/form/forms.mdx            | 20 ++++++------
 .../src/icon-button/icon-button.mdx           | 20 ++++++------
 libs/components/src/item/item.mdx             | 20 ++++++------
 libs/components/src/menu/menu.mdx             |  4 +--
 libs/components/src/popover/popover.mdx       |  6 ++--
 libs/components/src/progress/progress.mdx     |  6 ++--
 libs/components/src/section/section.mdx       | 22 ++++---------
 libs/components/src/stories/compact-mode.mdx  |  4 +--
 libs/components/src/tabs/tabs.mdx             |  9 +++---
 libs/components/src/typography/typography.mdx |  2 +-
 24 files changed, 120 insertions(+), 149 deletions(-)

diff --git a/apps/browser/src/platform/popup/layout/popup-layout.mdx b/apps/browser/src/platform/popup/layout/popup-layout.mdx
index 5723bef44b1..b93c649d695 100644
--- a/apps/browser/src/platform/popup/layout/popup-layout.mdx
+++ b/apps/browser/src/platform/popup/layout/popup-layout.mdx
@@ -100,9 +100,7 @@ Usage example:
 
 ### Transparent header
 
-<Canvas>
-  <Story of={stories.TransparentHeader} />
-</Canvas>
+<Canvas of={stories.TransparentHeader} />
 
 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
 
-<Canvas>
-  <Story of={stories.Notice} />
-</Canvas>
+<Canvas of={stories.Notice} />
 
 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.
 
-<Canvas>
-  <Story of={stories.PopupTabNavigation} />
-</Canvas>
+<Canvas of={stories.PopupTabNavigation} />
 
 ## Extension Page
 
 Examples of using just the `popup-page` component, without and with a footer.
 
-<Canvas>
-  <Story of={stories.PopupPage} />
-</Canvas>
+<Canvas of={stories.PopupPage} />
 
-<Canvas>
-  <Story of={stories.PopupPageWithFooter} />
-</Canvas>
+<Canvas of={stories.PopupPageWithFooter} />
 
 ## Popped out
 
 When the browser extension is popped out, the "popout" button should not be passed to the header.
 
-<Canvas>
-  <Story of={stories.PoppedOut} />
-</Canvas>
+<Canvas of={stories.PoppedOut} />
 
 # 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.
 
-<Canvas>
-  <Story of={stories.CenteredContent} />
-</Canvas>
+<Canvas of={stories.CenteredContent} />
 
 ## Loading
 
 An example of what the loading state looks like.
 
-<Canvas>
-  <Story of={stories.Loading} />
-</Canvas>
+<Canvas of={stories.Loading} />
diff --git a/libs/components/src/avatar/avatar.mdx b/libs/components/src/avatar/avatar.mdx
index 0f3f6f06a9b..627ba526ed9 100644
--- a/libs/components/src/avatar/avatar.mdx
+++ b/libs/components/src/avatar/avatar.mdx
@@ -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";
 
@@ -18,15 +18,15 @@ visual indicator to recognize which of a personal or work account a user is logg
 
 ### Large: 64px
 
-<Story of={stories.Large} />
+<Canvas of={stories.Large} />
 
 ### Default: 48px
 
-<Story of={stories.Default} />
+<Canvas of={stories.Default} />
 
 ### Small 28px
 
-<Story of={stories.Small} />
+<Canvas of={stories.Small} />
 
 ## Background color
 
@@ -37,9 +37,9 @@ priority:
 - ID
 - 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.
-<Story of={stories.ColorByID} />
+<Canvas of={stories.ColorByID} />
 
 ## 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
 for interactive elements.
 
-<Story of={stories.Border} />
+<Canvas of={stories.Border} />
 
 ## Avatar as a button
 
diff --git a/libs/components/src/badge/badge.mdx b/libs/components/src/badge/badge.mdx
index fb2dceb0fa8..55f32183899 100644
--- a/libs/components/src/badge/badge.mdx
+++ b/libs/components/src/badge/badge.mdx
@@ -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";
 
@@ -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
 additional information (example: type of emergency access granted).
 
-<Story of={stories.Primary} />
+<Canvas of={stories.Primary} />
 
 ### Secondary
 
 The secondary badge style is typically is a default badge style. It is often used to indicate
 neutral information.
 
-<Story of={stories.Secondary} />
+<Canvas of={stories.Secondary} />
 
 ### Success
 
 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)
 
-<Story of={stories.Success} />
+<Canvas of={stories.Success} />
 
 ### Danger
 
 The danger badge is used to indicate a negative status.
 
-<Story of={stories.Danger} />
+<Canvas of={stories.Danger} />
 
 ### Warning
 
 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
 
 The info badge is used to indicate a low emphasis informative information.
 
-<Story of={stories.Info} />
+<Canvas of={stories.Info} />
 
 ## Badges as counters
 
diff --git a/libs/components/src/banner/banner.mdx b/libs/components/src/banner/banner.mdx
index d5b6a3b5279..67fb796a548 100644
--- a/libs/components/src/banner/banner.mdx
+++ b/libs/components/src/banner/banner.mdx
@@ -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";
 
@@ -31,25 +31,25 @@ Use the following guidelines to help choose the correct type of banner.
 
 ### Premium
 
-<Story of={stories.Premium} />
+<Canvas of={stories.Premium} />
 
 Used primarily to encourage user to upgrade to premium.
 
 ### Info
 
-<Story of={stories.Info} />
+<Canvas of={stories.Info} />
 
 Used to communicate release notes, server maintenance or other informative event.
 
 ### Warning
 
-<Story of={stories.Warning} />
+<Canvas of={stories.Warning} />
 
 Used to alert the user of outdated info or versions.
 
 ### 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.
 
diff --git a/libs/components/src/breadcrumbs/breadcrumbs.mdx b/libs/components/src/breadcrumbs/breadcrumbs.mdx
index 9dd23c530d1..1ea0aff8c36 100644
--- a/libs/components/src/breadcrumbs/breadcrumbs.mdx
+++ b/libs/components/src/breadcrumbs/breadcrumbs.mdx
@@ -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";
 
@@ -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
 title.
 
-<Story of={stories.TopLevel} />
+<Canvas of={stories.TopLevel} />
 
 ### 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.
 
-<Story of={stories.SecondLevel} />
+<Canvas of={stories.SecondLevel} />
 
 ### 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
 the pages between the top level and the previous page.
 
-<Story of={stories.Overflow} />
+<Canvas of={stories.Overflow} />
 
 ### Small screens
 
diff --git a/libs/components/src/button/button.mdx b/libs/components/src/button/button.mdx
index 33e4aed19f7..21c992982d8 100644
--- a/libs/components/src/button/button.mdx
+++ b/libs/components/src/button/button.mdx
@@ -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";
 
@@ -43,14 +43,14 @@ There are 3 main styles for the button: Primary, Secondary, and Danger.
 
 ### 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
 to the main purpose of a page. There should never be 2 primary styled buttons next to each other.
 
 ### 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
 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
 
-<Story of={stories.Danger} />
+<Canvas of={stories.Danger} />
 
 Use the danger styling only in settings when the user may preform a permanent action.
 
 ## Disabled UI
 
-<Story of={stories.Disabled} />
+<Canvas of={stories.Disabled} />
 
 ## 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.
 
-<Story of={stories.Block} />
+<Canvas of={stories.Block} />
 
 ## 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
 the [Async Actions Directive](?path=/story/component-library-async-actions-overview--page).
 
-<Story of={stories.Loading} />
+<Canvas of={stories.Loading} />
 
 ### appA11yTitle
 
diff --git a/libs/components/src/callout/callout.mdx b/libs/components/src/callout/callout.mdx
index 3fdb53943b4..160b1e1cc33 100644
--- a/libs/components/src/callout/callout.mdx
+++ b/libs/components/src/callout/callout.mdx
@@ -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";
 
@@ -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
 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
 
@@ -39,7 +39,7 @@ 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} />
+<Canvas of={stories.Info} />
 
 ### Warning
 
@@ -49,7 +49,7 @@ 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} />
+<Canvas of={stories.Warning} />
 
 ### 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
 errors after form submit or failed communication request.
 
-<Story of={stories.Danger} />
+<Canvas of={stories.Danger} />
 
 ## Accessibility
 
diff --git a/libs/components/src/chip-select/chip-select.mdx b/libs/components/src/chip-select/chip-select.mdx
index 90bc7556209..d569158b75a 100644
--- a/libs/components/src/chip-select/chip-select.mdx
+++ b/libs/components/src/chip-select/chip-select.mdx
@@ -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";
 
@@ -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.
 
-<Canvas>
-  <Story of={stories.Default} />
-</Canvas>
+<Canvas of={stories.Default} />
 
 ## Options
 
@@ -91,9 +89,7 @@ const options = [
 ];
 ```
 
-<Canvas>
-  <Story of={stories.NestedOptions} />
-</Canvas>
+<Canvas of={stories.NestedOptions} />
 
 ## Placeholder Content
 
diff --git a/libs/components/src/color-password/color-password.mdx b/libs/components/src/color-password/color-password.mdx
index d01c81b0073..8f3746715e1 100644
--- a/libs/components/src/color-password/color-password.mdx
+++ b/libs/components/src/color-password/color-password.mdx
@@ -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";
 
@@ -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
 position in the password string.
 
-<Story of={stories.ColorPasswordCount} />
+<Canvas of={stories.ColorPasswordCount} />
 
 ## Wrapped Password
 
 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
 
diff --git a/libs/components/src/dialog/dialog/dialog.mdx b/libs/components/src/dialog/dialog/dialog.mdx
index c05bdd45445..1806958210e 100644
--- a/libs/components/src/dialog/dialog/dialog.mdx
+++ b/libs/components/src/dialog/dialog/dialog.mdx
@@ -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";
 
@@ -35,7 +35,7 @@ Use the large size for dialogs that have many interactive elements or tabbed con
 
 `max-w-3xl` 48rem
 
-<Story of={stories.Large} />
+<Canvas of={stories.Large} />
 
 ### Default
 
@@ -46,7 +46,7 @@ Use the Default size for most dialogs that require some content and a few intera
 
 `max-w-xl` 36rem
 
-<Story of={stories.Default} />
+<Canvas of={stories.Default} />
 
 ### Small
 
@@ -54,31 +54,31 @@ Use the Default size for most dialogs that require some content and a few intera
 
 `max-w-sm` 24rem
 
-<Story of={stories.Small} />
+<Canvas of={stories.Small} />
 
 ## Long Title
 
 If a dialog's title is too long to fully display. It should be truncated and on hover shown in a
 tooltip.
 
-<Story of={stories.LongTitle} />
+<Canvas of={stories.LongTitle} />
 
 ## Loading
 
 Similar to a page loading state, a Dialog that takes more than a few seconds to load should use a
 loading state.
 
-<Story of={stories.Loading} />
+<Canvas of={stories.Loading} />
 
 ## Tab Content
 
 Use tabs to separate related content within a dialog.
 
-<Story of={stories.TabContent} />
+<Canvas of={stories.TabContent} />
 
 ## Background Color
 
 The `background` input can be set to `alt` to change the background color. This is useful for
 dialogs that contain multiple card sections.
 
-<Story of={stories.WithCards} />
+<Canvas of={stories.WithCards} />
diff --git a/libs/components/src/dialog/dialogs.mdx b/libs/components/src/dialog/dialogs.mdx
index b5861aefe5c..63df0bfc131 100644
--- a/libs/components/src/dialog/dialogs.mdx
+++ b/libs/components/src/dialog/dialogs.mdx
@@ -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";
 
@@ -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`.
 
-<Story of={stories.Default} />
+<Canvas of={stories.Default} />
 
 ## Accessibility
 
diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.mdx b/libs/components/src/dialog/simple-dialog/simple-dialog.mdx
index d188b3598e4..e3ed2fcf698 100644
--- a/libs/components/src/dialog/simple-dialog/simple-dialog.mdx
+++ b/libs/components/src/dialog/simple-dialog/simple-dialog.mdx
@@ -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";
 
@@ -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
 content a [Dialog component](?path=/docs/component-library-dialogs-dialog--docs).
 
-<Story of={stories.ScrollingContent} />
+<Canvas of={stories.ScrollingContent} />
diff --git a/libs/components/src/disclosure/disclosure.mdx b/libs/components/src/disclosure/disclosure.mdx
index 8df8e7025b8..2fcff6f5982 100644
--- a/libs/components/src/disclosure/disclosure.mdx
+++ b/libs/components/src/disclosure/disclosure.mdx
@@ -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";
 
@@ -34,7 +34,7 @@ To compose a disclosure and trigger:
 <bit-disclosure #disclosureRef open>click button to hide this content</bit-disclosure>
 ```
 
-<Story of={stories.DisclosureWithIconButton} />
+<Canvas of={stories.DisclosureWithIconButton} />
 
 <br />
 <br />
diff --git a/libs/components/src/drawer/drawer.mdx b/libs/components/src/drawer/drawer.mdx
index 0098ce64ea9..57d618cfe95 100644
--- a/libs/components/src/drawer/drawer.mdx
+++ b/libs/components/src/drawer/drawer.mdx
@@ -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";
 
@@ -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
 another will close and replace the one already open.
 
-<Story of={stories.MultipleDrawers} />
+<Canvas of={stories.MultipleDrawers} />
 
 ## Headless
 
 Omitting `bit-drawer-header` and `bit-drawer-body` allows for fully customizable content.
 
-<Story of={stories.Headless} />
+<Canvas of={stories.Headless} />
 
 ## Accessibility
 
@@ -117,4 +117,4 @@ Omitting `bit-drawer-header` and `bit-drawer-body` allows for fully customizable
 
 ## Kitchen Sink
 
-<Story of={KitchenSink} autoplay />
+<Canvas of={KitchenSink} autoplay />
diff --git a/libs/components/src/form/forms.mdx b/libs/components/src/form/forms.mdx
index fbb3a20e518..e3baf200f96 100644
--- a/libs/components/src/form/forms.mdx
+++ b/libs/components/src/form/forms.mdx
@@ -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 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
 always use the native `form` element and bind a `formGroup`.
 
-<Story of={formStories.FullExample} />
+<Canvas of={formStories.FullExample} />
 
 <br />
 
@@ -69,25 +69,25 @@ is too long, such as info link buttons or badges.
 
 #### Default with required attribute
 
-<Story of={fieldStories.Default} />
+<Canvas of={fieldStories.Default} />
 
 #### Password Toggle
 
-<Story of={passwordToggleStories.Default} />
+<Canvas of={passwordToggleStories.Default} />
 
 ### Search
 
-<Story of={searchStories.Default} />
+<Canvas of={searchStories.Default} />
 
 ### Selects
 
 #### Searchable single select (default)
 
-<Story of={selectStories.Default} />
+<Canvas of={selectStories.Default} />
 
 #### Multi-select
 
-<Story of={multiSelectStories.Members} />
+<Canvas of={multiSelectStories.Members} />
 
 ### Radio group
 
@@ -113,11 +113,11 @@ using a radio group for more than 5 options even if the options require addition
 
 #### Block
 
-<Story of={radioStories.Block} />
+<Canvas of={radioStories.Block} />
 
 #### Inline
 
-<Story of={radioStories.Inline} />
+<Canvas of={radioStories.Inline} />
 
 ### Checkbox
 
@@ -140,7 +140,7 @@ If a checkbox group has more than 4 options a
 
 #### Single checkbox
 
-<Story of={checkboxStories.Default} />
+<Canvas of={checkboxStories.Default} />
 
 ## Accessibility
 
diff --git a/libs/components/src/icon-button/icon-button.mdx b/libs/components/src/icon-button/icon-button.mdx
index a45160d7884..85164717de7 100644
--- a/libs/components/src/icon-button/icon-button.mdx
+++ b/libs/components/src/icon-button/icon-button.mdx
@@ -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";
 
@@ -38,48 +38,48 @@ button component styles.
 
 Used for general icon buttons appearing on the theme’s main `background`
 
-<Story of={stories.Main} />
+<Canvas of={stories.Main} />
 
 ### Muted
 
 Used for low emphasis icon buttons appearing on the theme’s main `background`
 
-<Story of={stories.Muted} />
+<Canvas of={stories.Muted} />
 
 ### Contrast
 
 Used on a theme’s colored or contrasting backgrounds such as in the navigation or on toasts and
 banners.
 
-<Story of={stories.Contrast} />
+<Canvas of={stories.Contrast} />
 
 ### Danger
 
 Danger is used for “trash” actions throughout the experience, most commonly in the bottom right of
 the dialog component.
 
-<Story of={stories.Danger} />
+<Canvas of={stories.Danger} />
 
 ### Primary
 
 Used in place of the main button component if no text is used. This allows the button to display
 square.
 
-<Story of={stories.Primary} />
+<Canvas of={stories.Primary} />
 
 ### Secondary
 
 Used in place of the main button component if no text is used. This allows the button to display
 square.
 
-<Story of={stories.Secondary} />
+<Canvas of={stories.Secondary} />
 
 ### Light
 
 Used on a background that is dark in both light theme and dark theme. Example: end user navigation
 styles.
 
-<Story of={stories.Light} />
+<Canvas of={stories.Light} />
 
 **Note:** Main and contrast styles appear on backgrounds where using `primary-700` as a focus
 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
 
-<Story of={stories.Small} />
+<Canvas of={stories.Small} />
 
 ### Default
 
-<Story of={stories.Default} />
+<Canvas of={stories.Default} />
 
 ## Accessibility
 
diff --git a/libs/components/src/item/item.mdx b/libs/components/src/item/item.mdx
index ab39e738b26..d3e6065487a 100644
--- a/libs/components/src/item/item.mdx
+++ b/libs/components/src/item/item.mdx
@@ -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";
 
@@ -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,
 or to list nav links.
 
-<Story of={stories.Default} />
+<Canvas of={stories.Default} />
 
 <br />
 
 Items used within a parent `bit-layout` component will not have a border radius, since the
 `bit-layout` background is white.
 
-<Story of={stories.WithoutBorderRadius} />
+<Canvas of={stories.WithoutBorderRadius} />
 
 <br />
 <br />
@@ -49,7 +49,7 @@ The content can be a button, anchor, or static container.
 </bit-item>
 ```
 
-<Story of={stories.ContentTypes} />
+<Canvas of={stories.ContentTypes} />
 
 ### Content Slots
 
@@ -82,7 +82,7 @@ The content can be a button, anchor, or static container.
 </bit-item>
 ```
 
-<Story of={stories.ContentSlots} />
+<Canvas of={stories.ContentSlots} />
 
 ## Secondary Actions
 
@@ -129,19 +129,19 @@ This can be changed by passing `[truncate]="false"` to the `bit-item-content`.
 
 ### Truncation (Default)
 
-<Story of={stories.TextOverflowTruncate} />
+<Canvas of={stories.TextOverflowTruncate} />
 
 ### Wrap
 
-<Story of={stories.TextOverflowWrap} />
+<Canvas of={stories.TextOverflowWrap} />
 
 ## Item Groups
 
 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
 
@@ -162,4 +162,4 @@ Use `aria-label` or `aria-labelledby` to give groups an accessible name.
 
 ### Virtual Scrolling
 
-<Story of={stories.VirtualScrolling} />
+<Canvas of={stories.VirtualScrolling} />
diff --git a/libs/components/src/menu/menu.mdx b/libs/components/src/menu/menu.mdx
index 67c276cf372..d77dc0a7d7b 100644
--- a/libs/components/src/menu/menu.mdx
+++ b/libs/components/src/menu/menu.mdx
@@ -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";
 
@@ -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
 tables.
 
-<Story of={stories.ClosedMenu} />
+<Canvas of={stories.ClosedMenu} />
 
 <br />
 
diff --git a/libs/components/src/popover/popover.mdx b/libs/components/src/popover/popover.mdx
index 7b47b160ddc..17762acbdfb 100644
--- a/libs/components/src/popover/popover.mdx
+++ b/libs/components/src/popover/popover.mdx
@@ -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";
 
@@ -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.
 
-<Story of={stories.LeftStart} />
+<Canvas of={stories.LeftStart} />
 
 ### Manually Setting a Position
 
@@ -77,7 +77,7 @@ Popover's trigger element, such as:
 <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
 component will fall back to the list of default positions to find the best position.
diff --git a/libs/components/src/progress/progress.mdx b/libs/components/src/progress/progress.mdx
index 185d6214f1f..9a75f8ae1fa 100644
--- a/libs/components/src/progress/progress.mdx
+++ b/libs/components/src/progress/progress.mdx
@@ -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";
 
@@ -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
 to see part or all of the indicator.
 
-<Story of={stories.Full} />
+<Canvas of={stories.Full} />
 
 ## Text label
 
 When measuring something other than progress, such as password strength, update the label to fit the
 context of the implementation.
 
-<Story of={stories.CustomText} />
+<Canvas of={stories.CustomText} />
 
 ### Strength indicator styles
 
diff --git a/libs/components/src/section/section.mdx b/libs/components/src/section/section.mdx
index 52672ad59fb..92798420479 100644
--- a/libs/components/src/section/section.mdx
+++ b/libs/components/src/section/section.mdx
@@ -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";
 
@@ -26,9 +26,7 @@ the `disableMargin` input.
 <bit-section disableMargin></bit-section>
 ```
 
-<Canvas>
-  <Story of={stories.Default} />
-</Canvas>
+<Canvas of={stories.Default} />
 
 ## Section Header
 
@@ -61,16 +59,12 @@ padding to align the header with the border radius of the card/item.
 </bit-section>
 ```
 
-<Canvas>
-  <Story of={stories.HeaderWithPadding} />
-</Canvas>
+<Canvas of={stories.HeaderWithPadding} />
 
 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.
 
-<Canvas>
-  <Story of={stories.HeaderWithoutPadding} />
-</Canvas>
+<Canvas of={stories.HeaderWithoutPadding} />
 
 ### 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
 applied between the children of the default slot.
 
-<Canvas>
-  <Story of={stories.HeaderVariants} />
-</Canvas>
+<Canvas of={stories.HeaderVariants} />
 
 #### End slot
 
 The `end` slot will typically be used for text or an icon button.
 
-<Canvas>
-  <Story of={stories.HeaderEndSlotVariants} />
-</Canvas>
+<Canvas of={stories.HeaderEndSlotVariants} />
diff --git a/libs/components/src/stories/compact-mode.mdx b/libs/components/src/stories/compact-mode.mdx
index 800bc34cf6a..3cffd45847a 100644
--- a/libs/components/src/stories/compact-mode.mdx
+++ b/libs/components/src/stories/compact-mode.mdx
@@ -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 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)
 
-<Story of={itemStories.CompactMode} />
+<Canvas of={itemStories.CompactMode} />
diff --git a/libs/components/src/tabs/tabs.mdx b/libs/components/src/tabs/tabs.mdx
index 3be98e34257..bab5fbb52c4 100644
--- a/libs/components/src/tabs/tabs.mdx
+++ b/libs/components/src/tabs/tabs.mdx
@@ -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 dialogStories from "../dialog/dialog/dialog.stories";
 
 <Meta of={stories} />
 
@@ -17,17 +18,17 @@ and 1rem of padding on the left and right.
 
 ## Content Tabs
 
-<Story of={stories.ContentTabs} />
+<Canvas of={stories.ContentTabs} />
 
 ## Navigation Tabs
 
-<Story of={stories.NavigationTabs} />
+<Canvas of={stories.NavigationTabs} />
 
 ## Content tabs in dialogs
 
 Tabs can be used in dialogs to separate related content.
 
-<Story id="component-library-dialogs-dialog--tab-content" />
+<Canvas of={dialogStories.TabContent} />
 
 ## Accessibility
 
diff --git a/libs/components/src/typography/typography.mdx b/libs/components/src/typography/typography.mdx
index 11b37bb53b4..d8439481dbc 100644
--- a/libs/components/src/typography/typography.mdx
+++ b/libs/components/src/typography/typography.mdx
@@ -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>
 ```
 
-<Canvas story={stories.Default} />
+<Canvas of={stories.Default} />