UI: New icon library

MIGRATION.md

@@ -4,6 +4,7 @@
   - [Core changes](#core-changes)
     - [UI layout state has changed shape](#ui-layout-state-has-changed-shape)
     - [New UI and props for Button and IconButton components](#new-ui-and-props-for-button-and-iconbutton-components)
+    - [Icons is deprecated](#icons-is-deprecated)
 - [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
   - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
   - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
@@ -339,6 +340,10 @@ For the `Button` component, the following props are now deprecated:
 
 The `IconButton` doesn't have any deprecated props but it now uses the new `Button` component under the hood so all props for `IconButton` will be the same as `Button`.
 
+#### Icons is deprecated
+
+In Storybook 8.0 we are introducing a new icon library available with `@storybook/icons`. We are deprecating the `Icons` component in `@storybook/components` and recommend that addon creators and Storybook maintainers use the new `@storybook/icons` component instead.
+
 ## From version 7.4.0 to 7.5.0
 
 #### `storyStoreV6` and `storiesOf` is deprecated

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

@@ -9,7 +9,6 @@ export type ToolbarMenuListItemProps = {
 } & ToolbarItem;
 
 export const ToolbarMenuListItem = ({
-  left,
   right,
   title,
   value,
@@ -25,12 +24,12 @@ export const ToolbarMenuListItem = ({
     active: currentValue === value,
     right,
     title,
-    left,
+    icon,
     onClick,
   };
 
   if (icon && !hideIcon) {
-    Item.left = Icon;
+    Item.icon = Icon;
   }
 
   return Item;

code/ui/.storybook/preview.tsx

@@ -157,16 +157,6 @@ export const decorators = [
     ) : (
       <Story />
     ),
-  /**
-   * This decorator adds Symbols that the sidebar icons references.
-   * Any sidebar story that uses the icons must set the parameter withSymbols: true .
-   */
-  (Story, { parameters: { withSymbols } }) => (
-    <>
-      {withSymbols && <Symbols icons={['folder', 'component', 'document', 'bookmarkhollow']} />}
-      <Story />
-    </>
-  ),
   /**
    * This decorator renders the stories side-by-side, stacked or default based on the theme switcher in the toolbar
    */

code/ui/blocks/package.json

@@ -51,6 +51,7 @@
     "@storybook/csf": "^0.1.0",
     "@storybook/docs-tools": "workspace:*",
     "@storybook/global": "^5.0.0",
+    "@storybook/icons": "^1.2.0",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",

code/ui/blocks/src/controls/Object.tsx

@@ -3,7 +3,7 @@ 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, type IconsProps, IconButton, Button } from '@storybook/components';
+import { Form, Icons, IconButton, Button } from '@storybook/components';
 import { JsonTree, getObjectType } from './react-editable-json-tree';
 import { getControlId, getControlSetterButtonId } from './helpers';
 import type { ControlProps, ObjectValue, ObjectConfig } from './types';
@@ -132,9 +132,7 @@ const ButtonInline = styled.button<{ primary?: boolean }>(({ theme, primary }) =
   order: primary ? 'initial' : 9,
 }));
 
-type ActionIconProps = IconsProps & { disabled?: boolean };
-
-const ActionIcon = styled(Icons)(({ theme, icon, disabled }: ActionIconProps) => ({
+const ActionIcon = styled(Icons)<{ disabled?: boolean }>(({ theme, icon, disabled }) => ({
   display: 'inline-block',
   verticalAlign: 'middle',
   width: 15,

code/ui/components/package.json

@@ -73,7 +73,7 @@
     "@chromaui/addon-visual-tests": "^0.0.77",
     "@popperjs/core": "^2.6.0",
     "@radix-ui/react-scroll-area": "^1.0.5",
-    "@storybook/icons": "^1.1.6",
+    "@storybook/icons": "^1.2.0",
     "@types/react-syntax-highlighter": "11.0.5",
     "@types/util-deprecate": "^1.0.0",
     "css": "^3.0.0",

code/ui/components/src/components/icon/icon.stories.tsx

@@ -2,9 +2,8 @@ import type { ComponentProps } from 'react';
 import React from 'react';
 import { styled, css } from '@storybook/theming';
 
-import { Icons } from './icon';
-import type { IconKey } from './icons';
-import { icons } from './icons';
+import type { IconType } from './icon';
+import { Icons, icons } from './icon';
 
 const Meta = styled.div`
   color: #666;
@@ -71,7 +70,7 @@ export const Labels = (args: ComponentProps<typeof Icons>) => (
     <List>
       {Object.keys(icons).map((key) => (
         <Item key={key}>
-          <Icons icon={key as IconKey} aria-hidden {...args} />
+          <Icons icon={key as IconType} aria-hidden {...args} />
           <Meta>{key}</Meta>
         </Item>
       ))}
@@ -85,7 +84,7 @@ export const NoLabels = (args: ComponentProps<typeof Icons>) => (
     <List>
       {Object.keys(icons).map((key) => (
         <Item minimal key={key}>
-          <Icons icon={key as IconKey} aria-label={key} {...args} />
+          <Icons icon={key as IconType} aria-label={key} {...args} />
         </Item>
       ))}
     </List>