Controls: Rework conditional controls with globals, queries

storybookjs · Apr 5, 2022 · 5dee035 · 5dee035
1 parent d377613
commit 5dee035
Show file tree

Hide file tree

Showing 43 changed files with 145 additions and 97 deletions.
diff --git a/addons/a11y/package.json b/addons/a11y/package.json
@@ -51,7 +51,7 @@
     "@storybook/client-logger": "6.5.0-alpha.55",
     "@storybook/components": "6.5.0-alpha.55",
     "@storybook/core-events": "6.5.0-alpha.55",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
     "@storybook/theming": "6.5.0-alpha.55",
     "axe-core": "^4.2.0",
     "core-js": "^3.8.2",

diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json
@@ -50,7 +50,7 @@
     "@storybook/client-logger": "6.5.0-alpha.55",
     "@storybook/components": "6.5.0-alpha.55",
     "@storybook/core-events": "6.5.0-alpha.55",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
     "@storybook/theming": "6.5.0-alpha.55",
     "core-js": "^3.8.2",
     "global": "^4.4.0",

diff --git a/addons/controls/package.json b/addons/controls/package.json
@@ -50,7 +50,7 @@
     "@storybook/client-logger": "6.5.0-alpha.55",
     "@storybook/components": "6.5.0-alpha.55",
     "@storybook/core-common": "6.5.0-alpha.55",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
     "@storybook/node-logger": "6.5.0-alpha.55",
     "@storybook/store": "6.5.0-alpha.55",
     "@storybook/theming": "6.5.0-alpha.55",

diff --git a/addons/controls/src/ControlsPanel.tsx b/addons/controls/src/ControlsPanel.tsx
@@ -1,5 +1,12 @@
 import React, { FC } from 'react';
-import { ArgTypes, useArgs, useArgTypes, useParameter, useStorybookState } from '@storybook/api';
+import {
+  ArgTypes,
+  useArgs,
+  useGlobals,
+  useArgTypes,
+  useParameter,
+  useStorybookState,
+} from '@storybook/api';
 import { ArgsTable, NoControlsWarning, PresetColor, SortType } from '@storybook/components';
 
 import { PARAM_KEY } from './constants';
