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 - - - + 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 - - - + 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. - - - + ## Extension Page Examples of using just the `popup-page` component, without and with a footer. - - - + - - - + ## Popped out When the browser extension is popped out, the "popout" button should not be passed to the header. - - - + # 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. - - - + ## Loading An example of what the loading state looks like. - - - + 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 - + ### Default: 48px - + ### Small 28px - + ## Background color @@ -37,9 +37,9 @@ priority: - ID - Text, usually set to the user's Name field - + Use the user 'ID' field if `Name` is not defined. - + ## 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. - + ## 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 ` ``` - + 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. - + ## Text label When measuring something other than progress, such as password strength, update the label to fit the context of the implementation. - + ### 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. ``` - - - + ## Section Header @@ -61,16 +59,12 @@ padding to align the header with the border radius of the card/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. - - - + ### 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. - - - + #### End slot The `end` slot will typically be used for text or an icon button. - - - + 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) - + 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"; @@ -17,17 +18,17 @@ and 1rem of padding on the left and right. ## Content Tabs - + ## Navigation Tabs - + ## Content tabs in dialogs Tabs can be used in dialogs to separate related content. - + ## 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

Semantically, I am an h2, but I use h5 styles.

``` - +