diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index 622ac1189722..7134debd7369 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,9 @@
+## 8.4.0-beta.2
+
+- Addon Test: Adjust file exports to be ESM/CJS compatible - [#29471](https://github.com/storybookjs/storybook/pull/29471), thanks @valentinpalkovic!
+- Core: Show tooltip on filter toggles to clarify their purpose - [#29447](https://github.com/storybookjs/storybook/pull/29447), thanks @ghengeveld!
+- Webpack: Fix export 'act' (imported as 'React4') was not found in 'react' errors in webpack - [#29235](https://github.com/storybookjs/storybook/pull/29235), thanks @kasperpeulen!
+
## 8.4.0-beta.1
- Addon Test: Error when addon interactions exists - [#29434](https://github.com/storybookjs/storybook/pull/29434), thanks @valentinpalkovic!
diff --git a/code/addons/test/manager.js b/code/addons/test/manager.js
index 8a2eae4ffce1..280488a50c10 100644
--- a/code/addons/test/manager.js
+++ b/code/addons/test/manager.js
@@ -1 +1 @@
-import './dist/manager';
+require('./dist/manager');
diff --git a/code/addons/test/manager.mjs b/code/addons/test/manager.mjs
new file mode 100644
index 000000000000..8a2eae4ffce1
--- /dev/null
+++ b/code/addons/test/manager.mjs
@@ -0,0 +1 @@
+import './dist/manager';
diff --git a/code/addons/test/postinstall.cjs b/code/addons/test/postinstall.cjs
deleted file mode 100644
index 29374d2a9382..000000000000
--- a/code/addons/test/postinstall.cjs
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/postinstall.cjs');
diff --git a/code/addons/test/postinstall.js b/code/addons/test/postinstall.js
new file mode 100644
index 000000000000..e543456ba157
--- /dev/null
+++ b/code/addons/test/postinstall.js
@@ -0,0 +1 @@
+module.exports = require('./dist/postinstall');
diff --git a/code/addons/test/postinstall.mjs b/code/addons/test/postinstall.mjs
new file mode 100644
index 000000000000..d73f1904173d
--- /dev/null
+++ b/code/addons/test/postinstall.mjs
@@ -0,0 +1 @@
+export * from './dist/postinstall.mjs';
diff --git a/code/addons/test/preset.cjs b/code/addons/test/preset.cjs
deleted file mode 100644
index 4c4e36fbb3bb..000000000000
--- a/code/addons/test/preset.cjs
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
- ...require('./dist/preset.cjs'),
-};
diff --git a/code/addons/test/preset.js b/code/addons/test/preset.js
index e538669369e9..a83f95279e7f 100644
--- a/code/addons/test/preset.js
+++ b/code/addons/test/preset.js
@@ -1,10 +1 @@
-const { checkActionsLoaded } = require('./dist/preset');
-
-function previewAnnotations(entry = [], options) {
- checkActionsLoaded(options.configDir);
- return entry;
-}
-
-module.exports = {
- previewAnnotations,
-};
+module.exports = require('./dist/preset');
diff --git a/code/addons/test/preset.mjs b/code/addons/test/preset.mjs
new file mode 100644
index 000000000000..510233d53efa
--- /dev/null
+++ b/code/addons/test/preset.mjs
@@ -0,0 +1 @@
+export * from './dist/preset.mjs';
diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx
index 6e70e7f1bf01..5ca7bc8aa972 100644
--- a/code/core/src/manager/components/sidebar/TestingModule.tsx
+++ b/code/core/src/manager/components/sidebar/TestingModule.tsx
@@ -1,6 +1,6 @@
import React, { type SyntheticEvent, useEffect, useRef, useState } from 'react';
-import { Button } from '@storybook/core/components';
+import { Button, TooltipNote } from '@storybook/core/components';
import { keyframes, styled } from '@storybook/core/theming';
import {
ChevronSmallUpIcon,
@@ -12,6 +12,8 @@ import {
import type { TestProviders } from '@storybook/core/core-events';
+import { WithTooltip } from '../../../components/components/tooltip/WithTooltip';
+
const DEFAULT_HEIGHT = 500;
const spin = keyframes({
@@ -320,36 +322,48 @@ export const TestingModule = ({
)}
{errorCount > 0 && (
- {
- e.stopPropagation();
- setErrorsActive(!errorsActive);
- }}
- aria-label="Show errors"
+ }
+ trigger="hover"
>
- {errorCount < 100 ? errorCount : '99+'}
-
+ {
+ e.stopPropagation();
+ setErrorsActive(!errorsActive);
+ }}
+ aria-label="Toggle errors"
+ >
+ {errorCount < 100 ? errorCount : '99+'}
+
+
)}
{warningCount > 0 && (
- {
- e.stopPropagation();
- setWarningsActive(!warningsActive);
- }}
- aria-label="Show warnings"
+ }
+ trigger="hover"
>
- {warningCount < 100 ? warningCount : '99+'}
-
+ {
+ e.stopPropagation();
+ setWarningsActive(!warningsActive);
+ }}
+ aria-label="Toggle warnings"
+ >
+ {warningCount < 100 ? warningCount : '99+'}
+
+
)}
diff --git a/code/package.json b/code/package.json
index e805db654192..12eab68227cf 100644
--- a/code/package.json
+++ b/code/package.json
@@ -293,5 +293,6 @@
"Dependency Upgrades"
]
]
- }
+ },
+ "deferredNextVersion": "8.4.0-beta.2"
}
diff --git a/code/renderers/react/src/act-compat.ts b/code/renderers/react/src/act-compat.ts
index 3eab722d3bb1..36e56712e02b 100644
--- a/code/renderers/react/src/act-compat.ts
+++ b/code/renderers/react/src/act-compat.ts
@@ -8,9 +8,14 @@ declare const globalThis: {
IS_REACT_ACT_ENVIRONMENT: boolean;
};
+// We need to spread React to avoid
+// export 'act' (imported as 'React4') was not found in 'react' errors in webpack
+// We do check if act exists, but webpack will still throw an error on compile time
+const clonedReact = { ...React };
+
const reactAct =
// @ts-expect-error act might not be available in some versions of React
- typeof React.act === 'function' ? React.act : DeprecatedReactTestUtils.act;
+ typeof clonedReact.act === 'function' ? clonedReact.act : DeprecatedReactTestUtils.act;
export function setReactActEnvironment(isReactActEnvironment: boolean) {
globalThis.IS_REACT_ACT_ENVIRONMENT = isReactActEnvironment;
diff --git a/docs/versions/next.json b/docs/versions/next.json
index 8fd540cc156a..a55efb9a8c72 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"8.4.0-beta.1","info":{"plain":"- Addon Test: Error when addon interactions exists - [#29434](https://github.com/storybookjs/storybook/pull/29434), thanks @valentinpalkovic!\n- Addon Test: Escape XML when converting ANSI to HTML in test errors - [#29446](https://github.com/storybookjs/storybook/pull/29446), thanks @ghengeveld!\n- Addon Test: Fix hiding stacktrace for assertion errors in test panel - [#29458](https://github.com/storybookjs/storybook/pull/29458), thanks @ghengeveld!\n- CLI: Fix `yarn` detection - [#29448](https://github.com/storybookjs/storybook/pull/29448), thanks @ndelangen!\n- Core: Close story status menu when selecting an item - [#29455](https://github.com/storybookjs/storybook/pull/29455), thanks @ghengeveld!\n- Core: Open 'Component tests' addon panel when clicking a story status - [#29456](https://github.com/storybookjs/storybook/pull/29456), thanks @ghengeveld!\n- Core: Show checkmark icon in story status dropdown and update status label for component tests - [#29451](https://github.com/storybookjs/storybook/pull/29451), thanks @ghengeveld!\n- Dependencies: Upgrade VTA to v3.1.0 - [#29449](https://github.com/storybookjs/storybook/pull/29449), thanks @ghengeveld!\n- Maintenance: Fix broken and outdated documentation links - [#29412](https://github.com/storybookjs/storybook/pull/29412), thanks @jonniebigodes!"}}
+{"version":"8.4.0-beta.2","info":{"plain":"- Addon Test: Adjust file exports to be ESM/CJS compatible - [#29471](https://github.com/storybookjs/storybook/pull/29471), thanks @valentinpalkovic!\n- Core: Show tooltip on filter toggles to clarify their purpose - [#29447](https://github.com/storybookjs/storybook/pull/29447), thanks @ghengeveld!\n- Webpack: Fix export 'act' (imported as 'React4') was not found in 'react' errors in webpack - [#29235](https://github.com/storybookjs/storybook/pull/29235), thanks @kasperpeulen!"}}
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/component-testing.spec.ts b/test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/component-testing.spec.ts
index 9f2aca1bee28..f14478f0cbea 100644
--- a/test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/component-testing.spec.ts
+++ b/test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/component-testing.spec.ts
@@ -69,7 +69,7 @@ test.describe("component testing", () => {
await page.getByRole('button', { name: 'Run tests' }).click();
// Wait for test results to appear
- const errorFilter = page.getByLabel("Show errors");
+ const errorFilter = page.getByLabel("Toggle errors");
await expect(errorFilter).toBeVisible({ timeout: 30000 });
// Assert discrepancy: CLI pass + Browser fail
@@ -117,7 +117,7 @@ test.describe("component testing", () => {
await page.getByRole('button', { name: 'Run tests' }).click();
// Wait for test results to appear
- const errorFilter = page.getByLabel("Show errors");
+ const errorFilter = page.getByLabel("Toggle errors");
await expect(errorFilter).toBeVisible({ timeout: 30000 });
// Assert for expected success
@@ -171,7 +171,7 @@ test.describe("component testing", () => {
await setForceFailureFlag(true);
// Wait for test results to appear
- const errorFilter = page.getByLabel("Show errors");
+ const errorFilter = page.getByLabel("Toggle errors");
await expect(errorFilter).toBeVisible({ timeout: 30000 });
// Assert for expected success