storybookjs · yannbf · Aug 14, 2024 · Jul 23, 2024 · Jul 23, 2024 · Jul 23, 2024
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -405,6 +405,26 @@ jobs:
           template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner)
       - store_test_results:
           path: test-results
+  vitest-integration:
+    parameters:
+      parallelism:
+        type: integer
+    executor:
+      class: large
+      name: sb_playwright
+    parallelism: << parameters.parallelism >>
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: "--depth 1 --verbose"
+      - attach_workspace:
+          at: .
+      - run:
+          name: Running story tests in Vitest
+          command: yarn task --task vitest-integration --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task vitest-integration) --no-link --start-from=never --junit
+      - report-workflow-on-failure:
+          template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task vitest-integration)
+      - store_test_results:
+          path: test-results
   test-runner-dev:
     parameters:
       parallelism:
@@ -692,6 +712,10 @@ workflows:
           parallelism: 8
           requires:
             - build-sandboxes
+      - vitest-integration:
+          parallelism: 5
+          requires:
+            - create-sandboxes
       - bench:
           parallelism: 5
           requires:
@@ -754,6 +778,10 @@ workflows:
           parallelism: 14
           requires:
             - build-sandboxes
+      - vitest-integration:
+          parallelism: 5
+          requires:
+            - create-sandboxes
       - test-portable-stories:
           requires:
             - build
@@ -817,6 +845,10 @@ workflows:
           parallelism: 32
           requires:
             - build-sandboxes
+      - vitest-integration:
+          parallelism: 12
+          requires:
+            - create-sandboxes
       - test-portable-stories:
           requires:
             - build

