From 84b1609cdde93de236bd574cc5b65cb22eeaa898 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Nuno=20Mota?= <jnuno.carrilho@gmail.com>
Date: Sun, 14 May 2023 23:46:33 +0100
Subject: [PATCH 01/23] Fix typo

---
 code/ui/blocks/src/examples/EmptyExample.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/ui/blocks/src/examples/EmptyExample.tsx b/code/ui/blocks/src/examples/EmptyExample.tsx
index b107ac26b781..fcdc9b3e2933 100644
--- a/code/ui/blocks/src/examples/EmptyExample.tsx
+++ b/code/ui/blocks/src/examples/EmptyExample.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 // eslint-disable-next-line no-empty-pattern
 export const EmptyExample = ({}) => (
   <div>
-    This component is not intended to render anything, it simply serves a something to hang
+    This component is not intended to render anything, it simply serves as something to hang
     parameters off
   </div>
 );

From 764c819a38c604ba1cad76ab95d96ccc06ef1a5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Nuno=20Mota?= <jnuno.carrilho@gmail.com>
Date: Mon, 15 May 2023 02:25:06 +0100
Subject: [PATCH 02/23] Add of prop and deprecate componentSubtitle

---
 MIGRATION.md                                  |   9 +-
 .../ui/blocks/src/blocks/Subtitle.stories.tsx | 104 ++++++++++++++++++
 code/ui/blocks/src/blocks/Subtitle.tsx        |  37 ++++++-
 .../ui/blocks/src/examples/Button.stories.tsx |   3 +
 .../ButtonWithMetaSubtitleInBoth.stories.tsx  |  29 +++++
 ...etaSubtitleInComponentSubtitle.stories.tsx |  26 +++++
 ...WithMetaSubtitleInDocsSubtitle.stories.tsx |  27 +++++
 docs/api/doc-block-subtitle.md                |   8 +-
 8 files changed, 235 insertions(+), 8 deletions(-)
 create mode 100644 code/ui/blocks/src/blocks/Subtitle.stories.tsx
 create mode 100644 code/ui/blocks/src/examples/ButtonWithMetaSubtitleInBoth.stories.tsx
 create mode 100644 code/ui/blocks/src/examples/ButtonWithMetaSubtitleInComponentSubtitle.stories.tsx
 create mode 100644 code/ui/blocks/src/examples/ButtonWithMetaSubtitleInDocsSubtitle.stories.tsx

