diff --git a/apps/browser/src/platform/popup/layout/popup-layout.mdx b/apps/browser/src/platform/popup/layout/popup-layout.mdx index b805805ad18..49f76501aea 100644 --- a/apps/browser/src/platform/popup/layout/popup-layout.mdx +++ b/apps/browser/src/platform/popup/layout/popup-layout.mdx @@ -41,6 +41,9 @@ page looks nice when the extension is popped out. - `footer` - Use the `popup-footer` component. - Not every page will have a footer. +- `above-scroll-area` + - When the page content overflows, this content will be "stuck" to the top of the page upon + scrolling. - default - Whatever content you want in `main`. diff --git a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts index f2208a8b8f5..9857eeccc31 100644 --- a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts +++ b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts @@ -12,6 +12,7 @@ import { IconButtonModule, ItemModule, NoItemsModule, + SearchModule, } from "@bitwarden/components"; import { PopupFooterComponent } from "./popup-footer.component"; @@ -103,6 +104,18 @@ class MockPopoutButtonComponent {} }) class MockCurrentAccountComponent {} +@Component({ + selector: "mock-search", + template: ` +
+ +
+ `, + standalone: true, + imports: [SearchModule], +}) +class MockSearchComponent {} + @Component({ selector: "mock-vault-page", template: ` @@ -114,6 +127,7 @@ class MockCurrentAccountComponent {} + `, @@ -124,6 +138,7 @@ class MockCurrentAccountComponent {} MockAddButtonComponent, MockPopoutButtonComponent, MockCurrentAccountComponent, + MockSearchComponent, VaultComponent, ], }) diff --git a/apps/browser/src/platform/popup/layout/popup-page.component.html b/apps/browser/src/platform/popup/layout/popup-page.component.html index 87f91e781a7..d53ef24803d 100644 --- a/apps/browser/src/platform/popup/layout/popup-page.component.html +++ b/apps/browser/src/platform/popup/layout/popup-page.component.html @@ -1,10 +1,25 @@ -
+
+
+ +
- + + + + +
+
+
+ +
+ +
-
+ - + +
- +
+ +