diff --git a/docs/builders/vite.md b/docs/builders/vite.md index 2302191fcae3..5a2025ed0a51 100644 --- a/docs/builders/vite.md +++ b/docs/builders/vite.md @@ -114,7 +114,7 @@ If you need to override it, you can use the `viteFinal` function and adjust it. ### ArgTypes are not generated automatically -Currently, [automatic argType inference](../api/argtypes.md#automatic-argtype-inference) is only available for React, Vue3 and Svelte (JSDocs only). With React, the Vite builder defaults to `react-docgen-typescript` if TypeScript is listed as a dependency. If you run into any issues, you can revert to `react-docgen` by updating your Storybook configuration file as follows: +Currently, [automatic argType inference](../api/arg-types.md#automatic-argtype-inference) is only available for React, Vue3 and Svelte (JSDocs only). With React, the Vite builder defaults to `react-docgen-typescript` if TypeScript is listed as a dependency. If you run into any issues, you can revert to `react-docgen` by updating your Storybook configuration file as follows: diff --git a/docs/essentials/actions.md b/docs/essentials/actions.md index 090bc4f606b9..966ec74fa99f 100644 --- a/docs/essentials/actions.md +++ b/docs/essentials/actions.md @@ -39,7 +39,7 @@ If your component calls an arg (because of either the user's interaction or the ### Automatically matching args -Another option is to use a global parameter to match all [argTypes](../api/argtypes.md) that match a certain pattern. The following configuration automatically creates actions for each `on` argType (which you can either specify manually or can be [inferred automatically](../api/argtypes.md#automatic-argtype-inference)). +Another option is to use a global parameter to match all [argTypes](../api/arg-types.md) that match a certain pattern. The following configuration automatically creates actions for each `on` argType (which you can either specify manually or can be [inferred automatically](../api/arg-types.md#automatic-argtype-inference)). This is quite useful when your component has dozens (or hundreds) of methods and you do not want to manually apply the `fn` utility for each of those methods. However, **this is not the recommended** way of writing actions. That's because automatically inferred args **are not available as spies in your play function**. If you use `argTypesRegex` and your stories have play functions, you will need to also define args with the `fn` utility to test them in your play function. diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md index 131a38be6b8c..2fb67af32861 100644 --- a/docs/essentials/controls.md +++ b/docs/essentials/controls.md @@ -19,7 +19,7 @@ Controls do not require any modification to your components. Stories for control - Portable. Reuse your interactive stories in documentation, tests, and even in designs. - Rich. Customize the controls and interactive data to suit your exact needs. -To use the Controls addon, you need to write your stories using [args](../writing-stories/args.md). Storybook will automatically generate UI controls based on your args and what it can infer about your component. Still, you can configure the controls further using [argTypes](../api/argtypes.md), see below. +To use the Controls addon, you need to write your stories using [args](../writing-stories/args.md). Storybook will automatically generate UI controls based on your args and what it can infer about your component. Still, you can configure the controls further using [argTypes](../api/arg-types.md), see below. @@ -70,7 +70,7 @@ By default, Storybook will render a free text input for the `variant` arg: It works as long as you type a valid string into the auto-generated text control. Still, it's not the best UI for our scenario, given that the component only accepts `primary` or `secondary` as variants. Let’s replace it with Storybook’s radio component. -We can specify which controls get used by declaring a custom [argType](../api/argtypes.md) for the `variant` property. ArgTypes encode basic metadata for args, such as name, description, defaultValue for an arg. These get automatically filled in by Storybook Docs. +We can specify which controls get used by declaring a custom [argType](../api/arg-types.md) for the `variant` property. ArgTypes encode basic metadata for args, such as name, description, defaultValue for an arg. These get automatically filled in by Storybook Docs. `ArgTypes` can also contain arbitrary annotations, which the user can override. Since `variant` is a property of the component, let's put that annotation on the default export. @@ -209,7 +209,7 @@ The Controls addon can be configured in two ways: ### Annotation -As shown above, you can configure individual controls with the “control" annotation in the [argTypes](../api/argtypes.md) field of either a component or story. Below is a condensed example and table featuring all available controls. +As shown above, you can configure individual controls with the “control" annotation in the [argTypes](../api/arg-types.md) field of either a component or story. Below is a condensed example and table featuring all available controls. | Data Type | Control | Description | | ----------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | diff --git a/docs/writing-docs/autodocs.md b/docs/writing-docs/autodocs.md index 427db5c7e79b..61026e2d981b 100644 --- a/docs/writing-docs/autodocs.md +++ b/docs/writing-docs/autodocs.md @@ -29,7 +29,7 @@ To enable auto-generated documentation for your stories, you'll need to add the ![Storybook autodocs](./autodocs.png) -Once the story loads, Storybook infers the relevant metadata (e.g., [`args`](../writing-stories/args.md), [`argTypes`](../api/argtypes.md), [`parameters`](../writing-stories/parameters.md)) and automatically generates a documentation page with this information positioned at the root-level of your component tree in the sidebar. +Once the story loads, Storybook infers the relevant metadata (e.g., [`args`](../writing-stories/args.md), [`argTypes`](../api/arg-types.md), [`parameters`](../writing-stories/parameters.md)) and automatically generates a documentation page with this information positioned at the root-level of your component tree in the sidebar. ### Configure @@ -78,7 +78,7 @@ Going over the code snippet in more detail. When Storybook starts up, it will ov 1. A header with the component's metadata retrieved by the `Title`, `Subtitle`, and `Description` Doc Blocks. 2. The first story defined in the file via the `Primary` Doc Block with a handy set of UI controls to zoom in and out of the component. -3. An interactive table with all the relevant [`args`](../writing-stories/args.md) and [`argTypes`](../api/argtypes.md) defined in the story via the `Controls` Doc Block. +3. An interactive table with all the relevant [`args`](../writing-stories/args.md) and [`argTypes`](../api/arg-types.md) defined in the story via the `Controls` Doc Block. 4. A overview of the remaining stories via the `Stories` Doc Block. #### With MDX diff --git a/docs/writing-docs/doc-blocks.md b/docs/writing-docs/doc-blocks.md index faacdf5fa588..12cfaee8317b 100644 --- a/docs/writing-docs/doc-blocks.md +++ b/docs/writing-docs/doc-blocks.md @@ -135,7 +135,7 @@ Accepts parameters in the namespace `parameters.docs.argTypes`. -The `ArgTypes` block can be used to show a static table of [arg types](../api/argtypes.md) for a given component as a way to document its interface. +The `ArgTypes` block can be used to show a static table of [arg types](../api/arg-types.md) for a given component as a way to document its interface. ![Screenshot of ArgTypes block](../api/doc-block-argtypes.png) diff --git a/docs/writing-stories/decorators.md b/docs/writing-stories/decorators.md index d80bf565afe4..f6c5305877cd 100644 --- a/docs/writing-stories/decorators.md +++ b/docs/writing-stories/decorators.md @@ -71,7 +71,7 @@ In the example above, the values provided are hardcoded. Still, you may want to The second argument to a decorator function is the **story context** which in particular contains the keys: - `args` - the story arguments. You can use some [`args`](./args.md) in your decorators and drop them in the story implementation itself. -- `argTypes`- Storybook's [argTypes](../api/argtypes.md) allow you to customize and fine-tune your stories [`args`](./args.md). +- `argTypes`- Storybook's [argTypes](../api/arg-types.md) allow you to customize and fine-tune your stories [`args`](./args.md). - `globals` - Storybook-wide [globals](../essentials/toolbars-and-globals.md#globals). In particular you can use the [toolbars feature](../essentials/toolbars-and-globals.md#global-types-toolbar-annotations) to allow you to change these values using Storybook’s UI. - `hooks` - Storybook's API hooks (e.g., useArgs). - `parameters`- the story's static metadata, most commonly used to control Storybook's behavior of features and addons.