Merge pull request #267 from storybookjs/release-8-6

Add 8.6 release note
storybookjs · Feb 25, 2025 · 589f7e9 · 589f7e9
2 parents b1ab566 + cef23e6
commit 589f7e9
Show file tree

Hide file tree

Showing 17 changed files with 53 additions and 22 deletions.
diff --git a/apps/frontpage/components/docs/mdx/code-snippets/code-snippets.stories.tsx b/apps/frontpage/components/docs/mdx/code-snippets/code-snippets.stories.tsx
@@ -36,7 +36,7 @@ const meta = {
     },
     activeLanguage: {
       control: 'radio',
-      options: ['js', 'ts', 'ts-4.9'],
+      options: ['js', 'ts', 'ts-4-9'],
     },
     activePackageManager: {
       control: 'radio',
@@ -194,6 +194,14 @@ export const MultipleTabsVue2And3Suffix: Story = {
   },
 };
 
+export const CoerceTS49ToTS: Story = {
+  name: 'Coerce TS 4.9 language to TS snippet',
+  args: {
+    content: content2.filter((tab) => tab.language !== 'ts-4-9'),
+    activeLanguage: 'ts-4-9',
+  },
+}
+
 export const NoRenderer: Story = {
   args: {
     content: content2,

diff --git a/apps/frontpage/components/home/hero/init-command.tsx b/apps/frontpage/components/home/hero/init-command.tsx
@@ -8,7 +8,7 @@ export const InitCommand: FC = () => {
   const [state, setState] = useState(false);
 
   const onClick = () => {
-    copy('npx storybook@latest init');
+    copy('npm create storybook@latest');
     setState(true);
     setTimeout(() => {
       setState(false);
@@ -21,7 +21,7 @@ export const InitCommand: FC = () => {
       onClick={onClick}
       type="button"
     >
-      npx storybook@latest init
+      npm create storybook@latest
       <CopyIcon />
       <AnimatePresence>
         {state ? (

diff --git a/apps/frontpage/content/recipes/@angular/material.mdx b/apps/frontpage/content/recipes/@angular/material.mdx
@@ -5,7 +5,7 @@ This recipe assumes that you already have an Angular app using `@angular/materia
 
 ```shell
 # Add Storybook:
-npx storybook@latest init
+npm create storybook@latest
 ```
 
 </Callout>

diff --git a/apps/frontpage/content/recipes/@emotion/styled.mdx b/apps/frontpage/content/recipes/@emotion/styled.mdx
@@ -4,7 +4,7 @@ This recipe assumes that you have a React app using Emotion and have just set up
 
 ```shell
 # Add Storybook:
-npx storybook@latest init
+npm create storybook@latest
 ```
 
 </Callout>

diff --git a/apps/frontpage/content/recipes/@mui/material.mdx b/apps/frontpage/content/recipes/@mui/material.mdx
@@ -4,7 +4,7 @@ This recipe assumes that you already have a React app using `@mui/material` and
 
 ```shell
 # Add Storybook:
-npx storybook@latest init
+npm create storybook@latest
 ```
 
 </Callout>

diff --git a/apps/frontpage/content/recipes/@sveltejs/kit.mdx b/apps/frontpage/content/recipes/@sveltejs/kit.mdx
@@ -4,7 +4,7 @@ This recipe assumes that you already have a **SvelteKit >= 1.0** app and have ju
 
 ```shell
 # Add Storybook:
-npx storybook@latest init
+npm create storybook@latest
 ```
 
 </Callout>
@@ -23,7 +23,7 @@ With our package, Storybook automatically mirrors the project settings of Svelte
 Run the following command in your SvelteKit project's root directory, and follow the prompts:
 
 ```shell
-npx storybook@latest init
+npm create storybook@latest
 ```
 
 Storybook will automatically detect your SvelteKit project and install the necessary packages and configurations.

diff --git a/apps/frontpage/content/recipes/@vanilla-extract/css.mdx b/apps/frontpage/content/recipes/@vanilla-extract/css.mdx
@@ -4,7 +4,7 @@ This recipe assumes that you already have an app using Vanilla-extract and have
 
 ```shell
 # Add Storybook:
-npx storybook@latest init
+npm create storybook@latest
 ```
 
 </Callout>

diff --git a/apps/frontpage/content/recipes/bootstrap.mdx b/apps/frontpage/content/recipes/bootstrap.mdx
@@ -4,7 +4,7 @@ This recipe assumes that you are using Storybook >=7.0 using the [getting starte
 
 ```shell
 # Add Storybook:
-npx storybook@latest init
+npm create storybook@latest
 ```
 
 </Callout>

diff --git a/apps/frontpage/content/recipes/less.mdx b/apps/frontpage/content/recipes/less.mdx
@@ -4,7 +4,7 @@ This recipe assumes that you have an app using Less and have just set up **Story
 
 ```shell
 # Add Storybook:
-npx storybook@latest init
+npm create storybook@latest
 ```
 
 </Callout>

diff --git a/apps/frontpage/content/recipes/next.mdx b/apps/frontpage/content/recipes/next.mdx
@@ -4,7 +4,7 @@ This recipe assumes that you have a Next >= 12 app. Don’t have this? Follow Ne
 
 ```shell
 # Add Storybook:
-npx storybook@latest init
+npm create storybook@latest
 ```
 
 </Callout>
@@ -16,7 +16,7 @@ npx storybook@latest init
 Follow the prompts after running this command in your Next.js project's root directory:
 
 ```shell
-npx storybook@latest init
+npm create storybook@latest
 ```
 
 ### In a project with Storybook

diff --git a/apps/frontpage/content/recipes/pinia.mdx b/apps/frontpage/content/recipes/pinia.mdx
@@ -4,7 +4,7 @@ This recipe assumes that you have a Vue 3 app using Pinia and have just set up *
 
 ```shell
 # Add Storybook:
-npx storybook@latest init
+npm create storybook@latest
 ```
 
 </Callout>

diff --git a/apps/frontpage/content/recipes/sass.mdx b/apps/frontpage/content/recipes/sass.mdx
@@ -4,7 +4,7 @@ This recipe assumes that you have an app using Sass and have just set up **Story
 
 ```shell
 # Add Storybook:
-npx storybook@latest init
+npm create storybook@latest
 ```
 
 </Callout>

diff --git a/apps/frontpage/content/recipes/styled-components.mdx b/apps/frontpage/content/recipes/styled-components.mdx
@@ -4,7 +4,7 @@ This recipe assumes that you have a React app using styled-components and have j
 
 ```shell
 # Add Storybook:
-npx storybook@latest init
+npm create storybook@latest
 ```
 
 </Callout>

diff --git a/apps/frontpage/content/recipes/tailwindcss.mdx b/apps/frontpage/content/recipes/tailwindcss.mdx
@@ -4,7 +4,7 @@ This recipe assumes that you have a React app using Tailwind CSS and have just s
 
 ```shell
 # Add Storybook:
-npx storybook@latest init
+npm create storybook@latest
 ```
 
 </Callout>

diff --git a/apps/frontpage/content/recipes/vuetify.mdx b/apps/frontpage/content/recipes/vuetify.mdx
@@ -4,7 +4,7 @@ This recipe assumes that you have a Vue 3 app using Vuetify v3 and have just set
 
 ```shell
 # Add Storybook:
-npx storybook@latest init
+npm create storybook@latest
 ```
 
 </Callout>

diff --git a/apps/frontpage/content/releases/8.6.md b/apps/frontpage/content/releases/8.6.md
@@ -0,0 +1,23 @@
+---
+title: 'Storybook 8.6 - February 2025'
+---
+
+The 8.6 release focuses on [Storybook Test](https://storybook.js.org/blog/storybook-test-sneak-peek/), which brings realtime component, accessibility, and visual UI tests to your favorite component workshop.
+
+Here’s what’s new:
+
+- 🎁 **Storybook Test installer** for out-of-the-box tests in new projects
+- ♿️ **Accessibility “todo” workflow** to systematically fix a11y violations
+- 🗜️ **80% smaller create-storybook** package for much faster installs
+- 🧪 **Dozens of Test fixes** based on user feedback
+- 📕 **Docs fixes** for table of contents, code snippets, and more
+- 🚨 **Key security fixes** for Vite and ESbuild
+- 💯 Hundreds more improvements
+
+Browse the [changelogs](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) for the full list of changes.
+
+---
+
+There are no breaking changes, but you can refer to our
+[Migration guide](https://storybook.js.org/docs/migration-guide) to upgrade from
+pre-8.0 of Storybook.
diff --git a/packages/utils/src/docs-versions.tsx b/packages/utils/src/docs-versions.tsx
@@ -28,13 +28,13 @@ export interface DocsVersion {
  **/
 export const docsVersions: DocsVersion[] = [
   {
-    label: 'Version 8.5',
-    id: '8.5',
+    label: 'Version 8.6',
+    id: '8.6',
     branch: 'main',
   },
   {
-    label: 'Version 8.6 (beta)',
-    id: '8.6',
+    label: 'Version 9.0 (alpha)',
+    id: '9.0',
     branch: 'next',
     preRelease: true,
   },