GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-03 05:04:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

First cut at documentation of project arg/argTypes for discussion

Browse Source
This commit is contained in:
Tom Coleman 2021-12-13 16:13:58 +11:00
parent 3e5d6601ba
commit 3dcff54185
2 changed files with 24 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
docs/snippets/react/button-story-project-args-theme.js.mdx Normal file
View File

@ -0,0 +1,9 @@
```js
// preview.js
// All stories expect a theme arg
export const argTypes = { theme: { control: { options: ['light', 'dark'] } } };
// The default value of the theme arg to all stories
export const args = { theme: 'light' };
```

16
docs/writing-stories/args.md
View File

@ -10,7 +10,7 @@ Learn how and why to write stories in [the introduction](./introduction.md#using
## Args object
The `args` object can be defined at the [story](#story-args) and [component level](#component-args). It is a JSON serializable object composed of string keys with matching valid value types that can be passed into a component for your framework.
The `args` object can be defined at the [story](#story-args), [component](#component-args) and [project level](#project-args). It is a JSON serializable object composed of string keys with matching valid value types that can be passed into a component for your framework.
## Story args
@ -76,6 +76,20 @@ You can also define args at the component level; they will apply to all the comp
<!-- prettier-ignore-end -->
## Project args
You can also define args at the project level; they will apply to every component's stories unless you overwrite them. To do so, export the `args` key in your `preview.js`:
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'react/button-story-project-args-theme.js.mdx',
]}
/>
<!-- prettier-ignore-end -->
## Args composition
You can separate the arguments to a story to compose in other stories. Here's how you can combine args for multiple stories of the same component.