fix: storybook theme switcher

Signed-off-by: Saulo Vallory <[email protected]>
cva-design · Jan 13, 2025 · 5df2331 · 5df2331
1 parent 8f5b5c8
commit 5df2331
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 22 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts
@@ -93,7 +93,7 @@ const config: StorybookConfig = {
   addons: [
     // ‼️ NOTE: This plugin DOES NOT WORK with getAbsolutePath
     '@storybook/addon-svelte-csf', // disabled since we are using dual theme decorator
-    // getAbsolutePath("storybook-dark-mode"),
+    getAbsolutePath('@storybook/addon-themes'),
     getAbsolutePath('@storybook/addon-essentials'),
     getAbsolutePath('@storybook/addon-interactions'),
     getAbsolutePath('@chromatic-com/storybook'),

diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
@@ -1,4 +1,5 @@
-import type { Preview } from '@storybook/svelte';
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
+import type { Preview, SvelteRenderer } from '@storybook/svelte';
 import { themes } from '@storybook/theming';
 
 import '../docs/assets/storybook/index.scss';
@@ -11,6 +12,19 @@ const preview: Preview = {
       },
     },
   },
+  decorators: [
+    // // Add to the top: import DualTheme from '../docs/docs-ui/decorators/dual-theme.svelte';
+    // (story, { parameters }) =>
+    //   parameters.dualTheme !== false ? (DualTheme as any) : story(),
+    withThemeByDataAttribute<SvelteRenderer>({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'dark',
+      attributeName: 'data-preferred-theme',
+    }),
+  ],
   parameters: {
     layout: 'centered',
     controls: {
@@ -19,14 +33,6 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
-    darkMode: {
-      current: 'dark',
-      darkClass: 'figma-dark',
-      lightClass: 'figma-light',
-      figJamClass: 'figjam',
-      classTarget: 'html',
-      stylePreview: true,
-    },
     docs: {
       theme: themes.dark,
     },
@@ -80,10 +86,6 @@ const preview: Preview = {
       },
     },
   },
-  decorators: [
-    // (story, { parameters }) =>
-    //   parameters.dualTheme !== false ? (DualTheme as any) : story(),
-  ],
   tags: ['autodocs'],
 };
 

diff --git a/packages/ui/docs/docs-ui/decorators/dual-theme.svelte b/packages/ui/docs/docs-ui/decorators/dual-theme.svelte
@@ -1,8 +1,8 @@
 <div class="theme-split">
-	<div class="themed figma-light">
+	<div class="themed figma-light" data-preferred-theme="light">
 		<slot />
 	</div>
-	<div class="themed figma-dark">
+	<div class="themed figma-dark" data-preferred-theme="dark">
 		<slot />
 	</div>
 </div>

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -124,6 +124,7 @@
     "@storybook/addon-links": "8.4.6",
     "@storybook/addon-storysource": "8.4.6",
     "@storybook/addon-svelte-csf": "^4.2.0",
+    "@storybook/addon-themes": "^8.4.7",
     "@storybook/blocks": "8.4.6",
     "@storybook/experimental-addon-test": "8.4.6",
     "@storybook/manager-api": "8.4.6",
@@ -157,7 +158,6 @@
     "publint": "^0.2.12",
     "sass-embedded": "^1.80.6",
     "storybook": "8.4.6",
-    "storybook-dark-mode": "^4.0.2",
     "svelte-check": "^4.1.0",
     "svelte-sequential-preprocessor": "^2.0.2",
     "ts-node": "^10.9.2",

diff --git a/packages/ui/src/lib/components/popover/popover.stories.svelte b/packages/ui/src/lib/components/popover/popover.stories.svelte
@@ -1,5 +1,5 @@
 <script context="module" lang="ts">
-	import { Popover } from '#ui';
+	import { Button, Heading, Popover } from '#ui';
 	import { Story } from '@storybook/addon-svelte-csf';
 
 	export const meta = {
@@ -124,3 +124,31 @@
 		</div>
 	</div>
 </Story>
+
+<Story name="Stacking Popovers">
+	<div style="padding: 100px;">
+		<Popover showHeader showArrow>
+			<Button slot="trigger">Open First Popover</Button>
+
+			<Heading slot="title">First Level</Heading>
+
+			<div style="width: 200px; padding: var(--space-4);">
+				<p style="margin-bottom: var(--space-4);">This is the first level popover.</p>
+				<Popover positioning={{ placement: 'right-start' }} showArrow>
+					<Button slot="trigger" variant="inverse">Open Second Popover →</Button>
+
+					<div style="width: 200px; padding: var(--space-4);">
+						<p style="margin-bottom: var(--space-4);">This is the second level popover.</p>
+						<Popover positioning={{ placement: 'right-start' }} showArrow>
+							<Button slot="trigger" variant="inverse">Open Third Popover →</Button>
+
+							<div style="width: 200px; padding: var(--space-4);">
+								<p>This is the third level popover.</p>
+							</div>
+						</Popover>
+					</div>
+				</Popover>
+			</div>
+		</Popover>
+	</div>
+</Story>
diff --git a/packages/ui/src/lib/components/popover/popover.svelte b/packages/ui/src/lib/components/popover/popover.svelte
@@ -26,7 +26,7 @@
 	export let showHeader = false;
 
 	const {
-		elements: { trigger, content, arrow, close },
+		elements: { trigger, content, arrow, close, overlay },
 		states: { open }
 	} = createPopover({
 		positioning,
@@ -40,6 +40,10 @@
 </button>
 
 {#if $open}
+	<!-- 
+    Use this to add a background overlay, like in a modal, to the popover
+    <div use:melt={$overlay} class="fps-popover__overlay" />
+  -->
 	<div use:melt={$content} class={`fps-popover__container ${className}`}>
 		{#if showArrow}<div use:melt={$arrow} />{/if}
 		{#if showHeader}
@@ -65,9 +69,9 @@
 		--arrow-size: var(--space-3);
 		font-family: var(--font-family-default);
 		color: var(--color-text-menu);
-		background-color: var(--color-bg-menu);
+		background-color: var(--color-bg);
 		border-radius: var(--radius-large);
-		box-shadow: var(--elevation-400-menu-panel);
+		box-shadow: var(--elevation-500-modal-window);
 		outline: 0;
 		padding: var(--spacer-2);
 		border-radius: var(--radius-large);
@@ -119,6 +123,6 @@
 	.fps-popover__overlay {
 		position: fixed;
 		inset: 0;
-		background-color: var(--color-overlay-dialog);
+		background-color: var(--color-bg);
 	}
 </style>