Merge pull request #29025 from storybookjs/jeppe/fix-default-globals

Backgrounds/Viewports: Make defaults overridable in `StoryGlobals`-mode

Author: JReinhold

code/addons/backgrounds/src/components/Tool.tsx

@@ -6,18 +6,17 @@ import { useGlobals, useParameter } from 'storybook/internal/manager-api';
 import { CircleIcon, GridIcon, PhotoIcon, RefreshIcon } from '@storybook/icons';
 
 import { PARAM_KEY as KEY } from '../constants';
+import { DEFAULT_BACKGROUNDS } from '../defaults';
 import type { Background, BackgroundMap, Config, GlobalStateUpdate } from '../types';
 
 type Link = Parameters<typeof TooltipLinkList>['0']['links'][0];
 
-const emptyBackgroundMap: BackgroundMap = {};
-
 export const BackgroundTool = memo(function BackgroundSelector() {
   const config = useParameter<Config>(KEY);
   const [globals, updateGlobals, storyGlobals] = useGlobals();
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
 
-  const { options = emptyBackgroundMap, disable = true } = config || {};
+  const { options = DEFAULT_BACKGROUNDS, disable = true } = config || {};
   if (disable) {
     return null;
   }

code/addons/backgrounds/src/decorator.ts

@@ -6,6 +6,7 @@ import type {
 } from 'storybook/internal/types';
 
 import { PARAM_KEY as KEY } from './constants';
+import { DEFAULT_BACKGROUNDS } from './defaults';
 import type { Config, GridConfig } from './types';
 import { addBackgroundStyle, addGridStyle, clearStyles, isReduceMotionEnabled } from './utils';
 
@@ -25,7 +26,11 @@ export const withBackgroundAndGrid = (
   context: StoryContext<Renderer>
 ) => {
   const { globals, parameters, viewMode, id } = context;
-  const { options = {}, disable, grid = defaultGrid } = (parameters[KEY] || {}) as Config;
+  const {
+    options = DEFAULT_BACKGROUNDS,
+    disable,
+    grid = defaultGrid,
+  } = (parameters[KEY] || {}) as Config;
   const data = globals[KEY] || {};
   const backgroundName: string | undefined = data.value;
 

code/addons/backgrounds/src/defaults.ts

@@ -0,0 +1,6 @@
+import type { BackgroundMap } from './types';
+
+export const DEFAULT_BACKGROUNDS: BackgroundMap = {
+  light: { name: 'light', value: '#F8F8F8' },
+  dark: { name: 'dark', value: '#333' },
+};

code/addons/backgrounds/src/preview.ts

@@ -2,6 +2,7 @@ import type { Addon_DecoratorFunction } from 'storybook/internal/types';
 
 import { PARAM_KEY as KEY } from './constants';
 import { withBackgroundAndGrid } from './decorator';
+import { DEFAULT_BACKGROUNDS } from './defaults';
 import { withBackground } from './legacy/withBackgroundLegacy';
 import { withGrid } from './legacy/withGridLegacy';
 import type { Config, GlobalState } from './types';
@@ -18,20 +19,10 @@ export const parameters = {
       cellAmount: 5,
     },
     disable: false,
-    ...(FEATURES?.backgroundsStoryGlobals
-      ? {
-          options: {
-            light: { name: 'light', value: '#F8F8F8' },
-            dark: { name: 'dark', value: '#333' },
-          },
-        }
-      : {
-          // TODO: remove in 9.0
-          values: [
-            { name: 'light', value: '#F8F8F8' },
-            { name: 'dark', value: '#333333' },
-          ],
-        }),
+    // TODO: remove in 9.0
+    ...(!FEATURES?.backgroundsStoryGlobals && {
+      values: Object.values(DEFAULT_BACKGROUNDS),
+    }),
   } satisfies Partial<Config>,
 };
 

code/addons/viewport/src/components/Tool.tsx

@@ -7,15 +7,15 @@ import { Global } from 'storybook/internal/theming';
 import { GrowIcon, RefreshIcon, TransferIcon } from '@storybook/icons';
 
 import { PARAM_KEY as KEY } from '../constants';
+import { MINIMAL_VIEWPORTS } from '../defaults';
 import { responsiveViewport } from '../responsiveViewport';
 import { registerShortcuts } from '../shortcuts';
-import type { Config, GlobalState, GlobalStateUpdate, Viewport, ViewportMap } from '../types';
+import type { Config, GlobalStateUpdate, Viewport, ViewportMap } from '../types';
 import {
   ActiveViewportLabel,
   ActiveViewportSize,
   IconButtonLabel,
   IconButtonWithLabel,
-  emptyViewportMap,
   iconsMap,
 } from '../utils';
 
@@ -39,7 +39,7 @@ export const ViewportTool: FC<{ api: API }> = ({ api }) => {
   const [globals, updateGlobals, storyGlobals] = useGlobals();
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
 
-  const { options = emptyViewportMap, disable } = config || {};
+  const { options = MINIMAL_VIEWPORTS, disable } = config || {};
   const data = globals?.[KEY] || {};
   const viewportName: string = data.value;
   const isRotated: boolean = data.isRotated;

code/addons/viewport/src/preview.ts

@@ -10,11 +10,3 @@ const modern: Record<string, GlobalState> = {
 const legacy = { viewport: 'reset', viewportRotated: false };
 
 export const initialGlobals = FEATURES?.viewportStoryGlobals ? modern : legacy;
-
-export const parameters = FEATURES?.viewportStoryGlobals
-  ? {
-      [KEY]: {
-        options: MINIMAL_VIEWPORTS,
-      },
-    }
-  : {};

code/addons/viewport/src/utils.tsx

@@ -42,5 +42,3 @@ export const iconsMap: Record<Viewport['type'], React.ReactNode> = {
   tablet: <TabletIcon />,
   other: <Fragment />,
 };
-
-export const emptyViewportMap: ViewportMap = {};