Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Controls: Add conditional controls #17536

Merged
merged 11 commits into from
Mar 23, 2022
Merged

Controls: Add conditional controls #17536

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
44c9249
Bump @storybook/csf for conditional args
shilman Feb 18, 2022
7bc294d
Fix bug with new version of CSF library
shilman Feb 18, 2022
4194981
Controls: Add conditional args, docs, examples
shilman Feb 18, 2022
5fbdb0a
Conditional args: Rename include/exclude to add/remove, add tests
shilman Feb 24, 2022
9264f0d
Merge branch 'next' into 11984-conditional-controls
shilman Feb 24, 2022
24f340c
Merge branch 'next' into 11984-conditional-controls
shilman Feb 28, 2022
21b6e67
Merge branch 'next' into 11984-conditional-controls
shilman Mar 14, 2022
9f95f68
Fix csf/lock versions
shilman Mar 14, 2022
41d9677
Fix bad merge
shilman Mar 14, 2022
4bb108f
Merge branch 'next' into 11984-conditional-controls
shilman Mar 23, 2022
1a37df7
Restore table.disable for now
shilman Mar 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions MIGRATION.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

- [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
- [CSF3 auto-title redundant filename](#csf3-auto-title-redundant-filename)
- [6.5 Deprecations](#65-deprecations)
- [Improved args disabling](#improved-args-disabling)
- [From version 6.3.x to 6.4.0](#from-version-63x-to-640)
- [Automigrate](#automigrate)
- [CRA5 upgrade](#cra5-upgrade)
Expand Down Expand Up @@ -207,6 +209,21 @@ Since CSF3 is experimental, we are introducing this technically breaking change
export default { title: 'Atoms/Button/Button' };
```

### 6.5 Deprecations

#### Improved args disabling

We've simplified disabling arg display in 6.5 by replacing the `table.disable` property with `includeIf`/`excludeIf` property:

```js
// before
const argTypes = { foo: { table: { disable: true } } };
// after
const argTypes = { foo: { includeIf: false } };
```

In addition to being one less level of nesting in the ArgType declaration, `includeIf`/`excludeIf` can also accept the name of another arg (a string) can conditionally include/exclude the arg based on the runtime value of the other arg.

## From version 6.3.x to 6.4.0

### Automigrate
Expand Down
2 changes: 1 addition & 1 deletion addons/a11y/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
"@storybook/client-logger": "6.5.0-alpha.39",
"@storybook/components": "6.5.0-alpha.39",
"@storybook/core-events": "6.5.0-alpha.39",
"@storybook/csf": "0.0.2--canary.87bc651.0",
"@storybook/csf": "0.0.2--canary.789b78e.0",
"@storybook/theming": "6.5.0-alpha.39",
"axe-core": "^4.2.0",
"core-js": "^3.8.2",
Expand Down
2 changes: 1 addition & 1 deletion addons/actions/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
"@storybook/api": "6.5.0-alpha.39",
"@storybook/components": "6.5.0-alpha.39",
"@storybook/core-events": "6.5.0-alpha.39",
"@storybook/csf": "0.0.2--canary.87bc651.0",
"@storybook/csf": "0.0.2--canary.789b78e.0",
"@storybook/theming": "6.5.0-alpha.39",
"core-js": "^3.8.2",
"fast-deep-equal": "^3.1.3",
Expand Down
2 changes: 1 addition & 1 deletion addons/backgrounds/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
"@storybook/client-logger": "6.5.0-alpha.39",
"@storybook/components": "6.5.0-alpha.39",
"@storybook/core-events": "6.5.0-alpha.39",
"@storybook/csf": "0.0.2--canary.87bc651.0",
"@storybook/csf": "0.0.2--canary.789b78e.0",
"@storybook/theming": "6.5.0-alpha.39",
"core-js": "^3.8.2",
"global": "^4.4.0",
Expand Down
2 changes: 1 addition & 1 deletion addons/controls/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ export default {

export const CustomControls = (args) => <Button {...args} />;
CustomControls.argTypes = {
borderWidth: { table: { disable: true } },
borderWidth: { excludeIf: true } },
label: { control: { disable: true } },
};
```
Expand Down
2 changes: 1 addition & 1 deletion addons/controls/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
"@storybook/client-logger": "6.5.0-alpha.39",
"@storybook/components": "6.5.0-alpha.39",
"@storybook/core-common": "6.5.0-alpha.39",
"@storybook/csf": "0.0.2--canary.87bc651.0",
"@storybook/csf": "0.0.2--canary.789b78e.0",
"@storybook/node-logger": "6.5.0-alpha.39",
"@storybook/store": "6.5.0-alpha.39",
"@storybook/theming": "6.5.0-alpha.39",
Expand Down
6 changes: 4 additions & 2 deletions addons/docs/docs/multiframework.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@ export interface ArgType {
name?: string;
description?: string;
defaultValue?: any;
includeIf?: string | boolean;
excludeIf?: string | boolean;
[key: string]: any;
}

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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> .
Expand Down
2 changes: 1 addition & 1 deletion addons/docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
"@storybook/components": "6.5.0-alpha.39",
"@storybook/core": "6.5.0-alpha.39",
"@storybook/core-events": "6.5.0-alpha.39",
"@storybook/csf": "0.0.2--canary.87bc651.0",
"@storybook/csf": "0.0.2--canary.789b78e.0",
"@storybook/csf-tools": "6.5.0-alpha.39",
"@storybook/node-logger": "6.5.0-alpha.39",
"@storybook/postinstall": "6.5.0-alpha.39",
Expand Down
2 changes: 1 addition & 1 deletion addons/interactions/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
"@storybook/components": "6.5.0-alpha.39",
"@storybook/core-common": "6.5.0-alpha.39",
"@storybook/core-events": "6.5.0-alpha.39",
"@storybook/csf": "0.0.2--canary.87bc651.0",
"@storybook/csf": "0.0.2--canary.789b78e.0",
"@storybook/instrumenter": "6.5.0-alpha.39",
"@storybook/theming": "6.5.0-alpha.39",
"global": "^4.4.0",
Expand Down
2 changes: 1 addition & 1 deletion addons/links/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
"@storybook/addons": "6.5.0-alpha.39",
"@storybook/client-logger": "6.5.0-alpha.39",
"@storybook/core-events": "6.5.0-alpha.39",
"@storybook/csf": "0.0.2--canary.87bc651.0",
"@storybook/csf": "0.0.2--canary.789b78e.0",
"@storybook/router": "6.5.0-alpha.39",
"@types/qs": "^6.9.5",
"core-js": "^3.8.2",
Expand Down
2 changes: 1 addition & 1 deletion addons/measure/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
"@storybook/client-logger": "6.5.0-alpha.39",
"@storybook/components": "6.5.0-alpha.39",
"@storybook/core-events": "6.5.0-alpha.39",
"@storybook/csf": "0.0.2--canary.87bc651.0",
"@storybook/csf": "0.0.2--canary.789b78e.0",
"core-js": "^3.8.2",
"global": "^4.4.0"
},
Expand Down
2 changes: 1 addition & 1 deletion addons/outline/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
"@storybook/client-logger": "6.5.0-alpha.39",
"@storybook/components": "6.5.0-alpha.39",
"@storybook/core-events": "6.5.0-alpha.39",
"@storybook/csf": "0.0.2--canary.87bc651.0",
"@storybook/csf": "0.0.2--canary.789b78e.0",
"core-js": "^3.8.2",
"global": "^4.4.0",
"regenerator-runtime": "^0.13.7",
Expand Down
2 changes: 1 addition & 1 deletion addons/storyshots/storyshots-core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
"@storybook/core": "6.5.0-alpha.39",
"@storybook/core-client": "6.5.0-alpha.39",
"@storybook/core-common": "6.5.0-alpha.39",
"@storybook/csf": "0.0.2--canary.87bc651.0",
"@storybook/csf": "0.0.2--canary.789b78e.0",
"@types/glob": "^7.1.3",
"@types/jest": "^26.0.16",
"@types/jest-specific-snapshot": "^0.5.3",
Expand Down
4 changes: 2 additions & 2 deletions addons/storyshots/storyshots-puppeteer/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.789b78e.0",
"@storybook/node-logger": "6.5.0-alpha.39",
"@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.789b78e.0",
"@types/puppeteer": "^5.4.0"
},
"peerDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion app/angular/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
"@storybook/core": "6.5.0-alpha.39",
"@storybook/core-common": "6.5.0-alpha.39",
"@storybook/core-events": "6.5.0-alpha.39",
"@storybook/csf": "0.0.2--canary.87bc651.0",
"@storybook/csf": "0.0.2--canary.789b78e.0",
"@storybook/node-logger": "6.5.0-alpha.39",
"@storybook/semver": "^7.3.2",
"@storybook/store": "6.5.0-alpha.39",
Expand Down
2 changes: 1 addition & 1 deletion app/html/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
"@storybook/client-api": "6.5.0-alpha.39",
"@storybook/core": "6.5.0-alpha.39",
"@storybook/core-common": "6.5.0-alpha.39",
"@storybook/csf": "0.0.2--canary.87bc651.0",
"@storybook/csf": "0.0.2--canary.789b78e.0",
"@storybook/preview-web": "6.5.0-alpha.39",
"@storybook/store": "6.5.0-alpha.39",
"@types/node": "^14.14.20 || ^16.0.0",
Expand Down
2 changes: 1 addition & 1 deletion app/preact/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
"@storybook/addons": "6.5.0-alpha.39",
"@storybook/core": "6.5.0-alpha.39",
"@storybook/core-common": "6.5.0-alpha.39",
"@storybook/csf": "0.0.2--canary.87bc651.0",
"@storybook/csf": "0.0.2--canary.789b78e.0",
"@storybook/store": "6.5.0-alpha.39",
"@types/node": "^14.14.20 || ^16.0.0",
"@types/webpack-env": "^1.16.0",
Expand Down
2 changes: 1 addition & 1 deletion app/react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
"@storybook/addons": "6.5.0-alpha.39",
"@storybook/core": "6.5.0-alpha.39",
"@storybook/core-common": "6.5.0-alpha.39",
"@storybook/csf": "0.0.2--canary.87bc651.0",
"@storybook/csf": "0.0.2--canary.789b78e.0",
"@storybook/node-logger": "6.5.0-alpha.39",
"@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0",
"@storybook/semver": "^7.3.2",
Expand Down
2 changes: 1 addition & 1 deletion app/server/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
"@storybook/client-api": "6.5.0-alpha.39",
"@storybook/core": "6.5.0-alpha.39",
"@storybook/core-common": "6.5.0-alpha.39",
"@storybook/csf": "0.0.2--canary.87bc651.0",
"@storybook/csf": "0.0.2--canary.789b78e.0",
"@storybook/node-logger": "6.5.0-alpha.39",
"@storybook/preview-web": "6.5.0-alpha.39",
"@storybook/store": "6.5.0-alpha.39",
Expand Down
2 changes: 1 addition & 1 deletion app/svelte/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
"@storybook/addons": "6.5.0-alpha.39",
"@storybook/core": "6.5.0-alpha.39",
"@storybook/core-common": "6.5.0-alpha.39",
"@storybook/csf": "0.0.2--canary.87bc651.0",
"@storybook/csf": "0.0.2--canary.789b78e.0",
"@storybook/store": "6.5.0-alpha.39",
"core-js": "^3.8.2",
"global": "^4.4.0",
Expand Down
2 changes: 1 addition & 1 deletion app/vue/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
"@storybook/addons": "6.5.0-alpha.39",
"@storybook/core": "6.5.0-alpha.39",
"@storybook/core-common": "6.5.0-alpha.39",
"@storybook/csf": "0.0.2--canary.87bc651.0",
"@storybook/csf": "0.0.2--canary.789b78e.0",
"@storybook/store": "6.5.0-alpha.39",
"@types/node": "^14.14.20 || ^16.0.0",
"@types/webpack-env": "^1.16.0",
Expand Down
2 changes: 1 addition & 1 deletion app/vue3/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
"@storybook/addons": "6.5.0-alpha.39",
"@storybook/core": "6.5.0-alpha.39",
"@storybook/core-common": "6.5.0-alpha.39",
"@storybook/csf": "0.0.2--canary.87bc651.0",
"@storybook/csf": "0.0.2--canary.789b78e.0",
"@storybook/store": "6.5.0-alpha.39",
"@types/node": "^14.14.20 || ^16.0.0",
"@types/webpack-env": "^1.16.0",
Expand Down
2 changes: 1 addition & 1 deletion app/web-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
"@storybook/client-api": "6.5.0-alpha.39",
"@storybook/core": "6.5.0-alpha.39",
"@storybook/core-common": "6.5.0-alpha.39",
"@storybook/csf": "0.0.2--canary.87bc651.0",
"@storybook/csf": "0.0.2--canary.789b78e.0",
"@storybook/preview-web": "6.5.0-alpha.39",
"@storybook/store": "6.5.0-alpha.39",
"@types/node": "^14.14.20 || ^16.0.0",
Expand Down
30 changes: 29 additions & 1 deletion docs/essentials/controls.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 `enableIf` and `disableIf` options, which can take a boolean value, or a string which can refer to the value of another arg.
tmeasday marked this conversation as resolved.
Show resolved Hide resolved

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:
Expand Down Expand Up @@ -348,4 +376,4 @@ Consider the following snippet to force required args first:
]}
/>

<!-- prettier-ignore-end -->
<!-- prettier-ignore-end -->
16 changes: 16 additions & 0 deletions docs/snippets/common/component-story-conditional-controls-mutual-exclusion.js.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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', excludeIf: 'image' },
image: {
control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
excludeIf: 'label',
},
},
};
```
16 changes: 16 additions & 0 deletions docs/snippets/common/component-story-conditional-controls-toggle.js.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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' },
yannbf marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So, users have to opt into the advanced controls in this case right?

// below are only included when advanced is true
margin: { control: 'number', includeIf: 'advanced' },
padding: { control: 'number', includeIf: 'advanced' },
cornerRadius: { control: 'number', includeIf: 'advanced' },
},
};
```
12 changes: 5 additions & 7 deletions docs/snippets/common/component-story-disable-controls.js.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,16 @@ 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: {
// foo is the property we want to remove from the UI
foo: {
table: {
disable: true,
},
excludeIf: true,
},
},
};
```
```
6 changes: 2 additions & 4 deletions docs/snippets/common/component-story-disable-controls.mdx.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,7 @@ import { YourComponent } from './YourComponent'
component={YourComponent}
argTypes={{
foo:{
table:{
disable: true,
}
excludeIf: true,
}
}} />
```
```
Loading