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 bf53b23c373..93cbb1f5431 100644 --- a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts +++ b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts @@ -410,6 +410,46 @@ export const PopupPageWithFooter: Story = { }), }; +export const CompactMode: Story = { + render: (args) => ({ + props: args, + template: /* HTML */ ` +
+
+

Relaxed

+

+ + + +
+ +
+

Compact

+

+ + + +
+
+ `, + }), + play: async (context) => { + const canvasEl = context.canvasElement; + const updateLabel = (containerId: string) => { + const compact = canvasEl.querySelector( + `#${containerId} [data-testid=popup-layout-scroll-region]`, + ); + const label = canvasEl.querySelector(`#${containerId} .example-label`); + const percentVisible = + 100 - + Math.round((100 * (compact.scrollHeight - compact.clientHeight)) / compact.scrollHeight); + label.textContent = `${percentVisible}% above the fold`; + }; + updateLabel("compact-example"); + updateLabel("regular-example"); + }, +}; + export const PoppedOut: Story = { render: (args) => ({ props: args, 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 a7d4725d25d..2b4c97a1230 100644 --- a/apps/browser/src/platform/popup/layout/popup-page.component.html +++ b/apps/browser/src/platform/popup/layout/popup-page.component.html @@ -13,6 +13,7 @@
diff --git a/libs/components/src/item/item.stories.ts b/libs/components/src/item/item.stories.ts index 1198fce89cb..cc4586ac4a4 100644 --- a/libs/components/src/item/item.stories.ts +++ b/libs/components/src/item/item.stories.ts @@ -152,127 +152,131 @@ export const TextOverflow: Story = { }), }; +const multipleActionListTemplate = /*html*/ ` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+`; + export const MultipleActionList: Story = { render: (args) => ({ props: args, - template: /*html*/ ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, + template: multipleActionListTemplate, }), }; @@ -351,122 +355,7 @@ export const CompactMode: Story = { props: args, template: /*html*/ `
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + ${multipleActionListTemplate}
`, }), diff --git a/libs/components/src/stories/compact-mode.mdx b/libs/components/src/stories/compact-mode.mdx index 0fba7cd2477..6356c90c9a9 100644 --- a/libs/components/src/stories/compact-mode.mdx +++ b/libs/components/src/stories/compact-mode.mdx @@ -1,18 +1,13 @@ import { Meta, Story } from "@storybook/addon-docs"; import * as itemStories from "../item/item.stories"; +import * as popupLayoutStories from "../../../../apps/browser/src/platform/popup/layout/popup-layout.stories"; # Compact Mode -Bitwarden has a global compact mode setting to support users who prefer a more information-dense -experience. - -## Toggling compact mode - -Compact mode can be enabled by adding the `tw-bit-compact` class to an ancestor element and disabled -by removing the class. Alternatively +Bitwarden has a global compact mode setting for users who prefer a more information-dense UI. ## Tailwind @@ -38,7 +33,11 @@ following example, the paragraph's padding is reduced when compact mode is enabl To get/set compact mode in TypeScript, the `BitSettingsService` exposes a `compactMode` signal. However, using the Tailwind variant should be preferred as it is more performant. -## Components that support compact mode +## Examples + +### [Popup Layout](?path=/story/browser-popup-layout--compact-mode) + + ### [Item](?path=/story/component-library-item--compact-mode)