storybookjs · ndelangen · Aug 22, 2023 · Aug 21, 2023 · Aug 21, 2023 · Aug 21, 2023
diff --git a/code/addons/a11y/src/components/VisionSimulator.tsx b/code/addons/a11y/src/components/VisionSimulator.tsx
@@ -1,8 +1,7 @@
 import type { ReactNode } from 'react';
 import React, { useState } from 'react';
 import { Global, styled } from '@storybook/theming';
-import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
 import { Filters } from './ColorFilters';
 
@@ -145,7 +144,7 @@ export const VisionSimulator = () => {
         onDoubleClick={() => setFilter(null)}
       >
         <IconButton key="filter" active={!!filter} title="Vision simulator">
-          <Icon.Accessibility />
+          <Icons icon="accessibility" />
         </IconButton>
       </WithTooltip>
       <Hidden>

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

diff --git a/code/addons/backgrounds/src/containers/GridSelector.tsx b/code/addons/backgrounds/src/containers/GridSelector.tsx
@@ -2,8 +2,7 @@ import type { FC } from 'react';
 import React, { memo } from 'react';
 
 import { useGlobals, useParameter } from '@storybook/manager-api';
-import { IconButton } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, IconButton } from '@storybook/components';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 
@@ -31,7 +30,7 @@ export const GridSelector: FC = memo(function GridSelector() {
         })
       }
     >
-      <Icon.Grid />
+      <Icons icon="grid" />
     </IconButton>
   );
 });
diff --git a/code/addons/interactions/src/components/Interaction.tsx b/code/addons/interactions/src/components/Interaction.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { IconButton, TooltipNote, WithTooltip } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { IconButton, Icons, TooltipNote, WithTooltip } from '@storybook/components';
 import { type Call, CallStates, type ControlStates } from '@storybook/instrumenter';
 import { styled, typography } from '@storybook/theming';
 import { transparentize } from 'polished';
@@ -175,7 +174,7 @@ export const Interaction = ({
               tooltip={<Note note={`${isCollapsed ? 'Show' : 'Hide'} interactions`} />}
             >
               <StyledIconButton containsIcon onClick={toggleCollapsed}>
-                <Icon.ListUnordered />
+                <Icons icon="listunordered" />
               </StyledIconButton>
             </WithTooltip>
           )}

diff --git a/code/addons/interactions/src/components/Subnav.tsx b/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}
               >
-                <Icon.Rewind />
+                <Icons icon="rewind" />
               </RewindButton>
             </WithTooltip>
 
