CSF: Add addon-themes for testing to sandboxes & main storybook

code/.storybook/main.ts

@@ -68,6 +68,10 @@ const config: StorybookConfig = {
       directory: '../addons/toolbars/template/stories',
       titlePrefix: 'addons/toolbars',
     },
+    {
+      directory: '../addons/themes/template/stories',
+      titlePrefix: 'addons/themes',
+    },
     {
       directory: '../addons/onboarding/src',
       titlePrefix: 'addons/onboarding',
@@ -83,6 +87,7 @@ const config: StorybookConfig = {
   ],
   addons: [
     '@storybook/addon-links',
+    '@storybook/addon-themes',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-storysource',
@@ -120,7 +125,6 @@ const config: StorybookConfig = {
   features: {
     viewportStoryGlobals: true,
     backgroundsStoryGlobals: true,
-    // themesStoryGlobals: true,
   },
   viteFinal: (viteConfig, { configType }) =>
     mergeConfig(viteConfig, {

code/.storybook/preview.tsx

@@ -34,7 +34,7 @@ const ThemeBlock = styled.div<{ side: 'left' | 'right'; layout: string }>(
     overflow: 'auto',
   },
   ({ layout }) => ({
-    padding: layout === 'fullscreen' ? 0 : 10,
+    padding: layout === 'fullscreen' ? 0 : '1rem',
   }),
   ({ theme }) => ({
     background: theme.background.content,
@@ -55,14 +55,14 @@ const ThemeBlock = styled.div<{ side: 'left' | 'right'; layout: string }>(
 const ThemeStack = styled.div<{ layout: string }>(
   {
     position: 'relative',
-    minHeight: 'calc(50vh - 15px)',
+    flex: 1,
   },
   ({ theme }) => ({
     background: theme.background.content,
     color: theme.color.defaultText,
   }),
   ({ layout }) => ({
-    padding: layout === 'fullscreen' ? 0 : 10,
+    padding: layout === 'fullscreen' ? 0 : '1rem',
   })
 );
 
@@ -86,6 +86,25 @@ const PlayFnNotice = styled.div(
   })
 );
 
+const StackContainer = ({ children, layout }) => (
+  <div
+    style={{
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      // margin: layout === 'fullscreen' ? 0 : '-1rem',
+    }}
+  >
+    <style dangerouslySetInnerHTML={{ __html: 'html, body, #storybook-root { height: 100%; }' }} />
+    {layout === 'fullscreen' ? null : (
+      <style
+        dangerouslySetInnerHTML={{ __html: 'html, body { padding: 0!important; margin: 0; }' }}
+      />
+    )}
+    {children}
+  </div>
+);
+
 const ThemedSetRoot = () => {
   const theme = useTheme();
 
@@ -166,7 +185,7 @@ export const decorators = [
    * This decorator renders the stories side-by-side, stacked or default based on the theme switcher in the toolbar
    */
   (StoryFn, { globals, playFunction, args, storyGlobals, parameters }) => {
-    let theme = globals.theme;
+    let theme = globals.sb_theme;
     let showPlayFnNotice = false;
 
     // this makes the decorator be out of 'phase' with the actually selected theme in the toolbar
@@ -176,7 +195,7 @@ export const decorators = [
     if (playFunction && args.autoplay !== false && !(theme === 'light' || theme === 'dark')) {
       theme = 'light';
       showPlayFnNotice = true;
-    } else if (isChromatic() && !storyGlobals.theme && !playFunction) {
+    } else if (isChromatic() && !storyGlobals.sb_theme && !playFunction) {
       theme = 'stacked';
     }
 
@@ -206,16 +225,18 @@ export const decorators = [
             <ThemeProvider theme={convert(themes.light)}>
               <Global styles={createReset} />
             </ThemeProvider>
-            <ThemeProvider theme={convert(themes.light)}>
-              <ThemeStack data-side="left" layout={parameters.layout}>
-                <StoryFn />
-              </ThemeStack>
-            </ThemeProvider>
-            <ThemeProvider theme={convert(themes.dark)}>
-              <ThemeStack data-side="right" layout={parameters.layout}>
-                <StoryFn />
-              </ThemeStack>
-            </ThemeProvider>
+            <StackContainer layout={parameters.layout}>
+              <ThemeProvider theme={convert(themes.light)}>
+                <ThemeStack data-side="left" layout={parameters.layout}>
+                  <StoryFn />
+                </ThemeStack>
+              </ThemeProvider>
+              <ThemeProvider theme={convert(themes.dark)}>
+                <ThemeStack data-side="right" layout={parameters.layout}>
+                  <StoryFn />
+                </ThemeStack>
+              </ThemeProvider>
+            </StackContainer>
           </Fragment>
         );
       }
@@ -315,6 +336,9 @@ export const parameters = {
   viewport: {
     options: MINIMAL_VIEWPORTS,
   },
+  themes: {
+    disable: true,
+  },
   backgrounds: {
     options: {
       light: { name: 'light', value: '#edecec' },

code/addons/controls/template/stories/conditional.stories.ts

@@ -54,9 +54,9 @@ export const ToggleExpandCollapse = {
 
 export const GlobalBased = {
   argTypes: {
-    ifThemeExists: { control: 'text', if: { global: 'theme' } },
-    ifThemeNotExists: { control: 'text', if: { global: 'theme', exists: false } },
-    ifLightTheme: { control: 'text', if: { global: 'theme', eq: 'light' } },
-    ifNotLightTheme: { control: 'text', if: { global: 'theme', neq: 'light' } },
+    ifThemeExists: { control: 'text', if: { global: 'sb_theme' } },
+    ifThemeNotExists: { control: 'text', if: { global: 'sb_theme', exists: false } },
+    ifLightTheme: { control: 'text', if: { global: 'sb_theme', eq: 'light' } },
+    ifNotLightTheme: { control: 'text', if: { global: 'sb_theme', neq: 'light' } },
   },
 };

code/addons/interactions/src/components/Interaction.stories.tsx

@@ -54,7 +54,7 @@ export const Disabled: Story = {
 
 export const Hovered: Story = {
   ...Done,
-  globals: { theme: 'light' },
+  globals: { sb_theme: 'light' },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await userEvent.hover(canvas.getByRole('button'));

code/addons/interactions/src/components/InteractionsPanel.stories.tsx

@@ -34,7 +34,6 @@ const meta = {
     ),
   ],
   parameters: { layout: 'fullscreen' },
-  globals: { theme: 'light' },
   args: {
     calls: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
     controls: SubnavStories.args.controls,
@@ -58,35 +57,35 @@ export const Passing: Story = {
   args: {
     interactions: getInteractions(CallStates.DONE),
   },
-};
-Passing.play = async ({ args, canvasElement }) => {
-  if (isChromatic()) return;
-  const canvas = within(canvasElement);
-
-  await waitFor(async () => {
-    await userEvent.click(canvas.getByLabelText('Go to start'));
-    await expect(args.controls.start).toHaveBeenCalled();
-  });
-
-  await waitFor(async () => {
-    await userEvent.click(canvas.getByLabelText('Go back'));
-    await expect(args.controls.back).toHaveBeenCalled();
-  });
-
-  await waitFor(async () => {
-    await userEvent.click(canvas.getByLabelText('Go forward'));
-    await expect(args.controls.next).not.toHaveBeenCalled();
-  });
-
-  await waitFor(async () => {
-    await userEvent.click(canvas.getByLabelText('Go to end'));
-    await expect(args.controls.end).not.toHaveBeenCalled();
-  });
-
-  await waitFor(async () => {
-    await userEvent.click(canvas.getByLabelText('Rerun'));
-    await expect(args.controls.rerun).toHaveBeenCalled();
-  });
+  play: async ({ args, canvasElement }) => {
+    if (isChromatic()) return;
+    const canvas = within(canvasElement);
+
+    await waitFor(async () => {
+      await userEvent.click(canvas.getByLabelText('Go to start'));
+      await expect(args.controls.start).toHaveBeenCalled();
+    });
+
+    await waitFor(async () => {
+      await userEvent.click(canvas.getByLabelText('Go back'));
+      await expect(args.controls.back).toHaveBeenCalled();
+    });
+
+    await waitFor(async () => {
+      await userEvent.click(canvas.getByLabelText('Go forward'));
+      await expect(args.controls.next).not.toHaveBeenCalled();
+    });
+
+    await waitFor(async () => {
+      await userEvent.click(canvas.getByLabelText('Go to end'));
+      await expect(args.controls.end).not.toHaveBeenCalled();
+    });
+
+    await waitFor(async () => {
+      await userEvent.click(canvas.getByLabelText('Rerun'));
+      await expect(args.controls.rerun).toHaveBeenCalled();
+    });
+  },
 };
 
 export const Paused: Story = {

code/addons/interactions/src/components/Subnav.stories.tsx

@@ -1,10 +1,14 @@
 import { action } from '@storybook/addon-actions';
 import { CallStates } from '@storybook/instrumenter';
 import { Subnav } from './Subnav';
+import { parameters } from '../preview';
 
 export default {
   title: 'Subnav',
   component: Subnav,
+  parameters: {
+    layout: 'fullscreen',
+  },
   args: {
     controls: {
       start: action('start'),

code/addons/interactions/template/stories/basics.stories.ts

@@ -15,7 +15,7 @@ export default {
     onSuccess: fn(),
   },
   globals: {
-    theme: 'light',
+    sb_theme: 'light',
   },
 };
 

code/addons/themes/README.md

@@ -45,11 +45,8 @@ import { Button } from './Button';
 export default {
   title: 'Example/Button',
   component: Button,
-  parameters: {
-    themes: {
-      themeOverride: 'light', // component level override
-    },
-  },
+  // meta level override
+  globals: { theme: 'dark' },
 };
 
 export const Primary = {
@@ -64,10 +61,7 @@ export const PrimaryDark = {
     primary: true,
     label: 'Button',
   },
-  parameters: {
-    themes: {
-      themeOverride: 'dark', // Story level override
-    },
-  },
+  // story level override
+  globals: { theme: 'dark' },
 };
 ```

code/addons/themes/src/constants.ts

@@ -15,6 +15,7 @@ export const DEFAULT_ADDON_STATE: ThemeAddonState = {
 
 export interface ThemeParameters {
   themeOverride?: string;
+  disable?: boolean;
 }
 
 export const DEFAULT_THEME_PARAMETERS: ThemeParameters = {};

code/addons/themes/src/decorators/class-name.decorator.tsx

@@ -14,7 +14,7 @@ const DEFAULT_ELEMENT_SELECTOR = 'html';
 const classStringToArray = (classString: string) => classString.split(' ').filter(Boolean);
 
 // TODO check with @kasperpeulen: change the types so they can be correctly inferred from context e.g. <Story extends (...args: any[]) => any>
-export const withThemeByClassName = <TRenderer extends Renderer = any>({
+export const withThemeByClassName = <TRenderer extends Renderer = Renderer>({
   themes,
   defaultTheme,
   parentSelector = DEFAULT_ELEMENT_SELECTOR,
@@ -47,7 +47,7 @@ export const withThemeByClassName = <TRenderer extends Renderer = any>({
       if (newThemeClasses.length > 0) {
         parentElement.classList.add(...newThemeClasses);
       }
-    }, [themeOverride, selected, parentSelector]);
+    }, [themeOverride, selected]);
 
     return storyFn();
   };

code/addons/themes/src/decorators/data-attribute.decorator.tsx

@@ -31,7 +31,7 @@ export const withThemeByDataAttribute = <TRenderer extends Renderer = any>({
       if (parentElement) {
         parentElement.setAttribute(attributeName, themes[themeKey]);
       }
-    }, [themeOverride, selected, parentSelector, attributeName]);
+    }, [themeOverride, selected]);
 
     return storyFn();
   };

code/addons/themes/src/decorators/provider.decorator.tsx

@@ -38,7 +38,7 @@ export const withThemeFromJSXProvider = <TRenderer extends Renderer = any>({
       const pairs = Object.entries(themes);
 
       return pairs.length === 1 ? pluckThemeFromKeyPairTuple(pairs[0]) : themes[selectedThemeName];
-    }, [themes, selected, themeOverride]);
+    }, [selected, themeOverride]);
 
     if (!Provider) {
       return (

code/addons/themes/src/preview.tsx

@@ -1,7 +1,6 @@
 import type { Renderer, ProjectAnnotations } from 'storybook/internal/types';
-import { GLOBAL_KEY } from './constants';
+import { GLOBAL_KEY as KEY } from './constants';
 
-export const globals: ProjectAnnotations<Renderer>['globals'] = {
-  // Required to make sure SB picks this up from URL params
-  [GLOBAL_KEY]: '',
+export const initialGlobals: ProjectAnnotations<Renderer>['initialGlobals'] = {
+  [KEY]: '',
 };