From 3e6fb8d81933031a5a58cb20a0dd489b1ac9f594 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Mon, 31 Jul 2023 14:32:20 +0100 Subject: [PATCH 1/2] Adds missing snippets args page --- .../button-story-project-args-theme.js.mdx | 11 +++++++++++ .../button-story-project-args-theme.ts.mdx | 16 ++++++++++++++++ 2 files changed, 27 insertions(+) create mode 100644 docs/snippets/common/button-story-project-args-theme.js.mdx create mode 100644 docs/snippets/common/button-story-project-args-theme.ts.mdx diff --git a/docs/snippets/common/button-story-project-args-theme.js.mdx b/docs/snippets/common/button-story-project-args-theme.js.mdx new file mode 100644 index 000000000000..ff852cd2da40 --- /dev/null +++ b/docs/snippets/common/button-story-project-args-theme.js.mdx @@ -0,0 +1,11 @@ +```js +// .storybook/preview.js + +export default { + // All stories expect a theme arg + argTypes: { theme: { control: 'select', options: ['light', 'dark'] } }, + + // The default value of the theme arg to all stories + args: { theme: 'light' }, +}; +``` diff --git a/docs/snippets/common/button-story-project-args-theme.ts.mdx b/docs/snippets/common/button-story-project-args-theme.ts.mdx new file mode 100644 index 000000000000..d9f6529a08d7 --- /dev/null +++ b/docs/snippets/common/button-story-project-args-theme.ts.mdx @@ -0,0 +1,16 @@ +```ts +// .storybook/preview.ts + +// Replace your-framework with the framework you are using (e.g., react, vue3) +import { Preview } from '@storybook/your-framework'; + +const preview: Preview = { + // All stories expect a theme arg + argTypes: { theme: { control: 'select', options: ['light', 'dark'] } }, + + // The default value of the theme arg to all stories + args: { theme: 'light' }, +}; + +export default preview; +``` From 50a7d8581dbc21f3142d940cdf8f0597912ffd80 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Tue, 1 Aug 2023 10:47:10 -0600 Subject: [PATCH 2/2] Further updates - Rename snippets to match naming schema - Fix incorrect framing for example - Add disclaimer that globals is probably a better option --- docs/snippets/common/args-in-preview.js.mdx | 8 ++++++++ docs/snippets/common/args-in-preview.ts-4-9.mdx | 13 +++++++++++++ docs/snippets/common/args-in-preview.ts.mdx | 13 +++++++++++++ .../button-story-project-args-theme.js.mdx | 11 ----------- .../button-story-project-args-theme.ts.mdx | 16 ---------------- docs/writing-stories/args.md | 12 +++++++++--- 6 files changed, 43 insertions(+), 30 deletions(-) create mode 100644 docs/snippets/common/args-in-preview.js.mdx create mode 100644 docs/snippets/common/args-in-preview.ts-4-9.mdx create mode 100644 docs/snippets/common/args-in-preview.ts.mdx delete mode 100644 docs/snippets/common/button-story-project-args-theme.js.mdx delete mode 100644 docs/snippets/common/button-story-project-args-theme.ts.mdx diff --git a/docs/snippets/common/args-in-preview.js.mdx b/docs/snippets/common/args-in-preview.js.mdx new file mode 100644 index 000000000000..621cd5a1d231 --- /dev/null +++ b/docs/snippets/common/args-in-preview.js.mdx @@ -0,0 +1,8 @@ +```js +// .storybook/preview.js + +export default { + // The default value of the theme arg for all stories + args: { theme: 'light' }, +}; +``` diff --git a/docs/snippets/common/args-in-preview.ts-4-9.mdx b/docs/snippets/common/args-in-preview.ts-4-9.mdx new file mode 100644 index 000000000000..ec2bae9e0b56 --- /dev/null +++ b/docs/snippets/common/args-in-preview.ts-4-9.mdx @@ -0,0 +1,13 @@ +```ts +// .storybook/preview.ts + +// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.) +import { Preview } from '@storybook/your-renderer'; + +const preview = { + // The default value of the theme arg for all stories + args: { theme: 'light' }, +} satisfies Preview; + +export default preview; +``` diff --git a/docs/snippets/common/args-in-preview.ts.mdx b/docs/snippets/common/args-in-preview.ts.mdx new file mode 100644 index 000000000000..94fc08255312 --- /dev/null +++ b/docs/snippets/common/args-in-preview.ts.mdx @@ -0,0 +1,13 @@ +```ts +// .storybook/preview.ts + +// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.) +import { Preview } from '@storybook/your-renderer'; + +const preview: Preview = { + // The default value of the theme arg for all stories + args: { theme: 'light' }, +}; + +export default preview; +``` diff --git a/docs/snippets/common/button-story-project-args-theme.js.mdx b/docs/snippets/common/button-story-project-args-theme.js.mdx deleted file mode 100644 index ff852cd2da40..000000000000 --- a/docs/snippets/common/button-story-project-args-theme.js.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```js -// .storybook/preview.js - -export default { - // All stories expect a theme arg - argTypes: { theme: { control: 'select', options: ['light', 'dark'] } }, - - // The default value of the theme arg to all stories - args: { theme: 'light' }, -}; -``` diff --git a/docs/snippets/common/button-story-project-args-theme.ts.mdx b/docs/snippets/common/button-story-project-args-theme.ts.mdx deleted file mode 100644 index d9f6529a08d7..000000000000 --- a/docs/snippets/common/button-story-project-args-theme.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - // All stories expect a theme arg - argTypes: { theme: { control: 'select', options: ['light', 'dark'] } }, - - // The default value of the theme arg to all stories - args: { theme: 'light' }, -}; - -export default preview; -``` diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 4d3a53652ff7..807797e5675f 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -91,19 +91,25 @@ You can also define args at the component level; they will apply to all the comp ## Global args -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`: +You can also define args at the global level; they will apply to every component's stories unless you overwrite them. To do so, define the `args` property in the default export of `preview.js`: +
+ +💡 For most uses of global args, [globals](../essentials/toolbars-and-globals.md) are a better tool for defining globally-applied settings, such as a theme. Using globals enables users to change the value with the toolbar menu. + +
+ ## 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.