@@ -146,7 +146,7 @@ export const Subnav: React.FC<SubnavProps> = ({
                 onClick={controls.back}
                 disabled={!controlStates.back}
               >
-                <Icon.PlayBack />
+                <Icons icon="playback" />
               </StyledIconButton>
             </WithTooltip>
 
@@ -157,7 +157,7 @@ export const Subnav: React.FC<SubnavProps> = ({
                 onClick={controls.next}
                 disabled={!controlStates.next}
               >
-                <Icon.PlayNext />
+                <Icons icon="playnext" />
               </StyledIconButton>
             </WithTooltip>
 
@@ -168,13 +168,13 @@ export const Subnav: React.FC<SubnavProps> = ({
                 onClick={controls.end}
                 disabled={!controlStates.end}
               >
-                <Icon.FastForward />
+                <Icons icon="fastforward" />
               </StyledIconButton>
             </WithTooltip>
 
             <WithTooltip trigger="hover" hasChrome={false} tooltip={<Note note="Rerun" />}>
               <RerunButton aria-label="Rerun" containsIcon onClick={controls.rerun}>
-                <Icon.Sync />
+                <Icons icon="sync" />
               </RerunButton>
             </WithTooltip>
           </Group>

diff --git a/code/addons/measure/src/Tool.tsx b/code/addons/measure/src/Tool.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { useGlobals, useStorybookApi } from '@storybook/manager-api';
-import { IconButton } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, IconButton } from '@storybook/components';
 import { TOOL_ID, ADDON_ID } from './constants';
 
 export const Tool = () => {
@@ -34,7 +33,7 @@ export const Tool = () => {
       title="Enable measure"
       onClick={toggleMeasure}
     >
-      <Icon.Ruler />
+      <Icons icon="ruler" />
     </IconButton>
   );
 };
diff --git a/code/addons/outline/src/OutlineSelector.tsx b/code/addons/outline/src/OutlineSelector.tsx
@@ -1,7 +1,6 @@
 import React, { memo, useCallback, useEffect } from 'react';
 import { useGlobals, useStorybookApi } from '@storybook/manager-api';
-import { IconButton } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, IconButton } from '@storybook/components';
 import { ADDON_ID, PARAM_KEY } from './constants';
 
 export const OutlineSelector = memo(function OutlineSelector() {
@@ -35,7 +34,7 @@ export const OutlineSelector = memo(function OutlineSelector() {
       title="Apply outlines to the preview"
       onClick={toggleOutline}
     >
-      <Icon.Outline />
+      <Icons icon="outline" />
     </IconButton>
   );
 });
diff --git a/code/addons/themes/src/theme-switcher.tsx b/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 { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
+
 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">
-          <Icon.PaintBrush />
+          <Icons icon="paintbrush" />
           {label && <IconButtonLabel>{label}</IconButtonLabel>}
         </IconButton>
       </WithTooltip>

diff --git a/code/addons/viewport/src/Tool.tsx b/code/addons/viewport/src/Tool.tsx
@@ -4,8 +4,8 @@ import memoize from 'memoizerific';
 
 import { styled, Global, type Theme, withTheme } from '@storybook/theming';
 
-import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
+
 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 });
             }}
           >
-            <Icon.Grow />
+            <Icons icon="grow" />
             {styles ? (
               <IconButtonLabel>
                 {isRotated ? `${item.title} (L)` : `${item.title} (P)`}
@@ -234,7 +234,7 @@ export const ViewportTool: FC = memo(
                 setState({ ...state, isRotated: !isRotated });
               }}
             >
-              <Icon.Transfer />
+              <Icons icon="transfer" />
             </IconButton>
             <ActiveViewportLabel title="Viewport height">
               {styles.height.replace('px', '')}

diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -31,10 +31,6 @@ const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;
 
 const storybookPaths: Record<string, string> = {
-  // this is a temporary hack to get webpack to alias this correctly
-  [`@storybook/components/experimental`]: `${getAbsolutePath(
-    `@storybook/components`
-  )}/dist/experimental`,
   ...[
     // these packages are not pre-bundled because of react dependencies
     'components',

diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts
@@ -6,16 +6,12 @@ import type { StorybookConfig } from '../../frameworks/react-vite';
 const isBlocksOnly = process.env.STORYBOOK_BLOCKS_ONLY === 'true';
 
 const allStories = [
-  {
-    directory: '../components/src/new',
-    titlePrefix: '@core-ui',
-  },
   {
     directory: '../manager/src',
     titlePrefix: '@manager',
   },
   {
-    directory: '../components/src/legacy',
+    directory: '../components/src/components',
     titlePrefix: '@components',
   },
   {

diff --git a/code/ui/blocks/src/blocks/mdx.tsx b/code/ui/blocks/src/blocks/mdx.tsx
@@ -1,8 +1,7 @@
 import type { FC, MouseEvent, PropsWithChildren, SyntheticEvent } from 'react';
 import React, { useContext } from 'react';
 import { NAVIGATE_URL } from '@storybook/core-events';
-import { Code, components, nameSpaceClassNames } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Code, components, Icons, nameSpaceClassNames } from '@storybook/components';
 import { global } from '@storybook/global';
 import { styled } from '@storybook/theming';
 import { Source } from '../components';
@@ -191,7 +190,7 @@ const HeaderWithOcticonAnchor: FC<PropsWithChildren<HeaderWithOcticonAnchorProps
           }
         }}
       >
-        <Icon.Link />
+        <Icons icon="link" />
       </OcticonAnchor>
       {children}
     </OcticonHeader>

diff --git a/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx b/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React, { useCallback, useState, useEffect } from 'react';
 
-import { Link } from '@storybook/components/experimental';
+import { Link } from '@storybook/components';
 import {
   BooleanControl,
   ColorControl,

diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx
@@ -1,17 +1,22 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { styled } from '@storybook/theming';
+import type { Meta, StoryObj } from '@storybook/react';
 import { ArgsTable, ArgsTableError } from './ArgsTable';
 import * as ArgRow from './ArgRow.stories';
 
-export default {
+const meta = {
   component: ArgsTable,
   title: 'Components/ArgsTable/ArgsTable',
   args: {
     updateArgs: action('updateArgs'),
     resetArgs: action('resetArgs'),
   },
-};
+} satisfies Meta<typeof ArgsTable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
 const propsSection = {
   category: 'props ',
 };
@@ -145,6 +150,16 @@ export const Empty = {
   },
 };
 
+export const EmptyInsideAddonPanel: Story = {
+  args: {
+    isLoading: false,
+    inAddonPanel: true,
+  },
+  parameters: {
+    layout: 'centered',
+  },
+};
+
 export const WithDefaultExpandedArgs = {
   args: {
     rows: {

diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx
@@ -5,8 +5,7 @@ import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
 import { includeConditionalArg } from '@storybook/csf';
 import { once } from '@storybook/client-logger';
-import { IconButton, ResetWrapper } from '@storybook/components';
-import { Icon, Link } from '@storybook/components/experimental';
+import { IconButton, Icons, ResetWrapper, Link } from '@storybook/components';
 
 import { ArgRow } from './ArgRow';
 import { SectionRow } from './SectionRow';
@@ -211,7 +210,7 @@ interface ArgsTableErrorProps {
 }
 
 export interface ArgsTableLoadingProps {
-  isLoading: true;
+  isLoading: boolean;
 }
 
 export type ArgsTableProps = ArgsTableOptionProps &
@@ -380,7 +379,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
                   Control{' '}
                   {!isLoading && resetArgs && (
                     <StyledIconButton onClick={() => resetArgs()} title="Reset controls">
-                      <Icon.Undo aria-hidden />
+                      <Icons icon="undo" aria-hidden />
                     </StyledIconButton>
                   )}
                 </ControlHeadingWrapper>

diff --git a/code/ui/blocks/src/components/ArgsTable/Empty.tsx b/code/ui/blocks/src/components/ArgsTable/Empty.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React, { useEffect, useState } from 'react';
 import { styled } from '@storybook/theming';
-import { Link } from '@storybook/components/experimental';
+import { Icons, Link } from '@storybook/components';
 
 interface EmptyProps {
   inAddonPanel?: boolean;
@@ -42,10 +42,11 @@ const Description = styled.div(({ theme }) => ({
   color: theme.textMutedColor,
 }));
 
-const Links = styled.div({
+const Links = styled.div(({ theme }) => ({
   display: 'flex',
+  fontSize: theme.typography.size.s2 - 1,
   gap: 25,
-});
+}));
 
 const Divider = styled.div(({ theme }) => ({
   width: 1,
@@ -85,8 +86,8 @@ export const Empty: FC<EmptyProps> = ({ inAddonPanel }) => {
       <Links>
         {inAddonPanel && (
           <>
-            <Link href="https://youtu.be/0gOfS6K0x0E" target="_blank" icon="Video" withArrow>
-              Watch 5m video
+            <Link href="https://youtu.be/0gOfS6K0x0E" target="_blank" withArrow>
+              <Icons icon="video" /> Watch 5m video
             </Link>
             <Divider />
             <Link