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

Minor docs tweaks

Browse Source
This commit is contained in:
jonniebigodes 2022-07-07 21:15:32 +01:00
parent 9f0735952e
commit 297426dfbd
3 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/api/csf.md
View File

@ -155,6 +155,28 @@ A good use case for the `play` function is a form component. With previous Story
When the story renders in the UI, Storybook executes each step defined in the `play` function and runs the assertions without the need for user interaction.
## Custom render functions
Starting in Storybook 6.4, you can write your stories as JavaScript objects, reducing the boilerplate code you need to generate to test your components, thus improving functionality and usability. `Render` functions are helpful methods to give you additional control over how the story renders. For example, if you were writing a story as an object and you wanted to specify how your component should render, you could write the following:
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'react/component-story-with-custom-render-function.js.mdx',
'react/component-story-with-custom-render-function.ts.mdx',
'angular/component-story-with-custom-render-function.ts.mdx',
'vue/component-story-with-custom-render-function.js.mdx',
'vue/component-story-with-custom-render-function.ts.mdx',
'preact/component-story-with-custom-render-function.js.mdx',
'web-components/component-story-with-custom-render-function.js.mdx',
]}
/>
<!-- prettier-ignore-end -->
When Storybook loads this story, it will detect the existence of a `render` function and adjust the component rendering accordingly based on what's defined.
## Storybook export vs. name handling
Storybook handles named exports and the `name` option slightly differently. When should you use one vs. the other?

5
docs/writing-stories/introduction.md
View File

@ -163,11 +163,6 @@ Refine this pattern by introducing `args` for your component's stories. It reduc
<!-- prettier-ignore-end -->
<div class="aside">
💡 `Template.bind({})` is a [standard JavaScript technique](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) for making a copy of a function. We copy the `Template` so each exported story can set its own properties on it.
</div>
By introducing args into your component's stories, you're not only reducing the amount of code you need to write, but you're also decreasing data duplication, as shown by spreading the `Primary` story's args into the other stories.

6
docs/writing-stories/play-function.md
View File

@ -55,6 +55,12 @@ Storybook's `play` functions are small code snippets that run once the story fin
<!-- prettier-ignore-end -->
<div class="aside">
💡 See the [Interaction testing documentation](../writing-tests/interaction-testing.md#api-for-user-events) for an overview of the available API events.
</div>
When Storybook finishes rendering the story, it executes the steps defined within the `play` function, interacting with the component and filling the form's information. All of this without the need for user intervention. If you check your `Interactions` panel, you'll see the step-by-step flow.
## Composing stories