Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/_snippets/button-story-click-handler-args.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const Text: Story = {
// The argsToTemplate helper function converts the args to property and event bindings.
// You could also write the template in plain HTML and bind to the component's inputs and outputs yourself:
// <storybook-button ["label"]="label" (onClick)="onClick($event)">
// We don't recommend the latter since it can conflict with how Storybook applies arguments via its controls addon.
// We don't recommend the latter since it can conflict with how Storybook applies arguments via the Controls panel.
// Binding to the component's inputs and outputs yourself will conflict with default values set inside the component's class.
// In edge-case scenarios, you may need to define the template yourself, though.
template: `<storybook-button ${argsToTemplate(args)}></storybook-button>`,
Expand Down
6 changes: 2 additions & 4 deletions docs/_snippets/nextjs-navigation-override-in-story.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@ export default {
},
};

// If you have the actions addon,
// you can interact with the links and see the route change events there
// Interact with the links to see the route change events in the Actions panel.
export const Example = {
parameters: {
nextjs: {
Expand Down Expand Up @@ -44,8 +43,7 @@ export default meta;

type Story = StoryObj<typeof meta>;

// If you have the actions addon,
// you can interact with the links and see the route change events there
// Interact with the links to see the route change events in the Actions panel.
export const Example: Story = {
parameters: {
nextjs: {
Expand Down
6 changes: 2 additions & 4 deletions docs/_snippets/nextjs-router-override-in-story.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ export default {
component: RouterBasedComponent,
};

// If you have the actions addon,
// you can interact with the links and see the route change events there
// Interact with the links to see the route change events in the Actions panel.
export const Example = {
parameters: {
nextjs: {
Expand Down Expand Up @@ -35,8 +34,7 @@ const meta = {
export default meta;
type Story = StoryObj<typeof meta>;

// If you have the actions addon,
// you can interact with the links and see the route change events there
// Interact with the links to see the route change events in the Actions panel.
export const Example: Story = {
parameters: {
nextjs: {
Expand Down
2 changes: 1 addition & 1 deletion docs/api/csf/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ Or even more simply:

{/* prettier-ignore-end */}

Not only are these versions shorter and more accessible to write than their no-args counterparts, but they are also more portable since the code doesn't depend on the actions addon specifically.
Not only are these versions shorter and more accessible to write than their no-args counterparts, but they are also more portable since the code doesn't depend on the actions feature specifically.

For more information on setting up [Docs](../../writing-docs/index.mdx) and [Actions](../../essentials/actions.mdx), see their respective documentation.

Expand Down
4 changes: 2 additions & 2 deletions docs/api/doc-blocks/doc-block-controls.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,8 @@ import { Controls } from '@storybook/addon-docs/blocks';

<Callout variant="info" icon="💡">

This API configures Controls blocks used within docs pages. To configure the Controls addon panel, see the [Controls addon docs](../../essentials/controls.mdx). To configure individual controls, you can specify [argTypes](../arg-types.mdx#control) for each.
This API configures the `Controls` blocks used within docs pages. To configure the Controls panel, see the [feature documentation](../../essentials/controls.mdx). To configure individual controls, specify [argTypes](../arg-types.mdx#control) for each.

</Callout>

### `exclude`
Expand Down
2 changes: 1 addition & 1 deletion docs/configure/user-interface/theming.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ Here's how you might insert a custom `<Canvas />` block:

Some addons require specific theme variables that a Storybook user must add. If you share your theme with the community, make sure to support the official API and other popular addons, so your users have a consistent experience.

For example, the popular Actions addon uses [react-inspector](https://github.com/storybookjs/react-inspector/blob/master/src/styles/themes/chromeLight.tsx), which has themes of its own. Supply additional theme variables to style it like so:
For example, the popular Actions feature uses [react-inspector](https://github.com/storybookjs/react-inspector/blob/master/src/styles/themes/chromeLight.tsx), which has themes of its own. Supply additional theme variables to style it like so:

{/* prettier-ignore-start */}

Expand Down
2 changes: 1 addition & 1 deletion docs/get-started/frameworks/nextjs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,7 @@ module.exports = {

## Next.js routing

[Next.js's router](https://nextjs.org/docs/pages/building-your-application/routing) is automatically stubbed for you so that when the router is interacted with, all of its interactions are automatically logged to the Actions panel if you have the [Storybook actions addon](../../essentials/actions.mdx).
[Next.js's router](https://nextjs.org/docs/pages/building-your-application/routing) is automatically stubbed for you so that when the router is interacted with, all of its interactions are automatically logged to the [Actions panel](../../essentials/actions.mdx).

<Callout>
You should only use `next/router` in the `pages` directory. In the `app` directory, it is necessary to use `next/navigation`.
Expand Down
6 changes: 3 additions & 3 deletions docs/get-started/whats-a-story.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,10 @@ When you installed Storybook, the CLI created example components that demonstrat

![Button story with args](../_assets/get-started/example-button-args.png)

View the rendered `Button` by clicking on it in the Storybook sidebar. Note how the values specified in [`args`](../writing-stories/args.mdx) are used to render the component and match those represented in the [Controls](../essentials/controls.mdx) tab. Using `args` in your stories has additional benefits:
View the rendered `Button` by clicking on it in the Storybook sidebar. Note how the values specified in [`args`](../writing-stories/args.mdx) are used to render the component and match those represented in the [Controls](../essentials/controls.mdx) panel. Using `args` in your stories has additional benefits:

* `Button`'s callbacks are logged into the [Actions](../essentials/actions.mdx) tab. Click to try it.
* `Button`'s arguments are dynamically editable in the Controls tab. Adjust the controls.
* `Button`'s callbacks are logged into the [Actions](../essentials/actions.mdx) panel. Click to try it.
* `Button`'s arguments are dynamically editable in the Controls panel. Adjust the controls.

## Working with stories

Expand Down
4 changes: 3 additions & 1 deletion docs/writing-docs/mdx.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,9 @@ However, cross-linking documentation isn't restricted to documentation pages. Yo
{/*You can also use anchors to target a specific section of a page: */}

<Callout variant="info" icon="💡">
By applying this pattern with the Controls addon, all anchors will be ignored in Canvas based on how Storybook handles URLs to track the args values.

Applying this pattern with the [Controls](../essentials/controls.mdx) feature, all anchors will be ignored in Canvas based on how Storybook handles URLs to track the args values.

</Callout>

## Troubleshooting
Expand Down
4 changes: 2 additions & 2 deletions docs/writing-stories/args.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -115,13 +115,13 @@ You can use args in your stories to configure the component's appearance, simila

## Setting args through the URL

You can also override the set of initial args for the active story by adding an `args` query parameter to the URL. Typically you would use the [Controls addon](../essentials/controls.mdx) to handle this. For example, here's how you could set a `size` and `style` arg in the Storybook's URL:
You can also override the set of initial args for the active story by adding an `args` query parameter to the URL. Typically, you would use [Controls](../essentials/controls.mdx) to handle this. For example, here's how you could set a `size` and `style` arg in the Storybook's URL:

```
?path=/story/avatar--default&args=style:rounded;size:100
```

As a safeguard against [XSS](https://owasp.org/www-community/attacks/xss/) attacks, the arg's keys and values provided in the URL are limited to alphanumeric characters, spaces, underscores, and dashes. Any other types will be ignored and removed from the URL, but you can still use them with the Controls addon and [within your story](#mapping-to-complex-arg-values).
As a safeguard against [XSS](https://owasp.org/www-community/attacks/xss/) attacks, the arg's keys and values provided in the URL are limited to alphanumeric characters, spaces, underscores, and dashes. Any other types will be ignored and removed from the URL, but you can still use them with the Controls panel and [within your story](#mapping-to-complex-arg-values).

The `args` param is always a set of `key: value` pairs delimited with a semicolon `;`. Values will be coerced (cast) to their respective `argTypes` (which may have been automatically inferred). Objects and arrays are supported. Special values `null` and `undefined` can be set by prefixing with a bang `!`. For example, `args=obj.key:val;arr[0]:one;arr[1]:two;nil:!null` will be interpreted as:

Expand Down
2 changes: 1 addition & 1 deletion docs/writing-stories/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ For instance, suppose you wanted to test your Button component against a differe

![Parameters background color](../_assets/writing-stories/parameters-background-colors.png)

This parameter would instruct the backgrounds addon to reconfigure itself whenever a Button story is selected. Most addons are configured via a parameter-based API and can be influenced at a [global](./parameters.mdx#global-parameters), [component](./parameters.mdx#component-parameters) and [story](./parameters.mdx#story-parameters) level.
This parameter would instruct the backgrounds feature to reconfigure itself whenever a Button story is selected. Most features and addons are configured via a parameter-based API and can be influenced at a [global](./parameters.mdx#global-parameters), [component](./parameters.mdx#component-parameters), and [story](./parameters.mdx#story-parameters) level.

### Using decorators

Expand Down
2 changes: 1 addition & 1 deletion docs/writing-stories/parameters.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Parameters are a set of static, named metadata about a story, typically used to
Available parameters are listed in the [parameters API reference](../api/parameters.mdx#available-parameters).
</Callout>

For example, let’s customize the backgrounds addon via a parameter. We’ll use `parameters.backgrounds` to define which backgrounds appear in the backgrounds toolbar when a story is selected.
For example, let’s customize the backgrounds feature via a parameter. We’ll use `parameters.backgrounds` to define which backgrounds appear in the backgrounds toolbar when a story is selected.

## Story parameters

Expand Down
2 changes: 1 addition & 1 deletion docs/writing-stories/stories-for-multiple-components.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -82,4 +82,4 @@ Another option that is more “data”-based is to create a special “story-gen

{/* prettier-ignore-end */}

This approach is a little more complex to setup, but it means you can more easily reuse the `args` to each story in a composite component. It also means that you can alter the args to the component with the Controls addon.
This approach is a little more complex to setup, but it means you can more easily reuse the `args` to each story in a composite component. It also means you can alter the args to the component with the [Controls panel](../essentials/controls.mdx).