Merge pull request #29462 from storybookjs/version-non-patch-from-8.4…

….0-beta.1

Release: Prerelease 8.4.0-beta.2

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!

code/addons/test/manager.js

@@ -1 +1 @@
-import './dist/manager';
+require('./dist/manager');

code/addons/test/manager.mjs

@@ -0,0 +1 @@
+import './dist/manager';

code/addons/test/postinstall.js

@@ -0,0 +1 @@
+module.exports = require('./dist/postinstall');

code/addons/test/postinstall.mjs

@@ -0,0 +1 @@
+export * from './dist/postinstall.mjs';

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');

code/addons/test/preset.mjs

@@ -0,0 +1 @@
+export * from './dist/preset.mjs';

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 && (
-              <StatusButton
-                id="errors-found-filter"
-                variant="ghost"
-                padding={errorCount < 10 ? 'medium' : 'small'}
-                status="negative"
-                active={errorsActive}
-                onClick={(e: SyntheticEvent) => {
-                  e.stopPropagation();
-                  setErrorsActive(!errorsActive);
-                }}
-                aria-label="Show errors"
+              <WithTooltip
+                hasChrome={false}
+                tooltip={<TooltipNote note="Toggle errors" />}
+                trigger="hover"
               >
-                {errorCount < 100 ? errorCount : '99+'}
-              </StatusButton>
+                <StatusButton
+                  id="errors-found-filter"
+                  variant="ghost"
+                  padding={errorCount < 10 ? 'medium' : 'small'}
+                  status="negative"
+                  active={errorsActive}
+                  onClick={(e: SyntheticEvent) => {
+                    e.stopPropagation();
+                    setErrorsActive(!errorsActive);
+                  }}
+                  aria-label="Toggle errors"
+                >
+                  {errorCount < 100 ? errorCount : '99+'}
+                </StatusButton>
+              </WithTooltip>
             )}
             {warningCount > 0 && (
-              <StatusButton
-                id="warnings-found-filter"
-                variant="ghost"
-                padding={warningCount < 10 ? 'medium' : 'small'}
-                status="warning"
-                active={warningsActive}
-                onClick={(e: SyntheticEvent) => {
-                  e.stopPropagation();
-                  setWarningsActive(!warningsActive);
-                }}
-                aria-label="Show warnings"
+              <WithTooltip
+                hasChrome={false}
+                tooltip={<TooltipNote note="Toggle warnings" />}
+                trigger="hover"
               >
-                {warningCount < 100 ? warningCount : '99+'}
-              </StatusButton>
+                <StatusButton
+                  id="warnings-found-filter"
+                  variant="ghost"
+                  padding={warningCount < 10 ? 'medium' : 'small'}
+                  status="warning"
+                  active={warningsActive}
+                  onClick={(e: SyntheticEvent) => {
+                    e.stopPropagation();
+                    setWarningsActive(!warningsActive);
+                  }}
+                  aria-label="Toggle warnings"
+                >
+                  {warningCount < 100 ? warningCount : '99+'}
+                </StatusButton>
+              </WithTooltip>
             )}
           </Filters>
         </Bar>

code/package.json

@@ -293,5 +293,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.4.0-beta.2"
 }

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;

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!"}}

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