bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-14 15:23:33 +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
<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} />