Merge pull request #25822 from storybookjs/charles-fix-toolbars-icons

UI: Update deprecated Icons with the new @storybook/icons in addons

code/addons/a11y/package.json

@@ -60,7 +60,7 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",

code/addons/a11y/src/components/Report/Item.tsx

@@ -1,7 +1,6 @@
 import React, { Fragment, useState } from 'react';
 
 import { styled } from '@storybook/theming';
-import { Icons } from '@storybook/components';
 
 import type { Result } from 'axe-core';
 import { Info } from './Info';
@@ -11,6 +10,7 @@ import { Tags } from './Tags';
 
 import type { RuleType } from '../A11YPanel';
 import HighlightToggle from './HighlightToggle';
+import { ChevronSmallDownIcon } from '@storybook/icons';
 
 const Wrapper = styled.div(({ theme }) => ({
   display: 'flex',
@@ -21,10 +21,7 @@ const Wrapper = styled.div(({ theme }) => ({
   },
 }));
 
-const Icon = styled(Icons)({
-  height: 10,
-  width: 10,
-  minWidth: 10,
+const Icon = styled(ChevronSmallDownIcon)({
   marginRight: 10,
   transition: 'transform 0.1s ease-in-out',
   verticalAlign: 'inherit',
@@ -75,7 +72,6 @@ export const Item = (props: ItemProps) => {
       <Wrapper>
         <HeaderBar onClick={() => onToggle(!open)} role="button">
           <Icon
-            icon="arrowdown"
             style={{
               transform: `rotate(${open ? 0 : -90}deg)`,
             }}

code/addons/backgrounds/package.json

@@ -59,7 +59,7 @@
   "devDependencies": {
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",

code/addons/interactions/package.json

@@ -61,7 +61,7 @@
     "@storybook/components": "workspace:*",
     "@storybook/core-common": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/instrumenter": "workspace:*",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",

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

@@ -1,6 +1,6 @@
 import React, { Fragment, useState } from 'react';
 import { styled, themes, convert } from '@storybook/theming';
-import { Icons, type IconsProps } from '@storybook/components';
+import { ChevronSmallDownIcon } from '@storybook/icons';
 
 const ListWrapper = styled.ul({
   listStyle: 'none',
@@ -18,10 +18,7 @@ const Wrapper = styled.div({
   },
 });
 
-const Icon = styled(Icons)<IconsProps>({
-  height: 10,
-  width: 10,
-  minWidth: 10,
+const Icon = styled(ChevronSmallDownIcon)({
   color: convert(themes.light).textMutedColor,
   marginRight: 10,
   transition: 'transform 0.1s ease-in-out',
@@ -68,7 +65,6 @@ export const ListItem: React.FC<ListItemProps> = ({ item }) => {
       <Wrapper>
         <HeaderBar onClick={() => onToggle(!open)} role="button">
           <Icon
-            icon="arrowdown"
             color={convert(themes.light).appBorderColor}
             style={{
               transform: `rotate(${open ? 0 : -90}deg)`,

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

@@ -1,51 +1,44 @@
 import React from 'react';
-import { Icons, type IconsProps } from '@storybook/components';
 import { type Call, CallStates } from '@storybook/instrumenter';
-import { styled } from '@storybook/theming';
+import { styled, useTheme } from '@storybook/theming';
 
 import { transparentize } from 'polished';
-import localTheme from '../theme';
+import { CheckIcon, CircleIcon, PlayIcon, StopAltIcon } from '@storybook/icons';
 
 export interface StatusIconProps {
   status: Call['status'];
-  useSymbol?: IconsProps['useSymbol'];
-  className?: string;
 }
 
-const {
-  colors: {
-    pure: { gray },
-  },
-} = localTheme;
-
-const StyledStatusIcon = styled(Icons)<StatusIconProps>(({ theme, status }) => {
-  const color = {
-    [CallStates.DONE]: theme.color.positive,
-    [CallStates.ERROR]: theme.color.negative,
-    [CallStates.ACTIVE]: theme.color.secondary,
-    [CallStates.WAITING]: transparentize(0.5, gray[500]),
-  }[status];
-  return {
-    width: status === CallStates.WAITING ? 6 : 12,
-    height: status === CallStates.WAITING ? 6 : 12,
-    color,
-    justifySelf: 'center',
-  };
+const WarningContainer = styled.div({
+  width: 14,
+  height: 14,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
 });
 
-export const StatusIcon: React.FC<StatusIconProps> = ({ status, className }) => {
-  const icon = {
-    [CallStates.DONE]: 'check',
-    [CallStates.ERROR]: 'stopalt',
-    [CallStates.ACTIVE]: 'play',
-    [CallStates.WAITING]: 'circle',
-  }[status] as IconsProps['icon'];
-  return (
-    <StyledStatusIcon
-      data-testid={`icon-${status}`}
-      status={status}
-      icon={icon}
-      className={className}
-    />
-  );
+export const StatusIcon: React.FC<StatusIconProps> = ({ status }) => {
+  const theme = useTheme();
+
+  switch (status) {
+    case CallStates.DONE: {
+      return <CheckIcon color={theme.color.positive} data-testid="icon-done" />;
+    }
+    case CallStates.ERROR: {
+      return <StopAltIcon color={theme.color.negative} data-testid="icon-error" />;
+    }
+    case CallStates.ACTIVE: {
+      return <PlayIcon color={theme.color.secondary} data-testid="icon-active" />;
+    }
+    case CallStates.WAITING: {
+      return (
+        <WarningContainer data-testid="icon-waiting">
+          <CircleIcon color={transparentize(0.5, '#CCCCCC')} size={6} />
+        </WarningContainer>
+      );
+    }
+    default: {
+      return null;
+    }
+  }
 };

code/addons/jest/package.json

@@ -62,6 +62,7 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/core-events": "workspace:*",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",

code/addons/jest/src/components/Result.tsx

@@ -1,8 +1,8 @@
 import React, { Fragment, useState } from 'react';
 import { styled, themes, convert } from '@storybook/theming';
-import { Icons } from '@storybook/components';
 // eslint-disable-next-line import/no-named-as-default
 import Message from './Message';
+import { ChevronSmallDownIcon } from '@storybook/icons';
 
 const Wrapper = styled.div<{ status: string }>(({ theme, status }) => ({
   display: 'flex',
@@ -30,10 +30,7 @@ const HeaderBar = styled.div<{ status: string }>(({ theme, status }) => ({
   },
 }));
 
-const Icon = styled(Icons)(({ theme }) => ({
-  height: 10,
-  width: 10,
-  minWidth: 10,
+const Icon = styled(ChevronSmallDownIcon)(({ theme }) => ({
   color: theme.textMutedColor,
   marginRight: 10,
   transition: 'transform 0.1s ease-in-out',
@@ -66,7 +63,6 @@ export function Result(props: ResultProps) {
         <HeaderBar onClick={onToggle} role="button" status={status}>
           {status === `failed` ? (
             <Icon
-              icon="arrowdown"
               color={convert(themes.light).textMutedColor}
               style={{
                 transform: `rotate(${isOpen ? 0 : -90}deg)`,

code/addons/measure/package.json

@@ -71,7 +71,7 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/types": "workspace:*",

code/addons/outline/package.json

@@ -61,7 +61,7 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/types": "workspace:*",

code/addons/themes/package.json

@@ -59,7 +59,7 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",

code/addons/toolbars/src/components/ToolbarMenuButton.tsx

@@ -10,6 +10,10 @@ interface ToolbarMenuButtonProps {
   onClick?: () => void;
 }
 
+// We can't remove the Icons component just yet because there's no way for now to import icons
+// in the preview directly. Before having a better solution, we are going to keep the Icons component
+// for now and remove the deprecated warning.
+
 export const ToolbarMenuButton: FC<ToolbarMenuButtonProps> = ({
   active,
   title,
@@ -19,7 +23,7 @@ export const ToolbarMenuButton: FC<ToolbarMenuButtonProps> = ({
 }) => {
   return (
     <IconButton active={active} title={description} onClick={onClick}>
-      {icon && <Icons icon={icon} />}
+      {icon && <Icons icon={icon} __suppressDeprecationWarning={true} />}
       {title ? `\xa0${title}` : null}
     </IconButton>
   );

code/addons/viewport/package.json

@@ -55,7 +55,7 @@
     "@storybook/components": "workspace:*",
     "@storybook/core-events": "workspace:*",
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",

code/ui/.storybook/preview.tsx

@@ -11,7 +11,6 @@ import {
   useTheme,
 } from '@storybook/theming';
 import { useArgs, DocsContext as DocsContextProps } from '@storybook/preview-api';
-import { Symbols } from '@storybook/components';
 import type { PreviewWeb } from '@storybook/preview-api';
 import type { ReactRenderer } from '@storybook/react';
 import type { Channel } from '@storybook/channels';

code/ui/blocks/package.json

@@ -51,7 +51,7 @@
     "@storybook/csf": "^0.1.2",
     "@storybook/docs-tools": "workspace:*",
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",

code/ui/blocks/src/components/ArgsTable/ArgValue.tsx

@@ -3,8 +3,9 @@ import React, { useState } from 'react';
 import memoize from 'memoizerific';
 import uniq from 'lodash/uniq.js';
 import { styled } from '@storybook/theming';
-import { WithTooltipPure, Icons, SyntaxHighlighter, codeCommon } from '@storybook/components';
+import { WithTooltipPure, SyntaxHighlighter, codeCommon } from '@storybook/components';
 import type { PropSummaryValue } from './types';
+import { ChevronSmallDownIcon, ChevronSmallUpIcon } from '@storybook/icons';
 
 interface ArgValueProps {
   value?: PropSummaryValue;
@@ -86,10 +87,11 @@ const Detail = styled.div<{ width: string }>(({ theme, width }) => ({
   },
 }));
 
-const ArrowIcon = styled(Icons)({
-  height: 10,
-  width: 10,
-  minWidth: 10,
+const ChevronUpIcon = styled(ChevronSmallUpIcon)({
+  marginLeft: 4,
+});
+
+const ChevronDownIcon = styled(ChevronSmallDownIcon)({
   marginLeft: 4,
 });
 
@@ -176,7 +178,7 @@ const ArgSummary: FC<ArgSummaryProps> = ({ value, initialExpandedArgs }) => {
     >
       <Expandable className="sbdocs-expandable">
         <span>{summaryAsString}</span>
-        <ArrowIcon icon={isOpen ? 'arrowup' : 'arrowdown'} />
+        {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
       </Expandable>
     </WithTooltipPure>
   );

code/ui/blocks/src/components/ArgsTable/SectionRow.tsx

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import React, { useState } from 'react';
 import { transparentize, lighten } from 'polished';
 import { styled } from '@storybook/theming';
-import { Icons } from '@storybook/components';
+import { ChevronDownIcon, ChevronRightIcon } from '@storybook/icons';
 
 type Level = 'section' | 'subsection';
 
@@ -14,7 +14,21 @@ export interface SectionRowProps {
   colSpan: number;
 }
 
-const ExpanderIcon = styled(Icons)(({ theme }) => ({
+const ExpanderIconDown = styled(ChevronDownIcon)(({ theme }) => ({
+  marginRight: 8,
+  marginLeft: -10,
+  marginTop: -2, // optical alignment
+  height: 12,
+  width: 12,
+  color:
+    theme.base === 'light'
+      ? transparentize(0.25, theme.color.defaultText)
+      : transparentize(0.3, theme.color.defaultText),
+  border: 'none',
+  display: 'inline-block',
+}));
+
+const ExpanderIconRight = styled(ChevronRightIcon)(({ theme }) => ({
   marginRight: 8,
   marginLeft: -10,
   marginTop: -2, // optical alignment
@@ -100,7 +114,6 @@ export const SectionRow: FC<SectionRowProps> = ({
   // @ts-expect-error (Converted from ts-ignore)
   const itemCount = children?.length || 0;
   const caption = level === 'subsection' ? `${itemCount} item${itemCount !== 1 ? 's' : ''}` : '';
-  const icon = expanded ? 'arrowdown' : 'arrowright';
 
   const helperText = `${expanded ? 'Hide' : 'Show'} ${
     level === 'subsection' ? itemCount : label
@@ -114,7 +127,7 @@ export const SectionRow: FC<SectionRowProps> = ({
             {helperText}
           </ClickIntercept>
           <FlexWrapper>
-            <ExpanderIcon icon={icon} />
+            {expanded ? <ExpanderIconDown /> : <ExpanderIconRight />}
             {label}
           </FlexWrapper>
         </Level>

code/ui/blocks/src/components/IconGallery.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Icons as ExampleIcon } from '@storybook/components';
 import { IconItem, IconGallery } from './IconGallery';
+import { AddIcon, FaceHappyIcon, HomeIcon, SubtractIcon } from '@storybook/icons';
 
 export default {
   component: IconGallery,
@@ -9,16 +9,16 @@ export default {
 export const DefaultStyle = () => (
   <IconGallery>
     <IconItem name="add">
-      <ExampleIcon icon="add" />
+      <AddIcon />
     </IconItem>
     <IconItem name="subtract">
-      <ExampleIcon icon="subtract" />
+      <SubtractIcon />
     </IconItem>
     <IconItem name="home">
-      <ExampleIcon icon="home" />
+      <HomeIcon />
     </IconItem>
     <IconItem name="facehappy">
-      <ExampleIcon icon="facehappy" />
+      <FaceHappyIcon />
     </IconItem>
     <IconItem name="bar">
       <img src="https://storybook.js.org/images/placeholders/50x50.png" alt="example" />