@@ -13,6 +20,7 @@ interface ControlsParameters {
 
 export const ControlsPanel: FC = () => {
   const [args, updateArgs, resetArgs] = useArgs();
+  const [globals] = useGlobals();
   const rows = useArgTypes();
   const isArgsStory = useParameter<boolean>('__isArgsStory', false);
   const {
@@ -41,6 +49,7 @@ export const ControlsPanel: FC = () => {
           compact: !expanded && hasControls,
           rows: withPresetColors,
           args,
+          globals,
           updateArgs,
           resetArgs,
           inAddonPanel: true,

diff --git a/addons/docs/docs/multiframework.md b/addons/docs/docs/multiframework.md
@@ -53,8 +53,6 @@ export interface ArgType {
   name?: string;
   description?: string;
   defaultValue?: any;
-  addIf?: string;
-  removeIf?: string;
   [key: string]: any;
 }
 

diff --git a/addons/docs/package.json b/addons/docs/package.json
@@ -64,7 +64,7 @@
     "@storybook/components": "6.5.0-alpha.55",
     "@storybook/core-common": "6.5.0-alpha.55",
     "@storybook/core-events": "6.5.0-alpha.55",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
     "@storybook/docs-tools": "6.5.0-alpha.55",
     "@storybook/mdx1-csf": "canary",
     "@storybook/node-logger": "6.5.0-alpha.55",

diff --git a/addons/docs/src/blocks/ArgsTable.tsx b/addons/docs/src/blocks/ArgsTable.tsx
@@ -11,7 +11,7 @@ import { ArgTypesExtractor } from '@storybook/docs-tools';
 import { addons } from '@storybook/addons';
 import { filterArgTypes, PropDescriptor } from '@storybook/store';
 import Events from '@storybook/core-events';
-import { StrictArgTypes, Args } from '@storybook/csf';
+import { StrictArgTypes, Args, Globals } from '@storybook/csf';
 
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { Component, CURRENT_SELECTION, PRIMARY_STORY } from './types';
@@ -42,18 +42,20 @@ type StoryProps = BaseProps & {
 
 type ArgsTableProps = BaseProps | OfProps | ComponentsProps | StoryProps;
 
-const useArgs = (
-  storyId: string,
-  context: DocsContextProps
-): [Args, (args: Args) => void, (argNames?: string[]) => void] => {
-  const channel = addons.getChannel();
-
+const getContext = (storyId: string, context: DocsContextProps) => {
   const story = context.storyById(storyId);
   if (!story) {
     throw new Error(`Unknown story: ${storyId}`);
   }
+  return context.getStoryContext(story);
+};
 
-  const storyContext = context.getStoryContext(story);
+const useArgs = (
+  storyId: string,
+  context: DocsContextProps
+): [Args, (args: Args) => void, (argNames?: string[]) => void] => {
+  const channel = addons.getChannel();
+  const storyContext = getContext(storyId, context);
 
   const [args, setArgs] = useState(storyContext.args);
   useEffect(() => {
@@ -76,6 +78,22 @@ const useArgs = (
   return [args, updateArgs, resetArgs];
 };
 
+const useGlobals = (storyId: string, context: DocsContextProps): [Globals] => {
+  const channel = addons.getChannel();
+  const storyContext = getContext(storyId, context);
+  const [globals, setGlobals] = useState(storyContext.globals);
+
+  useEffect(() => {
+    const cb = (changed: { globals: Globals }) => {
+      setGlobals(changed.globals);
+    };
+    channel.on(Events.GLOBALS_UPDATED, cb);
+    return () => channel.off(Events.GLOBALS_UPDATED, cb);
+  }, []);
+
+  return [globals];
+};
+
 export const extractComponentArgTypes = (
   component: Component,
   { id, storyById }: DocsContextProps,
@@ -162,13 +180,14 @@ export const StoryTable: FC<
     const story = useStory(storyId, context);
     // eslint-disable-next-line prefer-const
     let [args, updateArgs, resetArgs] = useArgs(storyId, context);
+    const [globals] = useGlobals(storyId, context);
     if (!story) return <PureArgsTable isLoading updateArgs={updateArgs} resetArgs={resetArgs} />;
 
     const argTypes = filterArgTypes(story.argTypes, include, exclude);
 
     const mainLabel = getComponentName(component) || 'Story';
 
-    let tabs = { [mainLabel]: { rows: argTypes, args, updateArgs, resetArgs } } as Record<
+    let tabs = { [mainLabel]: { rows: argTypes, args, globals, updateArgs, resetArgs } } as Record<
       string,
       PureArgsTableProps
     >;

diff --git a/addons/links/package.json b/addons/links/package.json
@@ -44,7 +44,7 @@
     "@storybook/addons": "6.5.0-alpha.55",
     "@storybook/client-logger": "6.5.0-alpha.55",
     "@storybook/core-events": "6.5.0-alpha.55",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
     "@storybook/router": "6.5.0-alpha.55",
     "@types/qs": "^6.9.5",
     "core-js": "^3.8.2",

diff --git a/addons/measure/package.json b/addons/measure/package.json
@@ -49,7 +49,7 @@
     "@storybook/client-logger": "6.5.0-alpha.55",
     "@storybook/components": "6.5.0-alpha.55",
     "@storybook/core-events": "6.5.0-alpha.55",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0"
   },

diff --git a/addons/outline/package.json b/addons/outline/package.json
@@ -52,7 +52,7 @@
     "@storybook/client-logger": "6.5.0-alpha.55",
     "@storybook/components": "6.5.0-alpha.55",
     "@storybook/core-events": "6.5.0-alpha.55",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "regenerator-runtime": "^0.13.7",

diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json
@@ -51,7 +51,7 @@
     "@storybook/core": "6.5.0-alpha.55",
     "@storybook/core-client": "6.5.0-alpha.55",
     "@storybook/core-common": "6.5.0-alpha.55",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
     "@types/glob": "^7.1.3",
     "@types/jest": "^26.0.16",
     "@types/jest-specific-snapshot": "^0.5.3",

diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json
@@ -41,15 +41,15 @@
   },
   "dependencies": {
     "@axe-core/puppeteer": "^4.2.0",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
     "@storybook/node-logger": "6.5.0-alpha.55",
     "@types/jest-image-snapshot": "^4.1.3",
     "core-js": "^3.8.2",
     "jest-image-snapshot": "^4.3.0",
     "regenerator-runtime": "^0.13.7"
   },
   "devDependencies": {
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
     "@types/puppeteer": "^5.4.0"
   },
   "peerDependencies": {

diff --git a/app/angular/package.json b/app/angular/package.json
@@ -51,7 +51,7 @@
     "@storybook/core": "6.5.0-alpha.55",
     "@storybook/core-common": "6.5.0-alpha.55",
     "@storybook/core-events": "6.5.0-alpha.55",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
     "@storybook/docs-tools": "6.5.0-alpha.55",
     "@storybook/node-logger": "6.5.0-alpha.55",
     "@storybook/semver": "^7.3.2",

diff --git a/app/html/package.json b/app/html/package.json
@@ -48,7 +48,7 @@
     "@storybook/addons": "6.5.0-alpha.55",
     "@storybook/core": "6.5.0-alpha.55",
     "@storybook/core-common": "6.5.0-alpha.55",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
     "@storybook/docs-tools": "6.5.0-alpha.55",
     "@storybook/preview-web": "6.5.0-alpha.55",
     "@storybook/store": "6.5.0-alpha.55",

diff --git a/app/preact/package.json b/app/preact/package.json
@@ -49,7 +49,7 @@
     "@storybook/addons": "6.5.0-alpha.55",
     "@storybook/core": "6.5.0-alpha.55",
     "@storybook/core-common": "6.5.0-alpha.55",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
     "@storybook/store": "6.5.0-alpha.55",
     "@types/node": "^14.14.20 || ^16.0.0",
     "@types/webpack-env": "^1.16.0",

diff --git a/app/react/package.json b/app/react/package.json
@@ -53,7 +53,7 @@
     "@storybook/client-logger": "6.5.0-alpha.55",
     "@storybook/core": "6.5.0-alpha.55",
     "@storybook/core-common": "6.5.0-alpha.55",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
     "@storybook/docs-tools": "6.5.0-alpha.55",
     "@storybook/node-logger": "6.5.0-alpha.55",
     "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0",

diff --git a/app/server/package.json b/app/server/package.json
@@ -50,7 +50,7 @@
     "@storybook/client-api": "6.5.0-alpha.55",
     "@storybook/core": "6.5.0-alpha.55",
     "@storybook/core-common": "6.5.0-alpha.55",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
     "@storybook/node-logger": "6.5.0-alpha.55",
     "@storybook/preview-web": "6.5.0-alpha.55",
     "@storybook/store": "6.5.0-alpha.55",

diff --git a/app/svelte/package.json b/app/svelte/package.json
@@ -50,7 +50,7 @@
     "@storybook/client-logger": "6.5.0-alpha.55",
     "@storybook/core": "6.5.0-alpha.55",
     "@storybook/core-common": "6.5.0-alpha.55",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
     "@storybook/docs-tools": "6.5.0-alpha.55",
     "@storybook/node-logger": "6.5.0-alpha.55",
     "@storybook/store": "6.5.0-alpha.55",

diff --git a/app/vue/package.json b/app/vue/package.json
@@ -49,7 +49,7 @@
     "@storybook/client-logger": "6.5.0-alpha.55",
     "@storybook/core": "6.5.0-alpha.55",
     "@storybook/core-common": "6.5.0-alpha.55",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
     "@storybook/docs-tools": "6.5.0-alpha.55",
     "@storybook/store": "6.5.0-alpha.55",
     "@types/node": "^14.14.20 || ^16.0.0",

diff --git a/app/vue3/package.json b/app/vue3/package.json
@@ -48,7 +48,7 @@
     "@storybook/addons": "6.5.0-alpha.55",
     "@storybook/core": "6.5.0-alpha.55",
     "@storybook/core-common": "6.5.0-alpha.55",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
     "@storybook/docs-tools": "6.5.0-alpha.55",
     "@storybook/store": "6.5.0-alpha.55",
     "@types/node": "^14.14.20 || ^16.0.0",

diff --git a/app/web-components/package.json b/app/web-components/package.json
@@ -55,7 +55,7 @@
     "@storybook/client-logger": "6.5.0-alpha.55",
     "@storybook/core": "6.5.0-alpha.55",
     "@storybook/core-common": "6.5.0-alpha.55",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
     "@storybook/docs-tools": "6.5.0-alpha.55",
     "@storybook/preview-web": "6.5.0-alpha.55",
     "@storybook/store": "6.5.0-alpha.55",

diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md
@@ -302,7 +302,7 @@ paths={[
 
 ### Conditional controls
 
-In some cases, it's useful to be able to conditionally exclude a control based on the value of another control. Controls supports basic versions of these use cases with the `addIf` and `removeIf` options, which can take a boolean value, or a string which can refer to the value of another arg.
+In some cases, it's useful to be able to conditionally exclude a control based on the value of another control. Controls supports basic versions of these use cases with the `if`, which can takes a simple query object to determine whether to include the control.
 
 Consider a collection of "advanced" settings that are only visible when the user toggles an "advanced" toggle.
 

diff --git a/docs/snippets/common/component-story-conditional-controls-mutual-exclusion.js.mdx b/docs/snippets/common/component-story-conditional-controls-mutual-exclusion.js.mdx
@@ -6,10 +6,13 @@ export default {
   title: 'Button',
   argTypes: {
     // button can be passed a label or an image, not both
-    label: { control: 'text', removeIf: 'image' },
+    label: {
+      control: 'text',
+      if: { arg: 'image', truthy: false },
+    },
     image: {
       control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
-      removeIf: 'label',
+      if: { arg: 'label', truthy: false },
     },
   },
 };

diff --git a/docs/snippets/common/component-story-conditional-controls-toggle.js.mdx b/docs/snippets/common/component-story-conditional-controls-toggle.js.mdx
@@ -8,9 +8,9 @@ export default {
     label: { control: 'text' }, // always shows
     advanced: { control: 'boolean' },
     // below are only included when advanced is true
-    margin: { control: 'number', addIf: 'advanced' },
-    padding: { control: 'number', addIf: 'advanced' },
-    cornerRadius: { control: 'number', addIf: 'advanced' },
+    margin: { control: 'number', if: { arg: 'advanced' } },
+    padding: { control: 'number', if: { arg: 'advanced' } },
+    cornerRadius: { control: 'number', if: { arg: 'advanced' } },
   },
 };
 ```
diff --git a/examples/official-storybook/stories/addon-controls.stories.tsx b/examples/official-storybook/stories/addon-controls.stories.tsx
@@ -28,37 +28,40 @@ export default {
         ],
       },
     },
-    mutuallyExclusiveA: { control: 'text', removeIf: 'mutuallyExclusiveB' },
-    mutuallyExclusiveB: { control: 'text', removeIf: 'mutuallyExclusiveA' },
+    mutuallyExclusiveA: { control: 'text', if: { arg: 'mutuallyExclusiveB', truthy: false } },
+    mutuallyExclusiveB: { control: 'text', if: { arg: 'mutuallyExclusiveA', truthy: false } },
     colorMode: {
       control: 'boolean',
     },
     dynamicText: {
-      removeIf: 'colorMode',
+      if: { arg: 'colorMode', truthy: false },
       control: 'text',
     },
     dynamicColor: {
-      addIf: 'colorMode',
+      if: { arg: 'colorMode' },
       control: 'color',
     },
     advanced: {
       control: 'boolean',
     },
     margin: {
       control: 'number',
-      addIf: 'advanced',
+      if: { arg: 'advanced' },
     },
     padding: {
       control: 'number',
-      addIf: 'advanced',
+      if: { arg: 'advanced' },
     },
     cornerRadius: {
       control: 'number',
-      addIf: 'advanced',
+      if: { arg: 'advanced' },
     },
     someText: { control: 'text' },
-    subText: { control: 'text', addIf: 'someText' },
-    anotherText: { control: 'text', addIf: 'someText' },
+    subText: { control: 'text', if: { arg: 'someText' } },
+    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' } },
   },
   parameters: {
     chromatic: { disable: true },

diff --git a/lib/addons/package.json b/lib/addons/package.json
@@ -44,7 +44,7 @@
     "@storybook/channels": "6.5.0-alpha.55",
     "@storybook/client-logger": "6.5.0-alpha.55",
     "@storybook/core-events": "6.5.0-alpha.55",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
     "@storybook/router": "6.5.0-alpha.55",
     "@storybook/theming": "6.5.0-alpha.55",
     "@types/webpack-env": "^1.16.0",

diff --git a/lib/api/package.json b/lib/api/package.json
@@ -41,7 +41,7 @@
     "@storybook/channels": "6.5.0-alpha.55",
     "@storybook/client-logger": "6.5.0-alpha.55",
     "@storybook/core-events": "6.5.0-alpha.55",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
     "@storybook/router": "6.5.0-alpha.55",
     "@storybook/semver": "^7.3.2",
     "@storybook/theming": "6.5.0-alpha.55",