From 8471b60aae9f0b22d96a6fca454cf5ad729ba684 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Fri, 8 Aug 2025 11:32:58 +0100 Subject: [PATCH] Docs: Fix essentials addon references --- docs/_snippets/button-story-click-handler-args.md | 2 +- docs/_snippets/nextjs-navigation-override-in-story.md | 6 ++---- docs/_snippets/nextjs-router-override-in-story.md | 6 ++---- docs/api/csf/index.mdx | 2 +- docs/api/doc-blocks/doc-block-controls.mdx | 4 ++-- docs/configure/user-interface/theming.mdx | 2 +- docs/get-started/frameworks/nextjs.mdx | 2 +- docs/get-started/whats-a-story.mdx | 6 +++--- docs/writing-docs/mdx.mdx | 4 +++- docs/writing-stories/args.mdx | 4 ++-- docs/writing-stories/index.mdx | 2 +- docs/writing-stories/parameters.mdx | 2 +- docs/writing-stories/stories-for-multiple-components.mdx | 2 +- 13 files changed, 21 insertions(+), 23 deletions(-) diff --git a/docs/_snippets/button-story-click-handler-args.md b/docs/_snippets/button-story-click-handler-args.md index 47e0965b87c1..509d6e9651a9 100644 --- a/docs/_snippets/button-story-click-handler-args.md +++ b/docs/_snippets/button-story-click-handler-args.md @@ -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: // - // 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: ``, diff --git a/docs/_snippets/nextjs-navigation-override-in-story.md b/docs/_snippets/nextjs-navigation-override-in-story.md index 74ccb78c7692..a7865b7185fa 100644 --- a/docs/_snippets/nextjs-navigation-override-in-story.md +++ b/docs/_snippets/nextjs-navigation-override-in-story.md @@ -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: { @@ -44,8 +43,7 @@ export default meta; type Story = StoryObj; -// 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: { diff --git a/docs/_snippets/nextjs-router-override-in-story.md b/docs/_snippets/nextjs-router-override-in-story.md index 13018889da9d..42f5219d86e9 100644 --- a/docs/_snippets/nextjs-router-override-in-story.md +++ b/docs/_snippets/nextjs-router-override-in-story.md @@ -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: { @@ -35,8 +34,7 @@ const meta = { export default meta; type Story = StoryObj; -// 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: { diff --git a/docs/api/csf/index.mdx b/docs/api/csf/index.mdx index 4534c50c12f3..f374658de685 100644 --- a/docs/api/csf/index.mdx +++ b/docs/api/csf/index.mdx @@ -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. diff --git a/docs/api/doc-blocks/doc-block-controls.mdx b/docs/api/doc-blocks/doc-block-controls.mdx index 0c4cf1a63e36..561cf8203dd9 100644 --- a/docs/api/doc-blocks/doc-block-controls.mdx +++ b/docs/api/doc-blocks/doc-block-controls.mdx @@ -66,8 +66,8 @@ import { Controls } from '@storybook/addon-docs/blocks'; - 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. + ### `exclude` diff --git a/docs/configure/user-interface/theming.mdx b/docs/configure/user-interface/theming.mdx index a6b97b360971..d1b78d791399 100644 --- a/docs/configure/user-interface/theming.mdx +++ b/docs/configure/user-interface/theming.mdx @@ -144,7 +144,7 @@ Here's how you might insert a custom `` 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 */} diff --git a/docs/get-started/frameworks/nextjs.mdx b/docs/get-started/frameworks/nextjs.mdx index b33b409953a0..f27cd80795b5 100644 --- a/docs/get-started/frameworks/nextjs.mdx +++ b/docs/get-started/frameworks/nextjs.mdx @@ -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). You should only use `next/router` in the `pages` directory. In the `app` directory, it is necessary to use `next/navigation`. diff --git a/docs/get-started/whats-a-story.mdx b/docs/get-started/whats-a-story.mdx index 27f96f597588..c625b373b39c 100644 --- a/docs/get-started/whats-a-story.mdx +++ b/docs/get-started/whats-a-story.mdx @@ -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 diff --git a/docs/writing-docs/mdx.mdx b/docs/writing-docs/mdx.mdx index ab945ee63311..ad8f89375ca2 100644 --- a/docs/writing-docs/mdx.mdx +++ b/docs/writing-docs/mdx.mdx @@ -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: */} - 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. + ## Troubleshooting diff --git a/docs/writing-stories/args.mdx b/docs/writing-stories/args.mdx index dc65ce3f0f0d..1a69d5c2c35a 100644 --- a/docs/writing-stories/args.mdx +++ b/docs/writing-stories/args.mdx @@ -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: diff --git a/docs/writing-stories/index.mdx b/docs/writing-stories/index.mdx index 9b6b8be456de..5b142894a229 100644 --- a/docs/writing-stories/index.mdx +++ b/docs/writing-stories/index.mdx @@ -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 diff --git a/docs/writing-stories/parameters.mdx b/docs/writing-stories/parameters.mdx index 44ebe83235cd..d7854de803f4 100644 --- a/docs/writing-stories/parameters.mdx +++ b/docs/writing-stories/parameters.mdx @@ -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). -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 diff --git a/docs/writing-stories/stories-for-multiple-components.mdx b/docs/writing-stories/stories-for-multiple-components.mdx index 8dfae72d0c48..a5acad9a4e6d 100644 --- a/docs/writing-stories/stories-for-multiple-components.mdx +++ b/docs/writing-stories/stories-for-multiple-components.mdx @@ -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).