diff --git a/MIGRATION.md b/MIGRATION.md
@@ -1,6 +1,7 @@
 <h1>Migration</h1>
 
 - [From version 8.2.x to 8.3.x](#from-version-82x-to-83x)
+  - [Removed `experimental_SIDEBAR_BOTTOM` and deprecated `experimental_SIDEBAR_TOP` addon types](#removed-experimental_sidebar_bottom-and-deprecated-experimental_sidebar_top-addon-types)
   - [New parameters format for addon backgrounds](#new-parameters-format-for-addon-backgrounds)
   - [New parameters format for addon viewport](#new-parameters-format-for-addon-viewport)
 - [From version 8.1.x to 8.2.x](#from-version-81x-to-82x)
@@ -104,17 +105,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)
@@ -140,7 +141,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)
@@ -154,7 +155,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)
@@ -204,7 +205,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)
@@ -419,6 +420,12 @@
 
 ## From version 8.2.x to 8.3.x
 
+### Removed `experimental_SIDEBAR_BOTTOM` and deprecated `experimental_SIDEBAR_TOP` addon types
+
+The experimental SIDEBAR_BOTTOM addon type was removed in favor of a built-in filter UI. The enum type definition will remain available until Storybook 9.0 but will be ignored. Similarly the experimental SIDEBAR_TOP addon type is deprecated and will be removed in a future version.
+
+These APIs allowed addons to render arbitrary content in the Storybook sidebar. Due to potential conflicts between addons and challenges regarding styling, these APIs are/will be removed. In the future, Storybook will provide declarative API hooks to allow addons to add content to the sidebar without risk of conflicts or UI inconsistencies. One such API is `experimental_updateStatus` which allow addons to set a status for stories. The SIDEBAR_BOTTOM slot is now used to allow filtering stories with a given status.
+
 ### New parameters format for addon backgrounds
 
 The `addon-backgrounds` addon now uses a new format for parameters. The `backgrounds` parameter is now an object with a `values` key that contains the background values.
@@ -448,7 +455,7 @@ Setting an override value should now be done via a `globals` property on your co
 export default {
   component: Button,
   globals: {
-    backgrounds: { value: 'twitter' },
+    backgrounds: { value: "twitter" },
   },
 };
 ```
@@ -494,7 +501,7 @@ Setting an override value should now be done via a `globals` property on your co
 export default {
   component: Button,
   globals: {
-    viewport: { value: 'phone' },
+    viewport: { value: "phone" },
   },
 };
 ```
@@ -2411,8 +2418,8 @@ export default config;
 
 #### Vite builder uses Vite config automatically
 
-When using a [Vite-based framework](#framework-field-mandatory), Storybook will automatically use your `vite.config.(ctm)js` config file starting in 7.0.  
-Some settings will be overridden by Storybook so that it can function properly, and the merged settings can be modified using `viteFinal` in `.storybook/main.js` (see the [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)).  
+When using a [Vite-based framework](#framework-field-mandatory), Storybook will automatically use your `vite.config.(ctm)js` config file starting in 7.0.
+Some settings will be overridden by Storybook so that it can function properly, and the merged settings can be modified using `viteFinal` in `.storybook/main.js` (see the [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)).
 If you were using `viteFinal` in 6.5 to simply merge in your project's standard Vite config, you can now remove it.
 
 For Svelte projects this means that the `svelteOptions` property in the `main.js` config should be omitted, as it will be loaded automatically via the project's `vite.config.js`.

diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.5",
+    "@storybook/icons": "^1.2.10",
     "@testing-library/react": "^14.0.0",
     "lodash": "^4.17.21",
     "react": "^18.2.0",

diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json
@@ -61,7 +61,7 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.2.5",
+    "@storybook/icons": "^1.2.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.3.2"

diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json
@@ -57,7 +57,7 @@
   },
   "devDependencies": {
     "@storybook/blocks": "workspace:*",
-    "@storybook/icons": "^1.2.5",
+    "@storybook/icons": "^1.2.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "@devtools-ds/object-inspector": "^1.1.2",
-    "@storybook/icons": "^1.2.5",
+    "@storybook/icons": "^1.2.10",
     "@types/node": "^18.0.0",
     "formik": "^2.2.9",
     "react": "^18.2.0",

diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
@@ -59,7 +59,7 @@
     "upath": "^2.0.1"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.2.5",
+    "@storybook/icons": "^1.2.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-resize-detector": "^7.1.2",

diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json
@@ -72,7 +72,7 @@
     "tiny-invariant": "^1.3.1"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.2.5",
+    "@storybook/icons": "^1.2.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.3.2"

diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json
@@ -50,7 +50,7 @@
   },
   "devDependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
-    "@storybook/icons": "^1.2.5",
+    "@storybook/icons": "^1.2.10",
     "@storybook/react": "workspace:*",
     "framer-motion": "^11.0.3",
     "react": "^18.2.0",

diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json
@@ -62,7 +62,7 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.2.5",
+    "@storybook/icons": "^1.2.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.3.2"

diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json
@@ -60,7 +60,7 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.2.5",
+    "@storybook/icons": "^1.2.10",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {

diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json
@@ -56,7 +56,7 @@
   },
   "devDependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.5",
+    "@storybook/icons": "^1.2.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.3.2"

diff --git a/code/core/package.json b/code/core/package.json
@@ -303,7 +303,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@storybook/docs-mdx": "4.0.0-next.1",
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.5",
+    "@storybook/icons": "^1.2.10",
     "@tanstack/react-virtual": "^3.3.0",
     "@testing-library/react": "^14.0.0",
     "@types/compression": "^1.7.0",

diff --git a/code/core/src/components/components/tooltip/ListItem.tsx b/code/core/src/components/components/tooltip/ListItem.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode, ComponentProps } from 'react';
+import type { ReactNode, ComponentProps, SyntheticEvent } from 'react';
 import React from 'react';
 import { styled } from '@storybook/core/theming';
 import memoize from 'memoizerific';
@@ -113,15 +113,19 @@ const Left = styled.span<LeftProps>(
 
 export interface ItemProps {
   disabled?: boolean;
+  href?: string;
+  onClick?: (event: SyntheticEvent, ...args: any[]) => any;
 }
 
-const Item = styled.a<ItemProps>(
+const Item = styled.div<ItemProps>(
   ({ theme }) => ({
+    width: '100%',
+    border: 'none',
+    background: 'none',
     fontSize: theme.typography.size.s1,
     transition: 'all 150ms ease-out',
     color: theme.color.dark,
     textDecoration: 'none',
-    cursor: 'pointer',
     justifyContent: 'space-between',
 
     lineHeight: '18px',
@@ -132,43 +136,34 @@ const Item = styled.a<ItemProps>(
     '& > * + *': {
       paddingLeft: 10,
     },
-
-    '&:hover': {
-      background: theme.background.hoverable,
-    },
-    '&:hover svg': {
-      opacity: 1,
-    },
   }),
-  ({ disabled }) =>
-    disabled
-      ? {
-          cursor: 'not-allowed',
-        }
-      : {}
+  ({ theme, href, onClick }) =>
+    (href || onClick) && {
+      cursor: 'pointer',
+      '&:hover': {
+        background: theme.background.hoverable,
+      },
+      '&:hover svg': {
+        opacity: 1,
+      },
+    },
+  ({ disabled }) => disabled && { cursor: 'not-allowed' }
 );
 
-const getItemProps = memoize(100)((onClick, href, LinkWrapper) => {
-  const result = {};
-
-  if (onClick) {
-    Object.assign(result, {
-      onClick,
-    });
-  }
-  if (href) {
-    Object.assign(result, {
-      href,
-    });
-  }
-  if (LinkWrapper && href) {
-    Object.assign(result, {
-      to: href,
+const getItemProps = memoize(100)((onClick, href, LinkWrapper) => ({
+  ...(onClick && {
+    as: 'button',
+    onClick,
+  }),
+  ...(href && {
+    as: 'a',
+    href,
+    ...(LinkWrapper && {
       as: LinkWrapper,
-    });
-  }
-  return result;
-});
+      to: href,
+    }),
+  }),
+}));
 
 export type LinkWrapperType = (props: any) => ReactNode;
 
@@ -200,23 +195,25 @@ const ListItem = ({
   LinkWrapper = undefined,
   ...rest
 }: ListItemProps) => {
-  const itemProps = getItemProps(onClick, href, LinkWrapper);
   const commonProps = { active, disabled };
+  const itemProps = getItemProps(onClick, href, LinkWrapper);
 
   return (
-    <Item {...commonProps} {...rest} {...itemProps}>
-      {icon && <Left {...commonProps}>{icon}</Left>}
-      {title || center ? (
-        <Center isIndented={!!(!icon && isIndented)}>
-          {title && (
-            <Title {...commonProps} loading={loading}>
-              {title}
-            </Title>
-          )}
-          {center && <CenterText {...commonProps}>{center}</CenterText>}
-        </Center>
-      ) : null}
-      {right && <Right {...commonProps}>{right}</Right>}
+    <Item {...rest} {...commonProps} {...itemProps}>
+      <>
+        {icon && <Left {...commonProps}>{icon}</Left>}
+        {title || center ? (
+          <Center isIndented={!!(!icon && isIndented)}>
+            {title && (
+              <Title {...commonProps} loading={loading}>
+                {title}
+              </Title>
+            )}
+            {center && <CenterText {...commonProps}>{center}</CenterText>}
+          </Center>
+        ) : null}
+        {right && <Right {...commonProps}>{right}</Right>}
+      </>
     </Item>
   );
 };