Merge pull request #23680 from storybookjs/charles-icons-updates

UI: Upgrade Icon component
storybookjs · Aug 7, 2023 · 3627472 · 3627472
2 parents 998926f + 9ea85fd
commit 3627472
Show file tree

Hide file tree

Showing 42 changed files with 226 additions and 547 deletions.
diff --git a/code/addons/a11y/src/components/VisionSimulator.tsx b/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>

diff --git a/code/addons/backgrounds/src/containers/BackgroundSelector.tsx b/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>

diff --git a/code/addons/backgrounds/src/containers/GridSelector.tsx b/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>
   );
 });
diff --git a/code/addons/interactions/src/components/Interaction.tsx b/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>
           )}

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

diff --git a/code/addons/measure/src/Tool.tsx b/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>
   );
 };
diff --git a/code/addons/outline/src/OutlineSelector.tsx b/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>
   );
 });
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 { 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>

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 { 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', '')}

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

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

diff --git a/code/ui/blocks/src/components/Toolbar.tsx b/code/ui/blocks/src/components/Toolbar.tsx
@@ -1,7 +1,8 @@
 import type { FC, MouseEvent } from 'react';
 import React, { Fragment } from 'react';
 import { styled } from '@storybook/theming';
-import { FlexBar, Icons, IconButton, IconButtonSkeleton } from '@storybook/components';
+import { FlexBar, IconButton, IconButtonSkeleton } from '@storybook/components';
+import { Icon } from '@storybook/components/experimental';
 
 interface ZoomProps {
   zoom: (val: number) => void;
@@ -33,7 +34,7 @@ const Zoom: FC<ZoomProps> = ({ zoom, resetZoom }) => (
       }}
       title="Zoom in"
     >
-      <Icons icon="zoom" />
+      <Icon.Zoom />
     </IconButton>
     <IconButton
       key="zoomout"
@@ -43,7 +44,7 @@ const Zoom: FC<ZoomProps> = ({ zoom, resetZoom }) => (
       }}
       title="Zoom out"
     >
-      <Icons icon="zoomout" />
+      <Icon.ZoomOut />
     </IconButton>
     <IconButton
       key="zoomreset"
@@ -53,7 +54,7 @@ const Zoom: FC<ZoomProps> = ({ zoom, resetZoom }) => (
       }}
       title="Reset zoom"
     >
-      <Icons icon="zoomreset" />
+      <Icon.ZoomReset />
     </IconButton>
   </>
 );

diff --git a/code/ui/blocks/src/controls/Object.tsx b/code/ui/blocks/src/controls/Object.tsx
@@ -4,6 +4,7 @@ import type { ComponentProps, SyntheticEvent, FC, FocusEvent } from 'react';
 import React, { useCallback, useMemo, useState, useEffect, useRef } from 'react';
 import { styled, useTheme, type Theme } from '@storybook/theming';
 import { Form, Icons, type IconsProps, IconButton } from '@storybook/components';
+import { Icon } from '@storybook/components/experimental';
 import { JsonTree, getObjectType } from './react-editable-json-tree';
 import { getControlId, getControlSetterButtonId } from './helpers';
 import type { ControlProps, ObjectValue, ObjectConfig } from './types';
@@ -294,7 +295,7 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
             setShowRaw((v) => !v);
           }}
         >
-          <Icons icon={showRaw ? 'eyeclose' : 'eye'} />
+          {showRaw ? <Icon.EyeClose /> : <Icon.Eye />}
           <span>RAW</span>
         </RawButton>
       )}

diff --git a/code/ui/blocks/src/controls/options/Select.tsx b/code/ui/blocks/src/controls/options/Select.tsx
@@ -3,8 +3,7 @@ import React from 'react';
 import { styled } from '@storybook/theming';
 import type { CSSObject } from '@storybook/theming';
 import { logger } from '@storybook/client-logger';
-import { Icons } from '@storybook/components';
-
+import { Icon } from '@storybook/components/experimental';
 import type { ControlProps, OptionsSelection, NormalizedOptionsConfig } from '../types';
 
 import { selectedKey, selectedKeys, selectedValues } from './helpers';
@@ -73,21 +72,17 @@ const SelectWrapper = styled.span(({ theme }) => ({
   position: 'relative',
   verticalAlign: 'top',
   width: '100%',
+}));
 
-  svg: {
-    position: 'absolute',
-    zIndex: 1,
-    pointerEvents: 'none',
-    height: '12px',
-    marginTop: '-6px',
-    right: '12px',
-    top: '50%',
-    fill: theme.textMutedColor,
-
-    path: {
-      fill: theme.textMutedColor,
-    },
-  },
+const SelectChevronDown = styled.div(({ theme }) => ({
+  position: 'absolute',
+  zIndex: 1,
+  pointerEvents: 'none',
+  height: '12px',
+  marginTop: '-6px',
+  right: '12px',
+  top: '50%',
+  color: theme.textMutedColor,
 }));
 
 type SelectConfig = NormalizedOptionsConfig & { isMulti: boolean };
@@ -104,7 +99,9 @@ const SingleSelect: FC<SelectProps> = ({ name, value, options, onChange }) => {
 
   return (
     <SelectWrapper>
-      <Icons icon="arrowdown" />
+      <SelectChevronDown>
+        <Icon.ChevronDown />
+      </SelectChevronDown>
       <OptionsSelect id={controlId} value={selection} onChange={handleChange}>
         <option key="no-selection" disabled>
           {NO_SELECTION}

diff --git a/code/ui/components/package.json b/code/ui/components/package.json
@@ -71,7 +71,7 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/csf": "^0.1.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.1.0",
+    "@storybook/icons": "^1.1.5",
     "@storybook/theming": "workspace:*",
     "@storybook/types": "workspace:*",
     "memoizerific": "^1.11.3",