Merge pull request #17536 from storybookjs/11984-conditional-controls

Controls: Add conditional controls
storybookjs · Mar 23, 2022 · f968dba · f968dba
2 parents 93f50a7 + 1a37df7
commit f968dba
Show file tree

Hide file tree

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

diff --git a/addons/actions/package.json b/addons/actions/package.json
@@ -45,7 +45,7 @@
     "@storybook/api": "6.5.0-alpha.49",
     "@storybook/components": "6.5.0-alpha.49",
     "@storybook/core-events": "6.5.0-alpha.49",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/csf": "0.0.2--canary.507502b.0",
     "@storybook/theming": "6.5.0-alpha.49",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",

diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json
@@ -50,7 +50,7 @@
     "@storybook/client-logger": "6.5.0-alpha.49",
     "@storybook/components": "6.5.0-alpha.49",
     "@storybook/core-events": "6.5.0-alpha.49",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/csf": "0.0.2--canary.507502b.0",
     "@storybook/theming": "6.5.0-alpha.49",
     "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.49",
     "@storybook/components": "6.5.0-alpha.49",
     "@storybook/core-common": "6.5.0-alpha.49",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/csf": "0.0.2--canary.507502b.0",
     "@storybook/node-logger": "6.5.0-alpha.49",
     "@storybook/store": "6.5.0-alpha.49",
     "@storybook/theming": "6.5.0-alpha.49",

diff --git a/addons/docs/docs/multiframework.md b/addons/docs/docs/multiframework.md
@@ -53,6 +53,8 @@ export interface ArgType {
   name?: string;
   description?: string;
   defaultValue?: any;
+  addIf?: string;
+  removeIf?: string;
   [key: string]: any;
 }
 
