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

Docs: Replace aside with new Callout #24709

Merged
merged 8 commits into from
Nov 7, 2023
Merged

Docs: Replace aside with new Callout #24709

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b52d3c1
Replace aside with new Callout
Nov 3, 2023
6085d1d
Merge branch 'next' into replace-aside
Nov 3, 2023
845a8c2
Merge branch 'next' into replace-aside
Nov 3, 2023
1318f01
Fix links and issues
jonniebigodes Nov 4, 2023
d869a86
Revert accidental deletion
Nov 6, 2023
3a27666
Merge branch 'next' into replace-aside
Nov 6, 2023
6279536
Merge branch 'next' into replace-aside
Nov 6, 2023
be0dd8d
Merge branch 'next' into replace-aside
Nov 7, 2023
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
16 changes: 10 additions & 6 deletions docs/addons/addon-knowledge-base.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,11 @@ Complementing the components, also included is a set of UI primitives. Use the c
| Icon | [See implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/icon/icons.tsx) | [See story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-icon--labels) |
| Typography | [See implementation](https://github.com/storybookjs/storybook/tree/master/code/ui/components/src/typography) | [See story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-typography--all) |

<div class="aside">
The color palette implemented by <code>@storybook/components</code> is a high-level abstraction of the <a href="https://github.com/storybookjs/storybook/tree/next/code/lib/theming/src"><code>@storybook/theming</code></a> package.
</div>
<Callout variant="info">

The color palette implemented by `@storybook/components` is a high-level abstraction of the [`@storybook/theming`](https://github.com/storybookjs/storybook/tree/next/code/lib/theming/src) package.

</Callout>

### Build system

Expand All @@ -94,9 +96,11 @@ When you're developing your addon as a package, you can’t use `npm link` to ad
}
```

<div class="aside">
Run either <code>yarn</code> or <code>npm install</code> to install the addon.
</div>
<Callout variant="info">

Run either `yarn` or `npm install` to install the addon.

</Callout>

### Hot module replacement

Expand Down
4 changes: 2 additions & 2 deletions docs/addons/addon-migration-guide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ title: Addon migration guide for Storybook 7.0

Storybook 7 is our first major release in over two years. While Storybook’s addon API has not changed much in the past couple of years, addons require several changes for compatibility with Storybook 7. This guide will walk you through the upgrade process.

<div class="aside">
<Callout variant="info">

As we gather feedback from the community, we’ll update this page. We also have a general [Storybook migration guide](../migration-guide.md) if you’re looking for that.

</div>
</Callout>

## Dependencies

Expand Down
18 changes: 10 additions & 8 deletions docs/addons/addon-types.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ UI-based addons allow you to customize Storybook's UI with the following element

### Panels

Panel addons allow you to add your own UI in Storybook's addon panel. This is the most common type of addon in the ecosystem. For example, the official [@storybook/actions](../essentials/actions.md) and [@storybook/a11y](https://github.com/storybookjs/storybook/tree/next/code/addons/a11y) use this pattern.
Panel addons allow you to add your own UI in Storybook's addon panel. This is the most common type of addon in the ecosystem. For example, the official [`@storybook/actions`](../essentials/actions.md) and [`@storybook/a11y`](https://github.com/storybookjs/storybook/tree/next/code/addons/a11y) use this pattern.

![Storybook panel](./storybook-panel.png)

Expand All @@ -28,7 +28,7 @@ Use this boilerplate code to add a new `Panel` to Storybook's UI:

### Toolbars

Toolbar addons allow you to add your own custom tools in Storybook's Toolbar. For example, the official [@storybook/backgrounds](../essentials/backgrounds.md) and the [@storybook/addon-outline/](../essentials/measure-and-outline.md#outline-addon) use this pattern.
Toolbar addons allow you to add your own custom tools in Storybook's Toolbar. For example, the official [`@storybook/backgrounds`](../essentials/backgrounds.md) and the [`@storybook/addon-outline`](../essentials/measure-and-outline.md#outline-addon) use this pattern.

![Storybook toolbar addon](./storybook-toolbar.png)

Expand All @@ -44,11 +44,11 @@ Use this boilerplate code to add a new `button` to Storybook's Toolbar:

<!-- prettier-ignore-end -->

<div class="aside">
<Callout variant="info">

The <code>icon</code> element used in the example loads the icons from the <code>@storybook/components</code> package. See [here](../faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
The `icon` element used in the example loads the icons from the `@storybook/components` package. See [here](../faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.

</div>
</Callout>

### Tabs

Expand All @@ -68,9 +68,11 @@ Use this boilerplate code to add a new `Tab` to Storybook's UI:

<!-- prettier-ignore-end -->

<div class="aside">
Learn how to write your own addon that includes these UI elements <a href="./writing-addons">here</a>.
</div>
<Callout variant="info">

Learn how to write your own addon that includes these UI elements [here](./writing-addons.md).

</Callout>

## Preset addons

Expand Down
14 changes: 8 additions & 6 deletions docs/addons/addons-api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,11 @@ The `add` method allows you to register the type of UI component associated with

<!-- prettier-ignore-end -->

<div class="aside">
ℹ️ The render function is called with `active` and `key`. The `active` value will be true when the panel is focused on the UI.
</div>
<Callout variant="info">

The render function is called with `active` and `key`. The `active` value will be true when the panel is focused on the UI.

</Callout>

### addons.register()

Expand Down Expand Up @@ -89,11 +91,11 @@ Use the `makeDecorator` API to create decorators in the style of the official ad

<!-- prettier-ignore-end -->

<div class="aside">
<Callout variant="info">

ℹ️ If the story's parameters include `{ exampleParameter: { disable: true } }` (where `exampleParameter` is the `parameterName` of your addon), your decorator will not be called.
If the story's parameters include `{ exampleParameter: { disable: true } }` (where `exampleParameter` is the `parameterName` of your addon), your decorator will not be called.

</div>
</Callout>

The `makeDecorator` API requires the following arguments:

Expand Down
20 changes: 13 additions & 7 deletions docs/addons/install-addons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,11 @@ Next, update [`.storybook/main.js|ts`](../configure/overview.md#configure-story-

<!-- prettier-ignore-end -->

<div class="aside">
<Callout variant="info">

Addons may also require addon-specific configuration. Read their respective READMEs.
</div>

</Callout>

Now when you run Storybook the accessibility testing addon will be enabled.

Expand All @@ -60,9 +62,11 @@ For example, to use SCSS styling, run the following command to install the addon

<!-- prettier-ignore-end -->

<div class="aside">
💡 Tip: Use the Webpack 5 snippet only if your framework already includes support for this version. Otherwise, use the Webpack 4 snippet.
</div>
<Callout variant="info" icon="💡" title="Tip:">

Use the Webpack 5 snippet only if your framework already includes support for this version. Otherwise, use the Webpack 4 snippet.

</Callout>

Next, update [`.storybook/main.js|ts`](../configure/overview.md#configure-story-rendering) to the following:

Expand Down Expand Up @@ -99,8 +103,10 @@ Consider the following example:

<!-- prettier-ignore-end -->

<div class="aside">
<Callout variant="info">

Preset addons may also have addon-specific configurations. Read their respective READMEs.
</div>

</Callout>

Now, when Storybook starts up, it will update webpack's CSS loader to use modules and adjust how styling is defined.
12 changes: 7 additions & 5 deletions docs/addons/integration-catalog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@ Add your addon to the catalog by publishing a npm package that follows these req
- `/dist` directory containing transpiled ES5 code
- `preset.js` file written as an ES5 module at the root level

<div class="aside">
<Callout variant="info" icon="💡">

Get a refresher on how to [write a Storybook addon](./writing-addons.md).

</div>
</Callout>

### Addon metadata

Expand Down Expand Up @@ -54,9 +54,11 @@ Use the list below as a reference when filling in the values for both the `suppo
- preact
- react-native

<div class="aside">
💡 Make sure to copy each item <strong>exactly</strong> as listed so that we can properly index your addon in our catalog.
</div>
<Callout variant="info" icon="💡">

Make sure to copy each item **exactly** as listed so that we can properly index your addon in our catalog.

</Callout>

```json
{
Expand Down
12 changes: 6 additions & 6 deletions docs/addons/writing-addons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,11 @@ Clone the repository you just created and install its dependencies. When the ins

<!-- prettier-ignore-end -->

<div class="aside">
<Callout variant="info">

ℹ️ The Addon Kit uses [Typescript](https://www.typescriptlang.org/) by default. If you want to use JavaScript instead, you can run the `eject-ts` command to convert the project to JavaScript.
The Addon Kit uses [Typescript](https://www.typescriptlang.org/) by default. If you want to use JavaScript instead, you can run the `eject-ts` command to convert the project to JavaScript.

</div>
</Callout>

### Understanding the build system

Expand Down Expand Up @@ -283,11 +283,11 @@ The second metadata category is related to the [integration catalog](https://sto
}
```

<div class="aside">
<Callout variant="info">

ℹ️ The `storybook` configuration element includes additional properties that help customize the addon's searchability and indexing. For more information, see the [Integration catalog documentation](./integration-catalog.md).
The `storybook` configuration element includes additional properties that help customize the addon's searchability and indexing. For more information, see the [Integration catalog documentation](./integration-catalog.md).

</div>
</Callout>

One essential item to note is the `keywords` property as it maps to the catalog's tag system. Adding the `storybook-addons` ensures that the addon is discoverable in the catalog when searching for addons. The remaining keywords help with the searchability and categorization of the addon.

Expand Down
12 changes: 6 additions & 6 deletions docs/api/arg-types.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,11 +166,11 @@ Specifies the type of control used to change the arg value with the [controls ad
| | `'date'` | Provides a datepicker to choose a date.<br /> `{ control: 'date' }` |
| | `'text'` | Provides a freeform text input.<br/> `{ control: 'text' }` |

<div class="aside">
<Callout variant="info" icon="💡">

💡 The `date` control will convert the date into a UNIX timestamp when the value changes. It's a known limitation that will be fixed in a future release. If you need to represent the actual date, you'll need to update the story's implementation and convert the value into a date object.
The `date` control will convert the date into a UNIX timestamp when the value changes. It's a known limitation that will be fixed in a future release. If you need to represent the actual date, you'll need to update the story's implementation and convert the value into a date object.

</div>
</Callout>

#### `control.accept`

Expand Down Expand Up @@ -304,13 +304,13 @@ The `argTypes` object uses the name of the arg as the key. By default, that key

<!-- prettier-ignore-end -->

<div class="aside">
<Callout variant="warning">

💡 Be careful renaming args in this way. Users of the component you're documenting will not be able to use the documented name as a property of your component and the actual name will not displayed.
Be careful renaming args in this way. Users of the component you're documenting will not be able to use the documented name as a property of your component and the actual name will not displayed.

For this reason, the `name` property is best used when defining an `argType` that is only used for documentation purposes and not an actual property of the component. For example, when [providing argTypes for each property of an object](https://stackblitz.com/edit/github-uplqzp?file=src/stories/Button.stories.tsx).

</div>
</Callout>

### `options`

Expand Down
18 changes: 10 additions & 8 deletions docs/api/cli-options.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ title: 'CLI options'

The Storybook command line interface (CLI) is the main tool you use to build and develop Storybook.

<div class="aside">
<Callout variant="info">

Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.md#how-to-opt-out) if you'd not like to share any information.

</div>
</Callout>

## API commands

Expand Down Expand Up @@ -45,11 +45,11 @@ Options include:
| `--docs` | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#preview-storybooks-documentation)<br/>`storybook dev --docs` |
| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook dev --disable-telemetry` |

<div class="aside" id="static-dir-deprecation">
<Callout variant="warning" id="static-dir-deprecation">

💡 Starting in 6.4 the `-s` flag is deprecated. Instead, use a configuration object in your `.storybook/main.js` file. See the [images and assets documentation](../configure/images-and-assets.md#serving-static-files-via-storybook) for more information.
Starting in 6.4 the `-s` flag is deprecated. Instead, use a configuration object in your `.storybook/main.js` file. See the [images and assets documentation](../configure/images-and-assets.md#serving-static-files-via-storybook) for more information.

</div>
</Callout>

### `build`

Expand All @@ -75,6 +75,8 @@ Options include:
| `--docs` | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)<br/>`storybook build --docs` |
| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook build --disable-telemetry` |

<div class="aside">
💡 If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example, <code>npm run storybook build -- -o ./path/to/build</code>.
</div>
<Callout variant="info" icon="💡">

If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example, `npm run storybook build -- -o ./path/to/build`.

</Callout>
6 changes: 3 additions & 3 deletions docs/api/csf.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ title: 'Component Story Format (CSF)'

Component Story Format (CSF) is the recommended way to [write stories](../writing-stories/introduction.md). It's an [open standard](https://github.com/ComponentDriven/csf) based on ES6 modules that is portable beyond Storybook.

<div class="aside">
<Callout variant="info" icon="💡">

💡 If you are writing stories in the older `storiesOf()` syntax, you can find documentation in an [advanced README](https://github.com/storybookjs/storybook/blob/next/code/lib/preview-api/docs/storiesOf.md).
If you are writing stories in the older `storiesOf()` syntax, you can find documentation in an [advanced README](https://github.com/storybookjs/storybook/blob/next/code/lib/preview-api/docs/storiesOf.md).

</div>
</Callout>

In CSF, stories and component metadata are defined as ES Modules. Every component story file consists of a required [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export) and one or more [named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export).

Expand Down
6 changes: 3 additions & 3 deletions docs/api/doc-block-argtypes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ title: 'ArgTypes'

The `ArgTypes` block can be used to show a static table of [arg types](./argtypes.md) for a given component, as a way to document its interface.

<div class="aside">
<Callout variant="info" icon="💡">

💡 If you’re looking for a dynamic table that shows a story’s current arg values for a story and supports users changing them, see the [`Controls`](./doc-block-controls.md) block instead.
If you’re looking for a dynamic table that shows a story’s current arg values for a story and supports users changing them, see the [`Controls`](./doc-block-controls.md) block instead.

</div>
</Callout>

![Screenshot of ArgTypes block](./doc-block-argtypes.png)

Expand Down
12 changes: 6 additions & 6 deletions docs/api/doc-block-canvas.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@ import * as ButtonStories from './Button.stories';
```
<!-- prettier-ignore-end -->

<div class="aside">
<Callout variant="info" icon="💡">

💡 In previous versions of Storybook it was possible to pass in arbitrary components as children to `Canvas`. That is deprecated and the `Canvas` block now only supports a single story.
In previous versions of Storybook it was possible to pass in arbitrary components as children to `Canvas`. That is deprecated and the `Canvas` block now only supports a single story.

</div>
</Callout>

## Canvas

Expand Down Expand Up @@ -172,11 +172,11 @@ Type: `SourceProps['code'] | SourceProps['format'] | SourceProps['language'] | S

Specifies props passed to the inner `Source` block. See [SourceProps](./doc-block-source.md#sourceprops).

<div class="aside">
<Callout variant="info" icon="💡">

💡 The dark prop is ignored, as the `Source` block is always rendered in dark mode when shown as part of a `Canvas` block.
The dark prop is ignored, as the `Source` block is always rendered in dark mode when shown as part of a `Canvas` block.

</div>
</Callout>

### `sourceState`

Expand Down
Loading
Loading