diff --git a/MIGRATION.md b/MIGRATION.md
index d3a88a146bb8..70993eda809f 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -71,6 +71,7 @@
       - [Source block](#source-block)
       - [Canvas block](#canvas-block)
       - [ArgsTable block](#argstable-block)
+      - [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle)
     - [Configuring Autodocs](#configuring-autodocs)
     - [MDX2 upgrade](#mdx2-upgrade)
     - [Legacy MDX1 support](#legacy-mdx1-support)
@@ -1333,7 +1334,7 @@ Additionally to changing the docs information architecture, we've updated the AP
 
 - When you've attached to a CSF file (with the `Meta` block, or in Autodocs), you can drop the `of` and the block will reference the first story or the CSF file as a whole.
 
-- Most other props controlling rendering of blocks now correspond precisely to the parameters for that block [defined for autodocs above](#autodocs-changes).
+- Most other props controlling rendering of blocks now correspond precisely to the parameters for that block [defined for autodocs above](#autodocsautodocs-changes).
 
 ##### Meta block
 
@@ -1449,6 +1450,12 @@ The following props are not supported in the new blocks:
 - `story="^"` to reference the primary story (just omit `of` in that case, for `Controls`).
 - `story="."` to reference the current story (this no longer makes sense in Docs 2).
 - `story="name"` to reference a story (use `of={}`).
+- 
+##### Subtitle block and `parameters.componentSubtitle`
+
+The `Subtitle` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta).
+
+`parameters.componentSubtitle` has been deprecated to be consistent with other parameters related to autodocs, instead use `parameters.docs.subtitle`.
 
 #### Configuring Autodocs
 
diff --git a/code/ui/blocks/src/blocks/Subtitle.stories.tsx b/code/ui/blocks/src/blocks/Subtitle.stories.tsx
new file mode 100644
index 000000000000..f1a87cd4160e
--- /dev/null
+++ b/code/ui/blocks/src/blocks/Subtitle.stories.tsx
@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { Subtitle } from './Subtitle';
+import * as DefaultButtonStories from '../examples/Button.stories';
+import * as ButtonStoriesWithMetaSubtitleInBoth from '../examples/ButtonWithMetaSubtitleInBoth.stories';
+import * as ButtonStoriesWithMetaSubtitleInComponentSubtitle from '../examples/ButtonWithMetaSubtitleInComponentSubtitle.stories';
+import * as ButtonStoriesWithMetaSubtitleInDocsSubtitle from '../examples/ButtonWithMetaSubtitleInDocsSubtitle.stories';
+
+const meta: Meta<typeof Subtitle> = {
+  component: Subtitle,
+  parameters: {
+    controls: {
+      include: [],
+      hideNoControlsWarning: true,
+    },
+    // workaround for https://github.com/storybookjs/storybook/issues/20505
+    docs: { source: { type: 'code' } },
+    attached: false,
+    docsStyles: true,
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const OfCSFFileInBoth: Story = {
+  args: {
+    of: ButtonStoriesWithMetaSubtitleInBoth,
+  },
+  parameters: {
+    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInBoth.stories'],
+  },
+};
+export const OfCSFFileInComponentSubtitle: Story = {
+  name: 'Of CSF File In parameters.componentSubtitle',
+  args: {
+    of: ButtonStoriesWithMetaSubtitleInComponentSubtitle,
+  },
+  parameters: {
+    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInComponentSubtitle.stories'],
+  },
+};
+export const OfCSFFileInDocsSubtitle: Story = {
+  name: 'Of CSF File In parameters.docs.subtitle',
+  args: {
+    of: ButtonStoriesWithMetaSubtitleInDocsSubtitle,
+  },
+  parameters: {
+    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInDocsSubtitle.stories'],
+  },
+};
+export const OfMetaInBoth: Story = {
+  args: {
+    of: ButtonStoriesWithMetaSubtitleInBoth.default,
+  },
+  parameters: {
+    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInBoth.stories'],
+  },
+};
+export const OfMetaInComponentSubtitle: Story = {
+  name: 'Of Meta In parameters.componentSubtitle',
+  args: {
+    of: ButtonStoriesWithMetaSubtitleInComponentSubtitle.default,
+  },
+  parameters: {
+    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInComponentSubtitle.stories'],
+  },
+};
+export const OfMetaInDocsSubtitle: Story = {
+  name: 'Of Meta In parameters.docs.subtitle',
+  args: {
+    of: ButtonStoriesWithMetaSubtitleInDocsSubtitle.default,
+  },
+  parameters: {
+    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInDocsSubtitle.stories'],
+  },
+};
+export const DefaultAttached: Story = {
+  parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: true },
+};
+export const OfUndefinedAttached: Story = {
+  args: {
+    // @ts-expect-error this is supposed to be undefined
+    // eslint-disable-next-line import/namespace
+    of: DefaultButtonStories.NotDefined,
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+    relativeCsfPaths: ['../examples/Button.stories'],
+    attached: true,
+  },
+  decorators: [(s) => (window?.navigator.userAgent.match(/StorybookTestRunner/) ? <div /> : s())],
+};
+export const OfStringMetaAttached: Story = {
+  name: 'Of "meta" Attached',
+  args: {
+    of: 'meta',
+  },
+  parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: true },
+};
+export const Children: Story = {
+  parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: true },
+  render: () => <Subtitle>This subtitle is set inside the Subtitle element.</Subtitle>,
+};
diff --git a/code/ui/blocks/src/blocks/Subtitle.tsx b/code/ui/blocks/src/blocks/Subtitle.tsx
index ee4fa0517563..69aa532731df 100644
--- a/code/ui/blocks/src/blocks/Subtitle.tsx
+++ b/code/ui/blocks/src/blocks/Subtitle.tsx
@@ -1,16 +1,41 @@
 import type { FunctionComponent, ReactNode } from 'react';
-import React, { useContext } from 'react';
+import React from 'react';
+import { deprecate } from '@storybook/client-logger';
+
 import { Subtitle as PureSubtitle } from '../components';
-import { DocsContext } from './DocsContext';
+import type { Of } from './useOf';
+import { useOf } from './useOf';
 
 interface SubtitleProps {
   children?: ReactNode;
+  /**
+   * Specify where to get the subtitle from.
+   * If not specified, the subtitle will be extracted from the meta of the attached CSF file.
+   */
+  of?: Of;
 }
 
-export const Subtitle: FunctionComponent<SubtitleProps> = ({ children }) => {
-  const docsContext = useContext(DocsContext);
-  const { parameters } = docsContext.storyById();
-  const content = children || parameters?.componentSubtitle;
+const DEPRECATION_MIGRATION_LINK =
+  'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parameters';
+
+export const Subtitle: FunctionComponent<SubtitleProps> = (props) => {
+  const { of, children } = props;
+
+  if ('of' in props && of === undefined) {
+    throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
+  }
+
+  const { preparedMeta } = useOf(of || 'meta', ['meta']);
+  const { parameters } = preparedMeta;
+  const { componentSubtitle, docs } = parameters || {};
+
+  if (componentSubtitle) {
+    deprecate(
+      `Using 'parameters.componentSubtitle' property to subtitle stories is deprecated. See ${DEPRECATION_MIGRATION_LINK}`
+    );
+  }
+
+  const content = children || docs?.subtitle || componentSubtitle;
 
   return content ? (
     <PureSubtitle className="sbdocs-subtitle sb-unstyled">{content}</PureSubtitle>
diff --git a/code/ui/blocks/src/examples/Button.stories.tsx b/code/ui/blocks/src/examples/Button.stories.tsx
index 59e3fe55b308..71bd7adb5daf 100644
--- a/code/ui/blocks/src/examples/Button.stories.tsx
+++ b/code/ui/blocks/src/examples/Button.stories.tsx
@@ -20,6 +20,9 @@ const meta = {
     notes: 'These are notes for the Button stories',
     info: 'This is info for the Button stories',
     jsx: { useBooleanShorthandSyntax: false },
+    docs: {
+      subtitle: 'This is the subtitle for the Button stories',
+    },
   },
 } satisfies Meta<typeof Button>;
 
diff --git a/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInBoth.stories.tsx b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInBoth.stories.tsx
new file mode 100644
index 000000000000..27327f062d8d
--- /dev/null
+++ b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInBoth.stories.tsx
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+
+const meta = {
+  title: 'examples/Button with Meta Subtitle in Both',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  parameters: {
+    // Stop *this* story from being stacked in Chromatic
+    theme: 'default',
+    // this is to test the deprecated features of the Subtitle block
+    componentSubtitle: 'This subtitle is set in parameters.componentSubtitle',
+    docs: {
+      subtitle: 'This subtitle is set in parameters.docs.subtitle',
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithMetaSubtitleInBoth: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
diff --git a/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInComponentSubtitle.stories.tsx b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInComponentSubtitle.stories.tsx
new file mode 100644
index 000000000000..57a106340421
--- /dev/null
+++ b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInComponentSubtitle.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+
+const meta = {
+  title: 'examples/Button with Meta Subtitle in componentSubtitle',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  parameters: {
+    // Stop *this* story from being stacked in Chromatic
+    theme: 'default',
+    // this is to test the deprecated features of the Subtitle block
+    componentSubtitle: 'This subtitle is set in parameters.componentSubtitle',
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithMetaSubtitleInComponentSubtitle: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
diff --git a/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInDocsSubtitle.stories.tsx b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInDocsSubtitle.stories.tsx
new file mode 100644
index 000000000000..3df3110baf6c
--- /dev/null
+++ b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInDocsSubtitle.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+
+const meta = {
+  title: 'examples/Button with Meta Subtitle in docs.subtitle',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  parameters: {
+    // Stop *this* story from being stacked in Chromatic
+    theme: 'default',
+    docs: {
+      subtitle: 'This subtitle is set in parameters.docs.subtitle',
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithMetaSubtitleInDocsSubtitle: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
diff --git a/docs/api/doc-block-subtitle.md b/docs/api/doc-block-subtitle.md
index f0d1d5ed5a6c..c9c0dc17461f 100644
--- a/docs/api/doc-block-subtitle.md
+++ b/docs/api/doc-block-subtitle.md
@@ -24,10 +24,16 @@ import { Subtitle } from '@storybook/blocks';
 
 `Subtitle` is configured with the following props:
 
+### `of`
+
+Type: CSF file exports
+
+Specifies which meta's subtitle is displayed.
+
 ### `children`
 
 Type: `JSX.Element | string`
 
-Default: `parameters.componentSubtitle`
+Default: `parameters.docs.subtitle`
 
 Provides the content.

From 75564f3f64e3e303f76e81f7ffadf465c8885c44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Nuno=20Mota?= <jnuno.carrilho@gmail.com>
Date: Mon, 15 May 2023 02:36:04 +0100
Subject: [PATCH 03/23] Shorten declaring componentSubtitle and docs

---
 code/ui/blocks/src/blocks/Subtitle.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Subtitle.tsx b/code/ui/blocks/src/blocks/Subtitle.tsx
index 69aa532731df..3db90bfb4e4c 100644
--- a/code/ui/blocks/src/blocks/Subtitle.tsx
+++ b/code/ui/blocks/src/blocks/Subtitle.tsx
@@ -26,8 +26,7 @@ export const Subtitle: FunctionComponent<SubtitleProps> = (props) => {
   }
 
   const { preparedMeta } = useOf(of || 'meta', ['meta']);
-  const { parameters } = preparedMeta;
-  const { componentSubtitle, docs } = parameters || {};
+  const { componentSubtitle, docs } = preparedMeta.parameters || {};
 
   if (componentSubtitle) {
     deprecate(

From bd34ef7cc8df96960a08551b99cb5ab2418914a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Nuno=20Mota?= <jnuno.carrilho@gmail.com>
Date: Mon, 15 May 2023 02:39:58 +0100
Subject: [PATCH 04/23] Fix autodocs link

---
 MIGRATION.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 70993eda809f..a095402e4a02 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1334,7 +1334,7 @@ Additionally to changing the docs information architecture, we've updated the AP
 
 - When you've attached to a CSF file (with the `Meta` block, or in Autodocs), you can drop the `of` and the block will reference the first story or the CSF file as a whole.
 
-- Most other props controlling rendering of blocks now correspond precisely to the parameters for that block [defined for autodocs above](#autodocsautodocs-changes).
+- Most other props controlling rendering of blocks now correspond precisely to the parameters for that block [defined for autodocs above](#autodocs-changes).
 
 ##### Meta block
 

From bba00d9487445ef711aca361a23be7818194a363 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Nuno=20Mota?= <jnuno.carrilho@gmail.com>
Date: Mon, 15 May 2023 02:46:51 +0100
Subject: [PATCH 05/23] Add missing parameter change documentation

---
 MIGRATION.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/MIGRATION.md b/MIGRATION.md
index a095402e4a02..dc4ce9cf0330 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1290,6 +1290,7 @@ We've renamed many of the parameters that control docs rendering for consistency
 - `docs.inlineStories` has been renamed `docs.story.inline`
 - `docs.iframeHeight` has been renamed `docs.story.iframeHeight`
 - `notes` and `info` are no longer supported, instead use `docs.description.story | component`
+- `componentSubtitle` are no longer supported, instead use `docs.subtitle`
 
 #### MDX docs files
 

From b8e2820a85f1c29530508cc58039fa41d585b6e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Nuno=20Mota?= <jnuno.carrilho@gmail.com>
Date: Mon, 15 May 2023 02:53:15 +0100
Subject: [PATCH 06/23] Fix DEPRECATION_MIGRATION_LINK in Subtitle

---
 code/ui/blocks/src/blocks/Subtitle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/ui/blocks/src/blocks/Subtitle.tsx b/code/ui/blocks/src/blocks/Subtitle.tsx
index 3db90bfb4e4c..9b7556e9c7c6 100644
--- a/code/ui/blocks/src/blocks/Subtitle.tsx
+++ b/code/ui/blocks/src/blocks/Subtitle.tsx
@@ -16,7 +16,7 @@ interface SubtitleProps {
 }
 
 const DEPRECATION_MIGRATION_LINK =
-  'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parameters';
+  'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#subtitle-block-and-parameterscomponentsubtitle';
 
 export const Subtitle: FunctionComponent<SubtitleProps> = (props) => {
   const { of, children } = props;

From 3a209e264c3f915f1aabdd100bbb17685a742933 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Nuno=20Mota?= <jnuno.carrilho@gmail.com>
Date: Mon, 15 May 2023 03:02:49 +0100
Subject: [PATCH 07/23] Fix grammar

---
 MIGRATION.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 993ab55a3e41..48c4eca92cab 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1329,7 +1329,7 @@ We've renamed many of the parameters that control docs rendering for consistency
 - `docs.inlineStories` has been renamed `docs.story.inline`
 - `docs.iframeHeight` has been renamed `docs.story.iframeHeight`
 - `notes` and `info` are no longer supported, instead use `docs.description.story | component`
-- `componentSubtitle` are no longer supported, instead use `docs.subtitle`
+- `componentSubtitle` is no longer supported, instead use `docs.subtitle`
 
 #### MDX docs files
 

From 975c32db37e052a905c71dbcf63cfee91ef4a35d Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <steve.dodier-lazaro@backmarket.com>
Date: Sat, 5 Aug 2023 10:21:35 +0200
Subject: [PATCH 08/23] feat: Update title to support 'of' prop

Partially implements #22490
---
 MIGRATION.md                                |  4 ++
 code/ui/blocks/src/blocks/Title.stories.tsx | 56 +++++++++++++++++++++
 code/ui/blocks/src/blocks/Title.tsx         | 55 +++++++++++++++++++-
 docs/api/doc-block-title.md                 |  6 +++
 4 files changed, 119 insertions(+), 2 deletions(-)
 create mode 100644 code/ui/blocks/src/blocks/Title.stories.tsx

diff --git a/MIGRATION.md b/MIGRATION.md
index 6fa7d0c5d300..d05d91d36d2f 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1429,6 +1429,10 @@ Additionally to changing the docs information architecture, we've updated the AP
 
 The primary change of the `Meta` block is the ability to attach to CSF files with `<Meta of={}>` as described above.
 
+##### Title block
+
+The `Title` block now also accepts an `of` prop as described above. It still accepts being passed `children`.
+
 ##### Description block, `parameters.notes` and `parameters.info`
 
 In 6.5 the Description doc block accepted a range of different props, `markdown`, `type` and `children` as a way to customize the content.
diff --git a/code/ui/blocks/src/blocks/Title.stories.tsx b/code/ui/blocks/src/blocks/Title.stories.tsx
new file mode 100644
index 000000000000..0eca0b8d2283
--- /dev/null
+++ b/code/ui/blocks/src/blocks/Title.stories.tsx
@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Title } from './Title';
+import * as DefaultButtonStories from '../examples/Button.stories';
+
+const meta: Meta<typeof Title> = {
+  component: Title,
+  title: 'Blocks/Title',
+  parameters: {
+    controls: {
+      include: [],
+      hideNoControlsWarning: true,
+    },
+    // workaround for https://github.com/storybookjs/storybook/issues/20505
+    docs: { source: { type: 'code' } },
+    attached: false,
+    docsStyles: true,
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const OfCSFFileInComponentTitle: Story = {
+  name: 'Of CSF File with title',
+  args: {
+    of: DefaultButtonStories,
+  },
+  parameters: { relativeCsfPaths: ['../examples/Button.stories'] },
+};
+
+export const OfMetaInComponentTitle: Story = {
+  name: 'Of meta with title',
+  args: {
+    of: DefaultButtonStories,
+  },
+  parameters: { relativeCsfPaths: ['../examples/Button.stories'] },
+};
+
+export const OfStringMetaAttached: Story = {
+  name: 'Of attached "meta"',
+  args: {
+    of: 'meta',
+  },
+  parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: true },
+};
+
+export const Children: Story = {
+  args: {
+    children: 'Custom title',
+  },
+};
+
+export const DefaultAttached: Story = {
+  args: {},
+  parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: true },
+};
diff --git a/code/ui/blocks/src/blocks/Title.tsx b/code/ui/blocks/src/blocks/Title.tsx
index 1f52fb2cc179..a530b720a0cb 100644
--- a/code/ui/blocks/src/blocks/Title.tsx
+++ b/code/ui/blocks/src/blocks/Title.tsx
@@ -3,8 +3,19 @@ import type { FunctionComponent, ReactNode } from 'react';
 import React, { useContext } from 'react';
 import { Title as PureTitle } from '../components';
 import { DocsContext } from './DocsContext';
+import type { Of } from './useOf';
+import { useOf } from './useOf';
 
 interface TitleProps {
+  /**
+   * Specify where to get the title from. Must be a CSF file's default export.
+   * If not specified, the title will be read from children, or extracted from the meta of the attached CSF file.
+   */
+  of?: Of;
+
+  /**
+   * Specify content to display as the title.
+   */
   children?: ReactNode;
 }
 
@@ -15,9 +26,49 @@ export const extractTitle = (title: ComponentTitle) => {
   return (groups && groups[groups.length - 1]) || title;
 };
 
-export const Title: FunctionComponent<TitleProps> = ({ children }) => {
+const getTitleFromResolvedOf = (resolvedOf: ReturnType<typeof useOf>): string | null => {
+  switch (resolvedOf.type) {
+    case 'meta': {
+      return resolvedOf.preparedMeta.title || null;
+    }
+    case 'story':
+    case 'component': {
+      throw new Error(
+        `Unsupported module type. Title's \`of\` prop only supports \`meta\`, got: ${
+          (resolvedOf as any).type
+        }`
+      );
+    }
+    default: {
+      throw new Error(
+        `Unrecognized module type resolved from 'useOf', got: ${(resolvedOf as any).type}`
+      );
+    }
+  }
+};
+
+export const Title: FunctionComponent<TitleProps> = (props) => {
+  const { children, of } = props;
+
+  if ('of' in props && of === undefined) {
+    throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
+  }
+
   const context = useContext(DocsContext);
-  const content = children || extractTitle(context.storyById().title);
+
+  let content;
+  if (of) {
+    const resolvedOf = useOf(of || 'meta');
+    content = getTitleFromResolvedOf(resolvedOf);
+  }
+
+  if (!content) {
+    content = children;
+  }
+
+  if (!content) {
+    content = extractTitle(context.storyById().title);
+  }
 
   return content ? <PureTitle className="sbdocs-title sb-unstyled">{content}</PureTitle> : null;
 };
diff --git a/docs/api/doc-block-title.md b/docs/api/doc-block-title.md
index acdc1cee0f90..b9b2c3567a12 100644
--- a/docs/api/doc-block-title.md
+++ b/docs/api/doc-block-title.md
@@ -29,3 +29,9 @@ import { Title } from '@storybook/blocks';
 Type: `JSX.Element | string`
 
 Provides the content. Falls back to value of `title` in an [attached](./doc-block-meta.md#attached-vs-unattached) CSF file (or value derived from [autotitle](../configure/sidebar-and-urls.md#csf-30-auto-titles)), trimmed to the last segment. For example, if the title value is `'path/to/components/Button'`, the default content is `'Button'`.
+
+### `of`
+
+Type: CSF file exports
+
+Specifies which meta's title is displayed.

From 266266d8c6b8bd96dc47055571f7595445d9e150 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Nuno=20Mota?= <jnuno.carrilho@gmail.com>
Date: Mon, 7 Aug 2023 23:55:59 +0100
Subject: [PATCH 09/23] Update subtitle block props into alphabetical order

---
 docs/api/doc-block-subtitle.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/api/doc-block-subtitle.md b/docs/api/doc-block-subtitle.md
index c9c0dc17461f..bd4c5b5f90cf 100644
--- a/docs/api/doc-block-subtitle.md
+++ b/docs/api/doc-block-subtitle.md
@@ -24,12 +24,6 @@ import { Subtitle } from '@storybook/blocks';
 
 `Subtitle` is configured with the following props:
 
-### `of`
-
-Type: CSF file exports
-
-Specifies which meta's subtitle is displayed.
-
 ### `children`
 
 Type: `JSX.Element | string`
@@ -37,3 +31,9 @@ Type: `JSX.Element | string`
 Default: `parameters.docs.subtitle`
 
 Provides the content.
+
+### `of`
+
+Type: CSF file exports
+
+Specifies which meta's subtitle is displayed.

From ad2d18338dd1ab873bbbd402133ff1032cba9a5a Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 6 Oct 2023 15:25:58 +0200
Subject: [PATCH 10/23] fix addon-links stories

---
 .../template/stories/decorator.stories.ts     | 18 ++++---
 .../links/template/stories/hrefto.stories.ts  | 23 ++++++++
 .../links/template/stories/linkto.stories.ts  | 53 +++++++++++++++----
 .../links/template/stories/scroll.stories.ts  | 41 --------------
 4 files changed, 77 insertions(+), 58 deletions(-)
 create mode 100644 code/addons/links/template/stories/hrefto.stories.ts
 delete mode 100644 code/addons/links/template/stories/scroll.stories.ts

diff --git a/code/addons/links/template/stories/decorator.stories.ts b/code/addons/links/template/stories/decorator.stories.ts
index 218833a75800..2149eb5dafa4 100644
--- a/code/addons/links/template/stories/decorator.stories.ts
+++ b/code/addons/links/template/stories/decorator.stories.ts
@@ -9,29 +9,35 @@ export default {
   decorators: [withLinks],
 };
 
-export const Basic = {
+export const Target = {
+  render: () => 'This is just a story to target with the links',
+};
+
+export const KindAndStory = {
   args: {
     content: `
       <div>
-        <a class="link" href="#" data-sb-story="other">go to other</a>
+        <a class="link" href="#" data-sb-kind="addons-links-decorator" data-sb-story="story-only">go to story only</a>
       </div>
     `,
   },
 };
-export const Other = {
+
+export const StoryOnly = {
   args: {
     content: `
       <div>
-        <a class="link" href="#" data-sb-story="third">go to third</a>
+        <a class="link" href="#" data-sb-story="target">go to target</a>
       </div>
     `,
   },
 };
-export const Third = {
+
+export const KindOnly = {
   args: {
     content: `
       <div>
-        <a class="link" href="#" data-sb-story="basic">go to basic</a>
+        <a class="link" href="#" data-sb-kind="addons-links-decorator">go to target</a>
       </div>
     `,
   },
diff --git a/code/addons/links/template/stories/hrefto.stories.ts b/code/addons/links/template/stories/hrefto.stories.ts
new file mode 100644
index 000000000000..8bb2bd3e3a3a
--- /dev/null
+++ b/code/addons/links/template/stories/hrefto.stories.ts
@@ -0,0 +1,23 @@
+import { hrefTo } from '@storybook/addon-links';
+
+export default {
+  component: globalThis.Components.Html,
+  title: 'hrefTo',
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export const Default = {
+  render: () => {
+    hrefTo('addons-links-hrefto', 'target').then((href) => {
+      const root = document.querySelector('#storybook-root');
+      if (!root) {
+        return;
+      }
+      const node = document.createElement('code');
+      node.innerHTML = href;
+      root.appendChild(node);
+    });
+  },
+};
diff --git a/code/addons/links/template/stories/linkto.stories.ts b/code/addons/links/template/stories/linkto.stories.ts
index bdc752c2ae17..13e549f75134 100644
--- a/code/addons/links/template/stories/linkto.stories.ts
+++ b/code/addons/links/template/stories/linkto.stories.ts
@@ -3,6 +3,7 @@ import { linkTo } from '@storybook/addon-links';
 
 export default {
   component: globalThis.Components.Button,
+  title: 'linkTo',
   args: {
     label: 'Click Me!',
   },
@@ -11,34 +12,64 @@ export default {
   },
 };
 
-export const ID = {
+export const Target = {
+  render: () => 'This is just a story to target with the links',
+};
+
+export const Id = {
   args: {
-    onClick: linkTo('addons-links-parameters--basic'),
+    onClick: linkTo('addons-links-linkto--target'),
+    label: 'addons-links-linkto--target',
   },
 };
-export const Title = {
+
+export const TitleOnly = {
   args: {
-    onClick: linkTo('addons-links-parameters'),
+    onClick: linkTo('addons/links/linkTo'),
+    label: 'addons/links/linkTo',
   },
 };
-export const Basic = {
+
+export const NormalizedTitleOnly = {
   args: {
-    onClick: linkTo('addons-links-parameters', 'basic'),
+    onClick: linkTo('addons-links-linkto'),
+    label: 'addons-links-linkto',
   },
 };
-export const Other = {
+
+export const TitleAndName = {
   args: {
-    onClick: linkTo('addons-links-parameters', 'basic'),
+    onClick: linkTo('addons/links/linkTo', 'Target'),
+    label: 'addons/links/linkTo, Target',
   },
 };
-export const Third = {
+
+export const NormalizedTitleAndName = {
   args: {
-    onClick: linkTo('addons-links-parameters', 'other'),
+    onClick: linkTo('addons-links-linkto', 'target'),
+    label: 'addons-links-linkto, target',
   },
 };
 
 export const Callback = {
   args: {
-    onClick: linkTo('addons-links-parameters', (event: Event) => 'basic'),
+    onClick: linkTo(
+      (event: Event) => 'addons-links-linkto',
+      (event: Event) => 'target'
+    ),
+  },
+};
+
+export const ToMDXDocs = {
+  args: {
+    onClick: linkTo('Configure Your Project'),
+    label: 'Configure Your Project',
+  },
+};
+
+export const ToAutodocs = {
+  args: {
+    onClick: linkTo('Example Button', 'Docs'),
+    label: 'Example Button, Docs',
   },
 };
diff --git a/code/addons/links/template/stories/scroll.stories.ts b/code/addons/links/template/stories/scroll.stories.ts
deleted file mode 100644
index a7d6a3937763..000000000000
--- a/code/addons/links/template/stories/scroll.stories.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { global as globalThis } from '@storybook/global';
-import { withLinks } from '@storybook/addon-links';
-
-export default {
-  component: globalThis.Components.Html,
-  parameters: {
-    chromatic: { disable: true },
-  },
-  decorators: [withLinks],
-};
-
-export const Basic = {
-  args: {
-    content: `
-      <div>
-        <div style="marginBottom:100vh"></div>
-        <a class="link" href="#" data-sb-story="basic">go to basic</a>
-      </div>
-    `,
-  },
-};
-export const Other = {
-  args: {
-    content: `
-      <div>
-        <div style="marginBottom:100vh"></div>
-        <a class="link" href="#" data-sb-story="basic">to to basic</a>
-      </div>
-    `,
-  },
-};
-export const Third = {
-  args: {
-    content: `
-      <div>
-        <div style="marginBottom:100vh"></div>
-        <a class="link" href="#" data-sb-story="other">go to other</a>
-      </div>
-    `,
-  },
-};

From 4b05aa8c4f3b0c48c7e5b8f4bd71f4d0422e8832 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Nuno=20Mota?= <jnuno.carrilho@gmail.com>
Date: Fri, 27 Oct 2023 16:31:20 +0100
Subject: [PATCH 11/23] Update MIGRATION.md

---
 MIGRATION.md | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index fc1fe488edca..f1c833115c54 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -2,6 +2,7 @@
 
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
   - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
+  - [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle)
 - [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
   - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
   - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
@@ -83,7 +84,6 @@
       - [Source block](#source-block)
       - [Canvas block](#canvas-block)
       - [ArgsTable block](#argstable-block)
-      - [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle)
     - [Configuring Autodocs](#configuring-autodocs)
     - [MDX2 upgrade](#mdx2-upgrade)
     - [Legacy MDX1 support](#legacy-mdx1-support)
@@ -314,6 +314,12 @@
 
 The `Primary` doc block now also accepts an `of` prop as described in the [Doc Blocks](#doc-blocks) section. It still accepts being passed `name` or no props at all.
 
+##### Subtitle block and `parameters.componentSubtitle`
+
+The `Subtitle` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta).
+
+`parameters.componentSubtitle` has been deprecated to be consistent with other parameters related to autodocs, instead use `parameters.docs.subtitle`.
+
 ## From version 7.4.0 to 7.5.0
 
 #### `storyStoreV6` and `storiesOf` is deprecated
@@ -1462,7 +1468,6 @@ We've renamed many of the parameters that control docs rendering for consistency
 - `docs.inlineStories` has been renamed `docs.story.inline`
 - `docs.iframeHeight` has been renamed `docs.story.iframeHeight`
 - `notes` and `info` are no longer supported, instead use `docs.description.story | component`
-- `componentSubtitle` is no longer supported, instead use `docs.subtitle`
 
 #### MDX docs files
 
@@ -1623,12 +1628,6 @@ The following props are not supported in the new blocks:
 - `story="^"` to reference the primary story (just omit `of` in that case, for `Controls`).
 - `story="."` to reference the current story (this no longer makes sense in Docs 2).
 - `story="name"` to reference a story (use `of={}`).
-- 
-##### Subtitle block and `parameters.componentSubtitle`
-
-The `Subtitle` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta).
-
-`parameters.componentSubtitle` has been deprecated to be consistent with other parameters related to autodocs, instead use `parameters.docs.subtitle`.
 
 #### Configuring Autodocs
 

From 2a723e0deb54deef9bdfb4112d439460427f990e Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Sat, 28 Oct 2023 00:35:05 +0200
Subject: [PATCH 12/23] use play instead of render for hrefTo stories

---
 .../links/template/stories/hrefto.stories.ts  | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/code/addons/links/template/stories/hrefto.stories.ts b/code/addons/links/template/stories/hrefto.stories.ts
index 8bb2bd3e3a3a..d58844b305bd 100644
--- a/code/addons/links/template/stories/hrefto.stories.ts
+++ b/code/addons/links/template/stories/hrefto.stories.ts
@@ -6,18 +6,17 @@ export default {
   parameters: {
     chromatic: { disable: true },
   },
+  args: {
+    content: '<div><code id="content">Waiting for hrefTo to resolve...</code></div>',
+  },
 };
 
 export const Default = {
-  render: () => {
-    hrefTo('addons-links-hrefto', 'target').then((href) => {
-      const root = document.querySelector('#storybook-root');
-      if (!root) {
-        return;
-      }
-      const node = document.createElement('code');
-      node.innerHTML = href;
-      root.appendChild(node);
-    });
+  play: async () => {
+    const href = await hrefTo('addons-links-hrefto', 'target');
+    const content = document.querySelector('#content');
+    if (content) {
+      content.textContent = href;
+    }
   },
 };

From fcc3ca57330de5ca39e372a05fac56ac1f8a9936 Mon Sep 17 00:00:00 2001
From: Aaron Reisman <aaron@lifeiscontent.net>
Date: Sat, 20 Apr 2024 15:04:33 -0700
Subject: [PATCH 13/23] chore: fix rendering of stateful tabs component

---
 .../src/components/tabs/tabs.stories.tsx      | 24 +++++++++++++++++++
 .../components/src/components/tabs/tabs.tsx   |  7 +-----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/code/ui/components/src/components/tabs/tabs.stories.tsx b/code/ui/components/src/components/tabs/tabs.stories.tsx
index a3c40fd8a9d9..658b994b1e2e 100644
--- a/code/ui/components/src/components/tabs/tabs.stories.tsx
+++ b/code/ui/components/src/components/tabs/tabs.stories.tsx
@@ -18,6 +18,11 @@ interface FibonacciMap {
   [key: string]: number;
 }
 
+function Counter() {
+  const [count, setCount] = React.useState(0);
+  return <button onClick={() => setCount((prev) => prev + 1)}>{count}</button>;
+}
+
 function fibonacci(num: number, memo?: FibonacciMap): number {
   if (!memo) {
     memo = {};
@@ -376,3 +381,22 @@ export const StatelessWithCustomEmpty = {
     />
   ),
 } satisfies StoryObj<typeof Tabs>;
+
+export const StatefulWithStatefulPanel = {
+  render: (args) => {
+    const [update, setUpdate] = React.useState(0);
+    return (
+      <div>
+        <button onClick={() => setUpdate((prev) => prev + 1)}>Update</button>
+        <TabsState initial="test-1" {...args}>
+          <div id="test-1" title="Test 1">
+            <Counter key={update} />
+          </div>
+          <div id="test-2" title="Test 2">
+            <Counter key={update} />
+          </div>
+        </TabsState>
+      </div>
+    );
+  },
+} satisfies Story;
diff --git a/code/ui/components/src/components/tabs/tabs.tsx b/code/ui/components/src/components/tabs/tabs.tsx
index 5b0cbb2b5612..3d90fb3f9e58 100644
--- a/code/ui/components/src/components/tabs/tabs.tsx
+++ b/code/ui/components/src/components/tabs/tabs.tsx
@@ -145,18 +145,13 @@ export const Tabs: FC<TabsProps> = memo(
     emptyState,
     showToolsWhenEmpty,
   }) => {
-    const idList = childrenToList(children)
-      .map((i) => i.id)
-      .join(',');
-
     const list = useMemo(
       () =>
         childrenToList(children).map((i, index) => ({
           ...i,
           active: selected ? i.id === selected : index === 0,
         })),
-      // eslint-disable-next-line react-hooks/exhaustive-deps -- we're using idList as a replacement for children
-      [selected, idList]
+      [children, selected]
     );
 
     const { visibleList, tabBarRef, tabRefs, AddonTab } = useList(list);

From f9ba2f1f250d3375320c879ca9d27e7fc71c5a4f Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 22 Apr 2024 12:32:39 +0200
Subject: [PATCH 14/23] test 'nextjs/default-ts' instead of 'nextjs/default-js'
 in e2e tests

---
 code/e2e-tests/framework-nextjs.spec.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/code/e2e-tests/framework-nextjs.spec.ts b/code/e2e-tests/framework-nextjs.spec.ts
index 61233dd5ac25..c1a15c2632ef 100644
--- a/code/e2e-tests/framework-nextjs.spec.ts
+++ b/code/e2e-tests/framework-nextjs.spec.ts
@@ -10,7 +10,7 @@ test.describe('Next.js', () => {
   // TODO: improve these E2E tests given that we have more version of Next.js to test
   // and this only tests nextjs/default-js
   test.skip(
-    !templateName?.includes('nextjs/default-js'),
+    !templateName?.includes('nextjs/default-ts'),
     'Only run this test for the Frameworks that support next/navigation'
   );
 
@@ -66,7 +66,7 @@ test.describe('Next.js', () => {
       sbPage = new SbPage(page);
 
       await sbPage.navigateToStory(
-        'stories/frameworks/nextjs-nextjs-default-js/Navigation',
+        'stories/frameworks/nextjs-nextjs-default-ts/Navigation',
         'default'
       );
       root = sbPage.previewRoot();
@@ -100,7 +100,7 @@ test.describe('Next.js', () => {
     test.beforeEach(async ({ page }) => {
       sbPage = new SbPage(page);
 
-      await sbPage.navigateToStory('stories/frameworks/nextjs-nextjs-default-js/Router', 'default');
+      await sbPage.navigateToStory('stories/frameworks/nextjs-nextjs-default-ts/Router', 'default');
       root = sbPage.previewRoot();
     });
 

From 6dadc7c1b492e532d9da4275ab53c7a95836b449 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 22 Apr 2024 13:07:46 +0200
Subject: [PATCH 15/23] fix migration

---
 MIGRATION.md | 816 +++++++++++++++++++++++++--------------------------
 1 file changed, 404 insertions(+), 412 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 4c540855603a..2141d4dde078 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,411 +1,409 @@
 <h1>Migration</h1>
 
-- [\<\<\<\<\<\<\< HEAD - CommonJS with Vite is deprecated - Using implicit actions during rendering is deprecated - typescript.skipBabel deprecated - Primary doc block accepts of prop - Subtitle block and `parameters.componentSubtitle` - Addons no longer need a peer dependency on React](#-head---commonjs-with-vite-is-deprecated---using-implicit-actions-during-rendering-is-deprecated---typescriptskipbabel-deprecated---primary-doc-block-accepts-of-prop---subtitle-block-and-parameterscomponentsubtitle---addons-no-longer-need-a-peer-dependency-on-react)
-  - [From version 8.0 to 8.1.0](#from-version-80-to-810)
-    - [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle)
-  - [From version 7.x to 8.0.0](#from-version-7x-to-800)
-    - [Portable stories](#portable-stories)
-      - [Project annotations are now merged instead of overwritten in composeStory](#project-annotations-are-now-merged-instead-of-overwritten-in-composestory)
-      - [Type change in `composeStories` API](#type-change-in-composestories-api)
-      - [Composed Vue stories are now components instead of functions](#composed-vue-stories-are-now-components-instead-of-functions)
-    - [Tab addons are now routed to a query parameter](#tab-addons-are-now-routed-to-a-query-parameter)
-    - [Default keyboard shortcuts changed](#default-keyboard-shortcuts-changed)
-    - [Manager addons are now rendered with React 18](#manager-addons-are-now-rendered-with-react-18)
-    - [Removal of `storiesOf`-API](#removal-of-storiesof-api)
-    - [Removed deprecated shim packages](#removed-deprecated-shim-packages)
-    - [Framework-specific Vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added)
-      - [For React:](#for-react)
-      - [For Vue:](#for-vue)
-      - [For Svelte (without Sveltekit):](#for-svelte-without-sveltekit)
-      - [For Preact:](#for-preact)
-      - [For Solid:](#for-solid)
-      - [For Qwik:](#for-qwik)
-    - [TurboSnap Vite plugin is no longer needed](#turbosnap-vite-plugin-is-no-longer-needed)
-    - [`--webpack-stats-json` option renamed `--stats-json`](#--webpack-stats-json-option-renamed---stats-json)
-    - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function)
-    - [MDX related changes](#mdx-related-changes)
-      - [MDX is upgraded to v3](#mdx-is-upgraded-to-v3)
-      - [Dropping support for \*.stories.mdx (CSF in MDX) format and MDX1 support](#dropping-support-for-storiesmdx-csf-in-mdx-format-and-mdx1-support)
-      - [Dropping support for id, name and story in Story block](#dropping-support-for-id-name-and-story-in-story-block)
-    - [Core changes](#core-changes)
-      - [`framework.options.builder.useSWC` for Webpack5-based projects removed](#frameworkoptionsbuilderuseswc-for-webpack5-based-projects-removed)
-      - [Removed `@babel/core` and `babel-loader` from `@storybook/builder-webpack5`](#removed-babelcore-and-babel-loader-from-storybookbuilder-webpack5)
-      - [`framework.options.fastRefresh` for Webpack5-based projects removed](#frameworkoptionsfastrefresh-for-webpack5-based-projects-removed)
-      - [`typescript.skipBabel` removed](#typescriptskipbabel-removed)
-      - [Dropping support for Yarn 1](#dropping-support-for-yarn-1)
-      - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16)
-      - [Autotitle breaking fixes](#autotitle-breaking-fixes)
-      - [Storyshots has been removed](#storyshots-has-been-removed)
-      - [UI layout state has changed shape](#ui-layout-state-has-changed-shape)
-      - [New UI and props for Button and IconButton components](#new-ui-and-props-for-button-and-iconbutton-components)
-      - [Icons is deprecated](#icons-is-deprecated)
-      - [Removed postinstall](#removed-postinstall)
-      - [Removed stories.json](#removed-storiesjson)
-      - [Removed `sb babelrc` command](#removed-sb-babelrc-command)
-      - [Changed interfaces for `@storybook/router` components](#changed-interfaces-for-storybookrouter-components)
-      - [Extract no longer batches](#extract-no-longer-batches)
-    - [Framework-specific changes](#framework-specific-changes)
-      - [React](#react)
-        - [`react-docgen` component analysis by default](#react-docgen-component-analysis-by-default)
-      - [Next.js](#nextjs)
-        - [Require Next.js 13.5 and up](#require-nextjs-135-and-up)
-        - [Automatic SWC mode detection](#automatic-swc-mode-detection)
-        - [RSC config moved to React renderer](#rsc-config-moved-to-react-renderer)
-      - [Vue](#vue)
-        - [Require Vue 3 and up](#require-vue-3-and-up)
-      - [Angular](#angular)
-        - [Require Angular 15 and up](#require-angular-15-and-up)
-      - [Svelte](#svelte)
-        - [Require Svelte 4 and up](#require-svelte-4-and-up)
-      - [Preact](#preact)
-        - [Require Preact 10 and up](#require-preact-10-and-up)
-        - [No longer adds default Babel plugins](#no-longer-adds-default-babel-plugins)
-      - [Web Components](#web-components)
-        - [Dropping default babel plugins in Webpack5-based projects](#dropping-default-babel-plugins-in-webpack5-based-projects)
-    - [Deprecations which are now removed](#deprecations-which-are-now-removed)
-      - [Removed `config` preset](#removed-config-preset)
-      - [Removed `passArgsFirst` option](#removed-passargsfirst-option)
-      - [Methods and properties from AddonStore](#methods-and-properties-from-addonstore)
-      - [Methods and properties from PreviewAPI](#methods-and-properties-from-previewapi)
-      - [Removals in @storybook/components](#removals-in-storybookcomponents)
-      - [Removals in @storybook/types](#removals-in-storybooktypes)
-      - [--use-npm flag in storybook CLI](#--use-npm-flag-in-storybook-cli)
-      - [hideNoControlsWarning parameter from addon controls](#hidenocontrolswarning-parameter-from-addon-controls)
-      - [`setGlobalConfig` from `@storybook/react`](#setglobalconfig-from-storybookreact)
-      - [StorybookViteConfig type from @storybook/builder-vite](#storybookviteconfig-type-from-storybookbuilder-vite)
-      - [props from WithTooltipComponent from @storybook/components](#props-from-withtooltipcomponent-from-storybookcomponents)
-      - [LinkTo direct import from addon-links](#linkto-direct-import-from-addon-links)
-      - [DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types](#decoratorfn-story-componentstory-componentstoryobj-componentstoryfn-and-componentmeta-typescript-types)
-      - ["Framework" TypeScript types](#framework-typescript-types)
-      - [`navigateToSettingsPage` method from Storybook's manager-api](#navigatetosettingspage-method-from-storybooks-manager-api)
-      - [storyIndexers](#storyindexers)
-      - [Deprecated docs parameters](#deprecated-docs-parameters)
-      - [Description Doc block properties](#description-doc-block-properties)
-      - [Story Doc block properties](#story-doc-block-properties)
-      - [Manager API expandAll and collapseAll methods](#manager-api-expandall-and-collapseall-methods)
-      - [`ArgsTable` Doc block removed](#argstable-doc-block-removed)
-      - [`Source` Doc block properties](#source-doc-block-properties)
-      - [`Canvas` Doc block properties](#canvas-doc-block-properties)
-      - [`Primary` Doc block properties](#primary-doc-block-properties)
-      - [`createChannel` from `@storybook/postmessage` and `@storybook/channel-websocket`](#createchannel-from-storybookpostmessage-and-storybookchannel-websocket)
-      - [StoryStore and methods deprecated](#storystore-and-methods-deprecated)
-    - [Addon author changes](#addon-author-changes)
-      - [Tab addons cannot manually route, Tool addons can filter their visibility via tabId](#tab-addons-cannot-manually-route-tool-addons-can-filter-their-visibility-via-tabid)
-      - [Removed `config` preset](#removed-config-preset-1)
-  - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
-      - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
-      - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
-      - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
-      - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
-        - [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle-1)
-      - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
-  - [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
-      - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
-      - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
-  - [From version 7.0.0 to 7.2.0](#from-version-700-to-720)
-      - [Addon API is more type-strict](#addon-api-is-more-type-strict)
-      - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated)
-  - [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
-    - [7.0 breaking changes](#70-breaking-changes)
-      - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below)
-      - [Default export in Preview.js](#default-export-in-previewjs)
-      - [ESM format in Main.js](#esm-format-in-mainjs)
-      - [Modern browser support](#modern-browser-support)
-      - [React peer dependencies required](#react-peer-dependencies-required)
-      - [start-storybook / build-storybook binaries removed](#start-storybook--build-storybook-binaries-removed)
-      - [New Framework API](#new-framework-api)
-        - [Available framework packages](#available-framework-packages)
-        - [Framework field mandatory](#framework-field-mandatory)
-        - [frameworkOptions renamed](#frameworkoptions-renamed)
-        - [builderOptions renamed](#builderoptions-renamed)
-      - [TypeScript: StorybookConfig type moved](#typescript-storybookconfig-type-moved)
-      - [Titles are statically computed](#titles-are-statically-computed)
-      - [Framework standalone build moved](#framework-standalone-build-moved)
-      - [Change of root html IDs](#change-of-root-html-ids)
-      - [Stories glob matches MDX files](#stories-glob-matches-mdx-files)
-      - [Add strict mode](#add-strict-mode)
-      - [Importing plain markdown files with `transcludeMarkdown` has changed](#importing-plain-markdown-files-with-transcludemarkdown-has-changed)
-      - [Stories field in .storybook/main.js is mandatory](#stories-field-in-storybookmainjs-is-mandatory)
-      - [Stricter global types](#stricter-global-types)
-      - [Deploying build artifacts](#deploying-build-artifacts)
-        - [Dropped support for file URLs](#dropped-support-for-file-urls)
-        - [Serving with nginx](#serving-with-nginx)
-        - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules)
-    - [7.0 Core changes](#70-core-changes)
-      - [7.0 feature flags removed](#70-feature-flags-removed)
-      - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
-      - [Changed decorator order between preview.js and addons/frameworks](#changed-decorator-order-between-previewjs-and-addonsframeworks)
-      - [Dark mode detection](#dark-mode-detection)
-      - [`addons.setConfig` should now be imported from `@storybook/manager-api`.](#addonssetconfig-should-now-be-imported-from-storybookmanager-api)
-    - [7.0 core addons changes](#70-core-addons-changes)
-      - [Removed auto injection of @storybook/addon-actions decorator](#removed-auto-injection-of-storybookaddon-actions-decorator)
-      - [Addon-backgrounds: Removed deprecated grid parameter](#addon-backgrounds-removed-deprecated-grid-parameter)
-      - [Addon-a11y: Removed deprecated withA11y decorator](#addon-a11y-removed-deprecated-witha11y-decorator)
-      - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default)
-    - [7.0 Vite changes](#70-vite-changes)
-      - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically)
-      - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
-    - [7.0 Webpack changes](#70-webpack-changes)
-      - [Webpack4 support discontinued](#webpack4-support-discontinued)
-      - [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
-      - [Postcss removed](#postcss-removed)
-      - [Removed DLL flags](#removed-dll-flags)
-    - [7.0 Framework-specific changes](#70-framework-specific-changes)
-      - [Angular: Removed deprecated `component` and `propsMeta` field](#angular-removed-deprecated-component-and-propsmeta-field)
-      - [Angular: Drop support for Angular \< 14](#angular-drop-support-for-angular--14)
-      - [Angular: Drop support for calling Storybook directly](#angular-drop-support-for-calling-storybook-directly)
-      - [Angular: Application providers and ModuleWithProviders](#angular-application-providers-and-modulewithproviders)
-      - [Angular: Removed legacy renderer](#angular-removed-legacy-renderer)
-      - [Next.js: use the `@storybook/nextjs` framework](#nextjs-use-the-storybooknextjs-framework)
-      - [SvelteKit: needs the `@storybook/sveltekit` framework](#sveltekit-needs-the-storybooksveltekit-framework)
-      - [Vue3: replaced app export with setup](#vue3-replaced-app-export-with-setup)
-      - [Web-components: dropped lit-html v1 support](#web-components-dropped-lit-html-v1-support)
-      - [Create React App: dropped CRA4 support](#create-react-app-dropped-cra4-support)
-      - [HTML: No longer auto-dedents source code](#html-no-longer-auto-dedents-source-code)
-    - [7.0 Addon authors changes](#70-addon-authors-changes)
-      - [New Addons API](#new-addons-api)
-        - [Specific instructions for addon creators](#specific-instructions-for-addon-creators)
-        - [Specific instructions for addon users](#specific-instructions-for-addon-users)
-      - [register.js removed](#registerjs-removed)
-      - [No more default export from `@storybook/addons`](#no-more-default-export-from-storybookaddons)
-      - [No more configuration for manager](#no-more-configuration-for-manager)
-      - [Icons API changed](#icons-api-changed)
-      - [Removed global client APIs](#removed-global-client-apis)
-      - [framework parameter renamed to renderer](#framework-parameter-renamed-to-renderer)
-    - [7.0 Docs changes](#70-docs-changes)
-      - [Autodocs changes](#autodocs-changes)
-      - [MDX docs files](#mdx-docs-files)
-      - [Unattached docs files](#unattached-docs-files)
-      - [Doc Blocks](#doc-blocks)
-        - [Meta block](#meta-block)
-        - [Description block, `parameters.notes` and `parameters.info`](#description-block-parametersnotes-and-parametersinfo)
-        - [Story block](#story-block)
-        - [Source block](#source-block)
-        - [Canvas block](#canvas-block)
-        - [ArgsTable block](#argstable-block)
-      - [Configuring Autodocs](#configuring-autodocs)
-      - [MDX2 upgrade](#mdx2-upgrade)
-      - [Legacy MDX1 support](#legacy-mdx1-support)
-      - [Default docs styles will leak into non-story user components](#default-docs-styles-will-leak-into-non-story-user-components)
-      - [Explicit `<code>` elements are no longer syntax highlighted](#explicit-code-elements-are-no-longer-syntax-highlighted)
-      - [Dropped source loader / storiesOf static snippets](#dropped-source-loader--storiesof-static-snippets)
-      - [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters)
-      - [Addon-docs: Removed deprecated blocks.js entry](#addon-docs-removed-deprecated-blocksjs-entry)
-      - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration)
-      - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
-      - [Autoplay in docs](#autoplay-in-docs)
-      - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
-    - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes)
-      - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
-      - [`Story` type deprecated](#story-type-deprecated)
-      - [`ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated)
-      - [Renamed `renderToDOM` to `renderToCanvas`](#renamed-rendertodom-to-rendertocanvas)
-      - [Renamed `XFramework` to `XRenderer`](#renamed-xframework-to-xrenderer)
-      - [Renamed `DecoratorFn` to `Decorator`](#renamed-decoratorfn-to-decorator)
-      - [CLI option `--use-npm` deprecated](#cli-option---use-npm-deprecated)
-      - ['config' preset entry replaced with 'previewAnnotations'](#config-preset-entry-replaced-with-previewannotations)
-  - [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
-    - [Vue 3 upgrade](#vue-3-upgrade)
-    - [React18 new root API](#react18-new-root-api)
-    - [Renamed isToolshown to showToolbar](#renamed-istoolshown-to-showtoolbar)
-    - [Dropped support for addon-actions addDecorators](#dropped-support-for-addon-actions-adddecorators)
-    - [Vite builder renamed](#vite-builder-renamed)
-    - [Docs framework refactor for React](#docs-framework-refactor-for-react)
-    - [Opt-in MDX2 support](#opt-in-mdx2-support)
-    - [CSF3 auto-title improvements](#csf3-auto-title-improvements)
-      - [Auto-title filename case](#auto-title-filename-case)
-      - [Auto-title redundant filename](#auto-title-redundant-filename)
-      - [Auto-title always prefixes](#auto-title-always-prefixes)
-    - [6.5 Deprecations](#65-deprecations)
-      - [Deprecated register.js](#deprecated-registerjs)
-  - [From version 6.3.x to 6.4.0](#from-version-63x-to-640)
-    - [Automigrate](#automigrate)
-    - [CRA5 upgrade](#cra5-upgrade)
-    - [CSF3 enabled](#csf3-enabled)
-      - [Optional titles](#optional-titles)
-      - [String literal titles](#string-literal-titles)
-      - [StoryObj type](#storyobj-type)
-    - [Story Store v7](#story-store-v7)
-      - [Behavioral differences](#behavioral-differences)
-      - [Main.js framework field](#mainjs-framework-field)
-      - [Using the v7 store](#using-the-v7-store)
-      - [v7-style story sort](#v7-style-story-sort)
-      - [v7 default sort behavior](#v7-default-sort-behavior)
-      - [v7 Store API changes for addon authors](#v7-store-api-changes-for-addon-authors)
-      - [Storyshots compatibility in the v7 store](#storyshots-compatibility-in-the-v7-store)
-    - [Emotion11 quasi-compatibility](#emotion11-quasi-compatibility)
-    - [Babel mode v7](#babel-mode-v7)
-    - [Loader behavior with args changes](#loader-behavior-with-args-changes)
-    - [6.4 Angular changes](#64-angular-changes)
-      - [SB Angular builder](#sb-angular-builder)
-      - [Angular13](#angular13)
-      - [Angular component parameter removed](#angular-component-parameter-removed)
-    - [6.4 deprecations](#64-deprecations)
-      - [Deprecated --static-dir CLI flag](#deprecated---static-dir-cli-flag)
-  - [From version 6.2.x to 6.3.0](#from-version-62x-to-630)
-    - [Webpack 5](#webpack-5)
-      - [Fixing hoisting issues](#fixing-hoisting-issues)
-        - [Webpack 5 manager build](#webpack-5-manager-build)
-        - [Wrong webpack version](#wrong-webpack-version)
-    - [Angular 12 upgrade](#angular-12-upgrade)
-    - [Lit support](#lit-support)
-    - [No longer inferring default values of args](#no-longer-inferring-default-values-of-args)
-    - [6.3 deprecations](#63-deprecations)
-      - [Deprecated addon-knobs](#deprecated-addon-knobs)
-      - [Deprecated scoped blocks imports](#deprecated-scoped-blocks-imports)
-      - [Deprecated layout URL params](#deprecated-layout-url-params)
-  - [From version 6.1.x to 6.2.0](#from-version-61x-to-620)
-    - [MDX pattern tweaked](#mdx-pattern-tweaked)
-    - [6.2 Angular overhaul](#62-angular-overhaul)
-      - [New Angular storyshots format](#new-angular-storyshots-format)
-      - [Deprecated Angular story component](#deprecated-angular-story-component)
-      - [New Angular renderer](#new-angular-renderer)
-      - [Components without selectors](#components-without-selectors)
-    - [Packages now available as ESModules](#packages-now-available-as-esmodules)
-    - [6.2 Deprecations](#62-deprecations)
-      - [Deprecated implicit PostCSS loader](#deprecated-implicit-postcss-loader)
-      - [Deprecated default PostCSS plugins](#deprecated-default-postcss-plugins)
-      - [Deprecated showRoots config option](#deprecated-showroots-config-option)
-      - [Deprecated control.options](#deprecated-controloptions)
-      - [Deprecated storybook components html entry point](#deprecated-storybook-components-html-entry-point)
-  - [From version 6.0.x to 6.1.0](#from-version-60x-to-610)
-    - [Addon-backgrounds preset](#addon-backgrounds-preset)
-    - [Single story hoisting](#single-story-hoisting)
-    - [React peer dependencies](#react-peer-dependencies)
-    - [6.1 deprecations](#61-deprecations)
-      - [Deprecated DLL flags](#deprecated-dll-flags)
-      - [Deprecated storyFn](#deprecated-storyfn)
-      - [Deprecated onBeforeRender](#deprecated-onbeforerender)
-      - [Deprecated grid parameter](#deprecated-grid-parameter)
-      - [Deprecated package-composition disabled parameter](#deprecated-package-composition-disabled-parameter)
-  - [From version 5.3.x to 6.0.x](#from-version-53x-to-60x)
-    - [Hoisted CSF annotations](#hoisted-csf-annotations)
-    - [Zero config typescript](#zero-config-typescript)
-    - [Correct globs in main.js](#correct-globs-in-mainjs)
-    - [CRA preset removed](#cra-preset-removed)
-    - [Core-JS dependency errors](#core-js-dependency-errors)
-    - [Args passed as first argument to story](#args-passed-as-first-argument-to-story)
-    - [6.0 Docs breaking changes](#60-docs-breaking-changes)
-      - [Remove framework-specific docs presets](#remove-framework-specific-docs-presets)
-      - [Preview/Props renamed](#previewprops-renamed)
-      - [Docs theme separated](#docs-theme-separated)
-      - [DocsPage slots removed](#docspage-slots-removed)
-      - [React prop tables with Typescript](#react-prop-tables-with-typescript)
-      - [ConfigureJSX true by default in React](#configurejsx-true-by-default-in-react)
-      - [User babelrc disabled by default in MDX](#user-babelrc-disabled-by-default-in-mdx)
-      - [Docs description parameter](#docs-description-parameter)
-      - [6.0 Inline stories](#60-inline-stories)
-    - [New addon presets](#new-addon-presets)
-    - [Removed babel-preset-vue from Vue preset](#removed-babel-preset-vue-from-vue-preset)
-    - [Removed Deprecated APIs](#removed-deprecated-apis)
-    - [New setStories event](#new-setstories-event)
-    - [Removed renderCurrentStory event](#removed-rendercurrentstory-event)
-    - [Removed hierarchy separators](#removed-hierarchy-separators)
-    - [No longer pass denormalized parameters to storySort](#no-longer-pass-denormalized-parameters-to-storysort)
-    - [Client API changes](#client-api-changes)
-      - [Removed Legacy Story APIs](#removed-legacy-story-apis)
-      - [Can no longer add decorators/parameters after stories](#can-no-longer-add-decoratorsparameters-after-stories)
-      - [Changed Parameter Handling](#changed-parameter-handling)
-    - [Simplified Render Context](#simplified-render-context)
-    - [Story Store immutable outside of configuration](#story-store-immutable-outside-of-configuration)
-    - [Improved story source handling](#improved-story-source-handling)
-    - [6.0 Addon API changes](#60-addon-api-changes)
-      - [Consistent local addon paths in main.js](#consistent-local-addon-paths-in-mainjs)
-      - [Deprecated setAddon](#deprecated-setaddon)
-      - [Deprecated disabled parameter](#deprecated-disabled-parameter)
-      - [Actions addon uses parameters](#actions-addon-uses-parameters)
-      - [Removed action decorator APIs](#removed-action-decorator-apis)
-      - [Removed withA11y decorator](#removed-witha11y-decorator)
-      - [Essentials addon disables differently](#essentials-addon-disables-differently)
-      - [Backgrounds addon has a new api](#backgrounds-addon-has-a-new-api)
-    - [6.0 Deprecations](#60-deprecations)
-      - [Deprecated addon-info, addon-notes](#deprecated-addon-info-addon-notes)
-      - [Deprecated addon-contexts](#deprecated-addon-contexts)
-      - [Removed addon-centered](#removed-addon-centered)
-      - [Deprecated polymer](#deprecated-polymer)
-      - [Deprecated immutable options parameters](#deprecated-immutable-options-parameters)
-      - [Deprecated addParameters and addDecorator](#deprecated-addparameters-and-adddecorator)
-      - [Deprecated clearDecorators](#deprecated-cleardecorators)
-      - [Deprecated configure](#deprecated-configure)
-      - [Deprecated support for duplicate kinds](#deprecated-support-for-duplicate-kinds)
-  - [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
-    - [To main.js configuration](#to-mainjs-configuration)
-      - [Using main.js](#using-mainjs)
-      - [Using preview.js](#using-previewjs)
-      - [Using manager.js](#using-managerjs)
-    - [Create React App preset](#create-react-app-preset)
-    - [Description doc block](#description-doc-block)
-    - [React Native Async Storage](#react-native-async-storage)
-    - [Deprecate displayName parameter](#deprecate-displayname-parameter)
-    - [Unified docs preset](#unified-docs-preset)
-    - [Simplified hierarchy separators](#simplified-hierarchy-separators)
-    - [Addon StoryShots Puppeteer uses external puppeteer](#addon-storyshots-puppeteer-uses-external-puppeteer)
-  - [From version 5.1.x to 5.2.x](#from-version-51x-to-52x)
-    - [Source-loader](#source-loader)
-    - [Default viewports](#default-viewports)
-    - [Grid toolbar-feature](#grid-toolbar-feature)
-    - [Docs mode docgen](#docs-mode-docgen)
-    - [storySort option](#storysort-option)
-  - [From version 5.1.x to 5.1.10](#from-version-51x-to-5110)
-    - [babel.config.js support](#babelconfigjs-support)
-  - [From version 5.0.x to 5.1.x](#from-version-50x-to-51x)
-    - [React native server](#react-native-server)
-    - [Angular 7](#angular-7)
-    - [CoreJS 3](#corejs-3)
-  - [From version 5.0.1 to 5.0.2](#from-version-501-to-502)
-    - [Deprecate webpack extend mode](#deprecate-webpack-extend-mode)
-  - [From version 4.1.x to 5.0.x](#from-version-41x-to-50x)
-    - [sortStoriesByKind](#sortstoriesbykind)
-    - [Webpack config simplification](#webpack-config-simplification)
-    - [Theming overhaul](#theming-overhaul)
-    - [Story hierarchy defaults](#story-hierarchy-defaults)
-    - [Options addon deprecated](#options-addon-deprecated)
-    - [Individual story decorators](#individual-story-decorators)
-    - [Addon backgrounds uses parameters](#addon-backgrounds-uses-parameters)
-    - [Addon cssresources name attribute renamed](#addon-cssresources-name-attribute-renamed)
-    - [Addon viewport uses parameters](#addon-viewport-uses-parameters)
-    - [Addon a11y uses parameters, decorator renamed](#addon-a11y-uses-parameters-decorator-renamed)
-    - [Addon centered decorator deprecated](#addon-centered-decorator-deprecated)
-    - [New keyboard shortcuts defaults](#new-keyboard-shortcuts-defaults)
-    - [New URL structure](#new-url-structure)
-    - [Rename of the `--secure` cli parameter to `--https`](#rename-of-the---secure-cli-parameter-to---https)
-    - [Vue integration](#vue-integration)
-  - [From version 4.0.x to 4.1.x](#from-version-40x-to-41x)
-    - [Private addon config](#private-addon-config)
-    - [React 15.x](#react-15x)
-  - [From version 3.4.x to 4.0.x](#from-version-34x-to-40x)
-    - [React 16.3+](#react-163)
-    - [Generic addons](#generic-addons)
-    - [Knobs select ordering](#knobs-select-ordering)
-    - [Knobs URL parameters](#knobs-url-parameters)
-    - [Keyboard shortcuts moved](#keyboard-shortcuts-moved)
-    - [Removed addWithInfo](#removed-addwithinfo)
-    - [Removed RN packager](#removed-rn-packager)
-    - [Removed RN addons](#removed-rn-addons)
-    - [Storyshots Changes](#storyshots-changes)
-    - [Webpack 4](#webpack-4)
-    - [Babel 7](#babel-7)
-    - [Create-react-app](#create-react-app)
-      - [Upgrade CRA1 to babel 7](#upgrade-cra1-to-babel-7)
-      - [Migrate CRA1 while keeping babel 6](#migrate-cra1-while-keeping-babel-6)
-    - [start-storybook opens browser](#start-storybook-opens-browser)
-    - [CLI Rename](#cli-rename)
-    - [Addon story parameters](#addon-story-parameters)
-  - [From version 3.3.x to 3.4.x](#from-version-33x-to-34x)
-  - [From version 3.2.x to 3.3.x](#from-version-32x-to-33x)
-    - [`babel-core` is now a peer dependency #2494](#babel-core-is-now-a-peer-dependency-2494)
-    - [Base webpack config now contains vital plugins #1775](#base-webpack-config-now-contains-vital-plugins-1775)
-    - [Refactored Knobs](#refactored-knobs)
-  - [From version 3.1.x to 3.2.x](#from-version-31x-to-32x)
-    - [Moved TypeScript addons definitions](#moved-typescript-addons-definitions)
-    - [Updated Addons API](#updated-addons-api)
-  - [From version 3.0.x to 3.1.x](#from-version-30x-to-31x)
-    - [Moved TypeScript definitions](#moved-typescript-definitions)
-    - [Deprecated head.html](#deprecated-headhtml)
-  - [From version 2.x.x to 3.x.x](#from-version-2xx-to-3xx)
-    - [Webpack upgrade](#webpack-upgrade)
-    - [Packages renaming](#packages-renaming)
-    - [Deprecated embedded addons](#deprecated-embedded-addons)
+- [From version 8.0 to 8.1.0](#from-version-80-to-810)
+  - [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle)
+- [From version 7.x to 8.0.0](#from-version-7x-to-800)
+  - [Portable stories](#portable-stories)
+    - [Project annotations are now merged instead of overwritten in composeStory](#project-annotations-are-now-merged-instead-of-overwritten-in-composestory)
+    - [Type change in `composeStories` API](#type-change-in-composestories-api)
+    - [Composed Vue stories are now components instead of functions](#composed-vue-stories-are-now-components-instead-of-functions)
+  - [Tab addons are now routed to a query parameter](#tab-addons-are-now-routed-to-a-query-parameter)
+  - [Default keyboard shortcuts changed](#default-keyboard-shortcuts-changed)
+  - [Manager addons are now rendered with React 18](#manager-addons-are-now-rendered-with-react-18)
+  - [Removal of `storiesOf`-API](#removal-of-storiesof-api)
+  - [Removed deprecated shim packages](#removed-deprecated-shim-packages)
+  - [Framework-specific Vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added)
+    - [For React:](#for-react)
+    - [For Vue:](#for-vue)
+    - [For Svelte (without Sveltekit):](#for-svelte-without-sveltekit)
+    - [For Preact:](#for-preact)
+    - [For Solid:](#for-solid)
+    - [For Qwik:](#for-qwik)
+  - [TurboSnap Vite plugin is no longer needed](#turbosnap-vite-plugin-is-no-longer-needed)
+  - [`--webpack-stats-json` option renamed `--stats-json`](#--webpack-stats-json-option-renamed---stats-json)
+  - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function)
+  - [MDX related changes](#mdx-related-changes)
+    - [MDX is upgraded to v3](#mdx-is-upgraded-to-v3)
+    - [Dropping support for \*.stories.mdx (CSF in MDX) format and MDX1 support](#dropping-support-for-storiesmdx-csf-in-mdx-format-and-mdx1-support)
+    - [Dropping support for id, name and story in Story block](#dropping-support-for-id-name-and-story-in-story-block)
+  - [Core changes](#core-changes)
+    - [`framework.options.builder.useSWC` for Webpack5-based projects removed](#frameworkoptionsbuilderuseswc-for-webpack5-based-projects-removed)
+    - [Removed `@babel/core` and `babel-loader` from `@storybook/builder-webpack5`](#removed-babelcore-and-babel-loader-from-storybookbuilder-webpack5)
+    - [`framework.options.fastRefresh` for Webpack5-based projects removed](#frameworkoptionsfastrefresh-for-webpack5-based-projects-removed)
+    - [`typescript.skipBabel` removed](#typescriptskipbabel-removed)
+    - [Dropping support for Yarn 1](#dropping-support-for-yarn-1)
+    - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16)
+    - [Autotitle breaking fixes](#autotitle-breaking-fixes)
+    - [Storyshots has been removed](#storyshots-has-been-removed)
+    - [UI layout state has changed shape](#ui-layout-state-has-changed-shape)
+    - [New UI and props for Button and IconButton components](#new-ui-and-props-for-button-and-iconbutton-components)
+    - [Icons is deprecated](#icons-is-deprecated)
+    - [Removed postinstall](#removed-postinstall)
+    - [Removed stories.json](#removed-storiesjson)
+    - [Removed `sb babelrc` command](#removed-sb-babelrc-command)
+    - [Changed interfaces for `@storybook/router` components](#changed-interfaces-for-storybookrouter-components)
+    - [Extract no longer batches](#extract-no-longer-batches)
+  - [Framework-specific changes](#framework-specific-changes)
+    - [React](#react)
+      - [`react-docgen` component analysis by default](#react-docgen-component-analysis-by-default)
+    - [Next.js](#nextjs)
+      - [Require Next.js 13.5 and up](#require-nextjs-135-and-up)
+      - [Automatic SWC mode detection](#automatic-swc-mode-detection)
+      - [RSC config moved to React renderer](#rsc-config-moved-to-react-renderer)
+    - [Vue](#vue)
+      - [Require Vue 3 and up](#require-vue-3-and-up)
+    - [Angular](#angular)
+      - [Require Angular 15 and up](#require-angular-15-and-up)
+    - [Svelte](#svelte)
+      - [Require Svelte 4 and up](#require-svelte-4-and-up)
+    - [Preact](#preact)
+      - [Require Preact 10 and up](#require-preact-10-and-up)
+      - [No longer adds default Babel plugins](#no-longer-adds-default-babel-plugins)
+    - [Web Components](#web-components)
+      - [Dropping default babel plugins in Webpack5-based projects](#dropping-default-babel-plugins-in-webpack5-based-projects)
+  - [Deprecations which are now removed](#deprecations-which-are-now-removed)
+    - [Removed `config` preset](#removed-config-preset)
+    - [Removed `passArgsFirst` option](#removed-passargsfirst-option)
+    - [Methods and properties from AddonStore](#methods-and-properties-from-addonstore)
+    - [Methods and properties from PreviewAPI](#methods-and-properties-from-previewapi)
+    - [Removals in @storybook/components](#removals-in-storybookcomponents)
+    - [Removals in @storybook/types](#removals-in-storybooktypes)
+    - [--use-npm flag in storybook CLI](#--use-npm-flag-in-storybook-cli)
+    - [hideNoControlsWarning parameter from addon controls](#hidenocontrolswarning-parameter-from-addon-controls)
+    - [`setGlobalConfig` from `@storybook/react`](#setglobalconfig-from-storybookreact)
+    - [StorybookViteConfig type from @storybook/builder-vite](#storybookviteconfig-type-from-storybookbuilder-vite)
+    - [props from WithTooltipComponent from @storybook/components](#props-from-withtooltipcomponent-from-storybookcomponents)
+    - [LinkTo direct import from addon-links](#linkto-direct-import-from-addon-links)
+    - [DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types](#decoratorfn-story-componentstory-componentstoryobj-componentstoryfn-and-componentmeta-typescript-types)
+    - ["Framework" TypeScript types](#framework-typescript-types)
+    - [`navigateToSettingsPage` method from Storybook's manager-api](#navigatetosettingspage-method-from-storybooks-manager-api)
+    - [storyIndexers](#storyindexers)
+    - [Deprecated docs parameters](#deprecated-docs-parameters)
+    - [Description Doc block properties](#description-doc-block-properties)
+    - [Story Doc block properties](#story-doc-block-properties)
+    - [Manager API expandAll and collapseAll methods](#manager-api-expandall-and-collapseall-methods)
+    - [`ArgsTable` Doc block removed](#argstable-doc-block-removed)
+    - [`Source` Doc block properties](#source-doc-block-properties)
+    - [`Canvas` Doc block properties](#canvas-doc-block-properties)
+    - [`Primary` Doc block properties](#primary-doc-block-properties)
+    - [`createChannel` from `@storybook/postmessage` and `@storybook/channel-websocket`](#createchannel-from-storybookpostmessage-and-storybookchannel-websocket)
+    - [StoryStore and methods deprecated](#storystore-and-methods-deprecated)
+  - [Addon author changes](#addon-author-changes)
+    - [Tab addons cannot manually route, Tool addons can filter their visibility via tabId](#tab-addons-cannot-manually-route-tool-addons-can-filter-their-visibility-via-tabid)
+    - [Removed `config` preset](#removed-config-preset-1)
+- [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
+    - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
+    - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
+    - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
+    - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
+    - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
+- [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
+    - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
+    - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
+- [From version 7.0.0 to 7.2.0](#from-version-700-to-720)
+    - [Addon API is more type-strict](#addon-api-is-more-type-strict)
+    - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated)
+- [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
+  - [7.0 breaking changes](#70-breaking-changes)
+    - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below)
+    - [Default export in Preview.js](#default-export-in-previewjs)
+    - [ESM format in Main.js](#esm-format-in-mainjs)
+    - [Modern browser support](#modern-browser-support)
+    - [React peer dependencies required](#react-peer-dependencies-required)
+    - [start-storybook / build-storybook binaries removed](#start-storybook--build-storybook-binaries-removed)
+    - [New Framework API](#new-framework-api)
+      - [Available framework packages](#available-framework-packages)
+      - [Framework field mandatory](#framework-field-mandatory)
+      - [frameworkOptions renamed](#frameworkoptions-renamed)
+      - [builderOptions renamed](#builderoptions-renamed)
+    - [TypeScript: StorybookConfig type moved](#typescript-storybookconfig-type-moved)
+    - [Titles are statically computed](#titles-are-statically-computed)
+    - [Framework standalone build moved](#framework-standalone-build-moved)
+    - [Change of root html IDs](#change-of-root-html-ids)
+    - [Stories glob matches MDX files](#stories-glob-matches-mdx-files)
+    - [Add strict mode](#add-strict-mode)
+    - [Importing plain markdown files with `transcludeMarkdown` has changed](#importing-plain-markdown-files-with-transcludemarkdown-has-changed)
+    - [Stories field in .storybook/main.js is mandatory](#stories-field-in-storybookmainjs-is-mandatory)
+    - [Stricter global types](#stricter-global-types)
+    - [Deploying build artifacts](#deploying-build-artifacts)
+      - [Dropped support for file URLs](#dropped-support-for-file-urls)
+      - [Serving with nginx](#serving-with-nginx)
+      - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules)
+  - [7.0 Core changes](#70-core-changes)
+    - [7.0 feature flags removed](#70-feature-flags-removed)
+    - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
+    - [Changed decorator order between preview.js and addons/frameworks](#changed-decorator-order-between-previewjs-and-addonsframeworks)
+    - [Dark mode detection](#dark-mode-detection)
+    - [`addons.setConfig` should now be imported from `@storybook/manager-api`.](#addonssetconfig-should-now-be-imported-from-storybookmanager-api)
+  - [7.0 core addons changes](#70-core-addons-changes)
+    - [Removed auto injection of @storybook/addon-actions decorator](#removed-auto-injection-of-storybookaddon-actions-decorator)
+    - [Addon-backgrounds: Removed deprecated grid parameter](#addon-backgrounds-removed-deprecated-grid-parameter)
+    - [Addon-a11y: Removed deprecated withA11y decorator](#addon-a11y-removed-deprecated-witha11y-decorator)
+    - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default)
+  - [7.0 Vite changes](#70-vite-changes)
+    - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically)
+    - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
+  - [7.0 Webpack changes](#70-webpack-changes)
+    - [Webpack4 support discontinued](#webpack4-support-discontinued)
+    - [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
+    - [Postcss removed](#postcss-removed)
+    - [Removed DLL flags](#removed-dll-flags)
+  - [7.0 Framework-specific changes](#70-framework-specific-changes)
+    - [Angular: Removed deprecated `component` and `propsMeta` field](#angular-removed-deprecated-component-and-propsmeta-field)
+    - [Angular: Drop support for Angular \< 14](#angular-drop-support-for-angular--14)
+    - [Angular: Drop support for calling Storybook directly](#angular-drop-support-for-calling-storybook-directly)
+    - [Angular: Application providers and ModuleWithProviders](#angular-application-providers-and-modulewithproviders)
+    - [Angular: Removed legacy renderer](#angular-removed-legacy-renderer)
+    - [Next.js: use the `@storybook/nextjs` framework](#nextjs-use-the-storybooknextjs-framework)
+    - [SvelteKit: needs the `@storybook/sveltekit` framework](#sveltekit-needs-the-storybooksveltekit-framework)
+    - [Vue3: replaced app export with setup](#vue3-replaced-app-export-with-setup)
+    - [Web-components: dropped lit-html v1 support](#web-components-dropped-lit-html-v1-support)
+    - [Create React App: dropped CRA4 support](#create-react-app-dropped-cra4-support)
+    - [HTML: No longer auto-dedents source code](#html-no-longer-auto-dedents-source-code)
+  - [7.0 Addon authors changes](#70-addon-authors-changes)
+    - [New Addons API](#new-addons-api)
+      - [Specific instructions for addon creators](#specific-instructions-for-addon-creators)
+      - [Specific instructions for addon users](#specific-instructions-for-addon-users)
+    - [register.js removed](#registerjs-removed)
+    - [No more default export from `@storybook/addons`](#no-more-default-export-from-storybookaddons)
+    - [No more configuration for manager](#no-more-configuration-for-manager)
+    - [Icons API changed](#icons-api-changed)
+    - [Removed global client APIs](#removed-global-client-apis)
+    - [framework parameter renamed to renderer](#framework-parameter-renamed-to-renderer)
+  - [7.0 Docs changes](#70-docs-changes)
+    - [Autodocs changes](#autodocs-changes)
+    - [MDX docs files](#mdx-docs-files)
+    - [Unattached docs files](#unattached-docs-files)
+    - [Doc Blocks](#doc-blocks)
+      - [Meta block](#meta-block)
+      - [Description block, `parameters.notes` and `parameters.info`](#description-block-parametersnotes-and-parametersinfo)
+      - [Story block](#story-block)
+      - [Source block](#source-block)
+      - [Canvas block](#canvas-block)
+      - [ArgsTable block](#argstable-block)
+    - [Configuring Autodocs](#configuring-autodocs)
+    - [MDX2 upgrade](#mdx2-upgrade)
+    - [Legacy MDX1 support](#legacy-mdx1-support)
+    - [Default docs styles will leak into non-story user components](#default-docs-styles-will-leak-into-non-story-user-components)
+    - [Explicit `<code>` elements are no longer syntax highlighted](#explicit-code-elements-are-no-longer-syntax-highlighted)
+    - [Dropped source loader / storiesOf static snippets](#dropped-source-loader--storiesof-static-snippets)
+    - [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters)
+    - [Addon-docs: Removed deprecated blocks.js entry](#addon-docs-removed-deprecated-blocksjs-entry)
+    - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration)
+    - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
+    - [Autoplay in docs](#autoplay-in-docs)
+    - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
+  - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes)
+    - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
+    - [`Story` type deprecated](#story-type-deprecated)
+    - [`ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated)
+    - [Renamed `renderToDOM` to `renderToCanvas`](#renamed-rendertodom-to-rendertocanvas)
+    - [Renamed `XFramework` to `XRenderer`](#renamed-xframework-to-xrenderer)
+    - [Renamed `DecoratorFn` to `Decorator`](#renamed-decoratorfn-to-decorator)
+    - [CLI option `--use-npm` deprecated](#cli-option---use-npm-deprecated)
+    - ['config' preset entry replaced with 'previewAnnotations'](#config-preset-entry-replaced-with-previewannotations)
+- [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
+  - [Vue 3 upgrade](#vue-3-upgrade)
+  - [React18 new root API](#react18-new-root-api)
+  - [Renamed isToolshown to showToolbar](#renamed-istoolshown-to-showtoolbar)
+  - [Dropped support for addon-actions addDecorators](#dropped-support-for-addon-actions-adddecorators)
+  - [Vite builder renamed](#vite-builder-renamed)
+  - [Docs framework refactor for React](#docs-framework-refactor-for-react)
+  - [Opt-in MDX2 support](#opt-in-mdx2-support)
+  - [CSF3 auto-title improvements](#csf3-auto-title-improvements)
+    - [Auto-title filename case](#auto-title-filename-case)
+    - [Auto-title redundant filename](#auto-title-redundant-filename)
+    - [Auto-title always prefixes](#auto-title-always-prefixes)
+  - [6.5 Deprecations](#65-deprecations)
+    - [Deprecated register.js](#deprecated-registerjs)
+- [From version 6.3.x to 6.4.0](#from-version-63x-to-640)
+  - [Automigrate](#automigrate)
+  - [CRA5 upgrade](#cra5-upgrade)
+  - [CSF3 enabled](#csf3-enabled)
+    - [Optional titles](#optional-titles)
+    - [String literal titles](#string-literal-titles)
+    - [StoryObj type](#storyobj-type)
+  - [Story Store v7](#story-store-v7)
+    - [Behavioral differences](#behavioral-differences)
+    - [Main.js framework field](#mainjs-framework-field)
+    - [Using the v7 store](#using-the-v7-store)
+    - [v7-style story sort](#v7-style-story-sort)
+    - [v7 default sort behavior](#v7-default-sort-behavior)
+    - [v7 Store API changes for addon authors](#v7-store-api-changes-for-addon-authors)
+    - [Storyshots compatibility in the v7 store](#storyshots-compatibility-in-the-v7-store)
+  - [Emotion11 quasi-compatibility](#emotion11-quasi-compatibility)
+  - [Babel mode v7](#babel-mode-v7)
+  - [Loader behavior with args changes](#loader-behavior-with-args-changes)
+  - [6.4 Angular changes](#64-angular-changes)
+    - [SB Angular builder](#sb-angular-builder)
+    - [Angular13](#angular13)
+    - [Angular component parameter removed](#angular-component-parameter-removed)
+  - [6.4 deprecations](#64-deprecations)
+    - [Deprecated --static-dir CLI flag](#deprecated---static-dir-cli-flag)
+- [From version 6.2.x to 6.3.0](#from-version-62x-to-630)
+  - [Webpack 5](#webpack-5)
+    - [Fixing hoisting issues](#fixing-hoisting-issues)
+      - [Webpack 5 manager build](#webpack-5-manager-build)
+      - [Wrong webpack version](#wrong-webpack-version)
+  - [Angular 12 upgrade](#angular-12-upgrade)
+  - [Lit support](#lit-support)
+  - [No longer inferring default values of args](#no-longer-inferring-default-values-of-args)
+  - [6.3 deprecations](#63-deprecations)
+    - [Deprecated addon-knobs](#deprecated-addon-knobs)
+    - [Deprecated scoped blocks imports](#deprecated-scoped-blocks-imports)
+    - [Deprecated layout URL params](#deprecated-layout-url-params)
+- [From version 6.1.x to 6.2.0](#from-version-61x-to-620)
+  - [MDX pattern tweaked](#mdx-pattern-tweaked)
+  - [6.2 Angular overhaul](#62-angular-overhaul)
+    - [New Angular storyshots format](#new-angular-storyshots-format)
+    - [Deprecated Angular story component](#deprecated-angular-story-component)
+    - [New Angular renderer](#new-angular-renderer)
+    - [Components without selectors](#components-without-selectors)
+  - [Packages now available as ESModules](#packages-now-available-as-esmodules)
+  - [6.2 Deprecations](#62-deprecations)
+    - [Deprecated implicit PostCSS loader](#deprecated-implicit-postcss-loader)
+    - [Deprecated default PostCSS plugins](#deprecated-default-postcss-plugins)
+    - [Deprecated showRoots config option](#deprecated-showroots-config-option)
+    - [Deprecated control.options](#deprecated-controloptions)
+    - [Deprecated storybook components html entry point](#deprecated-storybook-components-html-entry-point)
+- [From version 6.0.x to 6.1.0](#from-version-60x-to-610)
+  - [Addon-backgrounds preset](#addon-backgrounds-preset)
+  - [Single story hoisting](#single-story-hoisting)
+  - [React peer dependencies](#react-peer-dependencies)
+  - [6.1 deprecations](#61-deprecations)
+    - [Deprecated DLL flags](#deprecated-dll-flags)
+    - [Deprecated storyFn](#deprecated-storyfn)
+    - [Deprecated onBeforeRender](#deprecated-onbeforerender)
+    - [Deprecated grid parameter](#deprecated-grid-parameter)
+    - [Deprecated package-composition disabled parameter](#deprecated-package-composition-disabled-parameter)
+- [From version 5.3.x to 6.0.x](#from-version-53x-to-60x)
+  - [Hoisted CSF annotations](#hoisted-csf-annotations)
+  - [Zero config typescript](#zero-config-typescript)
+  - [Correct globs in main.js](#correct-globs-in-mainjs)
+  - [CRA preset removed](#cra-preset-removed)
+  - [Core-JS dependency errors](#core-js-dependency-errors)
+  - [Args passed as first argument to story](#args-passed-as-first-argument-to-story)
+  - [6.0 Docs breaking changes](#60-docs-breaking-changes)
+    - [Remove framework-specific docs presets](#remove-framework-specific-docs-presets)
+    - [Preview/Props renamed](#previewprops-renamed)
+    - [Docs theme separated](#docs-theme-separated)
+    - [DocsPage slots removed](#docspage-slots-removed)
+    - [React prop tables with Typescript](#react-prop-tables-with-typescript)
+    - [ConfigureJSX true by default in React](#configurejsx-true-by-default-in-react)
+    - [User babelrc disabled by default in MDX](#user-babelrc-disabled-by-default-in-mdx)
+    - [Docs description parameter](#docs-description-parameter)
+    - [6.0 Inline stories](#60-inline-stories)
+  - [New addon presets](#new-addon-presets)
+  - [Removed babel-preset-vue from Vue preset](#removed-babel-preset-vue-from-vue-preset)
+  - [Removed Deprecated APIs](#removed-deprecated-apis)
+  - [New setStories event](#new-setstories-event)
+  - [Removed renderCurrentStory event](#removed-rendercurrentstory-event)
+  - [Removed hierarchy separators](#removed-hierarchy-separators)
+  - [No longer pass denormalized parameters to storySort](#no-longer-pass-denormalized-parameters-to-storysort)
+  - [Client API changes](#client-api-changes)
+    - [Removed Legacy Story APIs](#removed-legacy-story-apis)
+    - [Can no longer add decorators/parameters after stories](#can-no-longer-add-decoratorsparameters-after-stories)
+    - [Changed Parameter Handling](#changed-parameter-handling)
+  - [Simplified Render Context](#simplified-render-context)
+  - [Story Store immutable outside of configuration](#story-store-immutable-outside-of-configuration)
+  - [Improved story source handling](#improved-story-source-handling)
+  - [6.0 Addon API changes](#60-addon-api-changes)
+    - [Consistent local addon paths in main.js](#consistent-local-addon-paths-in-mainjs)
+    - [Deprecated setAddon](#deprecated-setaddon)
+    - [Deprecated disabled parameter](#deprecated-disabled-parameter)
+    - [Actions addon uses parameters](#actions-addon-uses-parameters)
+    - [Removed action decorator APIs](#removed-action-decorator-apis)
+    - [Removed withA11y decorator](#removed-witha11y-decorator)
+    - [Essentials addon disables differently](#essentials-addon-disables-differently)
+    - [Backgrounds addon has a new api](#backgrounds-addon-has-a-new-api)
+  - [6.0 Deprecations](#60-deprecations)
+    - [Deprecated addon-info, addon-notes](#deprecated-addon-info-addon-notes)
+    - [Deprecated addon-contexts](#deprecated-addon-contexts)
+    - [Removed addon-centered](#removed-addon-centered)
+    - [Deprecated polymer](#deprecated-polymer)
+    - [Deprecated immutable options parameters](#deprecated-immutable-options-parameters)
+    - [Deprecated addParameters and addDecorator](#deprecated-addparameters-and-adddecorator)
+    - [Deprecated clearDecorators](#deprecated-cleardecorators)
+    - [Deprecated configure](#deprecated-configure)
+    - [Deprecated support for duplicate kinds](#deprecated-support-for-duplicate-kinds)
+- [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
+  - [To main.js configuration](#to-mainjs-configuration)
+    - [Using main.js](#using-mainjs)
+    - [Using preview.js](#using-previewjs)
+    - [Using manager.js](#using-managerjs)
+  - [Create React App preset](#create-react-app-preset)
+  - [Description doc block](#description-doc-block)
+  - [React Native Async Storage](#react-native-async-storage)
+  - [Deprecate displayName parameter](#deprecate-displayname-parameter)
+  - [Unified docs preset](#unified-docs-preset)
+  - [Simplified hierarchy separators](#simplified-hierarchy-separators)
+  - [Addon StoryShots Puppeteer uses external puppeteer](#addon-storyshots-puppeteer-uses-external-puppeteer)
+- [From version 5.1.x to 5.2.x](#from-version-51x-to-52x)
+  - [Source-loader](#source-loader)
+  - [Default viewports](#default-viewports)
+  - [Grid toolbar-feature](#grid-toolbar-feature)
+  - [Docs mode docgen](#docs-mode-docgen)
+  - [storySort option](#storysort-option)
+- [From version 5.1.x to 5.1.10](#from-version-51x-to-5110)
+  - [babel.config.js support](#babelconfigjs-support)
+- [From version 5.0.x to 5.1.x](#from-version-50x-to-51x)
+  - [React native server](#react-native-server)
+  - [Angular 7](#angular-7)
+  - [CoreJS 3](#corejs-3)
+- [From version 5.0.1 to 5.0.2](#from-version-501-to-502)
+  - [Deprecate webpack extend mode](#deprecate-webpack-extend-mode)
+- [From version 4.1.x to 5.0.x](#from-version-41x-to-50x)
+  - [sortStoriesByKind](#sortstoriesbykind)
+  - [Webpack config simplification](#webpack-config-simplification)
+  - [Theming overhaul](#theming-overhaul)
+  - [Story hierarchy defaults](#story-hierarchy-defaults)
+  - [Options addon deprecated](#options-addon-deprecated)
+  - [Individual story decorators](#individual-story-decorators)
+  - [Addon backgrounds uses parameters](#addon-backgrounds-uses-parameters)
+  - [Addon cssresources name attribute renamed](#addon-cssresources-name-attribute-renamed)
+  - [Addon viewport uses parameters](#addon-viewport-uses-parameters)
+  - [Addon a11y uses parameters, decorator renamed](#addon-a11y-uses-parameters-decorator-renamed)
+  - [Addon centered decorator deprecated](#addon-centered-decorator-deprecated)
+  - [New keyboard shortcuts defaults](#new-keyboard-shortcuts-defaults)
+  - [New URL structure](#new-url-structure)
+  - [Rename of the `--secure` cli parameter to `--https`](#rename-of-the---secure-cli-parameter-to---https)
+  - [Vue integration](#vue-integration)
+- [From version 4.0.x to 4.1.x](#from-version-40x-to-41x)
+  - [Private addon config](#private-addon-config)
+  - [React 15.x](#react-15x)
+- [From version 3.4.x to 4.0.x](#from-version-34x-to-40x)
+  - [React 16.3+](#react-163)
+  - [Generic addons](#generic-addons)
+  - [Knobs select ordering](#knobs-select-ordering)
+  - [Knobs URL parameters](#knobs-url-parameters)
+  - [Keyboard shortcuts moved](#keyboard-shortcuts-moved)
+  - [Removed addWithInfo](#removed-addwithinfo)
+  - [Removed RN packager](#removed-rn-packager)
+  - [Removed RN addons](#removed-rn-addons)
+  - [Storyshots Changes](#storyshots-changes)
+  - [Webpack 4](#webpack-4)
+  - [Babel 7](#babel-7)
+  - [Create-react-app](#create-react-app)
+    - [Upgrade CRA1 to babel 7](#upgrade-cra1-to-babel-7)
+    - [Migrate CRA1 while keeping babel 6](#migrate-cra1-while-keeping-babel-6)
+  - [start-storybook opens browser](#start-storybook-opens-browser)
+  - [CLI Rename](#cli-rename)
+  - [Addon story parameters](#addon-story-parameters)
+- [From version 3.3.x to 3.4.x](#from-version-33x-to-34x)
+- [From version 3.2.x to 3.3.x](#from-version-32x-to-33x)
+  - [`babel-core` is now a peer dependency #2494](#babel-core-is-now-a-peer-dependency-2494)
+  - [Base webpack config now contains vital plugins #1775](#base-webpack-config-now-contains-vital-plugins-1775)
+  - [Refactored Knobs](#refactored-knobs)
+- [From version 3.1.x to 3.2.x](#from-version-31x-to-32x)
+  - [Moved TypeScript addons definitions](#moved-typescript-addons-definitions)
+  - [Updated Addons API](#updated-addons-api)
+- [From version 3.0.x to 3.1.x](#from-version-30x-to-31x)
+  - [Moved TypeScript definitions](#moved-typescript-definitions)
+  - [Deprecated head.html](#deprecated-headhtml)
+- [From version 2.x.x to 3.x.x](#from-version-2xx-to-3xx)
+  - [Webpack upgrade](#webpack-upgrade)
+  - [Packages renaming](#packages-renaming)
+  - [Deprecated embedded addons](#deprecated-embedded-addons)
 
 ## From version 8.0 to 8.1.0
 
@@ -1384,12 +1382,6 @@ We will remove the `typescript.skipBabel` option in Storybook 8.0. Please use `t
 
 The `Primary` doc block now also accepts an `of` prop as described in the [Doc Blocks](#doc-blocks) section. It still accepts being passed `name` or no props at all.
 
-##### Subtitle block and `parameters.componentSubtitle`
-
-The `Subtitle` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta).
-
-`parameters.componentSubtitle` has been deprecated to be consistent with other parameters related to autodocs, instead use `parameters.docs.subtitle`.
-
 #### Addons no longer need a peer dependency on React
 
 Historically the majority of addons have had a peer dependency on React and a handful of Storybook core packages. In most cases this has not been necessary since 7.0 because the Storybook manager makes those available on the global scope. It has created an unnecessary burden for users in non-React projects.

From 3889e83c6c37eace04f54f0d369455e7bfb2f56e Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 22 Apr 2024 13:15:19 +0200
Subject: [PATCH 16/23] rename Subtitle stories

---
 .../ui/blocks/src/blocks/Subtitle.stories.tsx | 52 +++++++++----------
 ... ButtonWithMetaSubtitleAsBoth.stories.tsx} |  2 +-
 ...taSubtitleAsComponentSubtitle.stories.tsx} |  0
 ...ithMetaSubtitleAsDocsSubtitle.stories.tsx} |  0
 4 files changed, 27 insertions(+), 27 deletions(-)
 rename code/ui/blocks/src/examples/{ButtonWithMetaSubtitleInBoth.stories.tsx => ButtonWithMetaSubtitleAsBoth.stories.tsx} (93%)
 rename code/ui/blocks/src/examples/{ButtonWithMetaSubtitleInComponentSubtitle.stories.tsx => ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx} (100%)
 rename code/ui/blocks/src/examples/{ButtonWithMetaSubtitleInDocsSubtitle.stories.tsx => ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx} (100%)

diff --git a/code/ui/blocks/src/blocks/Subtitle.stories.tsx b/code/ui/blocks/src/blocks/Subtitle.stories.tsx
index f1a87cd4160e..4fe4a2ef6a19 100644
--- a/code/ui/blocks/src/blocks/Subtitle.stories.tsx
+++ b/code/ui/blocks/src/blocks/Subtitle.stories.tsx
@@ -2,9 +2,9 @@ import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { Subtitle } from './Subtitle';
 import * as DefaultButtonStories from '../examples/Button.stories';
-import * as ButtonStoriesWithMetaSubtitleInBoth from '../examples/ButtonWithMetaSubtitleInBoth.stories';
-import * as ButtonStoriesWithMetaSubtitleInComponentSubtitle from '../examples/ButtonWithMetaSubtitleInComponentSubtitle.stories';
-import * as ButtonStoriesWithMetaSubtitleInDocsSubtitle from '../examples/ButtonWithMetaSubtitleInDocsSubtitle.stories';
+import * as ButtonStoriesWithMetaSubtitleAsBoth from '../examples/ButtonWithMetaSubtitleAsBoth.stories';
+import * as ButtonStoriesWithMetaSubtitleAsComponentSubtitle from '../examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories';
+import * as ButtonStoriesWithMetaSubtitleAsDocsSubtitle from '../examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories';
 
 const meta: Meta<typeof Subtitle> = {
   component: Subtitle,
@@ -23,56 +23,56 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const OfCSFFileInBoth: Story = {
+export const OfCSFFileAsBoth: Story = {
   args: {
-    of: ButtonStoriesWithMetaSubtitleInBoth,
+    of: ButtonStoriesWithMetaSubtitleAsBoth,
   },
   parameters: {
-    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInBoth.stories'],
+    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleAsBoth.stories'],
   },
 };
-export const OfCSFFileInComponentSubtitle: Story = {
-  name: 'Of CSF File In parameters.componentSubtitle',
+export const OfCSFFileAsComponentSubtitle: Story = {
+  name: 'Of CSF File As parameters.componentSubtitle',
   args: {
-    of: ButtonStoriesWithMetaSubtitleInComponentSubtitle,
+    of: ButtonStoriesWithMetaSubtitleAsComponentSubtitle,
   },
   parameters: {
-    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInComponentSubtitle.stories'],
+    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories'],
   },
 };
-export const OfCSFFileInDocsSubtitle: Story = {
-  name: 'Of CSF File In parameters.docs.subtitle',
+export const OfCSFFileAsDocsSubtitle: Story = {
+  name: 'Of CSF File As parameters.docs.subtitle',
   args: {
-    of: ButtonStoriesWithMetaSubtitleInDocsSubtitle,
+    of: ButtonStoriesWithMetaSubtitleAsDocsSubtitle,
   },
   parameters: {
-    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInDocsSubtitle.stories'],
+    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories'],
   },
 };
-export const OfMetaInBoth: Story = {
+export const OfMetaAsBoth: Story = {
   args: {
-    of: ButtonStoriesWithMetaSubtitleInBoth.default,
+    of: ButtonStoriesWithMetaSubtitleAsBoth.default,
   },
   parameters: {
-    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInBoth.stories'],
+    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleAsBoth.stories'],
   },
 };
-export const OfMetaInComponentSubtitle: Story = {
-  name: 'Of Meta In parameters.componentSubtitle',
+export const OfMetaAsComponentSubtitle: Story = {
+  name: 'Of Meta As parameters.componentSubtitle',
   args: {
-    of: ButtonStoriesWithMetaSubtitleInComponentSubtitle.default,
+    of: ButtonStoriesWithMetaSubtitleAsComponentSubtitle.default,
   },
   parameters: {
-    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInComponentSubtitle.stories'],
+    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories'],
   },
 };
-export const OfMetaInDocsSubtitle: Story = {
-  name: 'Of Meta In parameters.docs.subtitle',
+export const OfMetaAsDocsSubtitle: Story = {
+  name: 'Of Meta As parameters.docs.subtitle',
   args: {
-    of: ButtonStoriesWithMetaSubtitleInDocsSubtitle.default,
+    of: ButtonStoriesWithMetaSubtitleAsDocsSubtitle.default,
   },
   parameters: {
-    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInDocsSubtitle.stories'],
+    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories'],
   },
 };
 export const DefaultAttached: Story = {
@@ -100,5 +100,5 @@ export const OfStringMetaAttached: Story = {
 };
 export const Children: Story = {
   parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: true },
-  render: () => <Subtitle>This subtitle is set inside the Subtitle element.</Subtitle>,
+  render: () => <Subtitle>This subtitle is a string passed as a children</Subtitle>,
 };
diff --git a/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInBoth.stories.tsx b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx
similarity index 93%
rename from code/ui/blocks/src/examples/ButtonWithMetaSubtitleInBoth.stories.tsx
rename to code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx
index 27327f062d8d..5b4235c07c57 100644
--- a/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInBoth.stories.tsx
+++ b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx
@@ -21,7 +21,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const WithMetaSubtitleInBoth: Story = {
+export const WithMetaSubtitleAsBoth: Story = {
   args: {
     primary: true,
     label: 'Button',
diff --git a/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInComponentSubtitle.stories.tsx b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx
similarity index 100%
rename from code/ui/blocks/src/examples/ButtonWithMetaSubtitleInComponentSubtitle.stories.tsx
rename to code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx
diff --git a/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInDocsSubtitle.stories.tsx b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx
similarity index 100%
rename from code/ui/blocks/src/examples/ButtonWithMetaSubtitleInDocsSubtitle.stories.tsx
rename to code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx

From ee0dd00e28c9cd1d8d07c77a4c74065dd4329c6d Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 22 Apr 2024 14:19:52 +0200
Subject: [PATCH 17/23] simplify Title extraction

---
 code/ui/blocks/src/blocks/Title.stories.tsx |  9 ++--
 code/ui/blocks/src/blocks/Title.tsx         | 48 +++++----------------
 2 files changed, 15 insertions(+), 42 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Title.stories.tsx b/code/ui/blocks/src/blocks/Title.stories.tsx
index 0eca0b8d2283..a75b6ef72d98 100644
--- a/code/ui/blocks/src/blocks/Title.stories.tsx
+++ b/code/ui/blocks/src/blocks/Title.stories.tsx
@@ -20,16 +20,14 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const OfCSFFileInComponentTitle: Story = {
-  name: 'Of CSF File with title',
+export const OfCSFFile: Story = {
   args: {
     of: DefaultButtonStories,
   },
   parameters: { relativeCsfPaths: ['../examples/Button.stories'] },
 };
 
-export const OfMetaInComponentTitle: Story = {
-  name: 'Of meta with title',
+export const OfMeta: Story = {
   args: {
     of: DefaultButtonStories,
   },
@@ -46,8 +44,9 @@ export const OfStringMetaAttached: Story = {
 
 export const Children: Story = {
   args: {
-    children: 'Custom title',
+    children: 'Title as children',
   },
+  parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: false },
 };
 
 export const DefaultAttached: Story = {
diff --git a/code/ui/blocks/src/blocks/Title.tsx b/code/ui/blocks/src/blocks/Title.tsx
index a530b720a0cb..55b85ebad717 100644
--- a/code/ui/blocks/src/blocks/Title.tsx
+++ b/code/ui/blocks/src/blocks/Title.tsx
@@ -1,8 +1,7 @@
 import type { ComponentTitle } from '@storybook/types';
 import type { FunctionComponent, ReactNode } from 'react';
-import React, { useContext } from 'react';
+import React from 'react';
 import { Title as PureTitle } from '../components';
-import { DocsContext } from './DocsContext';
 import type { Of } from './useOf';
 import { useOf } from './useOf';
 
@@ -23,28 +22,7 @@ const STORY_KIND_PATH_SEPARATOR = /\s*\/\s*/;
 
 export const extractTitle = (title: ComponentTitle) => {
   const groups = title.trim().split(STORY_KIND_PATH_SEPARATOR);
-  return (groups && groups[groups.length - 1]) || title;
-};
-
-const getTitleFromResolvedOf = (resolvedOf: ReturnType<typeof useOf>): string | null => {
-  switch (resolvedOf.type) {
-    case 'meta': {
-      return resolvedOf.preparedMeta.title || null;
-    }
-    case 'story':
-    case 'component': {
-      throw new Error(
-        `Unsupported module type. Title's \`of\` prop only supports \`meta\`, got: ${
-          (resolvedOf as any).type
-        }`
-      );
-    }
-    default: {
-      throw new Error(
-        `Unrecognized module type resolved from 'useOf', got: ${(resolvedOf as any).type}`
-      );
-    }
-  }
+  return groups?.[groups?.length - 1] || title;
 };
 
 export const Title: FunctionComponent<TitleProps> = (props) => {
@@ -54,21 +32,17 @@ export const Title: FunctionComponent<TitleProps> = (props) => {
     throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
   }
 
-  const context = useContext(DocsContext);
-
-  let content;
-  if (of) {
-    const resolvedOf = useOf(of || 'meta');
-    content = getTitleFromResolvedOf(resolvedOf);
-  }
-
-  if (!content) {
-    content = children;
+  let preparedMeta;
+  try {
+    preparedMeta = useOf(of || 'meta', ['meta']).preparedMeta;
+  } catch (error) {
+    if (children && !error.message.includes('did you forget to use <Meta of={} />?')) {
+      // ignore error about unattached CSF since we can still render children
+      throw error;
+    }
   }
 
-  if (!content) {
-    content = extractTitle(context.storyById().title);
-  }
+  const content = children || extractTitle(preparedMeta.title);
 
   return content ? <PureTitle className="sbdocs-title sb-unstyled">{content}</PureTitle> : null;
 };

From 688cf1823b9541cc1b41cfbfeddbfb9b8c202242 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 22 Apr 2024 14:26:18 +0200
Subject: [PATCH 18/23] Move migration note

---
 MIGRATION.md | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 2e791f511499..34c0ca87c685 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -2,6 +2,7 @@
 
 - [From version 8.0 to 8.1.0](#from-version-80-to-810)
   - [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle)
+      - [Title block](#title-block)
 - [From version 7.x to 8.0.0](#from-version-7x-to-800)
   - [Portable stories](#portable-stories)
     - [Project annotations are now merged instead of overwritten in composeStory](#project-annotations-are-now-merged-instead-of-overwritten-in-composestory)
@@ -413,6 +414,12 @@ The `Subtitle` block now accepts an `of` prop, which can be a reference to a CSF
 
 `parameters.componentSubtitle` has been deprecated to be consistent with other parameters related to autodocs, instead use `parameters.docs.subtitle`.
 
+##### Title block
+
+The `Title` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta).
+
+It still accepts being passed `children`.
+
 ## From version 7.x to 8.0.0
 
 ### Portable stories
@@ -2656,10 +2663,6 @@ Additionally to changing the docs information architecture, we've updated the AP
 
 The primary change of the `Meta` block is the ability to attach to CSF files with `<Meta of={}>` as described above.
 
-##### Title block
-
-The `Title` block now also accepts an `of` prop as described above. It still accepts being passed `children`.
-
 ##### Description block, `parameters.notes` and `parameters.info`
 
 In 6.5 the Description doc block accepted a range of different props, `markdown`, `type` and `children` as a way to customize the content.

From 7b2ddea221a8eac43eb45a738d2408e7ef072a16 Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Mon, 22 Apr 2024 13:01:42 +0000
Subject: [PATCH 19/23] Update CHANGELOG.md for v8.0.9 [skip ci]

---
 CHANGELOG.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ef1c0ad4edbf..d93c3b996486 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,14 @@
+## 8.0.9
+
+- Addon-docs: Fix MDX compilation when using `@vitejs/plugin-react-swc` with plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold!
+- CSF: Fix typings for control and other properties of argTypes - [#26824](https://github.com/storybookjs/storybook/pull/26824), thanks @kasperpeulen!
+- Controls: Fix crashing when docgen extraction partially fails - [#26862](https://github.com/storybookjs/storybook/pull/26862), thanks @yannbf!
+- Doc Tools: Signature Type Error Handling - [#26774](https://github.com/storybookjs/storybook/pull/26774), thanks @ethriel3695!
+- Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13!
+- Nextjs: Support next 14.2 useParams functionality - [#26874](https://github.com/storybookjs/storybook/pull/26874), thanks @yannbf!
+- Test: Remove chai as dependency of @storybook/test - [#26852](https://github.com/storybookjs/storybook/pull/26852), thanks @kasperpeulen!
+- UI: Fix sidebar search hanging when selecting a story in touch mode - [#26807](https://github.com/storybookjs/storybook/pull/26807), thanks @JReinhold!
+
 ## 8.0.8
 
 - Automigration: Fix name of VTA addon - [#26816](https://github.com/storybookjs/storybook/pull/26816), thanks @valentinpalkovic!

From b6c900a0f21b3e96d2c7b3048bcf1616554aec55 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 24 Apr 2024 11:42:56 +0200
Subject: [PATCH 20/23] add previewHead to sandboxes with explicit monospace
 font stack

---
 scripts/tasks/sandbox-parts.ts | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts
index cd7dc643a185..096af524e7f8 100644
--- a/scripts/tasks/sandbox-parts.ts
+++ b/scripts/tasks/sandbox-parts.ts
@@ -533,6 +533,28 @@ export const extendMain: Task['run'] = async ({ template, sandboxDir }, { disabl
 
   Object.entries(configToAdd).forEach(([field, value]) => mainConfig.setFieldValue([field], value));
 
+  const previewHeadCode = `
+    (head) => \`
+     \${head}
+     ${templateConfig.previewHead || ''}
+     <style>
+       /* explicitly set monospace font stack to workaround inconsistent fonts in Chromatic */
+       pre, code, kbd, samp {
+         font-family:
+           ui-monospace,
+           Menlo,
+           Monaco,
+           "Cascadia Mono",
+           "Segoe UI Mono",
+           "Roboto Mono",
+           "Courier New",
+           "Courier",
+           monospace;
+       }
+     </style>
+   \``;
+  mainConfig.setFieldNode(['previewHead'], babelParse(previewHeadCode).program.body[0].expression);
+
   // Simulate Storybook Lite
   if (disableDocs) {
     const addons = mainConfig.getFieldValue(['addons']);

From 0a1e098472156d0c03b14adf869b624ebfb2c100 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 24 Apr 2024 11:59:26 +0200
Subject: [PATCH 21/23] align monospace font stack with Next.js defaults

See https://github.com/vercel/next.js/blame/canary/packages/create-next-app/templates/app/ts/app/globals.css#L4-L6
---
 scripts/tasks/sandbox-parts.ts | 40 +++++++++++++++++++---------------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts
index 096af524e7f8..b4e3b535d79d 100644
--- a/scripts/tasks/sandbox-parts.ts
+++ b/scripts/tasks/sandbox-parts.ts
@@ -535,24 +535,28 @@ export const extendMain: Task['run'] = async ({ template, sandboxDir }, { disabl
 
   const previewHeadCode = `
     (head) => \`
-     \${head}
-     ${templateConfig.previewHead || ''}
-     <style>
-       /* explicitly set monospace font stack to workaround inconsistent fonts in Chromatic */
-       pre, code, kbd, samp {
-         font-family:
-           ui-monospace,
-           Menlo,
-           Monaco,
-           "Cascadia Mono",
-           "Segoe UI Mono",
-           "Roboto Mono",
-           "Courier New",
-           "Courier",
-           monospace;
-       }
-     </style>
-   \``;
+      \${head}
+      ${templateConfig.previewHead || ''}
+      <style>
+        /* explicitly set monospace font stack to workaround inconsistent fonts in Chromatic */
+        pre, code, kbd, samp {
+          font-family:
+            ui-monospace,
+            Menlo,
+            Monaco,
+            "Cascadia Mono",
+            "Segoe UI Mono",
+            "Roboto Mono",
+            "Oxygen Mono",
+            "Ubuntu Monospace",
+            "Source Code Pro",
+            "Fira Mono",
+            "Droid Sans Mono",
+            "Courier New",
+            monospace;
+        }
+      </style>
+    \``;
   mainConfig.setFieldNode(['previewHead'], babelParse(previewHeadCode).program.body[0].expression);
 
   // Simulate Storybook Lite

From caf3f2a203aa57320b88c9360600be1d621d612c Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 24 Apr 2024 14:59:27 +0200
Subject: [PATCH 22/23] fix link stories not working in all renderers

---
 .../links/template/stories/decorator.stories.ts       | 11 ++++++++++-
 code/addons/links/template/stories/linkto.stories.ts  |  7 ++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/code/addons/links/template/stories/decorator.stories.ts b/code/addons/links/template/stories/decorator.stories.ts
index 2149eb5dafa4..53a05f380e74 100644
--- a/code/addons/links/template/stories/decorator.stories.ts
+++ b/code/addons/links/template/stories/decorator.stories.ts
@@ -10,7 +10,16 @@ export default {
 };
 
 export const Target = {
-  render: () => 'This is just a story to target with the links',
+  args: {
+    content: `
+      <div>
+      This is just a story to target with the links
+      </div>
+    `,
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 
 export const KindAndStory = {
diff --git a/code/addons/links/template/stories/linkto.stories.ts b/code/addons/links/template/stories/linkto.stories.ts
index 13e549f75134..502509a8d5aa 100644
--- a/code/addons/links/template/stories/linkto.stories.ts
+++ b/code/addons/links/template/stories/linkto.stories.ts
@@ -13,7 +13,12 @@ export default {
 };
 
 export const Target = {
-  render: () => 'This is just a story to target with the links',
+  args: {
+    label: 'This is just a story to target with the links',
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 
 export const Id = {

From b6e832d6702ee9a6c453ee786a244c07edd48f28 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 25 Apr 2024 12:28:45 +0200
Subject: [PATCH 23/23] use auto-retrying assertions for text content in e2e
 tests

See https://playwright.dev/docs/test-assertions
---
 code/e2e-tests/addon-docs.spec.ts       | 2 +-
 code/e2e-tests/framework-svelte.spec.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts
index db7b7b7d5e05..2713892fd042 100644
--- a/code/e2e-tests/addon-docs.spec.ts
+++ b/code/e2e-tests/addon-docs.spec.ts
@@ -67,7 +67,7 @@ test.describe('addon-docs', () => {
         await new Promise(resolve => resolve('Play function'));
       }
     }`;
-    await expect(sourceCode.textContent()).resolves.toContain(expectedSource);
+    await expect(sourceCode).toHaveText(expectedSource);
   });
 
   test('should render errors', async ({ page }) => {
diff --git a/code/e2e-tests/framework-svelte.spec.ts b/code/e2e-tests/framework-svelte.spec.ts
index 7d2efe7db6f3..ba42745c6172 100644
--- a/code/e2e-tests/framework-svelte.spec.ts
+++ b/code/e2e-tests/framework-svelte.spec.ts
@@ -41,7 +41,7 @@ test.describe('Svelte', () => {
     await showCodeButton.click();
     const sourceCode = root.locator('pre.prismjs');
     const expectedSource = '<ButtonJavaScript primary/>';
-    await expect(sourceCode.textContent()).resolves.toContain(expectedSource);
+    await expect(sourceCode).toHaveText(expectedSource);
   });
 
   test('Decorators runs only once', async ({ page }) => {