Merge pull request #17085 from storybookjs/docs-aside-note-tweak

Docs: Don't print "Note" in <aside>s

docs/addons/addons-api.md

@@ -85,7 +85,7 @@ The options to `makeDecorator` are:
 
 <div class="aside">
 
-💡 <strong>Note:</strong>If the story's parameters include `{ foo: { disable: true } }` (where `foo` is the `parameterName` of your addon), your decorator will not be called.
+💡 If the story's parameters include `{ foo: { disable: true } }` (where `foo` is the `parameterName` of your addon), your decorator will not be called.
 
 </div>
 
@@ -286,7 +286,7 @@ This method allows you to set query string parameters. You can use that as tempo
 
 <div class="aside">
 
-💡 <strong>Note:</strong> If you need to remove a query param, use `null` for that. For example, let's say we need to remove the `bbc` query param. See below how to do it:
+💡 If you need to remove a query param, use `null` for that. For example, let's say we need to remove the `bbc` query param. See below how to do it:
 
 </div>
 

docs/api/argtypes.md

@@ -4,7 +4,7 @@ title: 'ArgTypes'
 
 <div class="aside">
 
-<strong>NOTE</strong>: This API is experimental and may change outside of the typical semver release cycle
+This API is experimental and may change outside of the typical semver release cycle
 
 </div>
 

docs/api/cli-options.md

@@ -35,12 +35,12 @@ Usage: start-storybook [options]
 | `--no-manager-cache`            | Disables Storybook's manager caching mechanism. See note below.<br/>`start-storybook --no-manager-cache`                                                                    |
 
 <div class="aside">
-💡 <strong>NOTE</strong>: The flag <code>--no-manager-cache</code> disables the internal caching of Storybook and can severely impact your Storybook loading time, so only use it when you need to refresh Storybook's UI, such as when editing themes.
+💡 The flag <code>--no-manager-cache</code> disables the internal caching of Storybook and can severely impact your Storybook loading time, so only use it when you need to refresh Storybook's UI, such as when editing themes.
 </div>
 
 <div class="aside" id="static-dir-deprecation">
 
-💡 <strong>NOTE</strong>: 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>
 
@@ -65,5 +65,5 @@ Usage: build-storybook [options]
 | `--docs`                        | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)<br/>`build-storybook --docs` |
 
 <div class="aside">
-💡 <strong>NOTE</strong>: If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example, <code>npm run build-storybook -- -o ./path/to/build</code>.
-</div>
+💡  If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example, <code>npm run build-storybook -- -o ./path/to/build</code>.
+</div>

docs/configure/environment-variables.md

@@ -82,5 +82,5 @@ The table below lists the available options:
 | Chromium | `BROWSER="chromium"` |
 
 <div class="aside">
-💡 <strong>Note</strong>: By default, Storybook will open a new Chrome window as part of its startup process. If you don't have Chrome installed, make sure to include one of the following options, or set your default browser accordingly.
-</div>
+💡 By default, Storybook will open a new Chrome window as part of its startup process. If you don't have Chrome installed, make sure to include one of the following options, or set your default browser accordingly.
+</div>

docs/configure/overview.md

@@ -75,7 +75,7 @@ Additionally, you can also customize your Storybook configuration to load your s
 <!-- prettier-ignore-end -->
 
 <div class="aside">
-💡 <strong>Note:</strong> If you've enabled <a href="#on-demand-story-loading">on-demand story loading</a>, this option will not work. You must define the story's titles manually.
+💡 If you've enabled <a href="#on-demand-story-loading">on-demand story loading</a>, this option will not work. You must define the story's titles manually.
 </div>
 
 When Storybook starts, it will look for any file containing the `stories` extension inside the `packages/stories` directory and generate the titles for your stories.

docs/configure/webpack.md

@@ -109,7 +109,7 @@ The following code snippet shows how you can replace the loaders from Storybook
 <!-- prettier-ignore-end -->
 
 <div class="aside"> 
