Release: Prerelease 7.2.2-alpha.1

CHANGELOG.prerelease.md

@@ -1,3 +1,12 @@
+## 7.2.2-alpha.1
+
+- CSF-Tools: Remove prettier from printConfig - [#23766](https://github.com/storybookjs/storybook/pull/23766), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- UI: Improve Link component - [#23767](https://github.com/storybookjs/storybook/pull/23767), thanks [@cdedreuille](https://github.com/cdedreuille)!
+- UI: Improve new `Button` component - [#23765](https://github.com/storybookjs/storybook/pull/23765), thanks [@cdedreuille](https://github.com/cdedreuille)!
+- UI: Update Button types to allow for no children on iconOnly buttons - [#23735](https://github.com/storybookjs/storybook/pull/23735), thanks [@cdedreuille](https://github.com/cdedreuille)!
+- UI: Upgrade Icon component - [#23680](https://github.com/storybookjs/storybook/pull/23680), thanks [@cdedreuille](https://github.com/cdedreuille)!
+- WebpackBuilder: Remove need for `react` as peerDependency - [#23496](https://github.com/storybookjs/storybook/pull/23496), thanks [@ndelangen](https://github.com/ndelangen)!
+
 ## 7.2.2-alpha.0
 
 - Indexer: Introduce new experimental `indexer` API - #23691, thanks [@JReinhold](https://github.com/jreinhold)!

CONTRIBUTING.md

@@ -1,6 +1,7 @@
 # Getting started
 
-- Ensure you have node version 16 installed (suggestion: v16.5).
+Storybook is developed against a specific node version. We recommend using [Volta](https://volta.sh/) as it will automatically install the correct node and yarn version when you first use the repo. If you chose not to use Volta please ensure you you have node version 16 installed (suggestion: v16.5)
+
 - Ensure if you are using Windows to use the Windows Subsystem for Linux (WSL).
 - Run `yarn start` in the root directory to run a basic test Storybook "sandbox".
 
@@ -31,4 +32,4 @@ yarn task --task dev --template <your template> --start-from=publish
 
 # Contributing to Storybook
 
-For further advice on how to contribute, please refer to our [NEW contributing guide on the Storybook website](https://storybook.js.org/docs/next/react/contribute/how-to-contribute).
+For further advice on how to contribute, please refer to our [NEW contributing guide on the Storybook website](https://storybook.js.org/docs/react/contribute/how-to-contribute).

code/addons/a11y/src/components/VisionSimulator.tsx

@@ -1,7 +1,8 @@
 import type { ReactNode } from 'react';
 import React, { useState } from 'react';
 import { Global, styled } from '@storybook/theming';
-import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
+import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
+import { Icon } from '@storybook/components/experimental';
 
 import { Filters } from './ColorFilters';
 
@@ -144,7 +145,7 @@ export const VisionSimulator = () => {
         onDoubleClick={() => setFilter(null)}
       >
         <IconButton key="filter" active={!!filter} title="Vision simulator">
-          <Icons icon="accessibility" />
+          <Icon.Accessibility />
         </IconButton>
       </WithTooltip>
       <Hidden>

code/addons/backgrounds/src/containers/BackgroundSelector.tsx

@@ -4,7 +4,8 @@ import memoize from 'memoizerific';
 
 import { useParameter, useGlobals } from '@storybook/manager-api';
 import { logger } from '@storybook/client-logger';
-import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
+import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
+import { Icon } from '@storybook/components/experimental';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import { ColorIcon } from '../components/ColorIcon';
@@ -140,7 +141,7 @@ export const BackgroundSelector: FC = memo(function BackgroundSelector() {
           title="Change the background of the preview"
           active={selectedBackgroundColor !== 'transparent' || isTooltipVisible}
         >
-          <Icons icon="photo" />
+          <Icon.Photo />
         </IconButton>
       </WithTooltip>
     </Fragment>

code/addons/backgrounds/src/containers/GridSelector.tsx

@@ -2,7 +2,8 @@ import type { FC } from 'react';
 import React, { memo } from 'react';
 
 import { useGlobals, useParameter } from '@storybook/manager-api';
-import { Icons, IconButton } from '@storybook/components';
+import { IconButton } from '@storybook/components';
+import { Icon } from '@storybook/components/experimental';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 
@@ -30,7 +31,7 @@ export const GridSelector: FC = memo(function GridSelector() {
         })
       }
     >
-      <Icons icon="grid" />
+      <Icon.Grid />
     </IconButton>
   );
 });

code/addons/interactions/src/components/Interaction.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { IconButton, Icons, TooltipNote, WithTooltip } from '@storybook/components';
+import { IconButton, TooltipNote, WithTooltip } from '@storybook/components';
+import { Icon } from '@storybook/components/experimental';
 import { type Call, CallStates, type ControlStates } from '@storybook/instrumenter';
 import { styled, typography } from '@storybook/theming';
 import { transparentize } from 'polished';
@@ -174,7 +175,7 @@ export const Interaction = ({
               tooltip={<Note note={`${isCollapsed ? 'Show' : 'Hide'} interactions`} />}
             >
               <StyledIconButton containsIcon onClick={toggleCollapsed}>
-                <Icons icon="listunordered" />
+                <Icon.ListUnordered />
               </StyledIconButton>
             </WithTooltip>
           )}

code/addons/interactions/src/components/Subnav.tsx

@@ -3,13 +3,13 @@ import React from 'react';
 import {
   Button,
   IconButton,
-  Icons,
   Separator,
   P,
   TooltipNote,
   WithTooltip,
   Bar,
 } from '@storybook/components';
+import { Icon } from '@storybook/components/experimental';
 import type { Call, ControlStates } from '@storybook/instrumenter';
 import { CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
@@ -135,7 +135,7 @@ export const Subnav: React.FC<SubnavProps> = ({
                 onClick={controls.start}
                 disabled={!controlStates.start}
               >
-                <Icons icon="rewind" />
+                <Icon.Rewind />
               </RewindButton>
             </WithTooltip>
 
@@ -146,7 +146,7 @@ export const Subnav: React.FC<SubnavProps> = ({
                 onClick={controls.back}
                 disabled={!controlStates.back}
               >
-                <Icons icon="playback" />
+                <Icon.PlayBack />
               </StyledIconButton>
             </WithTooltip>
 
@@ -157,7 +157,7 @@ export const Subnav: React.FC<SubnavProps> = ({
                 onClick={controls.next}
                 disabled={!controlStates.next}
               >
-                <Icons icon="playnext" />
+                <Icon.PlayNext />
               </StyledIconButton>
             </WithTooltip>
 
@@ -168,13 +168,13 @@ export const Subnav: React.FC<SubnavProps> = ({
                 onClick={controls.end}
                 disabled={!controlStates.end}
               >
-                <Icons icon="fastforward" />
+                <Icon.FastForward />
               </StyledIconButton>
             </WithTooltip>
 
             <WithTooltip trigger="hover" hasChrome={false} tooltip={<Note note="Rerun" />}>
               <RerunButton aria-label="Rerun" containsIcon onClick={controls.rerun}>
-                <Icons icon="sync" />
+                <Icon.Sync />
               </RerunButton>
             </WithTooltip>
           </Group>

code/addons/measure/src/Tool.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
 import { useGlobals, useStorybookApi } from '@storybook/manager-api';
-import { Icons, IconButton } from '@storybook/components';
+import { IconButton } from '@storybook/components';
+import { Icon } from '@storybook/components/experimental';
 import { TOOL_ID, ADDON_ID } from './constants';
 
 export const Tool = () => {
@@ -33,7 +34,7 @@ export const Tool = () => {
       title="Enable measure"
       onClick={toggleMeasure}
     >
-      <Icons icon="ruler" />
+      <Icon.Ruler />
     </IconButton>
   );
 };

code/addons/outline/src/OutlineSelector.tsx

@@ -1,6 +1,7 @@
 import React, { memo, useCallback, useEffect } from 'react';
 import { useGlobals, useStorybookApi } from '@storybook/manager-api';
-import { Icons, IconButton } from '@storybook/components';
+import { IconButton } from '@storybook/components';
+import { Icon } from '@storybook/components/experimental';
 import { ADDON_ID, PARAM_KEY } from './constants';
 
 export const OutlineSelector = memo(function OutlineSelector() {
@@ -34,7 +35,7 @@ export const OutlineSelector = memo(function OutlineSelector() {
       title="Apply outlines to the preview"
       onClick={toggleOutline}
     >
-      <Icons icon="outline" />
+      <Icon.Outline />
     </IconButton>
   );
 });

code/addons/themes/src/theme-switcher.tsx

@@ -1,8 +1,8 @@
 import React, { Fragment, useMemo } from 'react';
 import { useAddonState, useChannel, useGlobals, useParameter } from '@storybook/manager-api';
 import { styled } from '@storybook/theming';
-import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
-
+import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
+import { Icon } from '@storybook/components/experimental';
 import type { ThemeAddonState, ThemeParameters } from './constants';
 import {
   PARAM_KEY,
@@ -74,7 +74,7 @@ export const ThemeSwitcher = () => {
         }}
       >
         <IconButton key={THEME_SWITCHER_ID} active={!themeOverride} title="Theme">
-          <Icons icon="paintbrush" />
+          <Icon.PaintBrush />
           {label && <IconButtonLabel>{label}</IconButtonLabel>}
         </IconButton>
       </WithTooltip>

code/addons/viewport/src/Tool.tsx

@@ -4,8 +4,8 @@ import memoize from 'memoizerific';
 
 import { styled, Global, type Theme, withTheme } from '@storybook/theming';
 
-import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
-
+import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
+import { Icon } from '@storybook/components/experimental';
 import { useStorybookApi, useParameter, useAddonState } from '@storybook/manager-api';
 import { registerShortcuts } from './shortcuts';
 import { PARAM_KEY, ADDON_ID } from './constants';
@@ -188,7 +188,7 @@ export const ViewportTool: FC = memo(
               setState({ ...state, selected: responsiveViewport.id });
             }}
           >
-            <Icons icon="grow" />
+            <Icon.Grow />
             {styles ? (
               <IconButtonLabel>
                 {isRotated ? `${item.title} (L)` : `${item.title} (P)`}
@@ -234,7 +234,7 @@ export const ViewportTool: FC = memo(
                 setState({ ...state, isRotated: !isRotated });
               }}
             >
-              <Icons icon="transfer" />
+              <Icon.Transfer />
             </IconButton>
             <ActiveViewportLabel title="Viewport height">
               {styles.height.replace('px', '')}

code/builders/builder-webpack5/package.json

@@ -55,23 +55,15 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/core": "^7.22.9",
-    "@storybook/addons": "workspace:*",
+    "@babel/core": "^7.22.0",
     "@storybook/channels": "workspace:*",
-    "@storybook/client-api": "workspace:*",
     "@storybook/client-logger": "workspace:*",
-    "@storybook/components": "workspace:*",
     "@storybook/core-common": "workspace:*",
     "@storybook/core-events": "workspace:*",
     "@storybook/core-webpack": "workspace:*",
-    "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/preview": "workspace:*",
     "@storybook/preview-api": "workspace:*",
-    "@storybook/router": "workspace:*",
-    "@storybook/store": "workspace:*",
-    "@storybook/theming": "workspace:*",
     "@swc/core": "^1.3.49",
     "@types/node": "^16.0.0",
     "@types/semver": "^7.3.4",
@@ -109,10 +101,6 @@
     "slash": "^5.0.0",
     "typescript": "~4.9.3"
   },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-  },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true