From 3dcff54185f0680a8a155be4983a450d275b4a6a Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 13 Dec 2021 16:13:58 +1100 Subject: [PATCH 1/3] First cut at documentation of project arg/argTypes for discussion --- .../react/button-story-project-args-theme.js.mdx | 9 +++++++++ docs/writing-stories/args.md | 16 +++++++++++++++- 2 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 docs/snippets/react/button-story-project-args-theme.js.mdx diff --git a/docs/snippets/react/button-story-project-args-theme.js.mdx b/docs/snippets/react/button-story-project-args-theme.js.mdx new file mode 100644 index 000000000000..da897c5a7829 --- /dev/null +++ b/docs/snippets/react/button-story-project-args-theme.js.mdx @@ -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' }; +``` diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 522d01702e8b..4b8976ca7e9d 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -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 +## 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`: + + + + + + + ## 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. From 25b68d4c43590a5da02c5d1791cf86b709a19ee6 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 20 Dec 2021 15:09:46 +1100 Subject: [PATCH 2/3] Changes from code review --- docs/api/argtypes.md | 20 ++++++++++++++++++- .../button-story-project-args-theme.js.mdx | 0 docs/writing-stories/args.md | 6 +++--- 3 files changed, 22 insertions(+), 4 deletions(-) rename docs/snippets/{react => common}/button-story-project-args-theme.js.mdx (100%) diff --git a/docs/api/argtypes.md b/docs/api/argtypes.md index d8d5e9cf87fe..7b3c20d1582a 100644 --- a/docs/api/argtypes.md +++ b/docs/api/argtypes.md @@ -89,6 +89,24 @@ In particular, this would render a row with a modified description, a type displ 💡 As with other Storybook properties (e.g., args, decorators), you can also override ArgTypes per story basis. +#### Global `argTypes` + +You can also define arg types at the global level; they will apply to every component's stories unless you overwrite them. To do so, export the `argTypes` key in your `preview.js`: + + + + + + + +
+💡 If you define a global arg type for a story that does not have that arg (e.g. if there is no corresponding global arg definition), then the arg type will have no effect. +
+ #### Using argTypes in addons If you want to access the argTypes of the current component inside an addon, you can use the `useArgTypes` hook from the `@storybook/api` package: @@ -101,4 +119,4 @@ If you want to access the argTypes of the current component inside an addon, you ]} /> - \ No newline at end of file + diff --git a/docs/snippets/react/button-story-project-args-theme.js.mdx b/docs/snippets/common/button-story-project-args-theme.js.mdx similarity index 100% rename from docs/snippets/react/button-story-project-args-theme.js.mdx rename to docs/snippets/common/button-story-project-args-theme.js.mdx diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 4b8976ca7e9d..348bad6269c6 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -76,15 +76,15 @@ You can also define args at the component level; they will apply to all the comp -## Project args +## Global 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`: +You can also define args at the global level; they will apply to every component's stories unless you overwrite them. To do so, export the `args` key in your `preview.js`: From 03279e0c681d8a87eb34607ff290edfbe0d20d5e Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Fri, 18 Mar 2022 09:43:33 +1100 Subject: [PATCH 3/3] Update docs/writing-stories/args.md --- docs/writing-stories/args.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 348bad6269c6..9a4ae2fc6aad 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -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), [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. +The `args` object can be defined at the [story](#story-args), [component](#component-args) and [global level](#global-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