Merge branch 'next' into vite-preview

CHANGELOG.md

@@ -1,3 +1,12 @@
+## 8.4.6
+
+- Addon Test: Use pathe for better windows support - [#29676](https://github.com/storybookjs/storybook/pull/29676), thanks @yannbf!
+- Angular: Default to standalone components in Angular v19 - [#29677](https://github.com/storybookjs/storybook/pull/29677), thanks @ingowagner!
+- Frameworks: Add Vite 6 support - [#29710](https://github.com/storybookjs/storybook/pull/29710), thanks @yannbf!
+- Portable stories: Support multiple annotation notations from preview - [#29733](https://github.com/storybookjs/storybook/pull/29733), thanks @yannbf!
+- React: Upgrade react-docgen-typescript to support Vite 6 - [#29724](https://github.com/storybookjs/storybook/pull/29724), thanks @yannbf!
+- Svelte: Support `@sveltejs/vite-plugin-svelte` v5 - [#29731](https://github.com/storybookjs/storybook/pull/29731), thanks @JReinhold!
+
 ## 8.4.5
 
 - Angular: Support v19 - [#29659](https://github.com/storybookjs/storybook/pull/29659), thanks @leosvelperez!

CHANGELOG.prerelease.md

@@ -1,3 +1,37 @@
+## 8.5.0-alpha.15
+
+- Addon Test: Context menu UI - [#29727](https://github.com/storybookjs/storybook/pull/29727), thanks @ghengeveld!
+- Addon Test: Fix error reporting for `vitest` crashes - [#29751](https://github.com/storybookjs/storybook/pull/29751), thanks @ndelangen!
+- Addon Test: Remove a11y placeholder - [#29769](https://github.com/storybookjs/storybook/pull/29769), thanks @JReinhold!
+- Core / Addon Test: Support intercepting and modifying internal test provider state updates - [#29680](https://github.com/storybookjs/storybook/pull/29680), thanks @ghengeveld!
+- Core: Disable SidebarContextMenu in static builds - [#29743](https://github.com/storybookjs/storybook/pull/29743), thanks @ndelangen!
+- Telemetry: Improve anonymous id calculation - [#29736](https://github.com/storybookjs/storybook/pull/29736), thanks @tmeasday!
+
+## 8.5.0-alpha.14
+
+- RNW-Vite: Add built-in Flow support - [#29756](https://github.com/storybookjs/storybook/pull/29756), thanks @dannyhw!
+- Test: Add coverage feature - [#29713](https://github.com/storybookjs/storybook/pull/29713), thanks @ndelangen!
+
+## 8.5.0-alpha.13
+
+- Portable stories: Support multiple annotation notations from preview - [#29733](https://github.com/storybookjs/storybook/pull/29733), thanks @yannbf!
+- React: Upgrade react-docgen-typescript to support Vite 6 - [#29724](https://github.com/storybookjs/storybook/pull/29724), thanks @yannbf!
+
+## 8.5.0-alpha.12
+
+- Core / Addon Test: Add config UI to Testing Module - [#29708](https://github.com/storybookjs/storybook/pull/29708), thanks @ghengeveld!
+- Manager: Add tags property to GroupEntry objects - [#29672](https://github.com/storybookjs/storybook/pull/29672), thanks @Sidnioulz!
+- Svelte: Support `@sveltejs/vite-plugin-svelte` v5 - [#29731](https://github.com/storybookjs/storybook/pull/29731), thanks @JReinhold!
+- Toolbars: Suppress deprecation warning when using dynamic icons - [#29545](https://github.com/storybookjs/storybook/pull/29545), thanks @ValeraS!
+
+## 8.5.0-alpha.11
+
+- Core + Addon Test: Refactor test API and fix total test count - [#29656](https://github.com/storybookjs/storybook/pull/29656), thanks @ghengeveld!
+- Core: Emit deprecated `TESTING_MODULE_RUN_ALL_REQUEST` for backward compatibility - [#29711](https://github.com/storybookjs/storybook/pull/29711), thanks @ghengeveld!
+- Frameworks: Add Vite 6 support - [#29710](https://github.com/storybookjs/storybook/pull/29710), thanks @yannbf!
+- TestAddon: Refactor UI & add config options - [#29662](https://github.com/storybookjs/storybook/pull/29662), thanks @ndelangen!
+- Vue: Fix `vue-component-meta` docgen HMR not working - [#29518](https://github.com/storybookjs/storybook/pull/29518), thanks @IonianPlayboy!
+
 ## 8.5.0-alpha.10
 
 - Addon Test: Use pathe for better windows support - [#29676](https://github.com/storybookjs/storybook/pull/29676), thanks @yannbf!

code/.storybook/preview.tsx

@@ -22,6 +22,7 @@ import { DocsPageWrapper } from '../lib/blocks/src/components';
 import { isChromatic } from './isChromatic';
 
 const { document } = global;
+globalThis.CONFIG_TYPE = 'DEVELOPMENT';
 
 const ThemeBlock = styled.div<{ side: 'left' | 'right'; layout: string }>(
   {

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.5.0-alpha.10",
+  "version": "8.5.0-alpha.15",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.5.0-alpha.10",
+  "version": "8.5.0-alpha.15",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.5.0-alpha.10",
+  "version": "8.5.0-alpha.15",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.5.0-alpha.10",
+  "version": "8.5.0-alpha.15",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.5.0-alpha.10",
+  "version": "8.5.0-alpha.15",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

code/addons/essentials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.5.0-alpha.10",
+  "version": "8.5.0-alpha.15",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",

code/addons/gfm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "8.5.0-alpha.10",
+  "version": "8.5.0-alpha.15",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.5.0-alpha.10",
+  "version": "8.5.0-alpha.15",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",

code/addons/interactions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "8.5.0-alpha.10",
+  "version": "8.5.0-alpha.15",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

code/addons/jest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "8.5.0-alpha.10",
+  "version": "8.5.0-alpha.15",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",

code/addons/links/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "8.5.0-alpha.10",
+  "version": "8.5.0-alpha.15",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "storybook-addons",

code/addons/measure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "8.5.0-alpha.10",
+  "version": "8.5.0-alpha.15",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",

code/addons/onboarding/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "8.5.0-alpha.10",
+  "version": "8.5.0-alpha.15",
   "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
   "keywords": [
     "storybook-addons",

code/addons/onboarding/src/features/GuidedTour/GuidedTour.tsx

@@ -23,7 +23,7 @@ export function GuidedTour({
   const theme = useTheme();
 
   useEffect(() => {
-    let timeout: NodeJS.Timeout;
+    let timeout: ReturnType<typeof setTimeout>;
     setStepIndex((current) => {
       const index = steps.findIndex(({ key }) => key === step);
 

code/addons/outline/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "8.5.0-alpha.10",
+  "version": "8.5.0-alpha.15",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",

code/addons/storysource/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "8.5.0-alpha.10",
+  "version": "8.5.0-alpha.15",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",

code/addons/test/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/experimental-addon-test",
-  "version": "8.5.0-alpha.10",
+  "version": "8.5.0-alpha.15",
   "description": "Integrate Vitest with Storybook",
   "keywords": [
     "storybook-addons",
@@ -48,6 +48,11 @@
       "import": "./dist/vitest-plugin/test-utils.mjs",
       "require": "./dist/vitest-plugin/test-utils.js"
     },
+    "./internal/coverage-reporter": {
+      "types": "./dist/node/coverage-reporter.d.ts",
+      "import": "./dist/node/coverage-reporter.mjs",
+      "require": "./dist/node/coverage-reporter.js"
+    },
     "./preview": {
       "types": "./dist/preview.d.ts",
       "import": "./dist/preview.mjs",
@@ -87,7 +92,7 @@
   },
   "devDependencies": {
     "@devtools-ds/object-inspector": "^1.1.2",
-    "@storybook/icons": "^1.2.12",
+    "@types/istanbul-lib-report": "^3.0.3",
     "@types/node": "^22.0.0",
     "@types/semver": "^7",
     "@vitest/browser": "^2.1.3",
@@ -98,6 +103,7 @@
     "execa": "^8.0.1",
     "find-up": "^7.0.0",
     "formik": "^2.2.9",
+    "istanbul-lib-report": "^3.0.1",
     "pathe": "^1.1.2",
     "picocolors": "^1.1.0",
     "react": "^18.2.0",
@@ -146,7 +152,8 @@
       "./src/vitest-plugin/index.ts",
       "./src/vitest-plugin/global-setup.ts",
       "./src/postinstall.ts",
-      "./src/node/vitest.ts"
+      "./src/node/vitest.ts",
+      "./src/node/coverage-reporter.ts"
     ]
   },
   "storybook": {

code/addons/test/src/components/ContextMenuItem.tsx

@@ -8,21 +8,20 @@ import React, {
 } from 'react';
 
 import { Button, ListItem } from 'storybook/internal/components';
+import type { TestProviderConfig } from 'storybook/internal/core-events';
 import { useStorybookApi } from 'storybook/internal/manager-api';
 import { useTheme } from 'storybook/internal/theming';
 import { type API_HashEntry, type Addon_TestProviderState } from 'storybook/internal/types';
 
 import { PlayHollowIcon, StopAltHollowIcon } from '@storybook/icons';
 
-import { TEST_PROVIDER_ID } from '../constants';
-import type { TestResult } from '../node/reporter';
-import { RelativeTime } from './RelativeTime';
+import { type Config, type Details, TEST_PROVIDER_ID } from '../constants';
+import { Description } from './Description';
+import { Title } from './Title';
 
 export const ContextMenuItem: FC<{
   context: API_HashEntry;
-  state: Addon_TestProviderState<{
-    testResults: TestResult[];
-  }>;
+  state: TestProviderConfig & Addon_TestProviderState<Details, Config>;
 }> = ({ context, state }) => {
   const api = useStorybookApi();
   const [isDisabled, setDisabled] = useState(false);
@@ -51,29 +50,6 @@ export const ContextMenuItem: FC<{
 
   const theme = useTheme();
 
-  const title = state.crashed || state.failed ? 'Component tests failed' : 'Component tests';
-  const errorMessage = state.error?.message;
-  let description: string | React.ReactNode = 'Not run';
-
-  if (state.running) {
-    description = state.progress
-      ? `Testing... ${state.progress.numPassedTests}/${state.progress.numTotalTests}`
-      : 'Starting...';
-  } else if (state.failed && !errorMessage) {
-    description = '';
-  } else if (state.crashed || (state.failed && errorMessage)) {
-    description = 'An error occured';
-  } else if (state.progress?.finishedAt) {
-    description = (
-      <RelativeTime
-        timestamp={new Date(state.progress.finishedAt)}
-        testCount={state.progress.numTotalTests}
-      />
-    );
-  } else if (state.watching) {
-    description = 'Watching for file changes';
-  }
-
   return (
     <div
       onClick={(event) => {
@@ -82,8 +58,8 @@ export const ContextMenuItem: FC<{
       }}
     >
       <ListItem
-        title={title}
-        center={description}
+        title={<Title state={state} />}
+        center={<Description state={state} />}
         right={
           <Button
             onClick={onClick}

code/addons/test/src/components/Description.tsx

@@ -1,42 +1,59 @@
-import React from 'react';
+import React, { type ComponentProps, useEffect } from 'react';
 
 import { Link as LinkComponent } from 'storybook/internal/components';
 import { type TestProviderConfig, type TestProviderState } from 'storybook/internal/core-events';
 import { styled } from 'storybook/internal/theming';
 
+import { GlobalErrorContext } from './GlobalErrorModal';
 import { RelativeTime } from './RelativeTime';
 
-export const DescriptionStyle = styled.div(({ theme }) => ({
+export const Wrapper = styled.div(({ theme }) => ({
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
   fontSize: theme.typography.size.s1,
   color: theme.barTextColor,
 }));
 
-export function Description({
-  errorMessage,
-  setIsModalOpen,
-  state,
-}: {
+const PositiveText = styled.span(({ theme }) => ({
+  color: theme.color.positiveText,
+}));
+
+interface DescriptionProps extends ComponentProps<typeof Wrapper> {
   state: TestProviderConfig & TestProviderState;
-  errorMessage: string;
-  setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}) {
-  let description: string | React.ReactNode = 'Not run';
+}
+
+export function Description({ state, ...props }: DescriptionProps) {
+  const isMounted = React.useRef(false);
+  const [isUpdated, setUpdated] = React.useState(false);
+  const { setModalOpen } = React.useContext(GlobalErrorContext);
 
-  if (state.running) {
+  useEffect(() => {
+    if (isMounted.current) {
+      setUpdated(true);
+      const timeout = setTimeout(setUpdated, 2000, false);
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+    isMounted.current = true;
+  }, [state.config]);
+
+  const errorMessage = state.error?.message;
+
+  let description: string | React.ReactNode = 'Not run';
+  if (isUpdated) {
+    description = <PositiveText>Settings updated</PositiveText>;
+  } else if (state.running) {
     description = state.progress
       ? `Testing... ${state.progress.numPassedTests}/${state.progress.numTotalTests}`
       : 'Starting...';
   } else if (state.failed && !errorMessage) {
-    description = '';
+    description = 'Failed';
   } else if (state.crashed || (state.failed && errorMessage)) {
     description = (
       <>
-        <LinkComponent
-          isButton
-          onClick={() => {
-            setIsModalOpen(true);
-          }}
-        >
+        <LinkComponent isButton onClick={() => setModalOpen(true)}>
           {state.error?.name || 'View full error'}
         </LinkComponent>
       </>
@@ -51,5 +68,6 @@ export function Description({
   } else if (state.watching) {
     description = 'Watching for file changes';
   }
-  return <DescriptionStyle id="testing-module-description">{description}</DescriptionStyle>;
+
+  return <Wrapper {...props}>{description}</Wrapper>;
 }