-💡 <strong>Note:</strong> Projects initialized via generators (e.g, Vue CLI) may require that you import their own webpack config file (i.e., <code>/projectRoot/node_modules/@vue/cli-service/webpack.config.js</code>) to use a certain feature with Storybook. For other generators, make sure to check the documentation for instructions. 
+💡 Projects initialized via generators (e.g, Vue CLI) may require that you import their own webpack config file (i.e., <code>/projectRoot/node_modules/@vue/cli-service/webpack.config.js</code>) to use a certain feature with Storybook. For other generators, make sure to check the documentation for instructions. 
 </div>
 
 ### Bundle splitting

docs/contribute/how-to-reproduce.md

@@ -17,7 +17,7 @@ npx sb@next repro
 ```
 
 <div class="aside">
-💡 <strong>Note</strong>: You can add the <code>--template</code> flag to include a custom template.
+💡 You can add the <code>--template</code> flag to include a custom template.
 </div>
 
 Next, select the framework, for example, `react`:
@@ -33,7 +33,7 @@ Finally, enter a location for your reproduction:
 ![Storybook reproduction location](./storybook-reproduction-generator-location-optimized.png)
 
 <div class="aside">
-💡 <strong>Note</strong>: If you don't provide a full path for the reproduction it will be generated in the current directory.
+💡 If you don't provide a full path for the reproduction it will be generated in the current directory.
 </div>
 
 If everything worked as it should, you should have a fully functional Storybook set up in your local environment.

docs/contribute/new-snippets.md

@@ -80,7 +80,7 @@ Create the file `ember/your-component.js.mdx`, similar to the other frameworks,
 ```
 
 <div class="aside">
-💡 <strong>Note:</strong> Code snippets are divided into various file extensions, if you're contributing a TypeScript file use <code>.ts.mdx</code>, or if you're adding MDX files use <code>.mdx.mdx</code> .
+💡 Code snippets are divided into various file extensions, if you're contributing a TypeScript file use <code>.ts.mdx</code>, or if you're adding MDX files use <code>.mdx.mdx</code> .
 </div>
 
 Go through the rest of the documentation and repeat the process.
@@ -110,7 +110,7 @@ yarn start:skip-addons
 ```
 
 <div class="aside">
-💡 <strong>Note:</strong> During the start process if there's an issue with the the documentation, the process will stop and you'll get a notification.
+💡 During the start process if there's an issue with the the documentation, the process will stop and you'll get a notification.
 </div>
 
 Open a browser window to `http://localhost:8000`, click the Docs link, and select your framework from the dropdown.

docs/essentials/actions.md

@@ -63,7 +63,7 @@ If you need more granular control over which `argTypes` are matched, you can adj
 
 <div class="aside">
 
-💡 <strong>NOTE</strong>: If you're generating argTypes with another addon (like [docs](../writing-docs/introduction.md), which is the common behavior), ensure the actions addon <strong>AFTER</strong> the other addon. You can do this by listing it later in the addons registration code in [`.storybook/main.js`](../configure/overview.md#configure-story-rendering). This is default in [essentials](./introduction.md).
+💡 If you're generating argTypes with another addon (like [docs](../writing-docs/introduction.md), which is the common behavior), ensure the actions addon <strong>AFTER</strong> the other addon. You can do this by listing it later in the addons registration code in [`.storybook/main.js`](../configure/overview.md#configure-story-rendering). This is default in [essentials](./introduction.md).
 
 </div>
 

docs/essentials/interactions.md

@@ -39,7 +39,7 @@ Next, update [`.storybook/main.js`](../configure/overview.md#configure-story-ren
 <!-- prettier-ignore-end -->
 
 <div class="aside">
-⚠️ <strong>Note</strong>: Make sure to list `@storybook/addon-interactions` **after** `addon-essentials` (or `addon-actions`).
+💡 Make sure to list `@storybook/addon-interactions` **after** `addon-essentials` (or `addon-actions`).
 </div>
 
 Now when you run Storybook, the Interactions addon will be enabled.

docs/essentials/measure-and-outline.md

@@ -15,7 +15,7 @@ With Storybook's Measure addon, you can quickly visualize each component's measu
 </video>
 
 <div class="aside">
-💡 <strong>Note: </strong> Alternatively you can press the <code>m</code> key on your keyboard to toggle the addon.
+💡 Alternatively you can press the <code>m</code> key on your keyboard to toggle the addon.
 </div>
 
 ## Outline addon

docs/faq.md

@@ -33,7 +33,7 @@ npm test -- --coverage --collectCoverageFrom='["src/**/*.{js,jsx}","!src/**/stor
 ```
 
 <div class="aside">
-💡 <strong>Note</strong>: If you're using <a href="https://yarnpkg.com/">yarn</a> as a package manager, you'll need to adjust the command accordingly.
+💡 If you're using <a href="https://yarnpkg.com/">yarn</a> as a package manager, you'll need to adjust the command accordingly.
 </div>
 
 ### I see `ReferenceError: React is not defined` when using Storybook with Next.js
@@ -80,7 +80,7 @@ module.exports = {
 ```
 
 <div class="aside">
-💡 <strong>Note:</strong> Fast Refresh only works in development mode with React 16.10 or higher.
+💡 Fast Refresh only works in development mode with React 16.10 or higher.
 </div>
 
 ### Why is there no addons channel?

docs/writing-docs/build-documentation.md

@@ -4,7 +4,7 @@ title: 'Preview and build docs'
 
 <div class="aside">
 
-💡 <strong>NOTE</strong>: Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to [DocsPage](./docs-page.md). If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.
+💡 Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to [DocsPage](./docs-page.md). If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.
 
 </div>
 
@@ -23,7 +23,7 @@ At any point during your development, you can preview the documentation you've w
 ```
 
 <div class="aside">
-💡 <strong>Note</strong>: The <code>--no-manager-cache</code> flag is required to generate a successful preview of the documentation. But it comes with a cost as you're disabling Storybook's internal caching mechanism which can lead to increased loading times.
+💡 The <code>--no-manager-cache</code> flag is required to generate a successful preview of the documentation. But it comes with a cost as you're disabling Storybook's internal caching mechanism which can lead to increased loading times.
 </div>
 
 Depending on your configuration, when you execute the `storybook-docs` script. Storybook will be put into documentation mode and will generate a different build.

docs/writing-docs/doc-blocks.md

@@ -4,7 +4,7 @@ title: 'Doc Blocks'
 
 <div class="aside">
 
-💡 <strong>NOTE</strong>: Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to [DocsPage](./docs-page.md). If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.
+💡 Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to [DocsPage](./docs-page.md). If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.
 
 </div>
 

docs/writing-docs/docs-page.md

@@ -4,7 +4,7 @@ title: 'DocsPage'
 
 <div class="aside">
 
-💡 <strong>NOTE</strong>: Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to DocsPage. If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.
+💡 Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to DocsPage. If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.
 
 </div>
 

docs/writing-docs/introduction.md

@@ -4,7 +4,7 @@ title: 'How to document components'
 
 <div class="aside">
 
-💡 <strong>NOTE</strong>: Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to [DocsPage](./docs-page.md). If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.
+💡 Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to [DocsPage](./docs-page.md). If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.
 
 </div>
 

docs/writing-docs/mdx.md

@@ -4,7 +4,7 @@ title: 'MDX'
 
 <div class="aside">
 
-💡 <strong>NOTE</strong>: Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to [Docs page](./docs-page.md). If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.
+💡 Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to [Docs page](./docs-page.md). If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.
 
 </div>
 
@@ -210,7 +210,7 @@ You can also use anchors to target a specific section of a page:
 ```
 
 <div class="aside">
-💡 <strong>Note:</strong> 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.
+💡 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.
 </div>
 
 ![MDX anchor example](./mdx-anchor.webp)

docs/writing-stories/args.md

@@ -92,7 +92,7 @@ You can separate the arguments to a story to compose in other stories. Here's ho
 
 <div class="aside">
 
-💡<strong>Note:</strong> If you find yourself re-using the same args for most of a component's stories, you should consider using [component-level args](#component-args).
+💡 If you find yourself re-using the same args for most of a component's stories, you should consider using [component-level args](#component-args).
 
 </div>
 

docs/writing-stories/build-pages-with-storybook.md

@@ -113,7 +113,7 @@ To test your screen with the mocked data, you could write a similar set of stori
 <!-- prettier-ignore-end -->
 
 <div class="aside">
-💡 <strong>Note:</strong> This example details how you can mock the REST request with fetch. Similar HTTP clients such as <a href="https://axios-http.com/">axios</a> can be used as well.
+💡 This example details how you can mock the REST request with fetch. Similar HTTP clients such as <a href="https://axios-http.com/">axios</a> can be used as well.
 </div>
 
 The mocked data (i.e., `TestData`) will be injected via [parameters](./writing-stories/parameters), enabling you to configure it per-story basis.

docs/writing-stories/decorators.md

@@ -71,7 +71,7 @@ The second argument to a decorator function is the **story context** which in pa
 - `viewMode`- Storybook's current active window (e.g., canvas, docs).
 
 <div class="aside">
-💡 <strong>Note:</strong> This pattern can also be applied to your own stories. Some of Storybook's supported frameworks already use it (e.g., vue 2).
+💡 This pattern can also be applied to your own stories. Some of Storybook's supported frameworks already use it (e.g., vue 2).
 </div>
 
 ### Using decorators to provide data

docs/writing-stories/introduction.md

@@ -63,7 +63,7 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
 
 <div class="aside">
 
-💡 <strong>Note</strong>: Using framework specific elements such as [React Hooks](https://reactjs.org/docs/hooks-intro.html) alongside your stories is a valid approach, but you should treat them as an advanced use case. We <strong>recommend</strong> using [args](./args.md) as much as possible when writing your own stories.
+💡 Using framework specific elements such as [React Hooks](https://reactjs.org/docs/hooks-intro.html) alongside your stories is a valid approach, but you should treat them as an advanced use case. We <strong>recommend</strong> using [args](./args.md) as much as possible when writing your own stories.
 
 </div>
 
@@ -136,7 +136,9 @@ Refine this pattern by introducing `args` for your component's stories. It reduc
 <!-- prettier-ignore-end -->
 
 <div class="aside">
-💡 <strong>Note:</strong> <code>Template.bind({})</code> is a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">standard JavaScript technique</a> for making a copy of a function. We copy the <code>Template</code> so each exported story can set its own properties on it.
+
+💡 `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.

docs/writing-stories/play-function.md

@@ -187,7 +187,7 @@ If you need, you can also adjust your `play` function to find elements based on
 <!-- prettier-ignore-end -->
 
 <div class="aside">
- 💡 <strong>Note:</strong> You can read more about the querying elements in the <a href="https://testing-library.com/docs/queries/about/"> Testing library documentation</a>.
+ 💡 You can read more about the querying elements in the <a href="https://testing-library.com/docs/queries/about/"> Testing library documentation</a>.
 </div>
 
 ## Working with the Canvas

docs/writing-tests/importing-stories-in-tests.md

@@ -64,7 +64,7 @@ Update your test script to include the configuration file:
 
 <div class="aside">
 
-💡 <strong>Note:</strong> You can use Testing Library out-of-the-box with [Storybook Interaction Testing](./interaction-testing.md).
+💡 You can use Testing Library out-of-the-box with [Storybook Interaction Testing](./interaction-testing.md).
 
 </div>
 
@@ -108,7 +108,7 @@ An example of an end-to-end test with Cypress and Storybook is testing a login c
 <!-- prettier-ignore-end -->
 
 <div class="aside">
- 💡 <strong>Note:</strong> the play function contains small snippets of code that run after the story renders. It allows you to sequence interactions in stories.
+ 💡 The play function contains small snippets of code that run after the story renders. It allows you to sequence interactions in stories.
 
 </div>
 
@@ -150,7 +150,7 @@ A real-life scenario of user flow testing with Playwright would be how to test a
 <!-- prettier-ignore-end -->
 
 <div class="aside">
- 💡 <strong>Note:</strong> the play function contains small snippets of code that run after the story renders. It allows you to sequence interactions in stories.
+ 💡 The play function contains small snippets of code that run after the story renders. It allows you to sequence interactions in stories.
 </div>
 
 With Playwright, you can write a test to check if the inputs are filled and match the story: