diff --git a/MIGRATION.md b/MIGRATION.md index fea774ce9279..c7e65ffbf422 100644 --- a/MIGRATION.md +++ b/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 diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index ed1e9a8d7d4b..de86b8656444 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -70,6 +70,7 @@ "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", + "@storybook/icons": "^1.2.1", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/addons/a11y/src/components/A11YPanel.tsx b/code/addons/a11y/src/components/A11YPanel.tsx index 7855cd9396ac..9552b7951e9d 100644 --- a/code/addons/a11y/src/components/A11YPanel.tsx +++ b/code/addons/a11y/src/components/A11YPanel.tsx @@ -2,7 +2,8 @@ import React, { useCallback, useMemo, useState } from 'react'; import { styled } from '@storybook/theming'; -import { ActionBar, Icons, ScrollArea } from '@storybook/components'; +import { ActionBar, ScrollArea } from '@storybook/components'; +import { SyncIcon, CheckIcon } from '@storybook/icons'; import type { AxeResults } from 'axe-core'; import { useChannel, useParameter, useStorybookState } from '@storybook/manager-api'; @@ -21,9 +22,7 @@ export enum RuleType { INCOMPLETION, } -const Icon = styled(Icons)({ - height: 12, - width: 12, +const Icon = styled(SyncIcon)({ marginRight: 4, }); @@ -108,7 +107,7 @@ export const A11YPanel: React.FC = () => { 'Rerun tests' ) : ( <> - Tests completed + Tests completed ), onClick: handleManual, @@ -164,7 +163,7 @@ export const A11YPanel: React.FC = () => { )} {status === 'running' && ( - Please wait while the accessibility scan is running ... + Please wait while the accessibility scan is running ... )} {(status === 'ready' || status === 'ran') && ( diff --git a/code/addons/a11y/src/components/VisionSimulator.tsx b/code/addons/a11y/src/components/VisionSimulator.tsx index b66f8eef297d..f604bef57161 100644 --- a/code/addons/a11y/src/components/VisionSimulator.tsx +++ b/code/addons/a11y/src/components/VisionSimulator.tsx @@ -1,8 +1,9 @@ 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 { AccessibilityIcon } from '@storybook/icons'; import { Filters } from './ColorFilters'; const iframeId = 'storybook-preview-iframe'; @@ -144,7 +145,7 @@ export const VisionSimulator = () => { onDoubleClick={() => setFilter(null)} > - + diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 2aaa89b5a509..939f49d7aff8 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -81,6 +81,7 @@ "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", + "@storybook/icons": "^1.2.1", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/addons/backgrounds/src/containers/BackgroundSelector.tsx b/code/addons/backgrounds/src/containers/BackgroundSelector.tsx index d941f178b788..87bf6e84f133 100644 --- a/code/addons/backgrounds/src/containers/BackgroundSelector.tsx +++ b/code/addons/backgrounds/src/containers/BackgroundSelector.tsx @@ -4,8 +4,9 @@ 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 { PhotoIcon } from '@storybook/icons'; import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants'; import { ColorIcon } from '../components/ColorIcon'; import type { @@ -140,7 +141,7 @@ export const BackgroundSelector: FC = memo(function BackgroundSelector() { title="Change the background of the preview" active={selectedBackgroundColor !== 'transparent' || isTooltipVisible} > - + diff --git a/code/addons/backgrounds/src/containers/GridSelector.tsx b/code/addons/backgrounds/src/containers/GridSelector.tsx index 80d6477884b4..64ac3cf9c4aa 100644 --- a/code/addons/backgrounds/src/containers/GridSelector.tsx +++ b/code/addons/backgrounds/src/containers/GridSelector.tsx @@ -2,8 +2,9 @@ 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 { GridIcon } from '@storybook/icons'; import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants'; export const GridSelector: FC = memo(function GridSelector() { @@ -30,7 +31,7 @@ export const GridSelector: FC = memo(function GridSelector() { }) } > - + ); }); diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 16ce160f5bb1..caf64a546e33 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -78,6 +78,7 @@ "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", + "@storybook/icons": "^1.2.1", "@storybook/instrumenter": "workspace:*", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", diff --git a/code/addons/interactions/src/components/Interaction.tsx b/code/addons/interactions/src/components/Interaction.tsx index bacaea0fe358..55cb20d8d912 100644 --- a/code/addons/interactions/src/components/Interaction.tsx +++ b/code/addons/interactions/src/components/Interaction.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; -import { IconButton, Icons, TooltipNote, WithTooltip } from '@storybook/components'; +import { IconButton, TooltipNote, WithTooltip } from '@storybook/components'; import { type Call, CallStates, type ControlStates } from '@storybook/instrumenter'; import { styled, typography } from '@storybook/theming'; import { transparentize } from 'polished'; +import { ListUnorderedIcon } from '@storybook/icons'; import { MatcherResult } from './MatcherResult'; import { MethodCall } from './MethodCall'; import { StatusIcon } from './StatusIcon'; @@ -174,7 +175,7 @@ export const Interaction = ({ tooltip={} > - + )} diff --git a/code/addons/interactions/src/components/Subnav.tsx b/code/addons/interactions/src/components/Subnav.tsx index 3d2e5c41d1a3..4a9dda73a28a 100644 --- a/code/addons/interactions/src/components/Subnav.tsx +++ b/code/addons/interactions/src/components/Subnav.tsx @@ -3,7 +3,6 @@ import React from 'react'; import { Button, IconButton, - Icons, Separator, P, TooltipNote, @@ -14,6 +13,13 @@ import type { Call, ControlStates } from '@storybook/instrumenter'; import { CallStates } from '@storybook/instrumenter'; import { styled } from '@storybook/theming'; +import { + FastForwardIcon, + PlayBackIcon, + PlayNextIcon, + RewindIcon, + SyncIcon, +} from '@storybook/icons'; import { StatusBadge } from './StatusBadge'; import type { Controls } from './InteractionsPanel'; @@ -135,7 +141,7 @@ export const Subnav: React.FC = ({ onClick={controls.start} disabled={!controlStates.start} > - + @@ -146,7 +152,7 @@ export const Subnav: React.FC = ({ onClick={controls.back} disabled={!controlStates.back} > - + @@ -157,7 +163,7 @@ export const Subnav: React.FC = ({ onClick={controls.next} disabled={!controlStates.next} > - + @@ -168,13 +174,13 @@ export const Subnav: React.FC = ({ onClick={controls.end} disabled={!controlStates.end} > - + }> - + diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 2824c5567c8b..40adb5b1401d 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -80,6 +80,7 @@ "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", + "@storybook/icons": "^1.2.1", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/addons/measure/src/Tool.tsx b/code/addons/measure/src/Tool.tsx index 2e68078aa06b..16af4de9af96 100644 --- 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 { RulerIcon } from '@storybook/icons'; import { TOOL_ID, ADDON_ID } from './constants'; export const Tool = () => { @@ -33,7 +34,7 @@ export const Tool = () => { title="Enable measure" onClick={toggleMeasure} > - + ); }; diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 8200869dddad..a5a589cbcd6c 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -83,6 +83,7 @@ "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", + "@storybook/icons": "^1.2.1", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/addons/outline/src/OutlineSelector.tsx b/code/addons/outline/src/OutlineSelector.tsx index 93bdf321df07..012477bae60c 100644 --- 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 { OutlineIcon } from '@storybook/icons'; 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} > - + ); }); diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 28cd7b60a696..8dab3fa8c8b7 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -77,6 +77,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", + "@storybook/icons": "^1.2.1", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/addons/themes/src/theme-switcher.tsx b/code/addons/themes/src/theme-switcher.tsx index 3658a3ef78cc..4fc7ffa89256 100644 --- a/code/addons/themes/src/theme-switcher.tsx +++ b/code/addons/themes/src/theme-switcher.tsx @@ -1,8 +1,9 @@ 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 { PaintBrushIcon } from '@storybook/icons'; import type { ThemeAddonState, ThemeParameters } from './constants'; import { PARAM_KEY, @@ -74,7 +75,7 @@ export const ThemeSwitcher = () => { }} > - + {label && {label}} diff --git a/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx b/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx index 8c0ddea7ede7..29a2bfb236f6 100644 --- a/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx +++ b/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; diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 98449ef7367c..2efe6ad81adb 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -78,6 +78,7 @@ "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", + "@storybook/icons": "^1.2.1", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/addons/viewport/src/Tool.tsx b/code/addons/viewport/src/Tool.tsx index b1d54b06c8fe..093d16bb57ba 100644 --- a/code/addons/viewport/src/Tool.tsx +++ b/code/addons/viewport/src/Tool.tsx @@ -4,9 +4,10 @@ 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 { useStorybookApi, useParameter, useAddonState } from '@storybook/manager-api'; +import { GrowIcon, TransferIcon } from '@storybook/icons'; import { registerShortcuts } from './shortcuts'; import { PARAM_KEY, ADDON_ID } from './constants'; import { MINIMAL_VIEWPORTS } from './defaults'; @@ -186,7 +187,7 @@ export const ViewportTool: FC = memo( setState({ ...state, selected: responsiveViewport.id }); }} > - + {styles ? ( {isRotated ? `${item.title} (L)` : `${item.title} (P)`} @@ -217,7 +218,7 @@ export const ViewportTool: FC = memo( setState({ ...state, isRotated: !isRotated }); }} > - + {styles.height.replace('px', '')} diff --git a/code/ui/.storybook/preview.tsx b/code/ui/.storybook/preview.tsx index c89c15e85db4..2e3d8afff421 100644 --- a/code/ui/.storybook/preview.tsx +++ b/code/ui/.storybook/preview.tsx @@ -157,16 +157,6 @@ export const decorators = [ ) : ( ), - /** - * 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 && } - - - ), /** * This decorator renders the stories side-by-side, stacked or default based on the theme switcher in the toolbar */ diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 5bf90da845f4..6f1b781e29a2 100644 --- a/code/ui/blocks/package.json +++ b/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.1", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/ui/blocks/src/blocks/mdx.tsx b/code/ui/blocks/src/blocks/mdx.tsx index 3c1c69f87fc2..a5f707ea0f5b 100644 --- a/code/ui/blocks/src/blocks/mdx.tsx +++ b/code/ui/blocks/src/blocks/mdx.tsx @@ -1,9 +1,10 @@ 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 { global } from '@storybook/global'; import { styled } from '@storybook/theming'; +import { LinkIcon } from '@storybook/icons'; import { Source } from '../components'; import type { DocsContextProps } from './DocsContext'; import { DocsContext } from './DocsContext'; @@ -190,7 +191,7 @@ const HeaderWithOcticonAnchor: FC - + {children} diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx index 120cc7a21368..b57c35526759 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx @@ -5,8 +5,9 @@ import { styled } from '@storybook/theming'; import { transparentize } from 'polished'; import { includeConditionalArg } from '@storybook/csf'; import { once } from '@storybook/client-logger'; -import { IconButton, Icons, ResetWrapper, Link } from '@storybook/components'; +import { IconButton, ResetWrapper, Link } from '@storybook/components'; +import { UndoIcon } from '@storybook/icons'; import { ArgRow } from './ArgRow'; import { SectionRow } from './SectionRow'; import type { ArgType, ArgTypes, Args, Globals } from './types'; @@ -379,7 +380,7 @@ export const ArgsTable: FC = (props) => { Control{' '} {!isLoading && resetArgs && ( resetArgs()} title="Reset controls"> - + )} diff --git a/code/ui/blocks/src/components/ArgsTable/Empty.tsx b/code/ui/blocks/src/components/ArgsTable/Empty.tsx index 7fa211bffc0e..796a3dcfba39 100644 --- a/code/ui/blocks/src/components/ArgsTable/Empty.tsx +++ b/code/ui/blocks/src/components/ArgsTable/Empty.tsx @@ -1,7 +1,8 @@ import type { FC } from 'react'; import React, { useEffect, useState } from 'react'; import { styled } from '@storybook/theming'; -import { Icons, Link } from '@storybook/components'; +import { Link } from '@storybook/components'; +import { VideoIcon } from '@storybook/icons'; interface EmptyProps { inAddonPanel?: boolean; @@ -87,7 +88,7 @@ export const Empty: FC = ({ inAddonPanel }) => { {inAddonPanel && ( <> - Watch 5m video + Watch 5m video void; @@ -33,7 +34,7 @@ const Zoom: FC = ({ zoom, resetZoom }) => ( }} title="Zoom in" > - + = ({ zoom, resetZoom }) => ( }} title="Zoom out" > - + = ({ zoom, resetZoom }) => ( }} title="Reset zoom" > - + ); diff --git a/code/ui/blocks/src/controls/Object.tsx b/code/ui/blocks/src/controls/Object.tsx index e5730555e8d0..c6b94fc23951 100644 --- a/code/ui/blocks/src/controls/Object.tsx +++ b/code/ui/blocks/src/controls/Object.tsx @@ -3,7 +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, type IconsProps, IconButton, Button } from '@storybook/components'; +import { Form, Icons, IconButton, Button } from '@storybook/components'; +import { EyeCloseIcon, EyeIcon } from '@storybook/icons'; import { JsonTree, getObjectType } from './react-editable-json-tree'; import { getControlId, getControlSetterButtonId } from './helpers'; import type { ControlProps, ObjectValue, ObjectConfig } from './types'; @@ -132,9 +133,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, @@ -293,7 +292,7 @@ export const ObjectControl: FC = ({ name, value, onChange }) => { setShowRaw((v) => !v); }} > - + {showRaw ? : } RAW )} diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 73353a4cbab5..853284676ef5 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -63,6 +63,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/csf": "^0.1.0", "@storybook/global": "^5.0.0", + "@storybook/icons": "^1.2.1", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", "memoizerific": "^1.11.3", @@ -73,7 +74,6 @@ "@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", "@types/react-syntax-highlighter": "11.0.5", "@types/util-deprecate": "^1.0.0", "css": "^3.0.0", diff --git a/code/ui/components/src/components/Button/Button.deprecated.stories.tsx b/code/ui/components/src/components/Button/Button.deprecated.stories.tsx index 7aaadc6140b4..10362221ce2a 100644 --- a/code/ui/components/src/components/Button/Button.deprecated.stories.tsx +++ b/code/ui/components/src/components/Button/Button.deprecated.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; +import { LinkIcon } from '@storybook/icons'; import { Button } from './Button'; -import { Icons } from '../icon/icon'; import { Form } from '../form'; const meta: Meta = { @@ -73,11 +73,11 @@ export const IconPrimary: Story = { primary: true, containsIcon: true, title: 'link', - children: , + children: , }, }; export const IconOutline: Story = { - args: { outline: true, containsIcon: true, title: 'link', children: }, + args: { outline: true, containsIcon: true, title: 'link', children: }, }; export const IconOutlineSmall: Story = { args: { @@ -85,6 +85,6 @@ export const IconOutlineSmall: Story = { containsIcon: true, small: true, title: 'link', - children: , + children: , }, }; diff --git a/code/ui/components/src/components/Button/Button.stories.tsx b/code/ui/components/src/components/Button/Button.stories.tsx index bdf87aeab2e7..a74ce9e308a6 100644 --- a/code/ui/components/src/components/Button/Button.stories.tsx +++ b/code/ui/components/src/components/Button/Button.stories.tsx @@ -1,8 +1,8 @@ import type { Meta, StoryObj } from '@storybook/react'; import type { ReactNode } from 'react'; import React from 'react'; +import { FaceHappyIcon } from '@storybook/icons'; import { Button } from './Button'; -import { Icons } from '../icon/icon'; const meta = { title: 'Button', @@ -39,24 +39,24 @@ export const Variants: Story = { @@ -68,7 +68,7 @@ export const Active: Story = { active: true, children: ( <> - + Button ), @@ -86,7 +86,7 @@ export const WithIcon: Story = { args: { children: ( <> - + Button ), @@ -102,7 +102,7 @@ export const WithIcon: Story = { export const IconOnly: Story = { args: { - children: , + children: , padding: 'small', }, render: (args) => ( @@ -160,24 +160,24 @@ export const Animated: Story = { diff --git a/code/ui/components/src/components/Button/Docs.mdx b/code/ui/components/src/components/Button/Docs.mdx index a3259c4667c3..eb6565812da9 100644 --- a/code/ui/components/src/components/Button/Docs.mdx +++ b/code/ui/components/src/components/Button/Docs.mdx @@ -17,7 +17,7 @@ Button component is used to trigger an action or event, such as submitting a for import { Button } from '@storybook/components // If you would like to use icons, please import them from the icons library -import { FaceHappy, Heart } from '@storybook/icons' +import { FaceHappyIcon, HeartIcon } from '@storybook/icons' `} /> ## Usage @@ -73,7 +73,7 @@ You can add an icon to the button by adding the icon on the left of the text. Pl dark={true} code={` `} /> @@ -87,7 +87,7 @@ You can also use the button as an icon only button by removing the text. to make dark={true} code={` `} /> @@ -118,13 +118,13 @@ You can use the `animate` prop to add animations to the button. You can set the dark={true} code={` `} /> @@ -138,7 +138,7 @@ You can use the `active` prop to set the button as active. This will change the dark={true} code={` `} /> @@ -153,7 +153,7 @@ You can use the `disabled` prop to set the button as disabled. dark={true} code={` `} /> \ No newline at end of file diff --git a/code/ui/components/src/components/IconButton/IconButton.stories.tsx b/code/ui/components/src/components/IconButton/IconButton.stories.tsx index 2f88a3e898a2..c3341ac44c92 100644 --- a/code/ui/components/src/components/IconButton/IconButton.stories.tsx +++ b/code/ui/components/src/components/IconButton/IconButton.stories.tsx @@ -1,13 +1,13 @@ import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; +import { FaceHappyIcon } from '@storybook/icons'; import { IconButton } from './IconButton'; -import { Icons } from '../icon/icon'; const meta = { title: 'IconButton', component: IconButton, tags: ['autodocs'], - args: { children: }, + args: { children: }, } satisfies Meta; export default meta; @@ -73,7 +73,7 @@ export const WithHref: Story = { console.log('Hello')} /> - + diff --git a/code/ui/components/src/components/icon/icon.stories.tsx b/code/ui/components/src/components/icon/icon.stories.tsx index 8c6856b73158..d3da4af90ed1 100644 --- a/code/ui/components/src/components/icon/icon.stories.tsx +++ b/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) => ( {Object.keys(icons).map((key) => ( - + {key} ))} @@ -85,7 +84,7 @@ export const NoLabels = (args: ComponentProps) => ( {Object.keys(icons).map((key) => ( - + ))} diff --git a/code/ui/components/src/components/icon/icon.tsx b/code/ui/components/src/components/icon/icon.tsx index 30c235f995b9..28b78983b712 100644 --- a/code/ui/components/src/components/icon/icon.tsx +++ b/code/ui/components/src/components/icon/icon.tsx @@ -1,15 +1,17 @@ -import type { FunctionComponent, ComponentProps } from 'react'; +import type { ComponentProps, FC } from 'react'; import React, { memo } from 'react'; +import * as StorybookIcons from '@storybook/icons'; import { styled } from '@storybook/theming'; -import type { IconKey } from './icons'; -import { icons } from './icons'; +import { deprecate, logger } from '@storybook/client-logger'; + +export type IconType = keyof typeof icons; +type NewIconTypes = typeof icons[IconType]; const Svg = styled.svg` display: inline-block; shape-rendering: inherit; vertical-align: middle; fill: currentColor; - path { fill: currentColor; } @@ -18,22 +20,42 @@ const Svg = styled.svg` export interface IconsProps extends ComponentProps { icon: IconType; useSymbol?: boolean; + onClick?: () => void; } -export const Icons: FunctionComponent = ({ icon, useSymbol, ...props }: IconsProps) => { - return ( - - {useSymbol ? : icons[icon]} - +/** + * @deprecated No longer used, will be removed in Storybook 9.0 + * Please use the `@storybook/icons` package instead. + * */ +export const Icons: FC = ({ icon, useSymbol, ...props }: IconsProps) => { + deprecate( + `Use of the deprecated Icons ${ + `(${icon})` || '' + } component detected. Please use the @storybook/icons component directly. For more informations, see the migration notes at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#icons-is-deprecated` ); -}; + const findIcon: NewIconTypes = icons[icon] || null; + if (!findIcon) { + logger.warn( + `Use of an unknown prop ${ + `(${icon})` || '' + } in the Icons component. The Icons component is deprecated. Please use the @storybook/icons component directly. For more informations, see the migration notes at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#icons-is-deprecated` + ); + return null; + } + // TODO: Find a better way to type this component + const Icon: FC = (StorybookIcons as any)[findIcon]; -export type IconType = keyof typeof icons; + return ; +}; -export interface SymbolsProps extends ComponentProps { - icons?: IconKey[]; +export interface SymbolsProps { + icons?: IconType[]; } +/** + * @deprecated No longer used, will be removed in Storybook 9.0 + * Please use the `@storybook/icons` package instead. + * */ export const Symbols = memo(function Symbols({ icons: keys = Object.keys(icons) }) { return ( (function Symbols({ icons: keys = Objec style={{ position: 'absolute', width: 0, height: 0 }} data-chromatic="ignore" > - {keys.map((key: IconKey) => ( + {keys.map((key: IconType) => ( {icons[key]} @@ -49,3 +71,211 @@ export const Symbols = memo(function Symbols({ icons: keys = Objec ); }); + +export const icons = { + user: 'UserIcon', + useralt: 'UserAltIcon', + useradd: 'UserAddIcon', + users: 'UsersIcon', + profile: 'ProfileIcon', + facehappy: 'FaceHappyIcon', + faceneutral: 'FaceNeutralIcon', + facesad: 'FaceSadIcon', + accessibility: 'AccessibilityIcon', + accessibilityalt: 'AccessibilityAltIcon', + arrowup: 'ChevronUpIcon', + arrowdown: 'ChevronDownIcon', + arrowleft: 'ChevronLeftIcon', + arrowright: 'ChevronRightIcon', + arrowupalt: 'ArrowUpIcon', + arrowdownalt: 'ArrowDownIcon', + arrowleftalt: 'ArrowLeftIcon', + arrowrightalt: 'ArrowRightIcon', + expandalt: 'ExpandAltIcon', + collapse: 'CollapseIcon', + expand: 'ExpandIcon', + unfold: 'UnfoldIcon', + transfer: 'TransferIcon', + redirect: 'RedirectIcon', + undo: 'UndoIcon', + reply: 'ReplyIcon', + sync: 'SyncIcon', + upload: 'UploadIcon', + download: 'DownloadIcon', + back: 'BackIcon', + proceed: 'ProceedIcon', + refresh: 'RefreshIcon', + globe: 'GlobeIcon', + compass: 'CompassIcon', + location: 'LocationIcon', + pin: 'PinIcon', + time: 'TimeIcon', + dashboard: 'DashboardIcon', + timer: 'TimerIcon', + home: 'HomeIcon', + admin: 'AdminIcon', + info: 'InfoIcon', + question: 'QuestionIcon', + support: 'SupportIcon', + alert: 'AlertIcon', + email: 'EmailIcon', + phone: 'PhoneIcon', + link: 'LinkIcon', + unlink: 'LinkBrokenIcon', + bell: 'BellIcon', + rss: 'RSSIcon', + sharealt: 'ShareAltIcon', + share: 'ShareIcon', + circle: 'CircleIcon', + circlehollow: 'CircleHollowIcon', + bookmarkhollow: 'BookmarkHollowIcon', + bookmark: 'BookmarkIcon', + hearthollow: 'HeartHollowIcon', + heart: 'HeartIcon', + starhollow: 'StarHollowIcon', + star: 'StarIcon', + certificate: 'CertificateIcon', + verified: 'VerifiedIcon', + thumbsup: 'ThumbsUpIcon', + shield: 'ShieldIcon', + basket: 'BasketIcon', + beaker: 'BeakerIcon', + hourglass: 'HourglassIcon', + flag: 'FlagIcon', + cloudhollow: 'CloudHollowIcon', + edit: 'EditIcon', + cog: 'CogIcon', + nut: 'NutIcon', + wrench: 'WrenchIcon', + ellipsis: 'EllipsisIcon', + check: 'CheckIcon', + form: 'FormIcon', + batchdeny: 'BatchDenyIcon', + batchaccept: 'BatchAcceptIcon', + controls: 'ControlsIcon', + plus: 'PlusIcon', + closeAlt: 'CloseAltIcon', + cross: 'CrossIcon', + trash: 'TrashIcon', + pinalt: 'PinAltIcon', + unpin: 'UnpinIcon', + add: 'AddIcon', + subtract: 'SubtractIcon', + close: 'CloseIcon', + delete: 'DeleteIcon', + passed: 'PassedIcon', + changed: 'ChangedIcon', + failed: 'FailedIcon', + clear: 'ClearIcon', + comment: 'CommentIcon', + commentadd: 'CommentAddIcon', + requestchange: 'RequestChangeIcon', + comments: 'CommentsIcon', + lock: 'LockIcon', + unlock: 'UnlockIcon', + key: 'KeyIcon', + outbox: 'OutboxIcon', + credit: 'CreditIcon', + button: 'ButtonIcon', + type: 'TypeIcon', + pointerdefault: 'PointerDefaultIcon', + pointerhand: 'PointerHandIcon', + browser: 'BrowserIcon', + tablet: 'TabletIcon', + mobile: 'MobileIcon', + watch: 'WatchIcon', + sidebar: 'SidebarIcon', + sidebaralt: 'SidebarAltIcon', + sidebaralttoggle: 'SidebarAltToggleIcon', + sidebartoggle: 'SidebarToggleIcon', + bottombar: 'BottomBarIcon', + bottombartoggle: 'BottomBarToggleIcon', + cpu: 'CPUIcon', + database: 'DatabaseIcon', + memory: 'MemoryIcon', + structure: 'StructureIcon', + box: 'BoxIcon', + power: 'PowerIcon', + photo: 'PhotoIcon', + component: 'ComponentIcon', + grid: 'GridIcon', + outline: 'OutlineIcon', + photodrag: 'PhotoDragIcon', + search: 'SearchIcon', + zoom: 'ZoomIcon', + zoomout: 'ZoomOutIcon', + zoomreset: 'ZoomResetIcon', + eye: 'EyeIcon', + eyeclose: 'EyeCloseIcon', + lightning: 'LightningIcon', + lightningoff: 'LightningOffIcon', + contrast: 'ContrastIcon', + switchalt: 'SwitchAltIcon', + mirror: 'MirrorIcon', + grow: 'GrowIcon', + paintbrush: 'PaintBrushIcon', + ruler: 'RulerIcon', + stop: 'StopIcon', + camera: 'CameraIcon', + video: 'VideoIcon', + speaker: 'SpeakerIcon', + play: 'PlayIcon', + playback: 'PlayBackIcon', + playnext: 'PlayNextIcon', + rewind: 'RewindIcon', + fastforward: 'FastForwardIcon', + stopalt: 'StopAltIcon', + sidebyside: 'SideBySideIcon', + stacked: 'StackedIcon', + sun: 'SunIcon', + moon: 'MoonIcon', + book: 'BookIcon', + document: 'DocumentIcon', + copy: 'CopyIcon', + category: 'CategoryIcon', + folder: 'FolderIcon', + print: 'PrintIcon', + graphline: 'GraphLineIcon', + calendar: 'CalendarIcon', + graphbar: 'GraphBarIcon', + menu: 'MenuIcon', + menualt: 'MenuIcon', + filter: 'FilterIcon', + docchart: 'DocChartIcon', + doclist: 'DocListIcon', + markup: 'MarkupIcon', + bold: 'BoldIcon', + paperclip: 'PaperClipIcon', + listordered: 'ListOrderedIcon', + listunordered: 'ListUnorderedIcon', + paragraph: 'ParagraphIcon', + markdown: 'MarkdownIcon', + repository: 'RepoIcon', + commit: 'CommitIcon', + branch: 'BranchIcon', + pullrequest: 'PullRequestIcon', + merge: 'MergeIcon', + apple: 'AppleIcon', + linux: 'LinuxIcon', + ubuntu: 'UbuntuIcon', + windows: 'WindowsIcon', + storybook: 'StorybookIcon', + azuredevops: 'AzureDevOpsIcon', + bitbucket: 'BitbucketIcon', + chrome: 'ChromeIcon', + chromatic: 'ChromaticIcon', + componentdriven: 'ComponentDrivenIcon', + discord: 'DiscordIcon', + facebook: 'FacebookIcon', + figma: 'FigmaIcon', + gdrive: 'GDriveIcon', + github: 'GithubIcon', + gitlab: 'GitlabIcon', + google: 'GoogleIcon', + graphql: 'GraphqlIcon', + medium: 'MediumIcon', + redux: 'ReduxIcon', + twitter: 'TwitterIcon', + youtube: 'YoutubeIcon', + vscode: 'VSCodeIcon', +} as const; diff --git a/code/ui/components/src/components/icon/icons.tsx b/code/ui/components/src/components/icon/icons.tsx deleted file mode 100644 index ed235f5cd672..000000000000 --- a/code/ui/components/src/components/icon/icons.tsx +++ /dev/null @@ -1,1463 +0,0 @@ -import React from 'react'; - -// Icon paths -export const icons = { - user: ( - <> - - - ), - useralt: ( - <> - - - ), - useradd: ( - <> - - - ), - users: ( - <> - - - - ), - profile: ( - <> - - - - ), - facehappy: ( - <> - - - - ), - faceneutral: ( - <> - - - - ), - facesad: ( - <> - - - - ), - accessibility: ( - <> - - - - - ), - accessibilityalt: ( - <> - - - ), - arrowup: ( - <> - - - ), - arrowdown: ( - <> - - - ), - arrowleft: ( - <> - - - ), - arrowright: ( - <> - - - ), - arrowupalt: ( - <> - - - ), - arrowdownalt: ( - <> - - - ), - arrowleftalt: ( - <> - - - ), - arrowrightalt: ( - <> - - - ), - expandalt: ( - <> - - - ), - collapse: ( - <> - - - ), - expand: ( - <> - - - ), - unfold: ( - <> - - - - - ), - transfer: ( - <> - - - ), - redirect: ( - <> - - - ), - undo: ( - <> - - - ), - reply: ( - <> - - - ), - sync: ( - <> - - - ), - upload: ( - <> - - - - ), - download: ( - <> - - - - ), - back: ( - <> - - - - ), - proceed: ( - <> - - - - ), - refresh: ( - <> - - - ), - globe: ( - <> - - - ), - compass: ( - <> - - - - ), - location: ( - <> - - - ), - pin: ( - <> - - - - ), - time: ( - <> - - - - ), - dashboard: ( - <> - - - - ), - timer: ( - <> - - - - ), - home: ( - <> - - - ), - admin: ( - <> - - - - ), - info: ( - <> - - - - ), - question: ( - <> - - - - ), - support: ( - <> - - - ), - alert: ( - <> - - - - ), - email: ( - <> - - - ), - phone: ( - <> - - - ), - link: ( - <> - - - - ), - unlink: ( - <> - - - ), - bell: ( - <> - - - ), - rss: ( - <> - - - - - ), - sharealt: ( - <> - - - - ), - share: ( - <> - - - - ), - circlehollow: ( - <> - - - ), - circle: , - bookmarkhollow: ( - <> - - - ), - bookmark: ( - <> - - - ), - hearthollow: ( - <> - - - ), - heart: ( - <> - - - ), - starhollow: ( - <> - - - ), - star: ( - <> - - - ), - certificate: ( - <> - - - ), - verified: ( - <> - - - ), - thumbsup: ( - <> - - - ), - shield: ( - <> - - - ), - basket: ( - <> - - - - - ), - beaker: ( - <> - - - ), - hourglass: ( - <> - - - - ), - flag: ( - <> - - - ), - cloudhollow: ( - <> - - - ), - cloud: , - edit: ( - <> - - - ), - cog: ( - <> - - - - ), - nut: ( - <> - - - - ), - wrench: ( - <> - - - ), - ellipsis: ( - <> - - - ), - check: ( - <> - - - ), - form: ( - <> - - - - ), - batchdeny: ( - <> - - - ), - batchaccept: ( - <> - - - ), - controls: ( - <> - - - ), - plus: ( - <> - - - ), - closeAlt: ( - <> - - - ), - cross: ( - <> - - - ), - trash: ( - <> - - - - ), - pinalt: ( - <> - - - ), - unpin: ( - <> - - - ), - add: ( - <> - - - - ), - subtract: ( - <> - - - - ), - close: ( - <> - - - - ), - delete: ( - <> - - - ), - passed: ( - <> - - - ), - changed: ( - <> - - - ), - failed: ( - <> - - - ), - clear: ( - <> - - - ), - comment: ( - <> - - - - ), - commentadd: ( - <> - - - - ), - requestchange: ( - <> - - - - ), - comments: ( - <> - - - - ), - lock: ( - <> - - - - ), - unlock: ( - <> - - - - ), - key: ( - <> - - - - ), - outbox: ( - <> - - - - ), - credit: ( - <> - - - - ), - button: ( - <> - - - - ), - type: ( - <> - - - - ), - pointerdefault: ( - <> - - - ), - pointerhand: ( - <> - - - ), - browser: ( - <> - - - ), - tablet: ( - <> - - - ), - mobile: ( - <> - - - ), - watch: ( - <> - - - ), - sidebar: ( - <> - - - - ), - sidebaralt: ( - <> - - - - ), - sidebaralttoggle: ( - <> - - - - ), - sidebartoggle: ( - <> - - - - ), - bottombar: ( - <> - - - - ), - bottombartoggle: ( - <> - - - - ), - cpu: ( - <> - - - - ), - database: ( - <> - - - ), - memory: ( - <> - - - - ), - structure: ( - <> - - - ), - box: ( - <> - - - ), - power: ( - <> - - - - ), - photo: ( - <> - - - - ), - component: ( - <> - - - ), - grid: ( - <> - - - ), - outline: ( - <> - - - ), - photodrag: ( - <> - - - - - ), - search: ( - <> - - - ), - zoom: ( - <> - - - - ), - zoomout: ( - <> - - - - ), - zoomreset: ( - <> - - - ), - eye: ( - <> - - - - ), - eyeclose: ( - <> - - - - ), - lightning: ( - <> - - - ), - lightningoff: ( - <> - - - ), - contrast: ( - <> - - - ), - switchalt: ( - <> - - - ), - mirror: ( - <> - - - ), - grow: ( - <> - - - - - ), - paintbrush: ( - <> - - - ), - ruler: ( - <> - - - - ), - stop: ( - <> - - - - ), - camera: ( - <> - - - - ), - video: ( - <> - - - - ), - speaker: ( - <> - - - - - ), - play: ( - <> - - - ), - playback: ( - <> - - - ), - playnext: ( - <> - - - ), - rewind: ( - <> - - - ), - fastforward: ( - <> - - - ), - stopalt: ( - <> - - - ), - sidebyside: ( - <> - - - ), - stacked: ( - <> - - - ), - sun: ( - <> - - - - - ), - moon: ( - <> - - - ), - book: ( - <> - - - ), - document: ( - <> - - - - ), - copy: ( - <> - - - ), - category: ( - <> - - - - ), - folder: ( - <> - - - ), - print: ( - <> - - - - ), - graphline: ( - <> - - - - ), - calendar: ( - <> - - - ), - graphbar: ( - <> - - - ), - menu: ( - <> - - - ), - menualt: ( - <> - - - ), - filter: ( - <> - - - ), - docchart: ( - <> - - - ), - doclist: ( - <> - - - - ), - markup: ( - <> - - - ), - bold: ( - <> - - - ), - italic: , - paperclip: ( - <> - - - ), - listordered: ( - <> - - - ), - listunordered: ( - <> - - - ), - paragraph: ( - <> - - - ), - markdown: ( - <> - - - - ), - repository: ( - <> - - - - - - ), - commit: ( - <> - - - ), - branch: ( - <> - - - ), - pullrequest: ( - <> - - - ), - merge: ( - <> - - - ), - apple: ( - <> - - - ), - linux: ( - <> - - - ), - ubuntu: ( - <> - - - ), - windows: ( - <> - - - ), - storybook: ( - <> - - - ), - azuredevops: ( - <> - - - ), - bitbucket: ( - <> - - - ), - chrome: ( - <> - - - ), - chromatic: ( - <> - - - ), - componentdriven: ( - <> - - - ), - discord: ( - <> - - - ), - facebook: ( - <> - - - ), - figma: ( - <> - - - ), - gdrive: ( - <> - - - ), - github: ( - <> - - - ), - gitlab: ( - <> - - - ), - google: ( - <> - - - ), - graphql: ( - <> - - - ), - medium: ( - <> - - - ), - redux: ( - <> - - - ), - twitter: ( - <> - - - ), - youtube: ( - <> - - - ), - vscode: ( - <> - - - ), -} as const; - -export type IconKey = keyof typeof icons; diff --git a/code/ui/components/src/components/icon/svg.tsx b/code/ui/components/src/components/icon/svg.tsx deleted file mode 100644 index 3e2eb66254c5..000000000000 --- a/code/ui/components/src/components/icon/svg.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { styled } from '@storybook/theming'; - -interface SvgProps { - inline?: boolean; -} - -const Svg = styled.svg( - { - // Fix rendering bugs in Chrome for hdpi - shapeRendering: 'inherit', - transform: 'translate3d(0,0,0)', - }, - ({ inline }) => - inline - ? { - display: 'inline-block', - } - : { - display: 'block', - } -); -Svg.displayName = 'Svg'; - -export { Svg as default }; diff --git a/code/ui/components/src/components/tabs/tabs.stories.tsx b/code/ui/components/src/components/tabs/tabs.stories.tsx index ae766ca6f51f..132b3c4ff8c7 100644 --- a/code/ui/components/src/components/tabs/tabs.stories.tsx +++ b/code/ui/components/src/components/tabs/tabs.stories.tsx @@ -10,9 +10,9 @@ import { userEvent, findByText, } from '@storybook/testing-library'; +import { CPUIcon, MemoryIcon } from '@storybook/icons'; import { Tabs, TabsState, TabWrapper } from './tabs'; import type { ChildrenList } from './tabs.helpers'; -import { Icons } from '../icon/icon'; import { IconButton } from '../IconButton/IconButton'; const colours = Array.from(new Array(15), (val, index) => index).map((i) => @@ -275,10 +275,10 @@ export const StatelessWithTools = { tools={ - + - + } diff --git a/code/ui/components/src/components/tooltip/ListItem.stories.tsx b/code/ui/components/src/components/tooltip/ListItem.stories.tsx index 8ffeaf322516..008c380cdcd5 100644 --- a/code/ui/components/src/components/tooltip/ListItem.stories.tsx +++ b/code/ui/components/src/components/tooltip/ListItem.stories.tsx @@ -1,6 +1,6 @@ import React, { Fragment } from 'react'; +import { EyeIcon } from '@storybook/icons'; import ListItem from './ListItem'; -import { Icons } from '../icon/icon'; export default { component: ListItem, @@ -11,17 +11,11 @@ export const All = {
- } /> - - - } - /> - + } /> + + + } /> +
), }; @@ -41,21 +35,21 @@ export const Loading = { export const DefaultIcon = { args: { title: 'Default icon', - right: , + right: , }, }; export const ActiveIcon = { args: { title: 'Active icon', active: true, - right: , + right: , }, }; export const ActiveIconLeft = { args: { title: 'Active icon', active: true, - left: , + left: , }, }; export const ActiveIconLeftColored = { diff --git a/code/ui/components/src/components/tooltip/ListItem.tsx b/code/ui/components/src/components/tooltip/ListItem.tsx index 38b6488faa21..ef6b3949105c 100644 --- a/code/ui/components/src/components/tooltip/ListItem.tsx +++ b/code/ui/components/src/components/tooltip/ListItem.tsx @@ -1,10 +1,8 @@ -import type { FC, ReactNode, ComponentProps, ReactElement } from 'react'; +import type { FC, ReactNode, ComponentProps } from 'react'; import React from 'react'; import { styled } from '@storybook/theming'; import memoize from 'memoizerific'; import { transparentize } from 'polished'; -import { Icons } from '../icon/icon'; -import { icons } from '../icon/icons'; export interface TitleProps { children?: ReactNode; @@ -181,15 +179,10 @@ export type LinkWrapperType = FC; export interface ListItemProps extends Omit, 'href' | 'title'> { loading?: boolean; - /** - * @deprecated This property will be removed in SB 8.0 - * Use `icon` property instead. - */ - left?: ReactNode; title?: ReactNode; center?: ReactNode; right?: ReactNode; - icon?: keyof typeof icons | ReactElement; + icon?: ReactNode; active?: boolean; disabled?: boolean; href?: string; @@ -199,7 +192,6 @@ export interface ListItemProps extends Omit, 'href' const ListItem: FC = ({ loading, - left, title, center, right, @@ -215,17 +207,11 @@ const ListItem: FC = ({ const itemProps = getItemProps(onClick, href, LinkWrapper); const commonProps = { active, disabled }; - const isStorybookIcon = typeof icon === 'string' && icons[icon]; - return ( - {icon ? ( - {isStorybookIcon ? : icon} - ) : ( - left && {left} - )} + {icon && {icon}} {title || center ? ( -
+
{title && ( {title} @@ -241,7 +227,6 @@ const ListItem: FC<ListItemProps> = ({ ListItem.defaultProps = { loading: false, - left: null, title: <span>Loading state</span>, center: null, right: null, diff --git a/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx b/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx index 3691e91239af..43a952cf61cc 100644 --- a/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx +++ b/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx @@ -2,9 +2,9 @@ import type { FunctionComponent, MouseEvent, ReactElement } from 'react'; import React, { Children, cloneElement } from 'react'; import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/react'; +import { LinuxIcon } from '@storybook/icons'; import { WithTooltip } from './WithTooltip'; import { TooltipLinkList } from './TooltipLinkList'; -import { Icons } from '../icon/icon'; import ellipseUrl from './assets/ellipse.png'; const onLinkClick = action('onLinkClick'); @@ -186,7 +186,7 @@ export const WithCustomIcon = { id: '1', title: 'Link 1', active: true, - icon: <Icons icon="linux" />, + icon: <LinuxIcon />, right: <img src={ellipseUrl} width="16" height="16" alt="ellipse" />, center: 'This is an addition description', href: 'http://google.com', diff --git a/code/ui/components/src/components/tooltip/TooltipLinkList.tsx b/code/ui/components/src/components/tooltip/TooltipLinkList.tsx index 2311ca458a5c..347e6d291789 100644 --- a/code/ui/components/src/components/tooltip/TooltipLinkList.tsx +++ b/code/ui/components/src/components/tooltip/TooltipLinkList.tsx @@ -55,16 +55,11 @@ const Item: FC<Link & { isIndented?: boolean }> = (props) => { }; export const TooltipLinkList: FC<TooltipLinkListProps> = ({ links, LinkWrapper }) => { - const hasOneLeftElement = links.some((link) => link.left || link.icon); + const hasIcon = links.some((link) => link.icon); return ( <List> {links.map(({ isGatsby, ...p }) => ( - <Item - key={p.id} - LinkWrapper={isGatsby ? LinkWrapper : null} - isIndented={hasOneLeftElement} - {...p} - /> + <Item key={p.id} LinkWrapper={isGatsby ? LinkWrapper : null} isIndented={hasIcon} {...p} /> ))} </List> ); diff --git a/code/ui/components/src/components/typography/link/link.stories.tsx b/code/ui/components/src/components/typography/link/link.stories.tsx index 7df61e61995f..0ee21b793143 100644 --- a/code/ui/components/src/components/typography/link/link.stories.tsx +++ b/code/ui/components/src/components/typography/link/link.stories.tsx @@ -1,8 +1,8 @@ import type { ComponentProps } from 'react'; import React from 'react'; import { action } from '@storybook/addon-actions'; +import { DiscordIcon, SidebarIcon } from '@storybook/icons'; import { Link } from './link'; -import { Icons } from '../../icon/icon'; const onClick = action('onClick'); @@ -64,13 +64,13 @@ export const StyledLinks = { </Link> <br /> <Link href="http://google.com" {...args}> - <Icons icon="discord" /> + <DiscordIcon /> With icon in front </Link> <br /> <Link title="Toggle sidebar" containsIcon href="http://google.com" {...args}> {/* A linked icon by itself */} - <Icons icon="sidebar" /> + <SidebarIcon /> </Link> <br /> <Link containsIcon withArrow href="http://google.com" {...args}> diff --git a/code/ui/components/src/components/typography/link/link.tsx b/code/ui/components/src/components/typography/link/link.tsx index 193fca15e976..fb26a03a0df4 100644 --- a/code/ui/components/src/components/typography/link/link.tsx +++ b/code/ui/components/src/components/typography/link/link.tsx @@ -2,8 +2,7 @@ import type { AnchorHTMLAttributes, FC, MouseEvent } from 'react'; import React from 'react'; import { styled } from '@storybook/theming'; import { darken } from 'polished'; - -import { Icons } from '../../icon/icon'; +import { ChevronRightIcon } from '@storybook/icons'; // Cmd/Ctrl/Shift/Alt + Click should trigger default browser behavior. Same applies to non-left clicks const LEFT_BUTTON = 0; @@ -200,7 +199,7 @@ export const Link: FC<LinkProps & AProps> = ({ > <LinkInner withArrow={withArrow} containsIcon={containsIcon}> {children} - {withArrow && <Icons icon="arrowright" />} + {withArrow && <ChevronRightIcon />} </LinkInner> </A> ); diff --git a/code/ui/components/src/index.ts b/code/ui/components/src/index.ts index ccc7053f7b1f..e134b5e5bf02 100644 --- a/code/ui/components/src/index.ts +++ b/code/ui/components/src/index.ts @@ -73,7 +73,7 @@ export { AddonPanel } from './components/addon-panel/addon-panel'; // Graphics export type { IconsProps } from './components/icon/icon'; export { Icons, Symbols } from './components/icon/icon'; -export { icons } from './components/icon/icons'; +export { icons } from './components/icon/icon'; export { StorybookLogo } from './components/brand/StorybookLogo'; export { StorybookIcon } from './components/brand/StorybookIcon'; diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index 38fcf2fa033d..8509c62df405 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -59,6 +59,7 @@ "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", + "@storybook/icons": "^1.2.1", "@storybook/manager-api": "workspace:*", "@storybook/router": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/ui/manager/src/App.tsx b/code/ui/manager/src/App.tsx index c2dc3ad7c80b..394016ff5708 100644 --- a/code/ui/manager/src/App.tsx +++ b/code/ui/manager/src/App.tsx @@ -4,7 +4,6 @@ import React from 'react'; import { Route } from '@storybook/router'; import { Global, createGlobal } from '@storybook/theming'; -import { Symbols } from '@storybook/components'; import type { Addon_PageType } from '@storybook/types'; import Sidebar from './container/Sidebar'; import Preview from './container/Preview'; @@ -25,7 +24,6 @@ export const App = ({ managerLayoutState, setManagerLayoutState, pages }: Props) return ( <> <Global styles={createGlobal} /> - <Symbols icons={['folder', 'component', 'document', 'bookmarkhollow']} /> <Layout managerLayoutState={managerLayoutState} setManagerLayoutState={setManagerLayoutState} diff --git a/code/ui/manager/src/components/mobile/about/MobileAbout.tsx b/code/ui/manager/src/components/mobile/about/MobileAbout.tsx index 6c13c1ea01a1..08103b877083 100644 --- a/code/ui/manager/src/components/mobile/about/MobileAbout.tsx +++ b/code/ui/manager/src/components/mobile/about/MobileAbout.tsx @@ -2,7 +2,8 @@ import type { FC } from 'react'; import React, { useRef } from 'react'; import { Transition, type TransitionStatus } from 'react-transition-group'; import { styled } from '@storybook/theming'; -import { Icons, Link } from '@storybook/components'; +import { Link } from '@storybook/components'; +import { ArrowLeftIcon, GithubIcon, ShareAltIcon, StorybookIcon } from '@storybook/icons'; import { UpgradeBlock } from '../../upgrade/UpgradeBlock'; import { MOBILE_TRANSITION_DURATION } from '../../../constants'; import { useLayout } from '../../layout/LayoutProvider'; @@ -23,26 +24,26 @@ export const MobileAbout: FC = () => { {(state) => ( <Container ref={aboutRef} state={state} transitionDuration={MOBILE_TRANSITION_DURATION}> <Button onClick={() => setMobileAboutOpen(false)} title="Close about section"> - <Icons icon="arrowleftalt" /> + <ArrowLeftIcon /> Back </Button> <LinkContainer> <LinkLine href="https://github.com/storybookjs/storybook" target="_blank"> <LinkLeft> - <Icons icon="github" /> + <GithubIcon /> <span>Github</span> </LinkLeft> - <Icons icon="sharealt" width={12} /> + <ShareAltIcon width={12} /> </LinkLine> <LinkLine href="https://storybook.js.org/docs/react/get-started/install/" target="_blank" > <LinkLeft> - <Icons icon="storybook" /> + <StorybookIcon /> <span>Documentation</span> </LinkLeft> - <Icons icon="sharealt" width={12} /> + <ShareAltIcon width={12} /> </LinkLine> </LinkContainer> <UpgradeBlock /> diff --git a/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx b/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx index 97387b873f24..463cedf945e7 100644 --- a/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx +++ b/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx @@ -1,8 +1,9 @@ import type { FC } from 'react'; import React from 'react'; import { styled } from '@storybook/theming'; -import { IconButton, Icons } from '@storybook/components'; +import { IconButton } from '@storybook/components'; import { useStorybookApi, useStorybookState } from '@storybook/manager-api'; +import { BottomBarToggleIcon, MenuIcon } from '@storybook/icons'; import { MobileMenuDrawer } from './MobileMenuDrawer'; import { MobileAddonsDrawer } from './MobileAddonsDrawer'; import { useLayout } from '../../layout/LayoutProvider'; @@ -42,12 +43,12 @@ export const MobileNavigation: FC<MobileNavigationProps> = ({ menu, panel, showP <MobileMenuDrawer>{menu}</MobileMenuDrawer> <MobileAddonsDrawer>{panel}</MobileAddonsDrawer> <Button onClick={() => setMobileMenuOpen(!isMobileMenuOpen)} title="Open navigation menu"> - <Icons icon="menu" /> + <MenuIcon /> <Text>{fullStoryName}</Text> </Button> {showPanel && ( <IconButton onClick={() => setMobilePanelOpen(true)} title="Open addon panel"> - <Icons icon="bottombartoggle" /> + <BottomBarToggleIcon /> </IconButton> )} </Container> diff --git a/code/ui/manager/src/components/notifications/NotificationItem.tsx b/code/ui/manager/src/components/notifications/NotificationItem.tsx index b2c90a6a0403..3131d2116cbe 100644 --- a/code/ui/manager/src/components/notifications/NotificationItem.tsx +++ b/code/ui/manager/src/components/notifications/NotificationItem.tsx @@ -5,6 +5,7 @@ import { Link } from '@storybook/router'; import { styled, useTheme } from '@storybook/theming'; import { Icons, IconButton, type IconsProps } from '@storybook/components'; import { transparentize } from 'polished'; +import { CloseAltIcon } from '@storybook/icons'; const Notification = styled.div(({ theme }) => ({ position: 'relative', @@ -115,7 +116,7 @@ const DismissNotificationItem: FC<{ onDismiss(); }} > - <Icons icon="closeAlt" height={12} width={12} /> + <CloseAltIcon size={12} /> </DismissButtonWrapper> ); diff --git a/code/ui/manager/src/components/panel/Panel.stories.tsx b/code/ui/manager/src/components/panel/Panel.stories.tsx index 836fa88dbf2f..84640963b9f2 100644 --- a/code/ui/manager/src/components/panel/Panel.stories.tsx +++ b/code/ui/manager/src/components/panel/Panel.stories.tsx @@ -1,8 +1,9 @@ import React, { useCallback, useRef, useState } from 'react'; import { action } from '@storybook/addon-actions'; -import { Badge, Icons, Spaced } from '@storybook/components'; +import { Badge, Spaced } from '@storybook/components'; import type { Addon_BaseType, Addon_Collection } from '@storybook/types'; import { Addon_TypesEnum } from '@storybook/types'; +import { BellIcon } from '@storybook/icons'; import { AddonPanel } from './Panel'; import { defaultShortcuts } from '../../settings/defaultShortcuts'; @@ -70,7 +71,7 @@ export const JSXTitles = () => { <div> <Spaced col={1}> <div style={{ display: 'inline-block', verticalAlign: 'middle' }}>Alert!</div> - <Icons icon="bell" /> + <BellIcon /> </Spaced> </div> ), diff --git a/code/ui/manager/src/components/panel/Panel.tsx b/code/ui/manager/src/components/panel/Panel.tsx index 1ad1b563a303..7c17d52db6a9 100644 --- a/code/ui/manager/src/components/panel/Panel.tsx +++ b/code/ui/manager/src/components/panel/Panel.tsx @@ -1,9 +1,10 @@ import React, { Component } from 'react'; -import { Tabs, Icons, IconButton } from '@storybook/components'; +import { Tabs, IconButton } from '@storybook/components'; import type { State } from '@storybook/manager-api'; import { shortcutToHumanString } from '@storybook/manager-api'; import type { Addon_BaseType } from '@storybook/types'; import { styled } from '@storybook/theming'; +import { BottomBarIcon, CloseIcon, SidebarAltIcon } from '@storybook/icons'; import { useLayout } from '../layout/LayoutProvider'; export interface SafeTabProps { @@ -69,19 +70,19 @@ export const AddonPanel = React.memo<{ shortcuts.panelPosition )}]`} > - <Icons icon={panelPosition === 'bottom' ? 'sidebaralt' : 'bottombar'} /> + {panelPosition === 'bottom' ? <SidebarAltIcon /> : <BottomBarIcon />} </IconButton> <IconButton key="visibility" onClick={actions.toggleVisibility} title={`Hide addons [${shortcutToHumanString(shortcuts.togglePanel)}]`} > - <Icons icon="close" /> + <CloseIcon /> </IconButton> </> ) : ( <IconButton onClick={() => setMobilePanelOpen(false)} title="Close addon panel"> - <Icons icon="close" /> + <CloseIcon /> </IconButton> )} </Actions> diff --git a/code/ui/manager/src/components/preview/Toolbar.tsx b/code/ui/manager/src/components/preview/Toolbar.tsx index f7a29c09985f..38a470d1a35c 100644 --- a/code/ui/manager/src/components/preview/Toolbar.tsx +++ b/code/ui/manager/src/components/preview/Toolbar.tsx @@ -3,7 +3,7 @@ import React, { Fragment, useMemo } from 'react'; import { styled } from '@storybook/theming'; -import { IconButton, Icons, Separator, TabButton, TabBar } from '@storybook/components'; +import { IconButton, Separator, TabButton, TabBar } from '@storybook/components'; import { shortcutToHumanString, Consumer, @@ -18,6 +18,7 @@ import { import { Location, type RenderData } from '@storybook/router'; import type { Addon_BaseType } from '@storybook/types'; +import { CloseIcon, ExpandIcon } from '@storybook/icons'; import { zoomTool } from './tools/zoom'; import * as S from './utils/components'; @@ -63,7 +64,7 @@ export const fullScreenTool: Addon_BaseType = { title={`${isFullscreen ? 'Exit full screen' : 'Go full screen'} [${shortcut}]`} aria-label={isFullscreen ? 'Exit full screen' : 'Go full screen'} > - <Icons icon={isFullscreen ? 'close' : 'expand'} /> + {isFullscreen ? <CloseIcon /> : <ExpandIcon />} </IconButton> ) } diff --git a/code/ui/manager/src/components/preview/tools/addons.tsx b/code/ui/manager/src/components/preview/tools/addons.tsx index 4403a7cb2725..5af0f4bf7040 100644 --- a/code/ui/manager/src/components/preview/tools/addons.tsx +++ b/code/ui/manager/src/components/preview/tools/addons.tsx @@ -1,8 +1,9 @@ import React from 'react'; -import { IconButton, Icons } from '@storybook/components'; +import { IconButton } from '@storybook/components'; import { Consumer, types } from '@storybook/manager-api'; import type { Combo } from '@storybook/manager-api'; import type { Addon_BaseType } from '@storybook/types'; +import { BottomBarIcon, SidebarAltIcon } from '@storybook/icons'; const menuMapper = ({ api, state }: Combo) => ({ isVisible: api.getIsPanelShown(), @@ -23,7 +24,7 @@ export const addonsTool: Addon_BaseType = { !isVisible && ( <> <IconButton aria-label="Show addons" key="addons" onClick={toggle} title="Show addons"> - <Icons icon={panelPosition === 'bottom' ? 'bottombar' : 'sidebaralt'} /> + {panelPosition === 'bottom' ? <BottomBarIcon /> : <SidebarAltIcon />} </IconButton> </> ) diff --git a/code/ui/manager/src/components/preview/tools/copy.tsx b/code/ui/manager/src/components/preview/tools/copy.tsx index 0b0084aae857..f06e926c0290 100644 --- a/code/ui/manager/src/components/preview/tools/copy.tsx +++ b/code/ui/manager/src/components/preview/tools/copy.tsx @@ -1,10 +1,11 @@ import { global } from '@storybook/global'; import React from 'react'; import copy from 'copy-to-clipboard'; -import { getStoryHref, IconButton, Icons } from '@storybook/components'; +import { getStoryHref, IconButton } from '@storybook/components'; import { Consumer, types } from '@storybook/manager-api'; import type { Combo } from '@storybook/manager-api'; import type { Addon_BaseType } from '@storybook/types'; +import { LinkIcon } from '@storybook/icons'; const { PREVIEW_URL, document } = global; @@ -37,7 +38,7 @@ export const copyTool: Addon_BaseType = { onClick={() => copy(getStoryHref(baseUrl, storyId, queryParams))} title="Copy canvas link" > - <Icons icon="link" /> + <LinkIcon /> </IconButton> ) : null } diff --git a/code/ui/manager/src/components/preview/tools/eject.tsx b/code/ui/manager/src/components/preview/tools/eject.tsx index 4d0a903919f3..e8c65f8fd29b 100644 --- a/code/ui/manager/src/components/preview/tools/eject.tsx +++ b/code/ui/manager/src/components/preview/tools/eject.tsx @@ -1,9 +1,10 @@ import { global } from '@storybook/global'; import React from 'react'; -import { getStoryHref, IconButton, Icons } from '@storybook/components'; +import { getStoryHref, IconButton } from '@storybook/components'; import { Consumer, types } from '@storybook/manager-api'; import type { Combo } from '@storybook/manager-api'; import type { Addon_BaseType } from '@storybook/types'; +import { ShareAltIcon } from '@storybook/icons'; const { PREVIEW_URL } = global; @@ -35,7 +36,7 @@ export const ejectTool: Addon_BaseType = { rel="noopener noreferrer" title="Open canvas in new tab" > - <Icons icon="sharealt" /> + <ShareAltIcon /> </a> </IconButton> ) : null diff --git a/code/ui/manager/src/components/preview/tools/menu.tsx b/code/ui/manager/src/components/preview/tools/menu.tsx index 364fe346f4a4..fcbf3971214d 100644 --- a/code/ui/manager/src/components/preview/tools/menu.tsx +++ b/code/ui/manager/src/components/preview/tools/menu.tsx @@ -1,8 +1,9 @@ import React from 'react'; -import { IconButton, Icons, Separator } from '@storybook/components'; +import { IconButton, Separator } from '@storybook/components'; import { Consumer, types } from '@storybook/manager-api'; import type { Combo } from '@storybook/manager-api'; import type { Addon_BaseType } from '@storybook/types'; +import { MenuIcon } from '@storybook/icons'; const menuMapper = ({ api, state }: Combo) => ({ isVisible: api.getIsNavShown(), @@ -22,7 +23,7 @@ export const menuTool: Addon_BaseType = { !isVisible && ( <> <IconButton aria-label="Show sidebar" key="menu" onClick={toggle} title="Show sidebar"> - <Icons icon="menu" /> + <MenuIcon /> </IconButton> <Separator /> </> diff --git a/code/ui/manager/src/components/preview/tools/remount.tsx b/code/ui/manager/src/components/preview/tools/remount.tsx index 6bf4c1f7553e..af85a43af246 100644 --- a/code/ui/manager/src/components/preview/tools/remount.tsx +++ b/code/ui/manager/src/components/preview/tools/remount.tsx @@ -1,11 +1,12 @@ import type { ComponentProps } from 'react'; import React, { useState } from 'react'; -import { IconButton, Icons } from '@storybook/components'; +import { IconButton } from '@storybook/components'; import { Consumer, types } from '@storybook/manager-api'; import type { Combo } from '@storybook/manager-api'; import { styled } from '@storybook/theming'; import { FORCE_REMOUNT } from '@storybook/core-events'; import type { Addon_BaseType } from '@storybook/types'; +import { SyncIcon } from '@storybook/icons'; interface AnimatedButtonProps { animating?: boolean; @@ -56,7 +57,7 @@ export const remountTool: Addon_BaseType = { animating={isAnimating} disabled={!storyId} > - <Icons icon="sync" /> + <SyncIcon /> </StyledAnimatedIconButton> ); }} diff --git a/code/ui/manager/src/components/preview/tools/zoom.tsx b/code/ui/manager/src/components/preview/tools/zoom.tsx index 84e0f72bafae..69d73f73850c 100644 --- a/code/ui/manager/src/components/preview/tools/zoom.tsx +++ b/code/ui/manager/src/components/preview/tools/zoom.tsx @@ -1,9 +1,10 @@ import type { SyntheticEvent, MouseEventHandler } from 'react'; import React, { Component, useCallback } from 'react'; -import { Icons, IconButton, Separator } from '@storybook/components'; +import { IconButton, Separator } from '@storybook/components'; import type { Addon_BaseType } from '@storybook/types'; import { types } from '@storybook/manager-api'; +import { ZoomIcon, ZoomOutIcon, ZoomResetIcon } from '@storybook/icons'; const initialZoom = 1 as const; @@ -38,13 +39,13 @@ const Zoom = React.memo<{ return ( <> <IconButton key="zoomin" onClick={zoomIn} title="Zoom in"> - <Icons icon="zoom" /> + <ZoomIcon /> </IconButton> <IconButton key="zoomout" onClick={zoomOut} title="Zoom out"> - <Icons icon="zoomout" /> + <ZoomOutIcon /> </IconButton> <IconButton key="zoomreset" onClick={reset} title="Reset zoom"> - <Icons icon="zoomreset" /> + <ZoomResetIcon /> </IconButton> </> ); diff --git a/code/ui/manager/src/components/sidebar/Explorer.stories.tsx b/code/ui/manager/src/components/sidebar/Explorer.stories.tsx index df8a7304e6d4..a430bb2bb4f0 100644 --- a/code/ui/manager/src/components/sidebar/Explorer.stories.tsx +++ b/code/ui/manager/src/components/sidebar/Explorer.stories.tsx @@ -4,14 +4,20 @@ import { Explorer } from './Explorer'; import { mockDataset } from './mockdata'; import type { RefType } from './types'; import * as RefStories from './Refs.stories'; +import { IconSymbols } from './IconSymbols'; export default { component: Explorer, title: 'Sidebar/Explorer', - parameters: { layout: 'fullscreen', withSymbols: true, theme: 'side-by-side' }, + parameters: { layout: 'fullscreen', theme: 'side-by-side' }, decorators: [ RefStories.default.decorators[0], - (storyFn: any) => <div style={{ padding: '0 20px', maxWidth: '230px' }}>{storyFn()}</div>, + (storyFn: any) => ( + <div style={{ padding: '0 20px', maxWidth: '230px' }}> + <IconSymbols /> + {storyFn()} + </div> + ), ], }; diff --git a/code/ui/manager/src/components/sidebar/IconSymbols.tsx b/code/ui/manager/src/components/sidebar/IconSymbols.tsx new file mode 100644 index 000000000000..589e909e00e4 --- /dev/null +++ b/code/ui/manager/src/components/sidebar/IconSymbols.tsx @@ -0,0 +1,75 @@ +import { styled } from '@storybook/theming'; +import type { FC } from 'react'; +import React from 'react'; + +const Svg = styled.svg` + position: absolute; + width: 0; + height: 0; + display: inline-block; + shape-rendering: inherit; + vertical-align: middle; +`; + +// We are importing the icons from @storybook/icons as we need to add symbols inside of them. +// This will allow to set icons once and use them everywhere. + +const GROUP_ID = 'icon--group'; +const COMPONENT_ID = 'icon--component'; +const DOCUMENT_ID = 'icon--document'; +const STORY_ID = 'icon--story'; + +export const IconSymbols: FC = () => { + return ( + <Svg data-chromatic="ignore"> + <symbol id={GROUP_ID}> + {/* https://github.com/storybookjs/icons/blob/main/src/icons/Folder.tsx */} + <path + fillRule="evenodd" + clipRule="evenodd" + d="M6.586 3.504l-1.5-1.5H1v9h12v-7.5H6.586zm.414-1L5.793 1.297a1 1 0 00-.707-.293H.5a.5.5 0 00-.5.5v10a.5.5 0 00.5.5h13a.5.5 0 00.5-.5v-8.5a.5.5 0 00-.5-.5H7z" + fill="currentColor" + /> + </symbol> + <symbol id={COMPONENT_ID}> + {/* https://github.com/storybookjs/icons/blob/main/src/icons/Component.tsx */} + <path + fillRule="evenodd" + clipRule="evenodd" + d="M3.5 1.004a2.5 2.5 0 00-2.5 2.5v7a2.5 2.5 0 002.5 2.5h7a2.5 2.5 0 002.5-2.5v-7a2.5 2.5 0 00-2.5-2.5h-7zm8.5 5.5H7.5v-4.5h3a1.5 1.5 0 011.5 1.5v3zm0 1v3a1.5 1.5 0 01-1.5 1.5h-3v-4.5H12zm-5.5 4.5v-4.5H2v3a1.5 1.5 0 001.5 1.5h3zM2 6.504h4.5v-4.5h-3a1.5 1.5 0 00-1.5 1.5v3z" + fill="currentColor" + /> + </symbol> + <symbol id={DOCUMENT_ID}> + {/* https://github.com/storybookjs/icons/blob/main/src/icons/Document.tsx */} + <path + d="M4 5.5a.5.5 0 01.5-.5h5a.5.5 0 010 1h-5a.5.5 0 01-.5-.5zM4.5 7.5a.5.5 0 000 1h5a.5.5 0 000-1h-5zM4 10.5a.5.5 0 01.5-.5h5a.5.5 0 010 1h-5a.5.5 0 01-.5-.5z" + fill="currentColor" + /> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M1.5 0a.5.5 0 00-.5.5v13a.5.5 0 00.5.5h11a.5.5 0 00.5-.5V3.207a.5.5 0 00-.146-.353L10.146.146A.5.5 0 009.793 0H1.5zM2 1h7.5v2a.5.5 0 00.5.5h2V13H2V1z" + fill="currentColor" + /> + </symbol> + <symbol id={STORY_ID}> + {/* https://github.com/storybookjs/icons/blob/main/src/icons/BookmarkHollow.tsx */} + <path + fillRule="evenodd" + clipRule="evenodd" + d="M3.5 0h7a.5.5 0 01.5.5v13a.5.5 0 01-.454.498.462.462 0 01-.371-.118L7 11.159l-3.175 2.72a.46.46 0 01-.379.118A.5.5 0 013 13.5V.5a.5.5 0 01.5-.5zM4 12.413l2.664-2.284a.454.454 0 01.377-.128.498.498 0 01.284.12L10 12.412V1H4v11.413z" + fill="currentColor" + /> + </symbol> + </Svg> + ); +}; + +export const UseSymbol: FC<{ type: 'group' | 'component' | 'document' | 'story' }> = ({ type }) => { + if (type === 'group') return <use xlinkHref={`#${GROUP_ID}`} />; + if (type === 'component') return <use xlinkHref={`#${COMPONENT_ID}`} />; + if (type === 'document') return <use xlinkHref={`#${DOCUMENT_ID}`} />; + if (type === 'story') return <use xlinkHref={`#${STORY_ID}`} />; + return null; +}; diff --git a/code/ui/manager/src/components/sidebar/Menu.tsx b/code/ui/manager/src/components/sidebar/Menu.tsx index 185156ce8589..95290acbc093 100644 --- a/code/ui/manager/src/components/sidebar/Menu.tsx +++ b/code/ui/manager/src/components/sidebar/Menu.tsx @@ -5,6 +5,7 @@ import { styled } from '@storybook/theming'; import { transparentize } from 'polished'; import type { Button, TooltipLinkListLink } from '@storybook/components'; import { WithTooltip, TooltipLinkList, Icons, IconButton } from '@storybook/components'; +import { CloseIcon, CogIcon, MenuIcon } from '@storybook/icons'; import { useLayout } from '../layout/LayoutProvider'; export type MenuList = ComponentProps<typeof TooltipLinkList>['links']; @@ -131,14 +132,14 @@ export const SidebarMenu: FC<SidebarMenuProps> = ({ menu, isHighlighted, onClick active={false} onClick={onClick} > - <Icons icon="cog" /> + <CogIcon /> </SidebarIconButton> <CloseIconButton title="Close menu" aria-label="Close menu" onClick={() => setMobileMenuOpen(false)} > - <Icons icon="close" /> + <CloseIcon /> </CloseIconButton> </MenuButtonGroup> ); @@ -157,7 +158,7 @@ export const SidebarMenu: FC<SidebarMenuProps> = ({ menu, isHighlighted, onClick highlighted={isHighlighted} active={isTooltipVisible} > - <Icons icon="cog" /> + <CogIcon /> </SidebarIconButton> </WithTooltip> ); @@ -181,7 +182,7 @@ export const ToolbarMenu: FC<{ tooltip={({ onHide }) => <SidebarMenuList onHide={onHide} menu={menu} />} > <IconButton title="Shortcuts" aria-label="Shortcuts"> - <Icons icon="menu" /> + <MenuIcon /> </IconButton> </WithTooltip> ); diff --git a/code/ui/manager/src/components/sidebar/RefBlocks.tsx b/code/ui/manager/src/components/sidebar/RefBlocks.tsx index 52d1d335a5dd..f2aff6f2dc08 100644 --- a/code/ui/manager/src/components/sidebar/RefBlocks.tsx +++ b/code/ui/manager/src/components/sidebar/RefBlocks.tsx @@ -2,10 +2,11 @@ import { global } from '@storybook/global'; import type { FC } from 'react'; import React, { useState, useCallback, Fragment } from 'react'; -import { Icons, WithTooltip, Spaced, Button, Link, ErrorFormatter } from '@storybook/components'; +import { WithTooltip, Spaced, Button, Link, ErrorFormatter } from '@storybook/components'; import { logger } from '@storybook/client-logger'; import { styled } from '@storybook/theming'; +import { ChevronDownIcon, LockIcon, SyncIcon } from '@storybook/icons'; import { Loader, Contained } from './Loader'; const { window: globalWindow } = global; @@ -77,8 +78,9 @@ export const AuthBlock: FC<{ loginUrl: string; id: string }> = ({ loginUrl, id } this Storybook. </Text> <div> + {/* TODO: Make sure this button is working without the deprecated props */} <Button small gray onClick={refresh}> - <Icons icon="sync" /> + <SyncIcon /> Refresh now </Button> </div> @@ -88,7 +90,7 @@ export const AuthBlock: FC<{ loginUrl: string; id: string }> = ({ loginUrl, id } <Text>Sign in to browse this Storybook.</Text> <div> <Button small gray onClick={open}> - <Icons icon="lock" /> + <LockIcon /> Sign in </Button> </div> @@ -114,7 +116,7 @@ export const ErrorBlock: FC<{ error: Error }> = ({ error }) => ( > {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} <Link isButton> - View error <Icons icon="arrowdown" /> + View error <ChevronDownIcon /> </Link> </WithTooltip>{' '} <Link withArrow href="https://storybook.js.org/docs" cancel={false} target="_blank"> diff --git a/code/ui/manager/src/components/sidebar/RefIndicator.tsx b/code/ui/manager/src/components/sidebar/RefIndicator.tsx index a46ba2c89642..9d822d77c673 100644 --- a/code/ui/manager/src/components/sidebar/RefIndicator.tsx +++ b/code/ui/manager/src/components/sidebar/RefIndicator.tsx @@ -8,6 +8,7 @@ import { styled } from '@storybook/theming'; import { transparentize } from 'polished'; import { useStorybookApi } from '@storybook/manager-api'; +import { ChevronDownIcon, GlobeIcon } from '@storybook/icons'; import type { RefType } from './types'; import type { getStateType } from '../../utils/tree'; @@ -159,7 +160,7 @@ const CurrentVersion: FC<CurrentVersionProps> = ({ url, versions }) => { return ( <Version> <span>{currentVersionId}</span> - <Icons icon="arrowdown" /> + <ChevronDownIcon /> </Version> ); }; @@ -204,7 +205,7 @@ export const RefIndicator = React.memo( } > <IndicatorClickTarget data-action="toggle-indicator" aria-label="toggle indicator"> - <Icons icon="globe" /> + <GlobeIcon /> </IndicatorClickTarget> </WithTooltip> diff --git a/code/ui/manager/src/components/sidebar/Refs.stories.tsx b/code/ui/manager/src/components/sidebar/Refs.stories.tsx index f765f62daff0..3a880bd82cac 100644 --- a/code/ui/manager/src/components/sidebar/Refs.stories.tsx +++ b/code/ui/manager/src/components/sidebar/Refs.stories.tsx @@ -5,15 +5,17 @@ import { Ref } from './Refs'; import { standardData as standardHeaderData } from './Heading.stories'; import { mockDataset } from './mockdata'; import type { RefType } from './types'; +import { IconSymbols } from './IconSymbols'; export default { component: Ref, title: 'Sidebar/Refs', excludeStories: /.*Data$/, - parameters: { layout: 'fullscreen', withSymbols: true }, + parameters: { layout: 'fullscreen' }, decorators: [ (storyFn: any) => ( <ManagerContext.Provider value={{ state: { docsOptions: {} } } as any}> + <IconSymbols /> {storyFn()} </ManagerContext.Provider> ), diff --git a/code/ui/manager/src/components/sidebar/Search.stories.tsx b/code/ui/manager/src/components/sidebar/Search.stories.tsx index a85b50147407..8eb50c9832c9 100644 --- a/code/ui/manager/src/components/sidebar/Search.stories.tsx +++ b/code/ui/manager/src/components/sidebar/Search.stories.tsx @@ -10,6 +10,7 @@ import { SearchResults } from './SearchResults'; import { noResults } from './SearchResults.stories'; import { DEFAULT_REF_ID } from './Sidebar'; import type { Selection } from './types'; +import { IconSymbols } from './IconSymbols'; const refId = DEFAULT_REF_ID; const data = { [refId]: { id: refId, url: '/', index, previewInitialized: true } }; @@ -22,8 +23,15 @@ const getLastViewed = () => const meta = { component: Search, title: 'Sidebar/Search', - parameters: { layout: 'fullscreen', withSymbols: true }, - decorators: [(storyFn: any) => <div style={{ padding: 20, maxWidth: '230px' }}>{storyFn()}</div>], + parameters: { layout: 'fullscreen' }, + decorators: [ + (storyFn: any) => ( + <div style={{ padding: 20, maxWidth: '230px' }}> + <IconSymbols /> + {storyFn()} + </div> + ), + ], } satisfies Meta<typeof Search>; export default meta; diff --git a/code/ui/manager/src/components/sidebar/SearchResults.stories.tsx b/code/ui/manager/src/components/sidebar/SearchResults.stories.tsx index c92ef644cc48..6e464e9122be 100644 --- a/code/ui/manager/src/components/sidebar/SearchResults.stories.tsx +++ b/code/ui/manager/src/components/sidebar/SearchResults.stories.tsx @@ -5,14 +5,20 @@ import { mockDataset } from './mockdata'; import { SearchResults } from './SearchResults'; import type { CombinedDataset, Refs, SearchItem } from './types'; import { searchItem } from '../../utils/tree'; +import { IconSymbols } from './IconSymbols'; export default { component: SearchResults, title: 'Sidebar/SearchResults', includeStories: /^[A-Z]/, - parameters: { layout: 'fullscreen', withSymbols: true }, + parameters: { layout: 'fullscreen' }, decorators: [ - (storyFn: any) => <div style={{ padding: '0 20px', maxWidth: '230px' }}>{storyFn()}</div>, + (storyFn: any) => ( + <div style={{ padding: '0 20px', maxWidth: '230px' }}> + <IconSymbols /> + {storyFn()} + </div> + ), ], }; diff --git a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx index 349dc2fe60c4..1d9c02d914a4 100644 --- a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx +++ b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx @@ -4,13 +4,15 @@ import type { IndexHash, State } from '@storybook/manager-api'; import { types } from '@storybook/manager-api'; import type { StoryObj, Meta } from '@storybook/react'; import { within, userEvent } from '@storybook/testing-library'; -import { Button, IconButton, Icons } from '@storybook/components'; +import { Button, IconButton } from '@storybook/components'; +import { FaceHappyIcon } from '@storybook/icons'; import { Sidebar, DEFAULT_REF_ID } from './Sidebar'; import { standardData as standardHeaderData } from './Heading.stories'; import * as ExplorerStories from './Explorer.stories'; import { mockDataset } from './mockdata'; import type { RefType } from './types'; import { LayoutProvider } from '../layout/LayoutProvider'; +import { IconSymbols } from './IconSymbols'; const wait = (ms: number) => new Promise<void>((resolve) => { @@ -21,10 +23,15 @@ const meta = { component: Sidebar, title: 'Sidebar/Sidebar', excludeStories: /.*Data$/, - parameters: { layout: 'fullscreen', withSymbols: true }, + parameters: { layout: 'fullscreen' }, decorators: [ ExplorerStories.default.decorators[0], - (storyFn) => <LayoutProvider>{storyFn()}</LayoutProvider>, + (storyFn) => ( + <LayoutProvider> + <IconSymbols /> + {storyFn()} + </LayoutProvider> + ), ], } as Meta<typeof Sidebar>; @@ -265,7 +272,7 @@ export const Bottom: Story = { type: types.experimental_SIDEBAR_BOTTOM, render: () => ( <Button> - <Icons icon="facehappy" /> + <FaceHappyIcon /> Custom addon A </Button> ), @@ -276,7 +283,7 @@ export const Bottom: Story = { render: () => ( <Button> {' '} - <Icons icon="facehappy" /> + <FaceHappyIcon /> Custom addon B </Button> ), @@ -287,7 +294,7 @@ export const Bottom: Story = { render: () => ( <IconButton> {' '} - <Icons icon="facehappy" /> + <FaceHappyIcon /> </IconButton> ), }, diff --git a/code/ui/manager/src/components/sidebar/Tree.stories.tsx b/code/ui/manager/src/components/sidebar/Tree.stories.tsx index 6889d23c56ac..383468de2e40 100644 --- a/code/ui/manager/src/components/sidebar/Tree.stories.tsx +++ b/code/ui/manager/src/components/sidebar/Tree.stories.tsx @@ -27,7 +27,6 @@ const meta = { excludeStories: /.*Data$/, parameters: { layout: 'fullscreen', - withSymbols: true, theme: 'light', viewport: { defaultViewport: 'sized', diff --git a/code/ui/manager/src/components/sidebar/Tree.tsx b/code/ui/manager/src/components/sidebar/Tree.tsx index dd50c5085115..b238cf7eb526 100644 --- a/code/ui/manager/src/components/sidebar/Tree.tsx +++ b/code/ui/manager/src/components/sidebar/Tree.tsx @@ -8,12 +8,13 @@ import type { API, } from '@storybook/manager-api'; import { styled } from '@storybook/theming'; -import { Button, Icons, TooltipLinkList, WithTooltip } from '@storybook/components'; +import { Button, TooltipLinkList, WithTooltip } from '@storybook/components'; import { transparentize } from 'polished'; import type { MutableRefObject } from 'react'; import React, { useCallback, useMemo, useRef } from 'react'; import { PRELOAD_ENTRIES } from '@storybook/core-events'; +import { ExpandAltIcon, CollapseIcon as CollapseIconSvg } from '@storybook/icons'; import { ComponentNode, DocumentNode, @@ -37,6 +38,7 @@ import { } from '../../utils/tree'; import { statusMapping, getHighestStatus, getGroupStatus } from '../../utils/status'; import { useLayout } from '../layout/LayoutProvider'; +import { IconSymbols } from './IconSymbols'; export const Action = styled.button<{ height?: number; width?: number }>( ({ theme, height, width }) => ({ @@ -304,7 +306,7 @@ const Node = React.memo<NodeProps>(function Node({ setFullyExpanded(); }} > - <Icons icon={isFullyExpanded ? 'collapse' : 'expandalt'} /> + {isFullyExpanded ? <CollapseIconSvg /> : <ExpandAltIcon />} </Action> )} </RootNode> @@ -507,6 +509,7 @@ export const Tree = React.memo<{ return ( <Container ref={containerRef} hasOrphans={isMain && orphanIds.length > 0}> + <IconSymbols /> {collapsedItems.map((itemId) => { const item = collapsedData[itemId]; const id = createId(itemId, refId); diff --git a/code/ui/manager/src/components/sidebar/TreeNode.stories.tsx b/code/ui/manager/src/components/sidebar/TreeNode.stories.tsx index 78f7de5739fb..9bdd7b35c7d6 100644 --- a/code/ui/manager/src/components/sidebar/TreeNode.stories.tsx +++ b/code/ui/manager/src/components/sidebar/TreeNode.stories.tsx @@ -3,11 +3,20 @@ import { HighlightStyles } from './HighlightStyles'; import { LeafNodeStyleWrapper } from './Tree'; import { ComponentNode, DocumentNode, GroupNode, StoryNode } from './TreeNode'; +import { IconSymbols } from './IconSymbols'; export default { title: 'Sidebar/TreeNode', - parameters: { layout: 'fullscreen', withSymbols: true }, + parameters: { layout: 'fullscreen' }, component: StoryNode, + decorators: [ + (StoryFn: any) => ( + <> + <IconSymbols /> + <StoryFn /> + </> + ), + ], }; export const Types = () => ( diff --git a/code/ui/manager/src/components/sidebar/TreeNode.tsx b/code/ui/manager/src/components/sidebar/TreeNode.tsx index b4c662b358f3..0d9af0c9cda3 100644 --- a/code/ui/manager/src/components/sidebar/TreeNode.tsx +++ b/code/ui/manager/src/components/sidebar/TreeNode.tsx @@ -1,9 +1,8 @@ import { styled } from '@storybook/theming'; -import type { Color, Theme } from '@storybook/theming'; -import { Icons } from '@storybook/components'; import { transparentize } from 'polished'; import type { FC, ComponentProps } from 'react'; import React from 'react'; +import { UseSymbol } from './IconSymbols'; export const CollapseIcon = styled.span<{ isExpanded: boolean }>(({ theme, isExpanded }) => ({ display: 'inline-block', @@ -19,38 +18,21 @@ export const CollapseIcon = styled.span<{ isExpanded: boolean }>(({ theme, isExp transition: 'transform .1s ease-out', })); -const iconColors = { - light: { - document: '#ff8300', - docsModeDocument: 'secondary', - bookmarkhollow: 'seafoam', - component: 'secondary', - folder: 'ultraviolet', - }, - dark: { - document: 'gold', - docsModeDocument: 'secondary', - bookmarkhollow: 'seafoam', - component: 'secondary', - folder: 'primary', - }, -}; -const isColor = (theme: Theme, color: string): color is keyof Color => color in theme.color; -const TypeIcon = styled(Icons)<{ docsMode?: boolean }>( - { +const TypeIcon = styled.svg<{ type: 'component' | 'story' | 'group' | 'document' }>( + ({ theme, type }) => ({ width: 12, height: 12, marginRight: 5, flex: '0 0 auto', - }, - - // @ts-expect-error (TODO) - ({ theme, icon, symbol = icon, docsMode }) => { - const colors = theme.base === 'dark' ? iconColors.dark : iconColors.light; - const colorKey = docsMode && symbol === 'document' ? 'docsModeDocument' : symbol; - const color = colors[colorKey as keyof typeof colors]; - return { color: isColor(theme, color) ? theme.color[color] : color }; - } + color: (() => { + if (type === 'group') + return theme.base === 'dark' ? theme.color.primary : theme.color.ultraviolet; + if (type === 'component') return theme.color.secondary; + if (type === 'document') return theme.base === 'dark' ? theme.color.gold : '#ff8300'; + if (type === 'story') return theme.color.seafoam; + return 'currentColor'; + })(), + }) ); const BranchNode = styled.button<{ @@ -161,7 +143,9 @@ export const GroupNode: FC< <BranchNode isExpandable={isExpandable} tabIndex={-1} {...props}> <IconsWrapper> {isExpandable ? <CollapseIcon isExpanded={isExpanded} /> : null} - <TypeIcon icon="folder" useSymbol color="primary" /> + <TypeIcon viewBox="0 0 14 14" width="14" height="14" type="group"> + <UseSymbol type="group" /> + </TypeIcon> </IconsWrapper> {children} </BranchNode> @@ -174,7 +158,9 @@ export const ComponentNode: FC<ComponentProps<typeof BranchNode>> = React.memo( <BranchNode isExpandable={isExpandable} tabIndex={-1} {...props}> <IconsWrapper> {isExpandable && <CollapseIcon isExpanded={isExpanded} />} - <TypeIcon icon="component" useSymbol color="secondary" /> + <TypeIcon viewBox="0 0 14 14" width="12" height="12" type="component"> + <UseSymbol type="component" /> + </TypeIcon> </IconsWrapper> {children} </BranchNode> @@ -187,7 +173,9 @@ export const DocumentNode: FC<ComponentProps<typeof LeafNode> & { docsMode: bool return ( <LeafNode tabIndex={-1} {...props}> <IconsWrapper> - <TypeIcon icon="document" useSymbol docsMode={docsMode} /> + <TypeIcon viewBox="0 0 14 14" width="12" height="12" type="document"> + <UseSymbol type="document" /> + </TypeIcon> </IconsWrapper> {children} </LeafNode> @@ -203,7 +191,9 @@ export const StoryNode: FC<ComponentProps<typeof LeafNode>> = React.memo(functio return ( <LeafNode tabIndex={-1} {...props}> <IconsWrapper> - <TypeIcon icon="bookmarkhollow" useSymbol /> + <TypeIcon viewBox="0 0 14 14" width="12" height="12" type="story"> + <UseSymbol type="story" /> + </TypeIcon> </IconsWrapper> {children} </LeafNode> diff --git a/code/ui/manager/src/container/Menu.tsx b/code/ui/manager/src/container/Menu.tsx index c6edb7078689..9646acf2cddf 100644 --- a/code/ui/manager/src/container/Menu.tsx +++ b/code/ui/manager/src/container/Menu.tsx @@ -1,10 +1,11 @@ import type { FC } from 'react'; import React, { useCallback, useMemo } from 'react'; -import { Badge, Icons } from '@storybook/components'; +import { Badge } from '@storybook/components'; import type { API, State } from '@storybook/manager-api'; import { shortcutToHumanString } from '@storybook/manager-api'; import { styled, useTheme } from '@storybook/theming'; +import { CheckIcon } from '@storybook/icons'; const focusableUIElements = { storySearchField: 'storybook-explorer-searchfield', @@ -103,7 +104,7 @@ export const useMenu = ( onClick: () => api.toggleNav(), active: isNavShown, right: enableShortcuts ? <Shortcut keys={shortcutKeys.toggleNav} /> : null, - left: isNavShown ? <Icons icon="check" /> : null, + left: isNavShown ? <CheckIcon /> : null, }), [api, enableShortcuts, shortcutKeys, isNavShown] ); @@ -115,7 +116,7 @@ export const useMenu = ( onClick: () => api.toggleToolbar(), active: showToolbar, right: enableShortcuts ? <Shortcut keys={shortcutKeys.toolbar} /> : null, - left: showToolbar ? <Icons icon="check" /> : null, + left: showToolbar ? <CheckIcon /> : null, }), [api, enableShortcuts, shortcutKeys, showToolbar] ); @@ -127,7 +128,7 @@ export const useMenu = ( onClick: () => api.togglePanel(), active: isPanelShown, right: enableShortcuts ? <Shortcut keys={shortcutKeys.togglePanel} /> : null, - left: isPanelShown ? <Icons icon="check" /> : null, + left: isPanelShown ? <CheckIcon /> : null, }), [api, enableShortcuts, shortcutKeys, isPanelShown] ); @@ -149,7 +150,7 @@ export const useMenu = ( onClick: () => api.toggleFullscreen(), active: isFullscreen, right: enableShortcuts ? <Shortcut keys={shortcutKeys.fullScreen} /> : null, - left: isFullscreen ? <Icons icon="check" /> : null, + left: isFullscreen ? <CheckIcon /> : null, }), [api, enableShortcuts, shortcutKeys, isFullscreen] ); diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts index ef2523f0e06a..873ecae1a26e 100644 --- a/code/ui/manager/src/globals/exports.ts +++ b/code/ui/manager/src/globals/exports.ts @@ -186,6 +186,231 @@ export default { 'stringifyQuery', 'useNavigate', ], + '@storybook/icons': [ + 'AccessibilityAltIcon', + 'AccessibilityIcon', + 'AddIcon', + 'AdminIcon', + 'AlertAltIcon', + 'AlertIcon', + 'AppleIcon', + 'ArrowDownIcon', + 'ArrowLeftIcon', + 'ArrowRightIcon', + 'ArrowSolidDownIcon', + 'ArrowSolidLeftIcon', + 'ArrowSolidRightIcon', + 'ArrowSolidUpIcon', + 'ArrowUpIcon', + 'AzureDevOpsIcon', + 'BackIcon', + 'BasketIcon', + 'BatchAcceptIcon', + 'BatchDenyIcon', + 'BeakerIcon', + 'BellIcon', + 'BitbucketIcon', + 'BoldIcon', + 'BookIcon', + 'BookmarkHollowIcon', + 'BookmarkIcon', + 'BottomBarIcon', + 'BottomBarToggleIcon', + 'BoxIcon', + 'BranchIcon', + 'BrowserIcon', + 'ButtonIcon', + 'CPUIcon', + 'CalendarIcon', + 'CameraIcon', + 'CategoryIcon', + 'CertificateIcon', + 'ChangedIcon', + 'ChatIcon', + 'CheckIcon', + 'ChevronDownIcon', + 'ChevronLeftIcon', + 'ChevronRightIcon', + 'ChevronUpIcon', + 'ChromaticIcon', + 'ChromeIcon', + 'CircleHollowIcon', + 'CircleIcon', + 'ClearIcon', + 'CloseAltIcon', + 'CloseIcon', + 'CloudHollowIcon', + 'CloudIcon', + 'CogIcon', + 'CollapseIcon', + 'CommandIcon', + 'CommentAddIcon', + 'CommentIcon', + 'CommentsIcon', + 'CommitIcon', + 'CompassIcon', + 'ComponentDrivenIcon', + 'ComponentIcon', + 'ContrastIcon', + 'ControlsIcon', + 'CopyIcon', + 'CreditIcon', + 'CrossIcon', + 'DashboardIcon', + 'DatabaseIcon', + 'DeleteIcon', + 'DiamondIcon', + 'DirectionIcon', + 'DiscordIcon', + 'DocChartIcon', + 'DocListIcon', + 'DocumentIcon', + 'DownloadIcon', + 'DragIcon', + 'EditIcon', + 'EllipsisIcon', + 'EmailIcon', + 'ExpandAltIcon', + 'ExpandIcon', + 'EyeCloseIcon', + 'EyeIcon', + 'FaceHappyIcon', + 'FaceNeutralIcon', + 'FaceSadIcon', + 'FacebookIcon', + 'FailedIcon', + 'FastForwardIcon', + 'FigmaIcon', + 'FilterIcon', + 'FlagIcon', + 'FolderIcon', + 'FormIcon', + 'GDriveIcon', + 'GithubIcon', + 'GitlabIcon', + 'GlobeIcon', + 'GoogleIcon', + 'GraphBarIcon', + 'GraphLineIcon', + 'GraphqlIcon', + 'GridAltIcon', + 'GridIcon', + 'GrowIcon', + 'HeartHollowIcon', + 'HeartIcon', + 'HomeIcon', + 'HourglassIcon', + 'InfoIcon', + 'ItalicIcon', + 'JumpToIcon', + 'KeyIcon', + 'LightningIcon', + 'LightningOffIcon', + 'LinkBrokenIcon', + 'LinkIcon', + 'LinkedinIcon', + 'LinuxIcon', + 'ListOrderedIcon', + 'ListUnorderedIcon', + 'LocationIcon', + 'LockIcon', + 'MarkdownIcon', + 'MarkupIcon', + 'MediumIcon', + 'MemoryIcon', + 'MenuIcon', + 'MenuReverseIcon', + 'MergeIcon', + 'MirrorIcon', + 'MobileIcon', + 'MoonIcon', + 'NutIcon', + 'OutboxIcon', + 'OutlineIcon', + 'PaintBrushIcon', + 'PaperClipIcon', + 'ParagraphIcon', + 'PassedIcon', + 'PhoneIcon', + 'PhotoDragIcon', + 'PhotoIcon', + 'PinAltIcon', + 'PinIcon', + 'PlayBackIcon', + 'PlayIcon', + 'PlayNextIcon', + 'PlusIcon', + 'PointerDefaultIcon', + 'PointerHandIcon', + 'PowerIcon', + 'PrintIcon', + 'ProceedIcon', + 'ProfileIcon', + 'PullRequestIcon', + 'QuestionIcon', + 'RSSIcon', + 'RedirectIcon', + 'ReduxIcon', + 'RefreshIcon', + 'ReplyIcon', + 'RepoIcon', + 'RequestChangeIcon', + 'RewindIcon', + 'RulerIcon', + 'SearchIcon', + 'ShareAltIcon', + 'ShareIcon', + 'ShieldIcon', + 'SideBySideIcon', + 'SidebarAltIcon', + 'SidebarAltToggleIcon', + 'SidebarIcon', + 'SidebarToggleIcon', + 'SpeakerIcon', + 'StackedIcon', + 'StarHollowIcon', + 'StarIcon', + 'StickerIcon', + 'StopAltIcon', + 'StopIcon', + 'StorybookIcon', + 'StructureIcon', + 'SubtractIcon', + 'SunIcon', + 'SupportIcon', + 'SwitchAltIcon', + 'SyncIcon', + 'TabletIcon', + 'ThumbsUpIcon', + 'TimeIcon', + 'TimerIcon', + 'TransferIcon', + 'TrashIcon', + 'TwitterIcon', + 'TypeIcon', + 'UbuntuIcon', + 'UndoIcon', + 'UnfoldIcon', + 'UnlockIcon', + 'UnpinIcon', + 'UploadIcon', + 'UserAddIcon', + 'UserAltIcon', + 'UserIcon', + 'UsersIcon', + 'VSCodeIcon', + 'VerifiedIcon', + 'VideoIcon', + 'WandIcon', + 'WatchIcon', + 'WindowsIcon', + 'WrenchIcon', + 'YoutubeIcon', + 'ZoomIcon', + 'ZoomOutIcon', + 'ZoomResetIcon', + 'iconList', + ], '@storybook/theming': [ 'CacheProvider', 'ClassNames', diff --git a/code/ui/manager/src/globals/runtime.ts b/code/ui/manager/src/globals/runtime.ts index 5850699f171d..cad48006923f 100644 --- a/code/ui/manager/src/globals/runtime.ts +++ b/code/ui/manager/src/globals/runtime.ts @@ -4,6 +4,7 @@ import * as REACTDOM from 'react-dom'; import * as STORYBOOKCOMPONENTS from '@storybook/components'; import * as STORYBOOKCHANNELS from '@storybook/channels'; import * as STORYBOOKEVENTS from '@storybook/core-events'; +import * as STORYBOOKICONS from '@storybook/icons'; import * as STORYBOOKROUTER from '@storybook/router'; import * as STORYBOOKTHEMING from '@storybook/theming'; import * as STORYBOOKMANAGERAPI from '@storybook/manager-api'; @@ -19,6 +20,7 @@ export const values: Required<Record<keyof typeof Keys, any>> = { '@storybook/channels': STORYBOOKCHANNELS, '@storybook/core-events': STORYBOOKEVENTS, '@storybook/router': STORYBOOKROUTER, + '@storybook/icons': STORYBOOKICONS, '@storybook/theming': STORYBOOKTHEMING, '@storybook/api': STORYBOOKMANAGERAPI, // deprecated, remove in 8.0 '@storybook/manager-api': STORYBOOKMANAGERAPI, diff --git a/code/ui/manager/src/globals/types.ts b/code/ui/manager/src/globals/types.ts index 2861e45f632a..3a380d11d875 100644 --- a/code/ui/manager/src/globals/types.ts +++ b/code/ui/manager/src/globals/types.ts @@ -10,6 +10,7 @@ export enum Keys { '@storybook/router' = '__STORYBOOKROUTER__', '@storybook/theming' = '__STORYBOOKTHEMING__', '@storybook/api' = '__STORYBOOKAPI__', // deprecated, remove in 8.0 + '@storybook/icons' = '__STORYBOOKICONS__', '@storybook/manager-api' = '__STORYBOOKAPI__', '@storybook/addons' = '__STORYBOOKADDONS__', '@storybook/client-logger' = '__STORYBOOKCLIENTLOGGER__', diff --git a/code/ui/manager/src/settings/About.tsx b/code/ui/manager/src/settings/About.tsx index bd65795a66b4..797af9dcc732 100644 --- a/code/ui/manager/src/settings/About.tsx +++ b/code/ui/manager/src/settings/About.tsx @@ -2,7 +2,8 @@ import type { FC } from 'react'; import React from 'react'; import { styled } from '@storybook/theming'; -import { Button as BaseButton, Icons, Link, StorybookIcon } from '@storybook/components'; +import { Button as BaseButton, Link, StorybookIcon } from '@storybook/components'; +import { DocumentIcon, GithubIcon } from '@storybook/icons'; import { UpgradeBlock } from '../components/upgrade/UpgradeBlock'; const Header = styled.header(({ theme }) => ({ @@ -74,14 +75,14 @@ const AboutScreen: FC<{ onNavigateToWhatsNew?: () => void }> = ({ onNavigateToWh <div style={{ marginBottom: 12 }}> <SquareButton asChild style={{ marginRight: 12 }}> <a href="https://github.com/storybookjs/storybook"> - <Icons icon="github" /> + <GithubIcon /> GitHub </a> </SquareButton> <SquareButton asChild> <a href="https://storybook.js.org/docs"> - <Icons icon="document" style={{ display: 'inline', marginRight: 5 }} /> + <DocumentIcon style={{ display: 'inline', marginRight: 5 }} /> Documentation </a> </SquareButton> diff --git a/code/ui/manager/src/settings/index.tsx b/code/ui/manager/src/settings/index.tsx index c0c359de953e..eec87d2ae18e 100644 --- a/code/ui/manager/src/settings/index.tsx +++ b/code/ui/manager/src/settings/index.tsx @@ -1,5 +1,5 @@ import { useStorybookApi, useStorybookState, types } from '@storybook/manager-api'; -import { IconButton, Icons, FlexBar, TabBar, TabButton, ScrollArea } from '@storybook/components'; +import { IconButton, FlexBar, TabBar, TabButton, ScrollArea } from '@storybook/components'; import { Location, Route } from '@storybook/router'; import { styled } from '@storybook/theming'; import { global } from '@storybook/global'; @@ -7,6 +7,7 @@ import type { FC, SyntheticEvent } from 'react'; import React, { Fragment } from 'react'; import type { Addon_PageType } from '@storybook/types'; +import { CloseIcon } from '@storybook/icons'; import { AboutPage } from './AboutPage'; import { ShortcutsPage } from './ShortcutsPage'; import { WhatsNewPage } from './whats_new_page'; @@ -84,7 +85,7 @@ const Pages: FC<{ }} title="Close settings page" > - <Icons icon="close" /> + <CloseIcon /> </IconButton> </FlexBar> <Content vertical horizontal={false}> diff --git a/code/ui/manager/src/settings/whats_new.tsx b/code/ui/manager/src/settings/whats_new.tsx index b9e11aea2a7b..ee6aba4e6c53 100644 --- a/code/ui/manager/src/settings/whats_new.tsx +++ b/code/ui/manager/src/settings/whats_new.tsx @@ -1,9 +1,10 @@ import type { ComponentProps, FC } from 'react'; import React, { Fragment, useEffect, useState } from 'react'; import { styled, useTheme } from '@storybook/theming'; -import { Button, IconButton, Icons, Loader } from '@storybook/components'; +import { Button, IconButton, Loader } from '@storybook/components'; import { useStorybookApi, useStorybookState } from '@storybook/manager-api'; import { global } from '@storybook/global'; +import { EyeCloseIcon, EyeIcon, HeartIcon, AlertIcon as AlertIconSvg } from '@storybook/icons'; const Centered = styled.div({ top: '50%', @@ -77,7 +78,7 @@ export const WhatsNewFooter = ({ return ( <Container> <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}> - <Icons icon="heart" color={theme.color.mediumdark} /> + <HeartIcon color={theme.color.mediumdark} /> <div>Share this with your team.</div> <CopyButton onClick={copyLink} small> {copyText} @@ -86,12 +87,12 @@ export const WhatsNewFooter = ({ <ToggleNotificationButton onClick={onToggleNotifications}> {isNotificationsEnabled ? ( <> - <Icons icon="eyeclose" /> + <EyeCloseIcon />  Hide notifications </> ) : ( <> - <Icons icon="eye" /> + <EyeIcon />  Show notifications </> )} @@ -117,8 +118,8 @@ const Iframe = styled.iframe<{ isLoaded: boolean }>( ({ isLoaded }) => ({ visibility: isLoaded ? 'visible' : 'hidden' }) ); -const AlertIcon = styled(((props) => <Icons icon="alert" {...props} />) as FC< - Omit<ComponentProps<typeof Icons>, 'icon'> +const AlertIcon = styled(((props) => <AlertIconSvg {...props} />) as FC< + Omit<ComponentProps<typeof AlertIconSvg>, 'icon'> >)(({ theme }) => ({ color: theme.textMutedColor, width: 32, diff --git a/code/ui/manager/src/typings.d.ts b/code/ui/manager/src/typings.d.ts index 2ff3df07e63e..a7a6a5c90054 100644 --- a/code/ui/manager/src/typings.d.ts +++ b/code/ui/manager/src/typings.d.ts @@ -23,6 +23,7 @@ declare var __STORYBOOKCOREEVENTS__: any; declare var __STORYBOOKROUTER__: any; declare var __STORYBOOKTHEMING__: any; declare var __STORYBOOKAPI__: any; +declare var __STORYBOOKICONS__: any; declare var __STORYBOOKADDONS__: any; declare var __STORYBOOKCLIENTLOGGER__: any; declare var __STORYBOOK_ADDONS_CHANNEL__: any; diff --git a/code/yarn.lock b/code/yarn.lock index 4448152651e6..90773195c903 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5259,6 +5259,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 + "@storybook/icons": ^1.2.1 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" @@ -5322,6 +5323,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 + "@storybook/icons": ^1.2.1 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" @@ -5472,6 +5474,7 @@ __metadata: "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 + "@storybook/icons": ^1.2.1 "@storybook/instrumenter": "workspace:*" "@storybook/jest": next "@storybook/manager-api": "workspace:*" @@ -5568,6 +5571,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 + "@storybook/icons": ^1.2.1 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" @@ -5592,6 +5596,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 + "@storybook/icons": ^1.2.1 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" @@ -5644,6 +5649,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" + "@storybook/icons": ^1.2.1 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" @@ -5690,6 +5696,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 + "@storybook/icons": ^1.2.1 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" @@ -5857,6 +5864,7 @@ __metadata: "@storybook/csf": ^0.1.0 "@storybook/docs-tools": "workspace:*" "@storybook/global": ^5.0.0 + "@storybook/icons": ^1.2.1 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" @@ -6166,7 +6174,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/csf": ^0.1.0 "@storybook/global": ^5.0.0 - "@storybook/icons": ^1.1.6 + "@storybook/icons": ^1.2.1 "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" "@types/react-syntax-highlighter": 11.0.5 @@ -6514,13 +6522,13 @@ __metadata: languageName: unknown linkType: soft -"@storybook/icons@npm:^1.1.6": - version: 1.1.7 - resolution: "@storybook/icons@npm:1.1.7" +"@storybook/icons@npm:^1.2.1": + version: 1.2.1 + resolution: "@storybook/icons@npm:1.2.1" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 5bb97f948f2a1cfc067a120f8e17004cdf9cdef0d08558ec51659e4e4d4b1620c76ced6d15a57d84aed888c664a0f9daa7a6e7b4ef22302d95f3228aa627bc83 + checksum: 3bb3b350cf29d6ad81d8922a1f8f0d15d14bde80f99a7a3d2c6810f2d8eb626e55c3b8e90e138ccc8de5f59b28a492f1b84cb0fff4f964faf5819e2595510791 languageName: node linkType: hard @@ -6619,6 +6627,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 + "@storybook/icons": ^1.2.1 "@storybook/manager-api": "workspace:*" "@storybook/router": "workspace:*" "@storybook/theming": "workspace:*" diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md index db951af33832..502890f04411 100644 --- a/docs/addons/writing-addons.md +++ b/docs/addons/writing-addons.md @@ -144,7 +144,7 @@ export const Tool = memo(function MyAddonSelector() { title="Apply outlines to the preview" onClick={toggleMyTool} > - <Icons icon="lightning" /> + <LightningIcon /> </IconButton> ); }); diff --git a/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx b/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx index bc9e562e9b78..c3b49d30c4fe 100644 --- a/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx +++ b/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx @@ -34,7 +34,7 @@ const ExampleToolbar = () => { title="Show a Storybook toolbar" onClick={toggleOutline} > - <Icons icon="outline" /> + <OutlineIcon /> </IconButton> ); }; diff --git a/docs/snippets/common/storybook-addon-tool-initial-setup.ts.mdx b/docs/snippets/common/storybook-addon-tool-initial-setup.ts.mdx index 7300ceffa32a..47ed72db11bb 100644 --- a/docs/snippets/common/storybook-addon-tool-initial-setup.ts.mdx +++ b/docs/snippets/common/storybook-addon-tool-initial-setup.ts.mdx @@ -36,7 +36,7 @@ export const Tool = memo(function MyAddonSelector() { title="Apply outlines to the preview" onClick={toggleMyTool} > - <Icons icon="lightning" /> + <LightningIcon /> </IconButton> ); }); diff --git a/docs/snippets/common/storybook-addon-toolbar-example.js.mdx b/docs/snippets/common/storybook-addon-toolbar-example.js.mdx index 553dc9870960..5877b8cad7a8 100644 --- a/docs/snippets/common/storybook-addon-toolbar-example.js.mdx +++ b/docs/snippets/common/storybook-addon-toolbar-example.js.mdx @@ -16,7 +16,7 @@ addons.register('my/toolbar', () => { match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)), render: ({ active }) => ( <IconButton active={active} title="Show a Storybook toolbar"> - <Icons icon="outline" /> + <OutlineIcon /> </IconButton> ), }); diff --git a/docs/snippets/common/storybook-addon-toolkit-toolbar-example.toolbar.ts.mdx b/docs/snippets/common/storybook-addon-toolkit-toolbar-example.toolbar.ts.mdx index 7894ddad1b9f..18824f3807f9 100644 --- a/docs/snippets/common/storybook-addon-toolkit-toolbar-example.toolbar.ts.mdx +++ b/docs/snippets/common/storybook-addon-toolkit-toolbar-example.toolbar.ts.mdx @@ -31,7 +31,7 @@ export const Tool = memo(function MyAddonSelector() { return ( <IconButton key={TOOL_ID} active={isActive} title="Enable my addon" onClick={toggleMyTool}> - <Icons icon="lightning" /> + <LightningIcon /> </IconButton> ); }); diff --git a/docs/snippets/common/storybook-addons-api-getchannel.js.mdx b/docs/snippets/common/storybook-addons-api-getchannel.js.mdx index 0478812b03dd..2f71041c707d 100644 --- a/docs/snippets/common/storybook-addons-api-getchannel.js.mdx +++ b/docs/snippets/common/storybook-addons-api-getchannel.js.mdx @@ -34,7 +34,7 @@ const ExampleToolbar = () => { title="Show the toolbar addon" onClick={toggleToolbarAddon} > - <Icons icon="outline" /> + <OutlineIcon /> </IconButton> ); }; diff --git a/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx b/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx index 953414806971..2795207f64b8 100644 --- a/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx +++ b/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx @@ -28,7 +28,7 @@ export const Tool = () => { title="Enable my addon" onClick={() => setState('Example')} > - <Icons icon="lightning" /> + <LightningIcon /> </IconButton> ); }; diff --git a/docs/snippets/common/storybook-addons-api-useapi.js.mdx b/docs/snippets/common/storybook-addons-api-useapi.js.mdx index f3b5b2091803..1550e7812008 100644 --- a/docs/snippets/common/storybook-addons-api-useapi.js.mdx +++ b/docs/snippets/common/storybook-addons-api-useapi.js.mdx @@ -26,7 +26,7 @@ export const Panel = () => { return ( <IconButton key="custom-toolbar" active="true" title="Show a toolbar addon"> - <Icons icon="arrowdown" /> + <ChevronDownIcon /> </IconButton> ); }; diff --git a/scripts/verdaccio.yaml b/scripts/verdaccio.yaml index aa59cf7d5e78..7e5861715ffd 100644 --- a/scripts/verdaccio.yaml +++ b/scripts/verdaccio.yaml @@ -112,6 +112,10 @@ packages: access: $all publish: $all proxy: npmjs + '@storybook/icons': + access: $all + publish: $all + proxy: npmjs # storybook packages are NOT proxied to global registry # allowing us to republish any version during tests