storybookjs · shilman · Jun 12, 2024 · Jun 3, 2024 · Jun 3, 2024 · Jun 3, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## 8.1.7
+
+- Addon-actions: Only log spies with names - [#28091](https://github.com/storybookjs/storybook/pull/28091), thanks @kasperpeulen!
+- CLI: Fix typo in React Docgen migration - [#27536](https://github.com/storybookjs/storybook/pull/27536), thanks @jonniebigodes!
+- Portable Stories: Add tags to composed story - [#27708](https://github.com/storybookjs/storybook/pull/27708), thanks @yannbf!
+- Test: Display toHaveBeenCalledWith expected / received values on failure - [#28088](https://github.com/storybookjs/storybook/pull/28088), thanks @kasperpeulen!
+
 ## 8.1.6
 
 - CLI: Only log the UpgradeStorybookToSameVersionError but continue the upgrade as normal - [#27217](https://github.com/storybookjs/storybook/pull/27217), thanks @kasperpeulen!

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
@@ -1,3 +1,9 @@
+## 8.2.0-alpha.8
+
+- Automigrations: Make VTA "learn more" link clickable - [#28020](https://github.com/storybookjs/storybook/pull/28020), thanks @deiga!
+- CLI: Fix `init --skip-install` - [#28226](https://github.com/storybookjs/storybook/pull/28226), thanks @shilman!
+- CSF: Rename `preview.js` `globals` to `initialGlobals` - [#27517](https://github.com/storybookjs/storybook/pull/27517), thanks @shilman!
+
 ## 8.2.0-alpha.7
 
 - Angular: Allow outputPath object syntax - [#28144](https://github.com/storybookjs/storybook/pull/28144), thanks @valentinpalkovic!

diff --git a/MIGRATION.md b/MIGRATION.md
@@ -1,5 +1,7 @@
 <h1>Migration</h1>
 
+- [From version 8.1.x to 8.2.x](#from-version-81x-to-82x)
+  - [Preview.js globals renamed to initialGlobals](#previewjs-globals-renamed-to-initialglobals)
 - [From version 8.0.x to 8.1.x](#from-version-80x-to-81x)
   - [Portable stories](#portable-stories)
     - [@storybook/nextjs requires specific path aliases to be setup](#storybooknextjs-requires-specific-path-aliases-to-be-setup)
@@ -17,6 +19,7 @@
   - [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)
+  - [Deprecated `@storybook/testing-library` package](#deprecated-storybooktesting-library-package)
   - [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)
@@ -97,17 +100,17 @@
     - [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)
+  - [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)
+  - [`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)
+  - [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)
@@ -133,7 +136,7 @@
     - [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)
+      - [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)
@@ -147,7 +150,7 @@
     - [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)
+    - [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)
@@ -197,7 +200,7 @@
     - [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)
+    - [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)
@@ -410,6 +413,20 @@
   - [Packages renaming](#packages-renaming)
   - [Deprecated embedded addons](#deprecated-embedded-addons)
 
+## From version 8.1.x to 8.2.x
+
+### Preview.js globals renamed to initialGlobals
+
+Starting in 8.2 `preview.js` `globals` are deprecated and have been renamed to `initialGlobals`. We will remove `preview.js` `globals` in 9.0.
+
+```diff
+// .storybook/preview.js
+export default {
+-  globals: [ a: 1, b: 2 ],
++  initiaGlobals: [ a: 1, b: 2 ],
+}
+```
+
 ## From version 8.0.x to 8.1.x
 
 ### Portable stories
@@ -439,6 +456,7 @@ The `docs.autodocs` setting in `main.js` is deprecated in 8.1 and will be remove
 It has been replaced with a tags-based system which is more flexible than before.
 
 `docs.autodocs` takes three values:
+
 - `true`: generate autodocs for every component
 - `false`: don't generate autodocs at all
 - `tag`: generate autodocs for components that have been tagged `'autodocs'`.
@@ -448,8 +466,8 @@ Starting in 8.1, to generate autodocs for every component (`docs.autodocs = true
 ```js
 // .storybook/preview.js
 export default {
-  tags: ['autodocs'],
-}
+  tags: ["autodocs"],
+};
 ```
 
 Tags cascade, so setting `'autodocs'` at the project level automatically propagates to every component and story. If you set autodocs globally and want to opt-out for a particular component, you can remove the `'autodocs'` tag for a component like this:
@@ -458,8 +476,8 @@ Tags cascade, so setting `'autodocs'` at the project level automatically propaga
 // Button.stories.ts
 export default {
   component: Button,
-  tags: ['!autodocs'],
-}
+  tags: ["!autodocs"],
+};
 ```
 
 If you had set `docs.autodocs = 'tag'`, the default setting, you can remove the setting from `.storybook/main.js`. That is now the default behavior.
@@ -602,6 +620,19 @@ These sections explain the rationale, and the required changes you might have to
 - [New Addons API](#new-addons-api)
 - [`addons.setConfig` should now be imported from `@storybook/manager-api`.](#addonssetconfig-should-now-be-imported-from-storybookmanager-api)
 
+### Deprecated `@storybook/testing-library` package
+
+In Storybook 8, `@storybook/testing-library` has been integrated to a new package called `@storybook/test`, which uses Vitest APIs for an improved experience. When upgrading to Storybook 8 with 'npx storybook@latest upgrade', you will get prompted and will get an automigration for the new package. Please migrate when you can.
+
+To migrate by hand, install `@storybook/test` and replace `@storybook/testing-libary` imports globally:
+
+```ts
+- import { userEvent } from '@storybook/testing-library';
++ import { userEvent } from '@storybook/test';
+```
+
+For more information on the change, see the [announcement post](https://storybook.js.org/blog/storybook-test/).
+
 ### Framework-specific Vite plugins have to be explicitly added
 
 In Storybook 7, we would automatically add frameworks-specific Vite plugins, e.g. `@vitejs/plugin-react` if not installed.

diff --git a/code/.eslintrc.js b/code/.eslintrc.js
@@ -58,8 +58,7 @@ module.exports = {
       },
     },
     {
-      // this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
-      files: ['**/addons/docs/**/*'],
+      files: ['**/template/**/*', '**/vitest.config.ts', '**/addons/docs/**/*'],
       rules: {
         'import/no-extraneous-dependencies': 'off',
       },

diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
@@ -91,7 +91,7 @@
       "./src/preview.tsx"
     ]
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Accessibility",
     "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",

diff --git a/code/addons/a11y/src/components/A11YPanel.test.tsx b/code/addons/a11y/src/components/A11YPanel.test.tsx
@@ -1,3 +1,5 @@
+// @vitest-environment happy-dom
+
 import { describe, beforeEach, afterEach, it, expect, vi } from 'vitest';
 import React from 'react';
 import { render, waitFor, fireEvent, act, cleanup } from '@testing-library/react';

diff --git a/code/addons/a11y/src/components/A11yContext.test.tsx b/code/addons/a11y/src/components/A11yContext.test.tsx
@@ -1,3 +1,5 @@
+// @vitest-environment happy-dom
+
 import { describe, beforeEach, afterEach, it, expect, vi } from 'vitest';
 import * as React from 'react';
 import type { AxeResults } from 'axe-core';

diff --git a/code/addons/a11y/src/components/Report/HighlightToggle.test.tsx b/code/addons/a11y/src/components/Report/HighlightToggle.test.tsx
@@ -1,3 +1,5 @@
+// @vitest-environment happy-dom
+
 import { describe, it, expect, afterEach, vi } from 'vitest';
 import React from 'react';
 import { render, fireEvent, cleanup } from '@testing-library/react';

diff --git a/code/addons/a11y/vitest.config.ts b/code/addons/a11y/vitest.config.ts
@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );
diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json
@@ -103,7 +103,7 @@
       "./src/preview.ts"
     ]
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Actions",
     "unsupportedFrameworks": [

diff --git a/code/addons/actions/vitest.config.ts b/code/addons/actions/vitest.config.ts
@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );
diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json
@@ -86,7 +86,7 @@
       "./src/preview.tsx"
     ]
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Backgrounds",
     "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",

diff --git a/code/addons/backgrounds/src/preview.tsx b/code/addons/backgrounds/src/preview.tsx
@@ -18,6 +18,6 @@ export const parameters = {
   },
 };
 
-export const globals = {
+export const initialGlobals = {
   [PARAM_KEY]: null as any,
 };
diff --git a/code/addons/backgrounds/vitest.config.ts b/code/addons/backgrounds/vitest.config.ts
@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );
diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json
@@ -80,7 +80,7 @@
       "./src/manager.tsx"
     ]
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Controls",
     "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",

diff --git a/code/addons/controls/vitest.config.ts b/code/addons/controls/vitest.config.ts
@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );
diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
@@ -141,7 +141,7 @@
       "./src/mdx-loader.ts"
     ]
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Docs",
     "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",

diff --git a/code/addons/docs/vitest.config.ts b/code/addons/docs/vitest.config.ts
@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );
diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json
@@ -135,5 +135,5 @@
       "./src/viewport/preview.ts"
     ]
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17"
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
 }
diff --git a/code/addons/essentials/vitest.config.ts b/code/addons/essentials/vitest.config.ts
@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );
diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json
@@ -59,5 +59,5 @@
       "./src/index.ts"
     ]
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17"
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
 }
diff --git a/code/addons/gfm/vitest.config.ts b/code/addons/gfm/vitest.config.ts
@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );
diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json
@@ -71,7 +71,7 @@
       "./src/preview.ts"
     ]
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Highlight",

diff --git a/code/addons/highlight/vitest.config.ts b/code/addons/highlight/vitest.config.ts
@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );
diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
@@ -93,7 +93,7 @@
       "./src/preset.ts"
     ]
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Interactions",
     "unsupportedFrameworks": [

diff --git a/code/addons/interactions/vitest.config.ts b/code/addons/interactions/vitest.config.ts
@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );
diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
@@ -82,7 +82,7 @@
       "./src/manager.tsx"
     ]
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Jest",
     "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",

diff --git a/code/addons/jest/vitest.config.ts b/code/addons/jest/vitest.config.ts
@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );