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

Jump to bottom

First cut at documentation of project arg/argTypes for discussion #16992

Merged
merged 3 commits into from Mar 22, 2022
Merged

First cut at documentation of project arg/argTypes for discussion #16992

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3dcff54
First cut at documentation of project arg/argTypes for discussion
tmeasday Dec 13, 2021
25b68d4
Changes from code review
tmeasday Dec 20, 2021
03279e0
Update docs/writing-stories/args.md
tmeasday Mar 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 9 additions & 0 deletions docs/snippets/react/button-story-project-args-theme.js.mdx
View file
Open in desktop
@@ -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 changes: 15 additions & 1 deletion docs/writing-stories/args.md
View file
Open in desktop
Expand Up @@ -10,7 +10,7 @@ Learn how and why to write stories in [the introduction](./introduction.md#using

Copy link
Contributor

Choose a reason for hiding this comment

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

Perhaps we should add similar docs for argTypes to https://storybook.js.org/docs/react/api/argtypes?

Copy link
Contributor

Choose a reason for hiding this comment

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

@kylegach sounds reasonable to me!

Copy link
Member Author

Choose a reason for hiding this comment

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

Yeah, I got a bit hung up on the fact that we don't actually document story-level argTypes there (I guess argTypes at the story level generally speaking don't make a heap of sense, although it can be done). But I'll add something.

## 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.
tmeasday marked this conversation as resolved.
Show resolved Hide resolved

## Story args

Expand Down Expand Up @@ -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
Copy link
Contributor

Choose a reason for hiding this comment

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

I personally like the clarity of "project" rather than "global" here, but we currently use the term "global" for parameters and decorators.

Copy link
Member Author

Choose a reason for hiding this comment

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

Yes! We changed this internally in 6.4, as it was super confusing to have "global args" and "globals" (which once upon a time were actually called globalArgs haha).

We should transition to using project everywhere I think. What's your recommendation in the meantime?

Copy link
Contributor

Choose a reason for hiding this comment

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

I think this PR should use "global". Then we can make another PR to update it to "project" everywhere, possibly only including that change in 6.5+.


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