Remove other icons from addons

storybookjs · Jan 31, 2024 · 963140a · 963140a
1 parent f85c41b
commit 963140a
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 94 deletions.
diff --git a/code/ui/blocks/src/controls/Color.tsx b/code/ui/blocks/src/controls/Color.tsx
@@ -4,10 +4,11 @@ import { HexColorPicker, HslaStringColorPicker, RgbaStringColorPicker } from 're
 import convert from 'color-convert';
 import throttle from 'lodash/throttle.js';
 import { styled } from '@storybook/theming';
-import { TooltipNote, WithTooltip, Form, Icons } from '@storybook/components';
+import { TooltipNote, WithTooltip, Form } from '@storybook/components';
 
 import type { ControlProps, ColorValue, ColorConfig, PresetColor } from './types';
 import { getControlId } from './helpers';
+import { MarkdownIcon } from '@storybook/icons';
 
 const Wrapper = styled.div({
   position: 'relative',
@@ -74,7 +75,7 @@ const Input = styled(Form.Input)(({ theme }) => ({
   fontFamily: theme.typography.fonts.base,
 }));
 
-const ToggleIcon = styled(Icons)(({ theme }) => ({
+const ToggleIcon = styled(MarkdownIcon)(({ theme }) => ({
   position: 'absolute',
   zIndex: 1,
   top: 6,
@@ -358,7 +359,7 @@ export const ColorControl: FC<ColorControlProps> = ({
         onFocus={(e: FocusEvent<HTMLInputElement>) => e.target.select()}
         placeholder="Choose color..."
       />
-      {value ? <ToggleIcon icon="markup" onClick={cycleColorSpace} /> : null}
+      {value ? <ToggleIcon onClick={cycleColorSpace} /> : null}
     </Wrapper>
   );
 };

diff --git a/code/ui/blocks/src/controls/Object.tsx b/code/ui/blocks/src/controls/Object.tsx
@@ -3,8 +3,8 @@ import cloneDeep from 'lodash/cloneDeep.js';
 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, IconButton, Button } from '@storybook/components';
-import { EyeCloseIcon, EyeIcon } from '@storybook/icons';
+import { Form, IconButton, Button } from '@storybook/components';
+import { AddIcon, EyeCloseIcon, EyeIcon, SubtractIcon } from '@storybook/icons';
 import { JsonTree, getObjectType } from './react-editable-json-tree';
 import { getControlId, getControlSetterButtonId } from './helpers';
 import type { ControlProps, ObjectValue, ObjectConfig } from './types';
@@ -133,7 +133,7 @@ const ButtonInline = styled.button<{ primary?: boolean }>(({ theme, primary }) =
   order: primary ? 'initial' : 9,
 }));
 
-const ActionIcon = styled(Icons)<{ disabled?: boolean }>(({ theme, icon, disabled }) => ({
+const ActionAddIcon = styled(AddIcon)<{ disabled?: boolean }>(({ theme, disabled }) => ({
   display: 'inline-block',
   verticalAlign: 'middle',
   width: 15,
@@ -142,11 +142,22 @@ const ActionIcon = styled(Icons)<{ disabled?: boolean }>(({ theme, icon, disable
   marginLeft: 5,
   cursor: disabled ? 'not-allowed' : 'pointer',
   color: theme.textMutedColor,
-  '&:hover': disabled
-    ? {}
-    : {
-        color: icon === 'subtract' ? theme.color.negative : theme.color.ancillary,
-      },
+  '&:hover': disabled ? {} : { color: theme.color.ancillary },
+  'svg + &': {
+    marginLeft: 0,
+  },
+}));
+
+const ActionSubstractIcon = styled(SubtractIcon)<{ disabled?: boolean }>(({ theme, disabled }) => ({
+  display: 'inline-block',
+  verticalAlign: 'middle',
+  width: 15,
+  height: 15,
+  padding: 3,
+  marginLeft: 5,
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  color: theme.textMutedColor,
+  '&:hover': disabled ? {} : { color: theme.color.negative },
   'svg + &': {
     marginLeft: 0,
   },
@@ -309,8 +320,8 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
               Save
             </ButtonInline>
           }
-          plusMenuElement={<ActionIcon icon="add" />}
-          minusMenuElement={<ActionIcon icon="subtract" />}
+          plusMenuElement={<ActionAddIcon />}
+          minusMenuElement={<ActionSubstractIcon />}
           inputElement={(_: any, __: any, ___: any, key: string) =>
             key ? <Input onFocus={selectValue} onBlur={dispatchEnterKey} /> : <Input />
           }

diff --git a/code/ui/blocks/src/controls/options/Select.tsx b/code/ui/blocks/src/controls/options/Select.tsx
@@ -3,12 +3,12 @@ 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 type { ControlProps, OptionsSelection, NormalizedOptionsConfig } from '../types';
 
 import { selectedKey, selectedKeys, selectedValues } from './helpers';
 import { getControlId } from '../helpers';
+import { ChevronSmallDownIcon } from '@storybook/icons';
 
 const styleResets: CSSObject = {
   // resets
@@ -102,7 +102,7 @@ const SingleSelect: FC<SelectProps> = ({ name, value, options, onChange }) => {
 
   return (
     <SelectWrapper>
-      <Icons icon="arrowdown" />
+      <ChevronSmallDownIcon />
       <OptionsSelect id={controlId} value={selection} onChange={handleChange}>
         <option key="no-selection" disabled>
           {NO_SELECTION}

diff --git a/code/ui/components/src/components/Loader/Loader.tsx b/code/ui/components/src/components/Loader/Loader.tsx
@@ -1,8 +1,8 @@
 import { transparentize } from 'polished';
 import React from 'react';
 import { styled, keyframes } from '@storybook/theming';
-import { Icons } from '../icon/icon';
 import { rotate360 } from '../shared/animation';
+import { LightningOffIcon } from '@storybook/icons';
 
 const LoaderWrapper = styled.div<{ size?: number }>(({ size = 32 }) => ({
   borderRadius: '50%',
@@ -63,7 +63,7 @@ const ProgressMessage = styled.div(({ theme }) => ({
   color: theme.barTextColor,
 }));
 
-const ErrorIcon = styled(Icons)(({ theme }) => ({
+const ErrorIcon = styled(LightningOffIcon)(({ theme }) => ({
   width: 20,
   height: 20,
   marginBottom: '0.5rem',
@@ -107,7 +107,7 @@ export const Loader = ({ progress, error, size, ...props }: LoaderProps) => {
   if (error) {
     return (
       <ProgressWrapper aria-label={error.toString()} aria-live="polite" role="status" {...props}>
-        <ErrorIcon icon="lightningoff" />
+        <ErrorIcon />
         <ProgressMessage>{error.message}</ProgressMessage>
       </ProgressWrapper>
     );

diff --git a/code/ui/manager/src/components/sidebar/RefIndicator.tsx b/code/ui/manager/src/components/sidebar/RefIndicator.tsx
@@ -3,12 +3,20 @@ import type { FC, MouseEventHandler } from 'react';
 import React, { useMemo, useCallback, forwardRef } from 'react';
 
 import type { TooltipLinkListLink } from '@storybook/components';
-import { Icons, WithTooltip, Spaced, TooltipLinkList } from '@storybook/components';
-import { styled } from '@storybook/theming';
+import { WithTooltip, Spaced, TooltipLinkList } from '@storybook/components';
+import { styled, useTheme } from '@storybook/theming';
 import { transparentize } from 'polished';
 import { useStorybookApi } from '@storybook/manager-api';
 
-import { ChevronDownIcon, GlobeIcon } from '@storybook/icons';
+import {
+  AlertIcon,
+  ChevronDownIcon,
+  DocumentIcon,
+  GlobeIcon,
+  LightningIcon,
+  LockIcon,
+  TimeIcon,
+} from '@storybook/icons';
 import type { RefType } from './types';
 
 import type { getStateType } from '../../utils/tree';
@@ -115,22 +123,6 @@ export const MessageWrapper = styled.div({
   overflow: 'hidden',
 });
 
-const BlueIcon = styled(Icons)(({ theme }) => ({
-  color: theme.color.secondary,
-}));
-
-const YellowIcon = styled(Icons)(({ theme }) => ({
-  color: theme.color.gold,
-}));
-
-const RedIcon = styled(Icons)(({ theme }) => ({
-  color: theme.color.negative,
-}));
-
-const GreenIcon = styled(Icons)(({ theme }) => ({
-  color: theme.color.green,
-}));
-
 const Version = styled.div(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
@@ -243,19 +235,24 @@ const ReadyMessage: FC<{
   url: string;
   componentCount: number;
   leafCount: number;
-}> = ({ url, componentCount, leafCount }) => (
-  <Message href={url.replace(/\/?$/, '/index.html')} target="_blank">
-    <BlueIcon icon="globe" />
-    <div>
-      <MessageTitle>View external Storybook</MessageTitle>
+}> = ({ url, componentCount, leafCount }) => {
+  const theme = useTheme();
+
+  return (
+    <Message href={url.replace(/\/?$/, '/index.html')} target="_blank">
+      <GlobeIcon color={theme.color.secondary} />
       <div>
-        Explore {componentCount} components and {leafCount} stories in a new browser tab.
+        <MessageTitle>View external Storybook</MessageTitle>
+        <div>
+          Explore {componentCount} components and {leafCount} stories in a new browser tab.
+        </div>
       </div>
-    </div>
-  </Message>
-);
+    </Message>
+  );
+};
 
 const LoginRequiredMessage: FC<RefType> = ({ loginUrl, id }) => {
+  const theme = useTheme();
   const open = useCallback<MouseEventHandler>((e) => {
     e.preventDefault();
     const childWindow = globalWindow.open(loginUrl, `storybook_auth_${id}`, 'resizable,scrollbars');
@@ -273,7 +270,7 @@ const LoginRequiredMessage: FC<RefType> = ({ loginUrl, id }) => {
 
   return (
     <Message onClick={open}>
-      <YellowIcon icon="lock" />
+      <LockIcon color={theme.color.gold} />
       <div>
         <MessageTitle>Log in required</MessageTitle>
         <div>You need to authenticate to view this Storybook's components.</div>
@@ -282,45 +279,64 @@ const LoginRequiredMessage: FC<RefType> = ({ loginUrl, id }) => {
   );
 };
 
-const ReadDocsMessage: FC = () => (
-  <Message href="https://storybook.js.org/docs/react/sharing/storybook-composition" target="_blank">
-    <GreenIcon icon="document" />
-    <div>
-      <MessageTitle>Read Composition docs</MessageTitle>
-      <div>Learn how to combine multiple Storybooks into one.</div>
-    </div>
-  </Message>
-);
+const ReadDocsMessage: FC = () => {
+  const theme = useTheme();
 
-const ErrorOccurredMessage: FC<{ url: string }> = ({ url }) => (
-  <Message href={url.replace(/\/?$/, '/index.html')} target="_blank">
-    <RedIcon icon="alert" />
-    <div>
-      <MessageTitle>Something went wrong</MessageTitle>
-      <div>This external Storybook didn't load. Debug it in a new tab now.</div>
-    </div>
-  </Message>
-);
+  return (
+    <Message
+      href="https://storybook.js.org/docs/react/sharing/storybook-composition"
+      target="_blank"
+    >
+      <DocumentIcon color={theme.color.green} />
+      <div>
+        <MessageTitle>Read Composition docs</MessageTitle>
+        <div>Learn how to combine multiple Storybooks into one.</div>
+      </div>
+    </Message>
+  );
+};
 
-const LoadingMessage: FC<{ url: string }> = ({ url }) => (
-  <Message href={url.replace(/\/?$/, '/index.html')} target="_blank">
-    <BlueIcon icon="time" />
-    <div>
-      <MessageTitle>Please wait</MessageTitle>
-      <div>This Storybook is loading.</div>
-    </div>
-  </Message>
-);
+const ErrorOccurredMessage: FC<{ url: string }> = ({ url }) => {
+  const theme = useTheme();
 
-const PerformanceDegradedMessage: FC = () => (
-  <Message
-    href="https://storybook.js.org/docs/react/sharing/storybook-composition#improve-your-storybook-composition"
-    target="_blank"
-  >
-    <YellowIcon icon="lightning" />
-    <div>
-      <MessageTitle>Reduce lag</MessageTitle>
-      <div>Learn how to speed up Composition performance.</div>
-    </div>
-  </Message>
-);
+  return (
+    <Message href={url.replace(/\/?$/, '/index.html')} target="_blank">
+      <AlertIcon color={theme.color.negative} />
+      <div>
+        <MessageTitle>Something went wrong</MessageTitle>
+        <div>This external Storybook didn't load. Debug it in a new tab now.</div>
+      </div>
+    </Message>
+  );
+};
+
+const LoadingMessage: FC<{ url: string }> = ({ url }) => {
+  const theme = useTheme();
+
+  return (
+    <Message href={url.replace(/\/?$/, '/index.html')} target="_blank">
+      <TimeIcon color={theme.color.secondary} />
+      <div>
+        <MessageTitle>Please wait</MessageTitle>
+        <div>This Storybook is loading.</div>
+      </div>
+    </Message>
+  );
+};
+
+const PerformanceDegradedMessage: FC = () => {
+  const theme = useTheme();
+
+  return (
+    <Message
+      href="https://storybook.js.org/docs/react/sharing/storybook-composition#improve-your-storybook-composition"
+      target="_blank"
+    >
+      <LightningIcon color={theme.color.gold} />
+      <div>
+        <MessageTitle>Reduce lag</MessageTitle>
+        <div>Learn how to speed up Composition performance.</div>
+      </div>
+    </Message>
+  );
+};
diff --git a/code/ui/manager/src/utils/status.tsx b/code/ui/manager/src/utils/status.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { Icons } from '@storybook/components';
 import type { ReactElement } from 'react';
 import type { API_HashEntry, API_StatusState, API_StatusValue } from '@storybook/types';
 
 import { styled } from '@storybook/theming';
 
 import { getDescendantIds } from './tree';
+import { CircleIcon } from '@storybook/icons';
 
-const SmallIcons = styled(Icons)({
+const SmallIcons = styled(CircleIcon)({
   // specificity hack
   '&&&': {
     width: 6,
@@ -24,10 +24,10 @@ const LoadingIcons = styled(SmallIcons)(({ theme: { animation, color, base } })
 export const statusPriority: API_StatusValue[] = ['unknown', 'pending', 'success', 'warn', 'error'];
 export const statusMapping: Record<API_StatusValue, [ReactElement | null, string | null]> = {
   unknown: [null, null],
-  pending: [<LoadingIcons key="icon" icon="circle" />, 'currentColor'],
-  success: [<SmallIcons key="icon" icon="circle" style={{ color: 'green' }} />, 'currentColor'],
-  warn: [<SmallIcons key="icon" icon="circle" style={{ color: 'orange' }} />, '#A15C20'],
-  error: [<SmallIcons key="icon" icon="circle" style={{ color: 'red' }} />, 'brown'],
+  pending: [<LoadingIcons key="icon" />, 'currentColor'],
+  success: [<SmallIcons key="icon" style={{ color: 'green' }} />, 'currentColor'],
+  warn: [<SmallIcons key="icon" style={{ color: 'orange' }} />, '#A15C20'],
+  error: [<SmallIcons key="icon" style={{ color: 'red' }} />, 'brown'],
 };
 
 export const getHighestStatus = (statuses: API_StatusValue[]): API_StatusValue => {

diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md
@@ -98,10 +98,11 @@ Going through the code blocks in sequence:
 
 import { useGlobals, useStorybookApi } from '@storybook/manager-api';
 
-import { Icons, IconButton } from '@storybook/components';
+import { IconButton } from '@storybook/components';
+import { LightningIcon } from '@storybook/icons';
 ```
 
-The [`useGlobals`](./addons-api.md#useglobals) and [`useStorybookApi`](./addons-api.md#usestorybookapi) hooks from the `manager-api` package are used to access the Storybook's APIs, allowing users to interact with the addon, such as enabling or disabling it. The `Icons` and `IconButtons` components from the [`@storybook/components`](https://www.npmjs.com/package/@storybook/components) package render the icons and buttons in the toolbar.
+The [`useGlobals`](./addons-api.md#useglobals) and [`useStorybookApi`](./addons-api.md#usestorybookapi) hooks from the `manager-api` package are used to access the Storybook's APIs, allowing users to interact with the addon, such as enabling or disabling it. The `IconButton` component from the [`@storybook/components`](https://www.npmjs.com/package/@storybook/components) package render the buttons in the toolbar. Any icon from the [`@storybook/icons`](https://storybook.js.org/docs/react/api/icons) package can be used.
 
 ```ts
 // src/Tool.tsx