@@ -106,7 +108,7 @@ The input is the story function and the story context (id, parameters, args, etc
 
 ## Dynamic source rendering
 
-With the release of Storybook 6.0, we've improved how stories are rendered in the [Source doc block](https://storybook.js.org/docs/react/writing-docs/doc-blocks#source). One of such improvements is the `dynamic` source type, which renders a snippet based on the output the story function. 
+With the release of Storybook 6.0, we've improved how stories are rendered in the [Source doc block](https://storybook.js.org/docs/react/writing-docs/doc-blocks#source). One of such improvements is the `dynamic` source type, which renders a snippet based on the output the story function.
 
 This dynamic rendering is framework-specific, meaning it needs a custom implementation for each framework.
 
@@ -151,7 +153,7 @@ import { jsxDecorator } from './jsxDecorator';
 export const decorators = [jsxDecorator];
 ```
 
-This configures the `jsxDecorator` to be run on every story. 
+This configures the `jsxDecorator` to be run on every story.
 
 <div class="aside">
  To learn more and see how it's implemented in context, check out <a href="https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/react/jsxDecorator.tsx">the code</a> .

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

diff --git a/addons/interactions/package.json b/addons/interactions/package.json
@@ -46,7 +46,7 @@
     "@storybook/components": "6.5.0-alpha.49",
     "@storybook/core-common": "6.5.0-alpha.49",
     "@storybook/core-events": "6.5.0-alpha.49",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/csf": "0.0.2--canary.507502b.0",
     "@storybook/instrumenter": "6.5.0-alpha.49",
     "@storybook/theming": "6.5.0-alpha.49",
     "core-js": "^3.8.2",

diff --git a/addons/links/package.json b/addons/links/package.json
@@ -44,7 +44,7 @@
     "@storybook/addons": "6.5.0-alpha.49",
     "@storybook/client-logger": "6.5.0-alpha.49",
     "@storybook/core-events": "6.5.0-alpha.49",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/csf": "0.0.2--canary.507502b.0",
     "@storybook/router": "6.5.0-alpha.49",
     "@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.49",
     "@storybook/components": "6.5.0-alpha.49",
     "@storybook/core-events": "6.5.0-alpha.49",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/csf": "0.0.2--canary.507502b.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.49",
     "@storybook/components": "6.5.0-alpha.49",
     "@storybook/core-events": "6.5.0-alpha.49",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/csf": "0.0.2--canary.507502b.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.49",
     "@storybook/core-client": "6.5.0-alpha.49",
     "@storybook/core-common": "6.5.0-alpha.49",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/csf": "0.0.2--canary.507502b.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.87bc651.0",
+    "@storybook/csf": "0.0.2--canary.507502b.0",
     "@storybook/node-logger": "6.5.0-alpha.49",
     "@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.87bc651.0",
+    "@storybook/csf": "0.0.2--canary.507502b.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.49",
     "@storybook/core-common": "6.5.0-alpha.49",
     "@storybook/core-events": "6.5.0-alpha.49",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/csf": "0.0.2--canary.507502b.0",
     "@storybook/docs-tools": "6.5.0-alpha.49",
     "@storybook/node-logger": "6.5.0-alpha.49",
     "@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.49",
     "@storybook/core": "6.5.0-alpha.49",
     "@storybook/core-common": "6.5.0-alpha.49",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/csf": "0.0.2--canary.507502b.0",
     "@storybook/docs-tools": "6.5.0-alpha.49",
     "@storybook/preview-web": "6.5.0-alpha.49",
     "@storybook/store": "6.5.0-alpha.49",

diff --git a/app/preact/package.json b/app/preact/package.json
@@ -49,7 +49,7 @@
     "@storybook/addons": "6.5.0-alpha.49",
     "@storybook/core": "6.5.0-alpha.49",
     "@storybook/core-common": "6.5.0-alpha.49",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/csf": "0.0.2--canary.507502b.0",
     "@storybook/store": "6.5.0-alpha.49",
     "@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.49",
     "@storybook/core": "6.5.0-alpha.49",
     "@storybook/core-common": "6.5.0-alpha.49",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/csf": "0.0.2--canary.507502b.0",
     "@storybook/docs-tools": "6.5.0-alpha.49",
     "@storybook/node-logger": "6.5.0-alpha.49",
     "@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.49",
     "@storybook/core": "6.5.0-alpha.49",
     "@storybook/core-common": "6.5.0-alpha.49",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/csf": "0.0.2--canary.507502b.0",
     "@storybook/node-logger": "6.5.0-alpha.49",
     "@storybook/preview-web": "6.5.0-alpha.49",
     "@storybook/store": "6.5.0-alpha.49",

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

diff --git a/app/vue/package.json b/app/vue/package.json
@@ -49,7 +49,7 @@
     "@storybook/client-logger": "6.5.0-alpha.49",
     "@storybook/core": "6.5.0-alpha.49",
     "@storybook/core-common": "6.5.0-alpha.49",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/csf": "0.0.2--canary.507502b.0",
     "@storybook/docs-tools": "6.5.0-alpha.49",
     "@storybook/store": "6.5.0-alpha.49",
     "@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.49",
     "@storybook/core": "6.5.0-alpha.49",
     "@storybook/core-common": "6.5.0-alpha.49",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/csf": "0.0.2--canary.507502b.0",
     "@storybook/docs-tools": "6.5.0-alpha.49",
     "@storybook/store": "6.5.0-alpha.49",
     "@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.49",
     "@storybook/core": "6.5.0-alpha.49",
     "@storybook/core-common": "6.5.0-alpha.49",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/csf": "0.0.2--canary.507502b.0",
     "@storybook/docs-tools": "6.5.0-alpha.49",
     "@storybook/preview-web": "6.5.0-alpha.49",
     "@storybook/store": "6.5.0-alpha.49",

diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md
@@ -300,6 +300,34 @@ paths={[
 
 </div>
 
+### 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.
+
+Consider a collection of "advanced" settings that are only visible when the user toggles an "advanced" toggle.
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/component-story-conditional-controls-toggle.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+Or consider a constraint where if the user sets one control value, it doesn't make sense for the user to be able to set another value.
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/component-story-conditional-controls-mutual-exclusion.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
 ## Hide NoControls warning
 
 If you don't plan to handle the control args inside your Story, you can remove the warning with:

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
@@ -0,0 +1,16 @@
+```js
+// Button.stories.js
+import { Button } from './Button';
+export default {
+  component: Button,
+  title: 'Button',
+  argTypes: {
+    // button can be passed a label or an image, not both
+    label: { control: 'text', removeIf: 'image' },
+    image: {
+      control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
+      removeIf: 'label',
+    },
+  },
+};
+```
diff --git a/docs/snippets/common/component-story-conditional-controls-toggle.js.mdx b/docs/snippets/common/component-story-conditional-controls-toggle.js.mdx
@@ -0,0 +1,16 @@
+```js
+// Button.stories.js
+import { Button } from './Button';
+export default {
+  component: Button,
+  title: 'Button',
+  argTypes: {
+    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' },
+  },
+};
+```
diff --git a/docs/snippets/common/component-story-disable-controls.js.mdx b/docs/snippets/common/component-story-disable-controls.js.mdx
@@ -5,9 +5,9 @@ import { YourComponent } from './YourComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
   argTypes: {
@@ -19,4 +19,4 @@ export default {
     },
   },
 };
-```
+```
diff --git a/docs/snippets/common/component-story-disable-controls.mdx.mdx b/docs/snippets/common/component-story-disable-controls.mdx.mdx
@@ -9,10 +9,10 @@ import { YourComponent } from './YourComponent'
   title="YourComponent"
   component={YourComponent} 
   argTypes={{
-    foo:{
-      table:{
+    foo: {
+      table: {
         disable: true,
       }
     }
   }} />
-```
+```
diff --git a/examples/official-storybook/stories/addon-controls.stories.tsx b/examples/official-storybook/stories/addon-controls.stories.tsx
@@ -28,6 +28,37 @@ export default {
         ],
       },
     },
+    mutuallyExclusiveA: { control: 'text', removeIf: 'mutuallyExclusiveB' },
+    mutuallyExclusiveB: { control: 'text', removeIf: 'mutuallyExclusiveA' },
+    colorMode: {
+      control: 'boolean',
+    },
+    dynamicText: {
+      removeIf: 'colorMode',
+      control: 'text',
+    },
+    dynamicColor: {
+      addIf: 'colorMode',
+      control: 'color',
+    },
+    advanced: {
+      control: 'boolean',
+    },
+    margin: {
+      control: 'number',
+      addIf: 'advanced',
+    },
+    padding: {
+      control: 'number',
+      addIf: 'advanced',
+    },
+    cornerRadius: {
+      control: 'number',
+      addIf: 'advanced',
+    },
+    someText: { control: 'text' },
+    subText: { control: 'text', addIf: 'someText' },
+    anotherText: { control: 'text', addIf: 'someText' },
   },
   parameters: {
     chromatic: { disable: true },