From dfb3b0ea6fc886bc5ceb8816012509aedfd36fb4 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 9 Oct 2023 18:06:05 +0100 Subject: [PATCH 01/33] First pass at removing old icons --- code/ui/components/package.json | 2 +- .../src/components/icon/icon.stories.tsx | 9 +- .../components/src/components/icon/icon.tsx | 261 ++- .../components/src/components/icon/icons.tsx | 1463 ----------------- .../ui/components/src/components/icon/svg.tsx | 24 - code/ui/components/src/index.ts | 2 +- code/yarn.lock | 10 +- 7 files changed, 234 insertions(+), 1537 deletions(-) delete mode 100644 code/ui/components/src/components/icon/icons.tsx delete mode 100644 code/ui/components/src/components/icon/svg.tsx diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 4ae6bbe3e2f7..2033adccb93a 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -72,7 +72,7 @@ "devDependencies": { "@chromaui/addon-visual-tests": "^0.0.77", "@popperjs/core": "^2.6.0", - "@storybook/icons": "^1.1.6", + "@storybook/icons": "^1.1.7", "@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/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..a662ab2291b6 100644 --- a/code/ui/components/src/components/icon/icon.tsx +++ b/code/ui/components/src/components/icon/icon.tsx @@ -1,51 +1,236 @@ -import type { FunctionComponent, ComponentProps } from 'react'; +import type { FC } from 'react'; import React, { memo } from 'react'; -import { styled } from '@storybook/theming'; -import type { IconKey } from './icons'; -import { icons } from './icons'; +import * as StorybookIcons from '@storybook/icons'; -const Svg = styled.svg` - display: inline-block; - shape-rendering: inherit; - vertical-align: middle; - fill: currentColor; - - path { - fill: currentColor; - } -`; - -export interface IconsProps extends ComponentProps { +export interface IconsProps extends HTMLOrSVGElement { icon: IconType; useSymbol?: boolean; } -export const Icons: FunctionComponent = ({ icon, useSymbol, ...props }: IconsProps) => { - return ( - - {useSymbol ? : icons[icon]} - - ); +export const Icons: FC = ({ icon, useSymbol, ...props }: IconsProps) => { + type NewIconTypes = typeof icons[keyof typeof icons]; + const findIcon: NewIconTypes = icons[icon] || 'FaceHappy'; + const Icon = StorybookIcons[findIcon]; + return ; }; export type IconType = keyof typeof icons; -export interface SymbolsProps extends ComponentProps { - icons?: IconKey[]; +export interface SymbolsProps extends HTMLOrSVGElement { + icons?: IconType; } -export const Symbols = memo(function Symbols({ icons: keys = Object.keys(icons) }) { - return ( - - {keys.map((key: IconKey) => ( - - {icons[key]} - - ))} - - ); +export const Symbols = memo(function Symbols({ + icons: icon, + ...props +}: SymbolsProps) { + return ; }); + +/** @deprecated No longer used, will be removed in Storybook 9.0 */ +export const icons = { + user: 'User', + useralt: 'UserAlt', + useradd: 'UserAdd', + users: 'Users', + profile: 'Profile', + facehappy: 'FaceHappy', + faceneutral: 'FaceNeutral', + facesad: 'FaceSad', + accessibility: 'Accessibility', + accessibilityalt: 'AccessibilityAlt', + arrowup: 'ChevronUp', + arrowdown: 'ChevronDown', + arrowleft: 'ChevronLeft', + arrowright: 'ChevronRight', + arrowupalt: 'ArrowUp', + arrowdownalt: 'ArrowDown', + arrowleftalt: 'ArrowLeft', + arrowrightalt: 'ArrowRight', + expandalt: 'ExpandAlt', + collapse: 'Collapse', + expand: 'Expand', + unfold: 'Unfold', + transfer: 'Transfer', + redirect: 'Redirect', + undo: 'Undo', + reply: 'Reply', + sync: 'Sync', + upload: 'Upload', + download: 'Download', + back: 'Back', + proceed: 'Proceed', + refresh: 'Refresh', + globe: 'Globe', + compass: 'Compass', + location: 'Location', + pin: 'Pin', + time: 'Time', + dashboard: 'Dashboard', + timer: 'Timer', + home: 'Home', + admin: 'Admin', + info: 'Info', + question: 'Question', + support: 'Support', + alert: 'Alert', + email: 'Email', + phone: 'Phone', + link: 'Link', + unlink: 'LinkBroken', + bell: 'Bell', + rss: 'RSS', + sharealt: 'ShareAlt', + share: 'Share', + circlehollow: 'CircleHollow', + bookmarkhollow: 'BookmarkHollow', + bookmark: 'Bookmark', + hearthollow: 'HeartHollow', + heart: 'Heart', + starhollow: 'StarHollow', + star: 'Star', + certificate: 'Certificate', + verified: 'Verified', + thumbsup: 'ThumbsUp', + shield: 'Shield', + basket: 'Basket', + beaker: 'Beaker', + hourglass: 'Hourglass', + flag: 'Flag', + cloudhollow: 'CloudHollow', + edit: 'Edit', + cog: 'Cog', + nut: 'Nut', + wrench: 'Wrench', + ellipsis: 'Ellipsis', + check: 'Check', + form: 'Form', + batchdeny: 'BatchDeny', + batchaccept: 'BatchAccept', + controls: 'Controls', + plus: 'Plus', + closeAlt: 'CloseAlt', + cross: 'Cross', + trash: 'Trash', + pinalt: 'PinAlt', + unpin: 'Unpin', + add: 'Add', + subtract: 'Subtract', + close: 'Close', + delete: 'Delete', + passed: 'Passed', + changed: 'Changed', + failed: 'Failed', + clear: 'Clear', + comment: 'Comment', + commentadd: 'CommentAdd', + requestchange: 'RequestChange', + comments: 'Comments', + lock: 'Lock', + unlock: 'Unlock', + key: 'Key', + outbox: 'Outbox', + credit: 'Credit', + button: 'Button', + type: 'Type', + pointerdefault: 'PointerDefault', + pointerhand: 'PointerHand', + browser: 'Browser', + tablet: 'Tablet', + mobile: 'Mobile', + watch: 'Watch', + sidebar: 'Sidebar', + sidebaralt: 'SidebarAlt', + sidebaralttoggle: 'SidebarAltToggle', + sidebartoggle: 'SidebarToggle', + bottombar: 'BottomBar', + bottombartoggle: 'BottomBarToggle', + cpu: 'CPU', + database: 'Database', + memory: 'Memory', + structure: 'Structure', + box: 'Box', + power: 'Power', + photo: 'Photo', + component: 'Component', + grid: 'Grid', + outline: 'Outline', + photodrag: 'PhotoDrag', + search: 'Search', + zoom: 'Zoom', + zoomout: 'ZoomOut', + zoomreset: 'ZoomReset', + eye: 'Eye', + eyeclose: 'EyeClose', + lightning: 'Lightning', + lightningoff: 'LightningOff', + contrast: 'Contrast', + switchalt: 'SwitchAlt', + mirror: 'Mirror', + grow: 'Grow', + paintbrush: 'PaintBrush', + ruler: 'Ruler', + stop: 'Stop', + camera: 'Camera', + video: 'Video', + speaker: 'Speaker', + play: 'Play', + playback: 'PlayBack', + playnext: 'PlayNext', + rewind: 'Rewind', + fastforward: 'FastForward', + stopalt: 'StopAlt', + sidebyside: 'SideBySide', + stacked: 'Stacked', + sun: 'Sun', + moon: 'Moon', + book: 'Book', + document: 'Document', + copy: 'Copy', + category: 'Category', + folder: 'Folder', + print: 'Print', + graphline: 'GraphLine', + calendar: 'Calendar', + graphbar: 'GraphBar', + menu: 'Menu', + menualt: 'Menu', + filter: 'Filter', + docchart: 'DocChart', + doclist: 'DocList', + markup: 'Markup', + bold: 'Bold', + paperclip: 'PaperClip', + listordered: 'ListOrdered', + listunordered: 'ListUnordered', + paragraph: 'Paragraph', + markdown: 'Markdown', + repository: 'Repo', + commit: 'Commit', + branch: 'Branch', + pullrequest: 'PullRequest', + merge: 'Merge', + apple: 'Apple', + linux: 'Linux', + ubuntu: 'Ubuntu', + windows: 'Windows', + storybook: 'Storybook', + azuredevops: 'AzureDevOps', + bitbucket: 'Bitbucket', + chrome: 'Chrome', + chromatic: 'Chromatic', + componentdriven: 'ComponentDriven', + discord: 'Discord', + facebook: 'Facebook', + figma: 'Figma', + gdrive: 'GDrive', + github: 'Github', + gitlab: 'Gitlab', + google: 'Google', + graphql: 'Graphql', + medium: 'Medium', + redux: 'Redux', + twitter: 'Twitter', + youtube: 'Youtube', + vscode: 'VSCode', +} 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/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/yarn.lock b/code/yarn.lock index a9ed2e401580..c5cb194f2ee4 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6267,7 +6267,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/csf": ^0.1.0 "@storybook/global": ^5.0.0 - "@storybook/icons": ^1.1.6 + "@storybook/icons": ^1.1.7 "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" "@types/react-syntax-highlighter": 11.0.5 @@ -6617,13 +6617,13 @@ __metadata: languageName: unknown linkType: soft -"@storybook/icons@npm:^1.1.6": - version: 1.1.6 - resolution: "@storybook/icons@npm:1.1.6" +"@storybook/icons@npm:^1.1.7": + version: 1.1.7 + resolution: "@storybook/icons@npm:1.1.7" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: c8c2fb8f91c5c93b1cd6951c06a25f5b8203943cb95d7b6ef40015896596ed7444911fa556726c880902110f04e013f3def3fbae0eb6f7dbfcc96ec93fce9cb9 + checksum: 5bb97f948f2a1cfc067a120f8e17004cdf9cdef0d08558ec51659e4e4d4b1620c76ced6d15a57d84aed888c664a0f9daa7a6e7b4ef22302d95f3228aa627bc83 languageName: node linkType: hard From a2f60bac212d07d7317beec285b36450551e2112 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 11 Oct 2023 09:32:25 +0100 Subject: [PATCH 02/33] Remove string icon on ListIem --- .../components/src/components/icon/icon.tsx | 3 ++- .../src/components/tooltip/ListItem.tsx | 23 ++++--------------- 2 files changed, 6 insertions(+), 20 deletions(-) diff --git a/code/ui/components/src/components/icon/icon.tsx b/code/ui/components/src/components/icon/icon.tsx index a662ab2291b6..5286b87610a9 100644 --- a/code/ui/components/src/components/icon/icon.tsx +++ b/code/ui/components/src/components/icon/icon.tsx @@ -7,6 +7,7 @@ export interface IconsProps extends HTMLOrSVGElement { useSymbol?: boolean; } +/** @deprecated No longer used, will be removed in Storybook 9.0 */ export const Icons: FC = ({ icon, useSymbol, ...props }: IconsProps) => { type NewIconTypes = typeof icons[keyof typeof icons]; const findIcon: NewIconTypes = icons[icon] || 'FaceHappy'; @@ -20,6 +21,7 @@ export interface SymbolsProps extends HTMLOrSVGElement { icons?: IconType; } +/** @deprecated No longer used, will be removed in Storybook 9.0 */ export const Symbols = memo(function Symbols({ icons: icon, ...props @@ -27,7 +29,6 @@ export const Symbols = memo(function Symbols({ return ; }); -/** @deprecated No longer used, will be removed in Storybook 9.0 */ export const icons = { user: 'User', useralt: 'UserAlt', 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, From 1d858b3267503502a0e208e0f1b43a1438f7c904 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Wed, 11 Oct 2023 10:00:52 +0100 Subject: [PATCH 03/33] Fix some stories --- .../components/tooltip/ListItem.stories.tsx | 24 +++++++------------ .../tooltip/TooltipLinkList.stories.tsx | 4 ++-- .../components/tooltip/TooltipLinkList.tsx | 2 +- 3 files changed, 12 insertions(+), 18 deletions(-) diff --git a/code/ui/components/src/components/tooltip/ListItem.stories.tsx b/code/ui/components/src/components/tooltip/ListItem.stories.tsx index 8ffeaf322516..4776b0b66a5c 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 { Eye } from '@storybook/icons'; import ListItem from './ListItem'; -import { Icons } from '../icon/icon'; export default { component: ListItem, @@ -11,17 +11,11 @@ export const All = { <div> <ListItem loading /> <ListItem title="Default" /> - <ListItem title="Default icon" right={<Icons icon="eye" />} /> - <ListItem left="left" title="title" center="center" right="right" /> - <ListItem active left="left" title="active" center="center" right="right" /> - <ListItem - active - left="left" - title="active icon" - center="center" - right={<Icons icon="eye" />} - /> - <ListItem disabled left="left" title="disabled" center="center" right="right" /> + <ListItem title="Default icon" right={<Eye />} /> + <ListItem title="title" center="center" right="right" /> + <ListItem active title="active" center="center" right="right" /> + <ListItem active title="active icon" center="center" right={<Eye />} /> + <ListItem disabled title="disabled" center="center" right="right" /> </div> ), }; @@ -41,21 +35,21 @@ export const Loading = { export const DefaultIcon = { args: { title: 'Default icon', - right: <Icons icon="eye" />, + right: <Eye />, }, }; export const ActiveIcon = { args: { title: 'Active icon', active: true, - right: <Icons icon="eye" />, + right: <Eye />, }, }; export const ActiveIconLeft = { args: { title: 'Active icon', active: true, - left: <Icons icon="eye" />, + left: <Eye />, }, }; export const ActiveIconLeftColored = { diff --git a/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx b/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx index 3691e91239af..6e56ec79af7f 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 { Linux } 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: <Linux />, 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..d79361933ecd 100644 --- a/code/ui/components/src/components/tooltip/TooltipLinkList.tsx +++ b/code/ui/components/src/components/tooltip/TooltipLinkList.tsx @@ -55,7 +55,7 @@ const Item: FC<Link & { isIndented?: boolean }> = (props) => { }; export const TooltipLinkList: FC<TooltipLinkListProps> = ({ links, LinkWrapper }) => { - const hasOneLeftElement = links.some((link) => link.left || link.icon); + const hasOneLeftElement = links.some((link) => link.icon); return ( <List> {links.map(({ isGatsby, ...p }) => ( From bda34888d8e8a12b232578e809c8befac08819d7 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Wed, 11 Oct 2023 10:07:42 +0100 Subject: [PATCH 04/33] Add migration notes --- MIGRATION.md | 5 +++++ code/ui/components/src/components/icon/icon.tsx | 10 ++++++++-- 2 files changed, 13 insertions(+), 2 deletions(-) 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/ui/components/src/components/icon/icon.tsx b/code/ui/components/src/components/icon/icon.tsx index 5286b87610a9..1a1e490130c9 100644 --- a/code/ui/components/src/components/icon/icon.tsx +++ b/code/ui/components/src/components/icon/icon.tsx @@ -7,7 +7,10 @@ export interface IconsProps extends HTMLOrSVGElement { useSymbol?: boolean; } -/** @deprecated No longer used, will be removed in Storybook 9.0 */ +/** + * @deprecated No longer used, will be removed in Storybook 9.0 + * Please use the `@storybook/icons` package instead. + * */ export const Icons: FC<IconsProps> = ({ icon, useSymbol, ...props }: IconsProps) => { type NewIconTypes = typeof icons[keyof typeof icons]; const findIcon: NewIconTypes = icons[icon] || 'FaceHappy'; @@ -21,7 +24,10 @@ export interface SymbolsProps extends HTMLOrSVGElement { icons?: IconType; } -/** @deprecated No longer used, will be removed in Storybook 9.0 */ +/** + * @deprecated No longer used, will be removed in Storybook 9.0 + * Please use the `@storybook/icons` package instead. + * */ export const Symbols = memo<SymbolsProps>(function Symbols({ icons: icon, ...props From 9ee1439c9b4f64147e37769dfe4653b19a2f68aa Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Wed, 11 Oct 2023 10:24:09 +0100 Subject: [PATCH 05/33] Fix types --- code/ui/components/src/components/icon/icon.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/ui/components/src/components/icon/icon.tsx b/code/ui/components/src/components/icon/icon.tsx index 1a1e490130c9..da9fe6175f3d 100644 --- a/code/ui/components/src/components/icon/icon.tsx +++ b/code/ui/components/src/components/icon/icon.tsx @@ -2,7 +2,7 @@ import type { FC } from 'react'; import React, { memo } from 'react'; import * as StorybookIcons from '@storybook/icons'; -export interface IconsProps extends HTMLOrSVGElement { +export interface IconsProps { icon: IconType; useSymbol?: boolean; } @@ -20,7 +20,7 @@ export const Icons: FC<IconsProps> = ({ icon, useSymbol, ...props }: IconsProps) export type IconType = keyof typeof icons; -export interface SymbolsProps extends HTMLOrSVGElement { +export interface SymbolsProps { icons?: IconType; } From a27510aeebe958808ae107c2f7862540b280662d Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Wed, 11 Oct 2023 10:38:14 +0100 Subject: [PATCH 06/33] Update icon.tsx --- code/ui/components/src/components/icon/icon.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/code/ui/components/src/components/icon/icon.tsx b/code/ui/components/src/components/icon/icon.tsx index da9fe6175f3d..399ba011505c 100644 --- a/code/ui/components/src/components/icon/icon.tsx +++ b/code/ui/components/src/components/icon/icon.tsx @@ -5,6 +5,7 @@ import * as StorybookIcons from '@storybook/icons'; export interface IconsProps { icon: IconType; useSymbol?: boolean; + onClick?: () => void; } /** From 6630637d6c579eb6d530cf69c05744336112a9a8 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Wed, 11 Oct 2023 10:45:01 +0100 Subject: [PATCH 07/33] Fix some types --- code/ui/blocks/src/controls/Object.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/code/ui/blocks/src/controls/Object.tsx b/code/ui/blocks/src/controls/Object.tsx index e5730555e8d0..32df92b328ba 100644 --- a/code/ui/blocks/src/controls/Object.tsx +++ b/code/ui/blocks/src/controls/Object.tsx @@ -132,9 +132,7 @@ const ButtonInline = styled.button<{ primary?: boolean }>(({ theme, primary }) = order: primary ? 'initial' : 9, })); -type ActionIconProps = IconsProps & { disabled?: boolean }; - -const ActionIcon = styled(Icons)(({ theme, icon, disabled }: ActionIconProps) => ({ +const ActionIcon = styled(Icons)<{ disabled?: boolean }>(({ theme, icon, disabled }) => ({ display: 'inline-block', verticalAlign: 'middle', width: 15, From 72f52d72b7c4eed927249991e6eecab56c0d1b1c Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Wed, 11 Oct 2023 10:53:00 +0100 Subject: [PATCH 08/33] Update Object.tsx --- code/ui/blocks/src/controls/Object.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/blocks/src/controls/Object.tsx b/code/ui/blocks/src/controls/Object.tsx index 32df92b328ba..e9f8389b54b0 100644 --- a/code/ui/blocks/src/controls/Object.tsx +++ b/code/ui/blocks/src/controls/Object.tsx @@ -3,7 +3,7 @@ import cloneDeep from 'lodash/cloneDeep.js'; import type { ComponentProps, SyntheticEvent, FC, FocusEvent } from 'react'; import React, { useCallback, useMemo, useState, useEffect, useRef } from 'react'; import { styled, useTheme, type Theme } from '@storybook/theming'; -import { Form, Icons, type IconsProps, IconButton, Button } from '@storybook/components'; +import { Form, Icons, IconButton, Button } from '@storybook/components'; import { JsonTree, getObjectType } from './react-editable-json-tree'; import { getControlId, getControlSetterButtonId } from './helpers'; import type { ControlProps, ObjectValue, ObjectConfig } from './types'; From cc388f8d4efd89ec8a96587f53c89013318b8c5c Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Wed, 11 Oct 2023 11:30:48 +0100 Subject: [PATCH 09/33] Update App.tsx --- code/ui/manager/src/App.tsx | 2 -- 1 file changed, 2 deletions(-) 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} From 11c8213b7e81bbba5f8613e7b51b282cb5b37094 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Wed, 11 Oct 2023 14:49:08 +0100 Subject: [PATCH 10/33] Remove withSymbol --- code/ui/.storybook/preview.tsx | 10 --- .../components/src/components/icon/icon.tsx | 33 +++++++-- code/ui/manager/package.json | 1 + .../components/sidebar/Explorer.stories.tsx | 10 ++- .../src/components/sidebar/IconSymbols.tsx | 71 +++++++++++++++++++ .../src/components/sidebar/Refs.stories.tsx | 4 +- .../src/components/sidebar/Search.stories.tsx | 12 +++- .../sidebar/SearchResults.stories.tsx | 10 ++- .../components/sidebar/Sidebar.stories.tsx | 10 ++- .../src/components/sidebar/Tree.stories.tsx | 1 - .../manager/src/components/sidebar/Tree.tsx | 2 + .../components/sidebar/TreeNode.stories.tsx | 11 ++- .../src/components/sidebar/TreeNode.tsx | 57 +++++---------- code/yarn.lock | 1 + 14 files changed, 167 insertions(+), 66 deletions(-) create mode 100644 code/ui/manager/src/components/sidebar/IconSymbols.tsx 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 = [ ) : ( <Story /> ), - /** - * This decorator adds Symbols that the sidebar icons references. - * Any sidebar story that uses the icons must set the parameter withSymbols: true . - */ - (Story, { parameters: { withSymbols } }) => ( - <> - {withSymbols && <Symbols icons={['folder', 'component', 'document', 'bookmarkhollow']} />} - <Story /> - </> - ), /** * This decorator renders the stories side-by-side, stacked or default based on the theme switcher in the toolbar */ diff --git a/code/ui/components/src/components/icon/icon.tsx b/code/ui/components/src/components/icon/icon.tsx index 399ba011505c..72a5d4a6fbd1 100644 --- a/code/ui/components/src/components/icon/icon.tsx +++ b/code/ui/components/src/components/icon/icon.tsx @@ -1,6 +1,17 @@ import type { FC } from 'react'; import React, { memo } from 'react'; import * as StorybookIcons from '@storybook/icons'; +import { styled } from '@storybook/theming'; + +const Svg = styled.svg` + display: inline-block; + shape-rendering: inherit; + vertical-align: middle; + fill: currentColor; + path { + fill: currentColor; + } +`; export interface IconsProps { icon: IconType; @@ -21,19 +32,29 @@ export const Icons: FC<IconsProps> = ({ icon, useSymbol, ...props }: IconsProps) export type IconType = keyof typeof icons; +type IconKey = keyof typeof icons; export interface SymbolsProps { - icons?: IconType; + icons?: IconKey[]; } /** * @deprecated No longer used, will be removed in Storybook 9.0 * Please use the `@storybook/icons` package instead. * */ -export const Symbols = memo<SymbolsProps>(function Symbols({ - icons: icon, - ...props -}: SymbolsProps) { - return <Icons {...props} icon={icon} useSymbol />; +export const Symbols = memo<SymbolsProps>(function Symbols({ icons: keys = Object.keys(icons) }) { + return ( + <Svg + viewBox="0 0 14 14" + style={{ position: 'absolute', width: 0, height: 0 }} + data-chromatic="ignore" + > + {keys.map((key: IconKey) => ( + <symbol id={`icon--${key}`} key={key}> + {icons[key]} + </symbol> + ))} + </Svg> + ); }); export const icons = { diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index 254b5078922e..4a75ae2a1d1b 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.1.7", "@storybook/manager-api": "workspace:*", "@storybook/router": "workspace:*", "@storybook/theming": "workspace:*", 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..d588b882ebe4 --- /dev/null +++ b/code/ui/manager/src/components/sidebar/IconSymbols.tsx @@ -0,0 +1,71 @@ +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; +`; + +const FolderPath = styled.path(({ theme }) => ({ + fill: theme.base === 'dark' ? theme.color.primary : theme.color.ultraviolet, +})); + +const ComponentPath = styled.path(({ theme }) => ({ + fill: theme.color.secondary, +})); + +const DocumentPath = styled.path(({ theme }) => ({ + fill: theme.base === 'dark' ? theme.color.gold : '#ff8300', +})); + +const StoryPath = styled.path(({ theme }) => ({ + fill: theme.color.seafoam, +})); + +// 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. + +export const IconSymbols: FC = () => { + return ( + <Svg data-chromatic="ignore"> + <symbol id="icon--folder"> + {/* https://github.com/storybookjs/icons/blob/main/src/icons/Folder.tsx */} + <FolderPath + 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" + /> + </symbol> + <symbol id="icon--component"> + {/* https://github.com/storybookjs/icons/blob/main/src/icons/Component.tsx */} + <ComponentPath + 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" + /> + </symbol> + <symbol id="icon--document"> + {/* https://github.com/storybookjs/icons/blob/main/src/icons/Document.tsx */} + <DocumentPath 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" /> + <DocumentPath + 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" + /> + </symbol> + <symbol id="icon--story"> + {/* https://github.com/storybookjs/icons/blob/main/src/icons/BookmarkHollow.tsx */} + <StoryPath + 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" + /> + </symbol> + </Svg> + ); +}; 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..06f609e534b7 100644 --- a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx +++ b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx @@ -11,6 +11,7 @@ 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 +22,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>; 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..0ba49591c5d7 100644 --- a/code/ui/manager/src/components/sidebar/Tree.tsx +++ b/code/ui/manager/src/components/sidebar/Tree.tsx @@ -37,6 +37,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 }) => ({ @@ -507,6 +508,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..f3fe2b994a0f 100644 --- a/code/ui/manager/src/components/sidebar/TreeNode.tsx +++ b/code/ui/manager/src/components/sidebar/TreeNode.tsx @@ -1,6 +1,4 @@ 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'; @@ -19,39 +17,12 @@ 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 }>( - { - 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 }; - } -); +const TypeIcon = styled.svg({ + width: 12, + height: 12, + marginRight: 5, + flex: '0 0 auto', +}); const BranchNode = styled.button<{ depth?: number; @@ -161,7 +132,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"> + <use href="#icon--folder" /> + </TypeIcon> </IconsWrapper> {children} </BranchNode> @@ -174,7 +147,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"> + <use href="#icon--component" /> + </TypeIcon> </IconsWrapper> {children} </BranchNode> @@ -187,7 +162,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"> + <use href="#icon--document" /> + </TypeIcon> </IconsWrapper> {children} </LeafNode> @@ -203,7 +180,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"> + <use href="#icon--story" /> + </TypeIcon> </IconsWrapper> {children} </LeafNode> diff --git a/code/yarn.lock b/code/yarn.lock index 5b18206f4e02..aa06a0d4b873 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6783,6 +6783,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 + "@storybook/icons": ^1.1.7 "@storybook/manager-api": "workspace:*" "@storybook/router": "workspace:*" "@storybook/theming": "workspace:*" From cbac1f0052b2be869d61dcd24be25ad5ad24ba15 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Wed, 11 Oct 2023 17:58:25 +0100 Subject: [PATCH 11/33] Change colour --- .../src/components/sidebar/IconSymbols.tsx | 35 +++++++------------ .../src/components/sidebar/TreeNode.tsx | 32 +++++++++++------ 2 files changed, 34 insertions(+), 33 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/IconSymbols.tsx b/code/ui/manager/src/components/sidebar/IconSymbols.tsx index d588b882ebe4..c99498e53869 100644 --- a/code/ui/manager/src/components/sidebar/IconSymbols.tsx +++ b/code/ui/manager/src/components/sidebar/IconSymbols.tsx @@ -11,59 +11,50 @@ const Svg = styled.svg` vertical-align: middle; `; -const FolderPath = styled.path(({ theme }) => ({ - fill: theme.base === 'dark' ? theme.color.primary : theme.color.ultraviolet, -})); - -const ComponentPath = styled.path(({ theme }) => ({ - fill: theme.color.secondary, -})); - -const DocumentPath = styled.path(({ theme }) => ({ - fill: theme.base === 'dark' ? theme.color.gold : '#ff8300', -})); - -const StoryPath = styled.path(({ theme }) => ({ - fill: theme.color.seafoam, -})); - // 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. export const IconSymbols: FC = () => { return ( <Svg data-chromatic="ignore"> - <symbol id="icon--folder"> + <symbol id="icon--group"> {/* https://github.com/storybookjs/icons/blob/main/src/icons/Folder.tsx */} - <FolderPath + <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="icon--component"> {/* https://github.com/storybookjs/icons/blob/main/src/icons/Component.tsx */} - <ComponentPath + <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="icon--document"> {/* https://github.com/storybookjs/icons/blob/main/src/icons/Document.tsx */} - <DocumentPath 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" /> - <DocumentPath + <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="icon--story"> {/* https://github.com/storybookjs/icons/blob/main/src/icons/BookmarkHollow.tsx */} - <StoryPath + <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> diff --git a/code/ui/manager/src/components/sidebar/TreeNode.tsx b/code/ui/manager/src/components/sidebar/TreeNode.tsx index f3fe2b994a0f..d27365eecef9 100644 --- a/code/ui/manager/src/components/sidebar/TreeNode.tsx +++ b/code/ui/manager/src/components/sidebar/TreeNode.tsx @@ -17,12 +17,22 @@ export const CollapseIcon = styled.span<{ isExpanded: boolean }>(({ theme, isExp transition: 'transform .1s ease-out', })); -const TypeIcon = styled.svg({ - width: 12, - height: 12, - marginRight: 5, - flex: '0 0 auto', -}); +const TypeIcon = styled.svg<{ type: 'component' | 'story' | 'group' | 'document' }>( + ({ theme, type }) => ({ + width: 12, + height: 12, + marginRight: 5, + flex: '0 0 auto', + 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<{ depth?: number; @@ -132,8 +142,8 @@ export const GroupNode: FC< <BranchNode isExpandable={isExpandable} tabIndex={-1} {...props}> <IconsWrapper> {isExpandable ? <CollapseIcon isExpanded={isExpanded} /> : null} - <TypeIcon viewBox="0 0 14 14" width="14" height="14"> - <use href="#icon--folder" /> + <TypeIcon viewBox="0 0 14 14" width="14" height="14" type="group"> + <use href="#icon--group" /> </TypeIcon> </IconsWrapper> {children} @@ -147,7 +157,7 @@ export const ComponentNode: FC<ComponentProps<typeof BranchNode>> = React.memo( <BranchNode isExpandable={isExpandable} tabIndex={-1} {...props}> <IconsWrapper> {isExpandable && <CollapseIcon isExpanded={isExpanded} />} - <TypeIcon viewBox="0 0 14 14" width="12" height="12"> + <TypeIcon viewBox="0 0 14 14" width="12" height="12" type="component"> <use href="#icon--component" /> </TypeIcon> </IconsWrapper> @@ -162,7 +172,7 @@ export const DocumentNode: FC<ComponentProps<typeof LeafNode> & { docsMode: bool return ( <LeafNode tabIndex={-1} {...props}> <IconsWrapper> - <TypeIcon viewBox="0 0 14 14" width="12" height="12"> + <TypeIcon viewBox="0 0 14 14" width="12" height="12" type="document"> <use href="#icon--document" /> </TypeIcon> </IconsWrapper> @@ -180,7 +190,7 @@ export const StoryNode: FC<ComponentProps<typeof LeafNode>> = React.memo(functio return ( <LeafNode tabIndex={-1} {...props}> <IconsWrapper> - <TypeIcon viewBox="0 0 14 14" width="12" height="12"> + <TypeIcon viewBox="0 0 14 14" width="12" height="12" type="story"> <use href="#icon--story" /> </TypeIcon> </IconsWrapper> From d8c611149edd218670857f1c3a415ee84d5bad2c Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Thu, 12 Oct 2023 10:14:49 +0100 Subject: [PATCH 12/33] Fix some issues --- .../toolbars/src/components/ToolbarMenuListItem.tsx | 4 ++-- code/ui/components/src/components/icon/icon.tsx | 11 ++++++++--- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx b/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx index 8c0ddea7ede7..eadf48af8ed2 100644 --- a/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx +++ b/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx @@ -25,12 +25,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/ui/components/src/components/icon/icon.tsx b/code/ui/components/src/components/icon/icon.tsx index 72a5d4a6fbd1..eed69dfc9d2f 100644 --- a/code/ui/components/src/components/icon/icon.tsx +++ b/code/ui/components/src/components/icon/icon.tsx @@ -1,4 +1,4 @@ -import type { FC } from 'react'; +import type { ComponentProps, FC } from 'react'; import React, { memo } from 'react'; import * as StorybookIcons from '@storybook/icons'; import { styled } from '@storybook/theming'; @@ -13,7 +13,7 @@ const Svg = styled.svg` } `; -export interface IconsProps { +export interface IconsProps extends ComponentProps<typeof Svg> { icon: IconType; useSymbol?: boolean; onClick?: () => void; @@ -26,10 +26,14 @@ export interface IconsProps { export const Icons: FC<IconsProps> = ({ icon, useSymbol, ...props }: IconsProps) => { type NewIconTypes = typeof icons[keyof typeof icons]; const findIcon: NewIconTypes = icons[icon] || 'FaceHappy'; - const Icon = StorybookIcons[findIcon]; + const Icon: FC = StorybookIcons[findIcon]; return <Icon {...props} />; }; +export const Test: FC = () => { + return <div>Test</div>; +}; + export type IconType = keyof typeof icons; type IconKey = keyof typeof icons; @@ -111,6 +115,7 @@ export const icons = { rss: 'RSS', sharealt: 'ShareAlt', share: 'Share', + circle: 'Circle', circlehollow: 'CircleHollow', bookmarkhollow: 'BookmarkHollow', bookmark: 'Bookmark', From 0137b8637e4bad2d9034982e870ac1add2400e04 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Thu, 12 Oct 2023 10:18:47 +0100 Subject: [PATCH 13/33] Clean --- code/addons/toolbars/src/components/ToolbarMenuListItem.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx b/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx index eadf48af8ed2..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, From 4977bad8027a32d5de9cdd9378028f4fe0645a77 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Thu, 12 Oct 2023 14:14:25 +0100 Subject: [PATCH 14/33] Fix icons with 1.2.0 --- code/ui/blocks/package.json | 1 + code/ui/components/package.json | 2 +- code/ui/manager/package.json | 2 +- code/yarn.lock | 13 +++++++------ 4 files changed, 10 insertions(+), 8 deletions(-) diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 97526cc355ca..4c72893d316e 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.0", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 3a130afed520..d3df090ca770 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -73,7 +73,7 @@ "@chromaui/addon-visual-tests": "^0.0.77", "@popperjs/core": "^2.6.0", "@radix-ui/react-scroll-area": "^1.0.5", - "@storybook/icons": "^1.1.7", + "@storybook/icons": "^1.2.0", "@types/react-syntax-highlighter": "11.0.5", "@types/util-deprecate": "^1.0.0", "css": "^3.0.0", diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index 4a75ae2a1d1b..8b0891fdaad3 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -59,7 +59,7 @@ "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/icons": "^1.1.7", + "@storybook/icons": "^1.2.0", "@storybook/manager-api": "workspace:*", "@storybook/router": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index aa06a0d4b873..8f4e4627b08e 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6021,6 +6021,7 @@ __metadata: "@storybook/csf": ^0.1.0 "@storybook/docs-tools": "workspace:*" "@storybook/global": ^5.0.0 + "@storybook/icons": ^1.2.0 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" @@ -6330,7 +6331,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/csf": ^0.1.0 "@storybook/global": ^5.0.0 - "@storybook/icons": ^1.1.7 + "@storybook/icons": ^1.2.0 "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" "@types/react-syntax-highlighter": 11.0.5 @@ -6678,13 +6679,13 @@ __metadata: languageName: unknown linkType: soft -"@storybook/icons@npm:^1.1.7": - version: 1.1.7 - resolution: "@storybook/icons@npm:1.1.7" +"@storybook/icons@npm:^1.2.0": + version: 1.2.0 + resolution: "@storybook/icons@npm:1.2.0" 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: 85eb08c8d36558b066ca1aebc54c4a683cf86e8d081ed8d951d7a8401939ae9d4b069ac4e4a8401fdb9807c907fc41e38229224084b374ca9b8ea8acc4d48180 languageName: node linkType: hard @@ -6783,7 +6784,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 - "@storybook/icons": ^1.1.7 + "@storybook/icons": ^1.2.0 "@storybook/manager-api": "workspace:*" "@storybook/router": "workspace:*" "@storybook/theming": "workspace:*" From 1c50fe4e1ba5dcbb96edda3be728d70510018074 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Thu, 12 Oct 2023 15:50:24 +0100 Subject: [PATCH 15/33] Update verdaccio.yaml --- scripts/verdaccio.yaml | 4 ++++ 1 file changed, 4 insertions(+) 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 From ea5cf24eb3e17449f027ec739b24f5c76130bb7b Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Fri, 13 Oct 2023 09:45:22 +0100 Subject: [PATCH 16/33] Fix the icon component --- .../components/src/components/icon/icon.tsx | 32 ++++++++++++------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/code/ui/components/src/components/icon/icon.tsx b/code/ui/components/src/components/icon/icon.tsx index eed69dfc9d2f..9fc1fd8a922f 100644 --- a/code/ui/components/src/components/icon/icon.tsx +++ b/code/ui/components/src/components/icon/icon.tsx @@ -2,6 +2,10 @@ import type { ComponentProps, FC } from 'react'; import React, { memo } from 'react'; import * as StorybookIcons from '@storybook/icons'; import { styled } from '@storybook/theming'; +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; @@ -24,21 +28,27 @@ export interface IconsProps extends ComponentProps<typeof Svg> { * Please use the `@storybook/icons` package instead. * */ export const Icons: FC<IconsProps> = ({ icon, useSymbol, ...props }: IconsProps) => { - type NewIconTypes = typeof icons[keyof typeof icons]; - const findIcon: NewIconTypes = icons[icon] || 'FaceHappy'; + 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; + } const Icon: FC = StorybookIcons[findIcon]; - return <Icon {...props} />; -}; -export const Test: FC = () => { - return <div>Test</div>; + return <Icon {...props} />; }; -export type IconType = keyof typeof icons; - -type IconKey = keyof typeof icons; export interface SymbolsProps { - icons?: IconKey[]; + icons?: IconType[]; } /** @@ -52,7 +62,7 @@ export const Symbols = memo<SymbolsProps>(function Symbols({ icons: keys = Objec style={{ position: 'absolute', width: 0, height: 0 }} data-chromatic="ignore" > - {keys.map((key: IconKey) => ( + {keys.map((key: IconType) => ( <symbol id={`icon--${key}`} key={key}> {icons[key]} </symbol> From d4b040ca585e4dda3f98a47bb5a288fdd3abd106 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Fri, 13 Oct 2023 09:46:33 +0100 Subject: [PATCH 17/33] Update TooltipLinkList.tsx --- .../src/components/tooltip/TooltipLinkList.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/code/ui/components/src/components/tooltip/TooltipLinkList.tsx b/code/ui/components/src/components/tooltip/TooltipLinkList.tsx index d79361933ecd..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.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> ); From 38e01af461125d41693e8782c13f8fdbccd36ceb Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Fri, 13 Oct 2023 09:56:26 +0100 Subject: [PATCH 18/33] Improve how to call "use" in svgs --- .../src/components/sidebar/IconSymbols.tsx | 21 +++++++++++++++---- .../src/components/sidebar/TreeNode.tsx | 9 ++++---- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/IconSymbols.tsx b/code/ui/manager/src/components/sidebar/IconSymbols.tsx index c99498e53869..86fb09c33f04 100644 --- a/code/ui/manager/src/components/sidebar/IconSymbols.tsx +++ b/code/ui/manager/src/components/sidebar/IconSymbols.tsx @@ -14,10 +14,15 @@ const Svg = styled.svg` // 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--group'; +const DOCUMENT_ID = 'icon--document'; +const STORY_ID = 'icon--story'; + export const IconSymbols: FC = () => { return ( <Svg data-chromatic="ignore"> - <symbol id="icon--group"> + <symbol id={GROUP_ID}> {/* https://github.com/storybookjs/icons/blob/main/src/icons/Folder.tsx */} <path fillRule="evenodd" @@ -26,7 +31,7 @@ export const IconSymbols: FC = () => { fill="currentColor" /> </symbol> - <symbol id="icon--component"> + <symbol id={COMPONENT_ID}> {/* https://github.com/storybookjs/icons/blob/main/src/icons/Component.tsx */} <path fillRule="evenodd" @@ -35,7 +40,7 @@ export const IconSymbols: FC = () => { fill="currentColor" /> </symbol> - <symbol id="icon--document"> + <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" @@ -48,7 +53,7 @@ export const IconSymbols: FC = () => { fill="currentColor" /> </symbol> - <symbol id="icon--story"> + <symbol id={STORY_ID}> {/* https://github.com/storybookjs/icons/blob/main/src/icons/BookmarkHollow.tsx */} <path fillRule="evenodd" @@ -60,3 +65,11 @@ export const IconSymbols: FC = () => { </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/TreeNode.tsx b/code/ui/manager/src/components/sidebar/TreeNode.tsx index d27365eecef9..0d9af0c9cda3 100644 --- a/code/ui/manager/src/components/sidebar/TreeNode.tsx +++ b/code/ui/manager/src/components/sidebar/TreeNode.tsx @@ -2,6 +2,7 @@ import { styled } from '@storybook/theming'; 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', @@ -143,7 +144,7 @@ export const GroupNode: FC< <IconsWrapper> {isExpandable ? <CollapseIcon isExpanded={isExpanded} /> : null} <TypeIcon viewBox="0 0 14 14" width="14" height="14" type="group"> - <use href="#icon--group" /> + <UseSymbol type="group" /> </TypeIcon> </IconsWrapper> {children} @@ -158,7 +159,7 @@ export const ComponentNode: FC<ComponentProps<typeof BranchNode>> = React.memo( <IconsWrapper> {isExpandable && <CollapseIcon isExpanded={isExpanded} />} <TypeIcon viewBox="0 0 14 14" width="12" height="12" type="component"> - <use href="#icon--component" /> + <UseSymbol type="component" /> </TypeIcon> </IconsWrapper> {children} @@ -173,7 +174,7 @@ export const DocumentNode: FC<ComponentProps<typeof LeafNode> & { docsMode: bool <LeafNode tabIndex={-1} {...props}> <IconsWrapper> <TypeIcon viewBox="0 0 14 14" width="12" height="12" type="document"> - <use href="#icon--document" /> + <UseSymbol type="document" /> </TypeIcon> </IconsWrapper> {children} @@ -191,7 +192,7 @@ export const StoryNode: FC<ComponentProps<typeof LeafNode>> = React.memo(functio <LeafNode tabIndex={-1} {...props}> <IconsWrapper> <TypeIcon viewBox="0 0 14 14" width="12" height="12" type="story"> - <use href="#icon--story" /> + <UseSymbol type="story" /> </TypeIcon> </IconsWrapper> {children} From c3520ab4a36c4fa4198aca0d2da2d91cd1dad9e6 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Fri, 13 Oct 2023 10:09:33 +0100 Subject: [PATCH 19/33] Oops --- code/ui/manager/src/components/sidebar/IconSymbols.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/sidebar/IconSymbols.tsx b/code/ui/manager/src/components/sidebar/IconSymbols.tsx index 86fb09c33f04..589e909e00e4 100644 --- a/code/ui/manager/src/components/sidebar/IconSymbols.tsx +++ b/code/ui/manager/src/components/sidebar/IconSymbols.tsx @@ -15,7 +15,7 @@ const Svg = styled.svg` // This will allow to set icons once and use them everywhere. const GROUP_ID = 'icon--group'; -const COMPONENT_ID = 'icon--group'; +const COMPONENT_ID = 'icon--component'; const DOCUMENT_ID = 'icon--document'; const STORY_ID = 'icon--story'; From ad7f7e0bf2dfadb094ed6e506edbddc0673766a5 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Fri, 13 Oct 2023 11:00:00 +0100 Subject: [PATCH 20/33] Move icons to dependencies --- code/ui/components/package.json | 2 +- code/ui/manager/package.json | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/code/ui/components/package.json b/code/ui/components/package.json index b516c02d5a4f..b50c1de21383 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.0", "@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.2.0", "@types/react-syntax-highlighter": "11.0.5", "@types/util-deprecate": "^1.0.0", "css": "^3.0.0", diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index fbbc340dc6af..c8027eed7183 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -59,7 +59,6 @@ "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/icons": "^1.2.0", "@storybook/manager-api": "workspace:*", "@storybook/router": "workspace:*", "@storybook/theming": "workspace:*", @@ -102,5 +101,8 @@ "./src/globals.ts" ] }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" + "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17", + "dependencies": { + "@storybook/icons": "^1.2.0" + } } From 8242722085ebc849e7ec4f087c5d15ee7ab5d49b Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Fri, 13 Oct 2023 12:08:54 +0100 Subject: [PATCH 21/33] Fix some icons --- code/addons/a11y/package.json | 1 + code/addons/a11y/src/components/A11YPanel.tsx | 11 +++++------ code/addons/a11y/src/components/VisionSimulator.tsx | 5 +++-- code/yarn.lock | 1 + 4 files changed, 10 insertions(+), 8 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index eca3495ca31f..9dfb79a6410e 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.0", "@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..e96fa182afa3 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 { Sync, Check } 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(Sync)({ marginRight: 4, }); @@ -108,7 +107,7 @@ export const A11YPanel: React.FC = () => { 'Rerun tests' ) : ( <> - <Icon icon="check" /> Tests completed + <Check /> Tests completed </> ), onClick: handleManual, @@ -164,7 +163,7 @@ export const A11YPanel: React.FC = () => { )} {status === 'running' && ( <Centered> - <RotatingIcon icon="sync" /> Please wait while the accessibility scan is running ... + <RotatingIcon size={12} /> Please wait while the accessibility scan is running ... </Centered> )} {(status === 'ready' || status === 'ran') && ( diff --git a/code/addons/a11y/src/components/VisionSimulator.tsx b/code/addons/a11y/src/components/VisionSimulator.tsx index b66f8eef297d..af3f226fb862 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 { Accessibility } from '@storybook/icons'; import { Filters } from './ColorFilters'; const iframeId = 'storybook-preview-iframe'; @@ -144,7 +145,7 @@ export const VisionSimulator = () => { onDoubleClick={() => setFilter(null)} > <IconButton key="filter" active={!!filter} title="Vision simulator"> - <Icons icon="accessibility" /> + <Accessibility /> </IconButton> </WithTooltip> <Hidden> diff --git a/code/yarn.lock b/code/yarn.lock index f794656b97db..3c2cb4abff07 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5313,6 +5313,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 + "@storybook/icons": ^1.2.0 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" From f3cf8227e3612a03fd267db71c98f96a7057b40e Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Wed, 18 Oct 2023 09:50:53 +0100 Subject: [PATCH 22/33] Update all icons dependencies --- code/addons/a11y/package.json | 2 +- code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- code/ui/manager/package.json | 6 ++---- code/yarn.lock | 16 ++++++++-------- 5 files changed, 13 insertions(+), 15 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 4e56e919e5e8..d2ffa8ec25e7 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -70,7 +70,7 @@ "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/icons": "^1.2.0", + "@storybook/icons": "1.2.1--canary.21.2230fe1.0", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 179f44523588..54d2b0ae7cd3 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -51,7 +51,7 @@ "@storybook/csf": "^0.1.0", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/icons": "^1.2.0", + "@storybook/icons": "1.2.1--canary.21.2230fe1.0", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 76eb482073f1..79b6e7b97eb9 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -63,7 +63,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/csf": "^0.1.0", "@storybook/global": "^5.0.0", - "@storybook/icons": "^1.2.0", + "@storybook/icons": "1.2.1--canary.21.2230fe1.0", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", "memoizerific": "^1.11.3", diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index ae338b6a2265..afcedbb2e4b2 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--canary.21.2230fe1.0", "@storybook/manager-api": "workspace:*", "@storybook/router": "workspace:*", "@storybook/theming": "workspace:*", @@ -101,8 +102,5 @@ "./src/globals.ts" ] }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17", - "dependencies": { - "@storybook/icons": "^1.2.0" - } + "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" } diff --git a/code/yarn.lock b/code/yarn.lock index 610d7e7c1f9f..84a010a6f678 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5313,7 +5313,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 - "@storybook/icons": ^1.2.0 + "@storybook/icons": 1.2.1--canary.21.2230fe1.0 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" @@ -6022,7 +6022,7 @@ __metadata: "@storybook/csf": ^0.1.0 "@storybook/docs-tools": "workspace:*" "@storybook/global": ^5.0.0 - "@storybook/icons": ^1.2.0 + "@storybook/icons": 1.2.1--canary.21.2230fe1.0 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" @@ -6332,7 +6332,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/csf": ^0.1.0 "@storybook/global": ^5.0.0 - "@storybook/icons": ^1.2.0 + "@storybook/icons": 1.2.1--canary.21.2230fe1.0 "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" "@types/react-syntax-highlighter": 11.0.5 @@ -6680,13 +6680,13 @@ __metadata: languageName: unknown linkType: soft -"@storybook/icons@npm:^1.2.0": - version: 1.2.0 - resolution: "@storybook/icons@npm:1.2.0" +"@storybook/icons@npm:1.2.1--canary.21.2230fe1.0": + version: 1.2.1--canary.21.2230fe1.0 + resolution: "@storybook/icons@npm:1.2.1--canary.21.2230fe1.0" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 85eb08c8d36558b066ca1aebc54c4a683cf86e8d081ed8d951d7a8401939ae9d4b069ac4e4a8401fdb9807c907fc41e38229224084b374ca9b8ea8acc4d48180 + checksum: 1a2d9bcf4d95baf08c4c4973652e3e5db4e9e2c4679925d3c5e7ebf5ee478dfba2f4ac50db271fc2796aa0f949f503890ccee4a038d3f8cbe69281d72b6f2e1f languageName: node linkType: hard @@ -6785,7 +6785,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 - "@storybook/icons": ^1.2.0 + "@storybook/icons": 1.2.1--canary.21.2230fe1.0 "@storybook/manager-api": "workspace:*" "@storybook/router": "workspace:*" "@storybook/theming": "workspace:*" From 63c9f1a03f862cf2bb65a09206b7fcb8d10e46c1 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Wed, 18 Oct 2023 09:59:53 +0100 Subject: [PATCH 23/33] Update icons on backgrounds addon --- code/addons/backgrounds/package.json | 1 + .../addons/backgrounds/src/containers/BackgroundSelector.tsx | 5 +++-- code/addons/backgrounds/src/containers/GridSelector.tsx | 5 +++-- code/yarn.lock | 1 + 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 3615aabc45aa..c26a522e9dc9 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--canary.21.2230fe1.0", "@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..dde9ac2dd98d 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 { Photo } 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} > - <Icons icon="photo" /> + <Photo /> </IconButton> </WithTooltip> </Fragment> diff --git a/code/addons/backgrounds/src/containers/GridSelector.tsx b/code/addons/backgrounds/src/containers/GridSelector.tsx index 80d6477884b4..40d5b9658f8f 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 { Grid } 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() { }) } > - <Icons icon="grid" /> + <Grid /> </IconButton> ); }); diff --git a/code/yarn.lock b/code/yarn.lock index 84a010a6f678..340f750d5894 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5377,6 +5377,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 + "@storybook/icons": 1.2.1--canary.21.2230fe1.0 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" From e3f9c71831089b1890c0127afd98ffd8e3d2c526 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Wed, 18 Oct 2023 10:12:11 +0100 Subject: [PATCH 24/33] Update icons in all addons --- code/addons/interactions/package.json | 1 + .../interactions/src/components/Interaction.tsx | 5 +++-- code/addons/interactions/src/components/Subnav.tsx | 12 ++++++------ code/addons/measure/package.json | 1 + code/addons/measure/src/Tool.tsx | 5 +++-- code/addons/outline/package.json | 1 + code/addons/outline/src/OutlineSelector.tsx | 5 +++-- code/addons/themes/package.json | 1 + code/addons/themes/src/theme-switcher.tsx | 5 +++-- code/addons/viewport/package.json | 1 + code/addons/viewport/src/Tool.tsx | 7 ++++--- code/yarn.lock | 5 +++++ 12 files changed, 32 insertions(+), 17 deletions(-) diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index f2cf6bcfd25a..364eb8913a8b 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--canary.21.2230fe1.0", "@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..36cb0c7fef1c 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 { ListUnordered } from '@storybook/icons'; import { MatcherResult } from './MatcherResult'; import { MethodCall } from './MethodCall'; import { StatusIcon } from './StatusIcon'; @@ -174,7 +175,7 @@ export const Interaction = ({ tooltip={<Note note={`${isCollapsed ? 'Show' : 'Hide'} interactions`} />} > <StyledIconButton containsIcon onClick={toggleCollapsed}> - <Icons icon="listunordered" /> + <ListUnordered /> </StyledIconButton> </WithTooltip> )} diff --git a/code/addons/interactions/src/components/Subnav.tsx b/code/addons/interactions/src/components/Subnav.tsx index 3d2e5c41d1a3..bba0683864ee 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,7 @@ import type { Call, ControlStates } from '@storybook/instrumenter'; import { CallStates } from '@storybook/instrumenter'; import { styled } from '@storybook/theming'; +import { FastForward, PlayBack, PlayNext, Rewind, Sync } from '@storybook/icons'; import { StatusBadge } from './StatusBadge'; import type { Controls } from './InteractionsPanel'; @@ -135,7 +135,7 @@ export const Subnav: React.FC<SubnavProps> = ({ onClick={controls.start} disabled={!controlStates.start} > - <Icons icon="rewind" /> + <Rewind /> </RewindButton> </WithTooltip> @@ -146,7 +146,7 @@ export const Subnav: React.FC<SubnavProps> = ({ onClick={controls.back} disabled={!controlStates.back} > - <Icons icon="playback" /> + <PlayBack /> </StyledIconButton> </WithTooltip> @@ -157,7 +157,7 @@ export const Subnav: React.FC<SubnavProps> = ({ onClick={controls.next} disabled={!controlStates.next} > - <Icons icon="playnext" /> + <PlayNext /> </StyledIconButton> </WithTooltip> @@ -168,13 +168,13 @@ export const Subnav: React.FC<SubnavProps> = ({ onClick={controls.end} disabled={!controlStates.end} > - <Icons icon="fastforward" /> + <FastForward /> </StyledIconButton> </WithTooltip> <WithTooltip trigger="hover" hasChrome={false} tooltip={<Note note="Rerun" />}> <RerunButton aria-label="Rerun" containsIcon onClick={controls.rerun}> - <Icons icon="sync" /> + <Sync /> </RerunButton> </WithTooltip> </Group> diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 33e427def043..7b6235ee7470 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--canary.21.2230fe1.0", "@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..2edebb9df783 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 { Ruler } 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} > - <Icons icon="ruler" /> + <Ruler /> </IconButton> ); }; diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index ec9d26a4c0ba..729148794a6e 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--canary.21.2230fe1.0", "@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..1adcc0138530 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 { Outline } 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} > - <Icons icon="outline" /> + <Outline /> </IconButton> ); }); diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index d92d206471ab..a44c61a3aa90 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--canary.21.2230fe1.0", "@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..fe8b17f558dd 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 { PaintBrush } from '@storybook/icons'; import type { ThemeAddonState, ThemeParameters } from './constants'; import { PARAM_KEY, @@ -74,7 +75,7 @@ export const ThemeSwitcher = () => { }} > <IconButton key={THEME_SWITCHER_ID} active={!themeOverride} title="Theme"> - <Icons icon="paintbrush" /> + <PaintBrush /> {label && <IconButtonLabel>{label}</IconButtonLabel>} </IconButton> </WithTooltip> diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index dca40fc0913e..5923ff03f49a 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--canary.21.2230fe1.0", "@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..bb30d632aeec 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 { Grow, Transfer } 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 }); }} > - <Icons icon="grow" /> + <Grow /> {styles ? ( <IconButtonLabel> {isRotated ? `${item.title} (L)` : `${item.title} (P)`} @@ -217,7 +218,7 @@ export const ViewportTool: FC = memo( setState({ ...state, isRotated: !isRotated }); }} > - <Icons icon="transfer" /> + <Transfer /> </IconButton> <ActiveViewportLabel title="Viewport height"> {styles.height.replace('px', '')} diff --git a/code/yarn.lock b/code/yarn.lock index 340f750d5894..05b6919a45f6 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5528,6 +5528,7 @@ __metadata: "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 + "@storybook/icons": 1.2.1--canary.21.2230fe1.0 "@storybook/instrumenter": "workspace:*" "@storybook/jest": next "@storybook/manager-api": "workspace:*" @@ -5624,6 +5625,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 + "@storybook/icons": 1.2.1--canary.21.2230fe1.0 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" @@ -5648,6 +5650,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 + "@storybook/icons": 1.2.1--canary.21.2230fe1.0 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" @@ -5810,6 +5813,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" + "@storybook/icons": 1.2.1--canary.21.2230fe1.0 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" @@ -5856,6 +5860,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 + "@storybook/icons": 1.2.1--canary.21.2230fe1.0 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" From 13847649fab7c5964d1ae98ace0043c158529753 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Wed, 18 Oct 2023 10:31:11 +0100 Subject: [PATCH 25/33] Update canary --- code/addons/a11y/package.json | 2 +- code/addons/backgrounds/package.json | 2 +- code/addons/interactions/package.json | 2 +- code/addons/measure/package.json | 2 +- code/addons/outline/package.json | 2 +- code/addons/themes/package.json | 2 +- code/addons/viewport/package.json | 2 +- code/ui/blocks/package.json | 2 +- code/ui/blocks/src/blocks/mdx.tsx | 5 ++-- code/ui/blocks/src/components/Toolbar.tsx | 7 +++-- code/ui/components/package.json | 2 +- code/ui/manager/package.json | 2 +- code/yarn.lock | 36 +++++++++++++++-------- 13 files changed, 40 insertions(+), 28 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index d2ffa8ec25e7..3c535dc9bbf0 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -70,7 +70,7 @@ "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/icons": "1.2.1--canary.21.2230fe1.0", + "@storybook/icons": "1.2.1--canary.21.f9be3b6.0", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index c26a522e9dc9..dd23ea1cc74f 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -81,7 +81,7 @@ "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/icons": "1.2.1--canary.21.2230fe1.0", + "@storybook/icons": "1.2.1--canary.21.f9be3b6.0", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 364eb8913a8b..18223f5645c5 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -78,7 +78,7 @@ "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/icons": "1.2.1--canary.21.2230fe1.0", + "@storybook/icons": "1.2.1--canary.21.f9be3b6.0", "@storybook/instrumenter": "workspace:*", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 7b6235ee7470..b942d69d9edc 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -80,7 +80,7 @@ "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/icons": "1.2.1--canary.21.2230fe1.0", + "@storybook/icons": "1.2.1--canary.21.f9be3b6.0", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 729148794a6e..35b0c9734d49 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -83,7 +83,7 @@ "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/icons": "1.2.1--canary.21.2230fe1.0", + "@storybook/icons": "1.2.1--canary.21.f9be3b6.0", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index a44c61a3aa90..7cdb4eab7da1 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -77,7 +77,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/icons": "1.2.1--canary.21.2230fe1.0", + "@storybook/icons": "1.2.1--canary.21.f9be3b6.0", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 5923ff03f49a..595df614fdc7 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -78,7 +78,7 @@ "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/icons": "1.2.1--canary.21.2230fe1.0", + "@storybook/icons": "1.2.1--canary.21.f9be3b6.0", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 54d2b0ae7cd3..88b11a0549fc 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -51,7 +51,7 @@ "@storybook/csf": "^0.1.0", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/icons": "1.2.1--canary.21.2230fe1.0", + "@storybook/icons": "1.2.1--canary.21.f9be3b6.0", "@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..a60e20764bad 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 { Link as LinkIcon } from '@storybook/icons'; import { Source } from '../components'; import type { DocsContextProps } from './DocsContext'; import { DocsContext } from './DocsContext'; @@ -190,7 +191,7 @@ const HeaderWithOcticonAnchor: FC<PropsWithChildren<HeaderWithOcticonAnchorProps } }} > - <Icons icon="link" /> + <LinkIcon /> </OcticonAnchor> {children} </OcticonHeader> diff --git a/code/ui/blocks/src/components/Toolbar.tsx b/code/ui/blocks/src/components/Toolbar.tsx index 392cd7a8a769..45aa5f415088 100644 --- a/code/ui/blocks/src/components/Toolbar.tsx +++ b/code/ui/blocks/src/components/Toolbar.tsx @@ -2,6 +2,7 @@ import type { FC, MouseEvent } from 'react'; import React, { Fragment } from 'react'; import { styled } from '@storybook/theming'; import { FlexBar, Icons, IconButton, IconButtonSkeleton } from '@storybook/components'; +import { Zoom as ZoomIcon, ZoomOut, ZoomReset } from '@storybook/icons'; interface ZoomProps { zoom: (val: number) => void; @@ -33,7 +34,7 @@ const Zoom: FC<ZoomProps> = ({ zoom, resetZoom }) => ( }} title="Zoom in" > - <Icons icon="zoom" /> + <ZoomIcon /> </IconButton> <IconButton key="zoomout" @@ -43,7 +44,7 @@ const Zoom: FC<ZoomProps> = ({ zoom, resetZoom }) => ( }} title="Zoom out" > - <Icons icon="zoomout" /> + <ZoomOut /> </IconButton> <IconButton key="zoomreset" @@ -53,7 +54,7 @@ const Zoom: FC<ZoomProps> = ({ zoom, resetZoom }) => ( }} title="Reset zoom" > - <Icons icon="zoomreset" /> + <ZoomReset /> </IconButton> </> ); diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 79b6e7b97eb9..1d96080b394f 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -63,7 +63,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/csf": "^0.1.0", "@storybook/global": "^5.0.0", - "@storybook/icons": "1.2.1--canary.21.2230fe1.0", + "@storybook/icons": "1.2.1--canary.21.f9be3b6.0", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", "memoizerific": "^1.11.3", diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index afcedbb2e4b2..f37b53558aa3 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -59,7 +59,7 @@ "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/icons": "1.2.1--canary.21.2230fe1.0", + "@storybook/icons": "1.2.1--canary.21.f9be3b6.0", "@storybook/manager-api": "workspace:*", "@storybook/router": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index 05b6919a45f6..3d466e7c9774 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5313,7 +5313,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 - "@storybook/icons": 1.2.1--canary.21.2230fe1.0 + "@storybook/icons": 1.2.1--canary.21.f9be3b6.0 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" @@ -5377,7 +5377,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 - "@storybook/icons": 1.2.1--canary.21.2230fe1.0 + "@storybook/icons": 1.2.1--canary.21.f9be3b6.0 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" @@ -5528,7 +5528,7 @@ __metadata: "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 - "@storybook/icons": 1.2.1--canary.21.2230fe1.0 + "@storybook/icons": 1.2.1--canary.21.f9be3b6.0 "@storybook/instrumenter": "workspace:*" "@storybook/jest": next "@storybook/manager-api": "workspace:*" @@ -5625,7 +5625,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 - "@storybook/icons": 1.2.1--canary.21.2230fe1.0 + "@storybook/icons": 1.2.1--canary.21.f9be3b6.0 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" @@ -5650,7 +5650,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 - "@storybook/icons": 1.2.1--canary.21.2230fe1.0 + "@storybook/icons": 1.2.1--canary.21.f9be3b6.0 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" @@ -5813,7 +5813,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/icons": 1.2.1--canary.21.2230fe1.0 + "@storybook/icons": 1.2.1--canary.21.f9be3b6.0 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" @@ -5860,7 +5860,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 - "@storybook/icons": 1.2.1--canary.21.2230fe1.0 + "@storybook/icons": 1.2.1--canary.21.f9be3b6.0 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" @@ -6028,7 +6028,7 @@ __metadata: "@storybook/csf": ^0.1.0 "@storybook/docs-tools": "workspace:*" "@storybook/global": ^5.0.0 - "@storybook/icons": 1.2.1--canary.21.2230fe1.0 + "@storybook/icons": 1.2.1--canary.21.f9be3b6.0 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" @@ -6338,7 +6338,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/csf": ^0.1.0 "@storybook/global": ^5.0.0 - "@storybook/icons": 1.2.1--canary.21.2230fe1.0 + "@storybook/icons": 1.2.1--canary.21.f9be3b6.0 "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" "@types/react-syntax-highlighter": 11.0.5 @@ -6686,9 +6686,9 @@ __metadata: languageName: unknown linkType: soft -"@storybook/icons@npm:1.2.1--canary.21.2230fe1.0": - version: 1.2.1--canary.21.2230fe1.0 - resolution: "@storybook/icons@npm:1.2.1--canary.21.2230fe1.0" +"@storybook/icons@npm:1.2.1--canary.21.f9be3b6.0": + version: 1.2.1--canary.21.f9be3b6.0 + resolution: "@storybook/icons@npm:1.2.1--canary.21.f9be3b6.0" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -6696,6 +6696,16 @@ __metadata: languageName: node linkType: hard +"@storybook/icons@npm:1.2.1--canary.21.f9be3b6.0": + version: 1.2.1--canary.21.f9be3b6.0 + resolution: "@storybook/icons@npm:1.2.1--canary.21.f9be3b6.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: f14276cebd55e1ec18571acd800d378718269693f8b50bf5a6b4e35660c2e089d8d5847484851ea9248f6a06fc534fa5cd0312969960a03d5d0b042b510f9856 + languageName: node + linkType: hard + "@storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter": version: 0.0.0-use.local resolution: "@storybook/instrumenter@workspace:lib/instrumenter" @@ -6791,7 +6801,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 - "@storybook/icons": 1.2.1--canary.21.2230fe1.0 + "@storybook/icons": 1.2.1--canary.21.f9be3b6.0 "@storybook/manager-api": "workspace:*" "@storybook/router": "workspace:*" "@storybook/theming": "workspace:*" From c21769082bad3d0712c50c0af05e0a6705dd5a36 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Wed, 18 Oct 2023 10:31:24 +0100 Subject: [PATCH 26/33] Update Toolbar.tsx --- code/ui/blocks/src/components/Toolbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/blocks/src/components/Toolbar.tsx b/code/ui/blocks/src/components/Toolbar.tsx index 45aa5f415088..2cc14a646f16 100644 --- a/code/ui/blocks/src/components/Toolbar.tsx +++ b/code/ui/blocks/src/components/Toolbar.tsx @@ -1,7 +1,7 @@ import type { FC, MouseEvent } from 'react'; import React, { Fragment } from 'react'; import { styled } from '@storybook/theming'; -import { FlexBar, Icons, IconButton, IconButtonSkeleton } from '@storybook/components'; +import { FlexBar, IconButton, IconButtonSkeleton } from '@storybook/components'; import { Zoom as ZoomIcon, ZoomOut, ZoomReset } from '@storybook/icons'; interface ZoomProps { From f76ff1f4bbcb63a9646094e4b5ecc0454436026b Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Wed, 18 Oct 2023 10:40:38 +0100 Subject: [PATCH 27/33] Renaming --- code/addons/a11y/src/components/A11YPanel.tsx | 6 +- .../a11y/src/components/VisionSimulator.tsx | 4 +- .../src/containers/BackgroundSelector.tsx | 4 +- .../src/containers/GridSelector.tsx | 4 +- .../src/components/Interaction.tsx | 4 +- .../interactions/src/components/Subnav.tsx | 18 +- code/addons/measure/src/Tool.tsx | 4 +- code/addons/outline/src/OutlineSelector.tsx | 4 +- code/addons/themes/src/theme-switcher.tsx | 4 +- code/addons/viewport/src/Tool.tsx | 6 +- code/ui/blocks/src/blocks/mdx.tsx | 2 +- code/ui/blocks/src/components/Toolbar.tsx | 6 +- .../components/src/components/icon/icon.tsx | 410 +++++++++--------- .../components/tooltip/ListItem.stories.tsx | 12 +- .../tooltip/TooltipLinkList.stories.tsx | 4 +- code/yarn.lock | 10 - 16 files changed, 249 insertions(+), 253 deletions(-) diff --git a/code/addons/a11y/src/components/A11YPanel.tsx b/code/addons/a11y/src/components/A11YPanel.tsx index e96fa182afa3..9552b7951e9d 100644 --- a/code/addons/a11y/src/components/A11YPanel.tsx +++ b/code/addons/a11y/src/components/A11YPanel.tsx @@ -3,7 +3,7 @@ import React, { useCallback, useMemo, useState } from 'react'; import { styled } from '@storybook/theming'; import { ActionBar, ScrollArea } from '@storybook/components'; -import { Sync, Check } from '@storybook/icons'; +import { SyncIcon, CheckIcon } from '@storybook/icons'; import type { AxeResults } from 'axe-core'; import { useChannel, useParameter, useStorybookState } from '@storybook/manager-api'; @@ -22,7 +22,7 @@ export enum RuleType { INCOMPLETION, } -const Icon = styled(Sync)({ +const Icon = styled(SyncIcon)({ marginRight: 4, }); @@ -107,7 +107,7 @@ export const A11YPanel: React.FC = () => { 'Rerun tests' ) : ( <> - <Check /> Tests completed + <CheckIcon /> Tests completed </> ), onClick: handleManual, diff --git a/code/addons/a11y/src/components/VisionSimulator.tsx b/code/addons/a11y/src/components/VisionSimulator.tsx index af3f226fb862..f604bef57161 100644 --- a/code/addons/a11y/src/components/VisionSimulator.tsx +++ b/code/addons/a11y/src/components/VisionSimulator.tsx @@ -3,7 +3,7 @@ import React, { useState } from 'react'; import { Global, styled } from '@storybook/theming'; import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components'; -import { Accessibility } from '@storybook/icons'; +import { AccessibilityIcon } from '@storybook/icons'; import { Filters } from './ColorFilters'; const iframeId = 'storybook-preview-iframe'; @@ -145,7 +145,7 @@ export const VisionSimulator = () => { onDoubleClick={() => setFilter(null)} > <IconButton key="filter" active={!!filter} title="Vision simulator"> - <Accessibility /> + <AccessibilityIcon /> </IconButton> </WithTooltip> <Hidden> diff --git a/code/addons/backgrounds/src/containers/BackgroundSelector.tsx b/code/addons/backgrounds/src/containers/BackgroundSelector.tsx index dde9ac2dd98d..87bf6e84f133 100644 --- a/code/addons/backgrounds/src/containers/BackgroundSelector.tsx +++ b/code/addons/backgrounds/src/containers/BackgroundSelector.tsx @@ -6,7 +6,7 @@ import { useParameter, useGlobals } from '@storybook/manager-api'; import { logger } from '@storybook/client-logger'; import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components'; -import { Photo } from '@storybook/icons'; +import { PhotoIcon } from '@storybook/icons'; import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants'; import { ColorIcon } from '../components/ColorIcon'; import type { @@ -141,7 +141,7 @@ export const BackgroundSelector: FC = memo(function BackgroundSelector() { title="Change the background of the preview" active={selectedBackgroundColor !== 'transparent' || isTooltipVisible} > - <Photo /> + <PhotoIcon /> </IconButton> </WithTooltip> </Fragment> diff --git a/code/addons/backgrounds/src/containers/GridSelector.tsx b/code/addons/backgrounds/src/containers/GridSelector.tsx index 40d5b9658f8f..64ac3cf9c4aa 100644 --- a/code/addons/backgrounds/src/containers/GridSelector.tsx +++ b/code/addons/backgrounds/src/containers/GridSelector.tsx @@ -4,7 +4,7 @@ import React, { memo } from 'react'; import { useGlobals, useParameter } from '@storybook/manager-api'; import { IconButton } from '@storybook/components'; -import { Grid } from '@storybook/icons'; +import { GridIcon } from '@storybook/icons'; import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants'; export const GridSelector: FC = memo(function GridSelector() { @@ -31,7 +31,7 @@ export const GridSelector: FC = memo(function GridSelector() { }) } > - <Grid /> + <GridIcon /> </IconButton> ); }); diff --git a/code/addons/interactions/src/components/Interaction.tsx b/code/addons/interactions/src/components/Interaction.tsx index 36cb0c7fef1c..55cb20d8d912 100644 --- a/code/addons/interactions/src/components/Interaction.tsx +++ b/code/addons/interactions/src/components/Interaction.tsx @@ -4,7 +4,7 @@ import { type Call, CallStates, type ControlStates } from '@storybook/instrument import { styled, typography } from '@storybook/theming'; import { transparentize } from 'polished'; -import { ListUnordered } from '@storybook/icons'; +import { ListUnorderedIcon } from '@storybook/icons'; import { MatcherResult } from './MatcherResult'; import { MethodCall } from './MethodCall'; import { StatusIcon } from './StatusIcon'; @@ -175,7 +175,7 @@ export const Interaction = ({ tooltip={<Note note={`${isCollapsed ? 'Show' : 'Hide'} interactions`} />} > <StyledIconButton containsIcon onClick={toggleCollapsed}> - <ListUnordered /> + <ListUnorderedIcon /> </StyledIconButton> </WithTooltip> )} diff --git a/code/addons/interactions/src/components/Subnav.tsx b/code/addons/interactions/src/components/Subnav.tsx index bba0683864ee..4a9dda73a28a 100644 --- a/code/addons/interactions/src/components/Subnav.tsx +++ b/code/addons/interactions/src/components/Subnav.tsx @@ -13,7 +13,13 @@ import type { Call, ControlStates } from '@storybook/instrumenter'; import { CallStates } from '@storybook/instrumenter'; import { styled } from '@storybook/theming'; -import { FastForward, PlayBack, PlayNext, Rewind, Sync } from '@storybook/icons'; +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<SubnavProps> = ({ onClick={controls.start} disabled={!controlStates.start} > - <Rewind /> + <RewindIcon /> </RewindButton> </WithTooltip> @@ -146,7 +152,7 @@ export const Subnav: React.FC<SubnavProps> = ({ onClick={controls.back} disabled={!controlStates.back} > - <PlayBack /> + <PlayBackIcon /> </StyledIconButton> </WithTooltip> @@ -157,7 +163,7 @@ export const Subnav: React.FC<SubnavProps> = ({ onClick={controls.next} disabled={!controlStates.next} > - <PlayNext /> + <PlayNextIcon /> </StyledIconButton> </WithTooltip> @@ -168,13 +174,13 @@ export const Subnav: React.FC<SubnavProps> = ({ onClick={controls.end} disabled={!controlStates.end} > - <FastForward /> + <FastForwardIcon /> </StyledIconButton> </WithTooltip> <WithTooltip trigger="hover" hasChrome={false} tooltip={<Note note="Rerun" />}> <RerunButton aria-label="Rerun" containsIcon onClick={controls.rerun}> - <Sync /> + <SyncIcon /> </RerunButton> </WithTooltip> </Group> diff --git a/code/addons/measure/src/Tool.tsx b/code/addons/measure/src/Tool.tsx index 2edebb9df783..16af4de9af96 100644 --- a/code/addons/measure/src/Tool.tsx +++ b/code/addons/measure/src/Tool.tsx @@ -1,7 +1,7 @@ import React, { useCallback, useEffect } from 'react'; import { useGlobals, useStorybookApi } from '@storybook/manager-api'; import { IconButton } from '@storybook/components'; -import { Ruler } from '@storybook/icons'; +import { RulerIcon } from '@storybook/icons'; import { TOOL_ID, ADDON_ID } from './constants'; export const Tool = () => { @@ -34,7 +34,7 @@ export const Tool = () => { title="Enable measure" onClick={toggleMeasure} > - <Ruler /> + <RulerIcon /> </IconButton> ); }; diff --git a/code/addons/outline/src/OutlineSelector.tsx b/code/addons/outline/src/OutlineSelector.tsx index 1adcc0138530..012477bae60c 100644 --- a/code/addons/outline/src/OutlineSelector.tsx +++ b/code/addons/outline/src/OutlineSelector.tsx @@ -1,7 +1,7 @@ import React, { memo, useCallback, useEffect } from 'react'; import { useGlobals, useStorybookApi } from '@storybook/manager-api'; import { IconButton } from '@storybook/components'; -import { Outline } from '@storybook/icons'; +import { OutlineIcon } from '@storybook/icons'; import { ADDON_ID, PARAM_KEY } from './constants'; export const OutlineSelector = memo(function OutlineSelector() { @@ -35,7 +35,7 @@ export const OutlineSelector = memo(function OutlineSelector() { title="Apply outlines to the preview" onClick={toggleOutline} > - <Outline /> + <OutlineIcon /> </IconButton> ); }); diff --git a/code/addons/themes/src/theme-switcher.tsx b/code/addons/themes/src/theme-switcher.tsx index fe8b17f558dd..4fc7ffa89256 100644 --- a/code/addons/themes/src/theme-switcher.tsx +++ b/code/addons/themes/src/theme-switcher.tsx @@ -3,7 +3,7 @@ import { useAddonState, useChannel, useGlobals, useParameter } from '@storybook/ import { styled } from '@storybook/theming'; import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components'; -import { PaintBrush } from '@storybook/icons'; +import { PaintBrushIcon } from '@storybook/icons'; import type { ThemeAddonState, ThemeParameters } from './constants'; import { PARAM_KEY, @@ -75,7 +75,7 @@ export const ThemeSwitcher = () => { }} > <IconButton key={THEME_SWITCHER_ID} active={!themeOverride} title="Theme"> - <PaintBrush /> + <PaintBrushIcon /> {label && <IconButtonLabel>{label}</IconButtonLabel>} </IconButton> </WithTooltip> diff --git a/code/addons/viewport/src/Tool.tsx b/code/addons/viewport/src/Tool.tsx index bb30d632aeec..093d16bb57ba 100644 --- a/code/addons/viewport/src/Tool.tsx +++ b/code/addons/viewport/src/Tool.tsx @@ -7,7 +7,7 @@ import { styled, Global, type Theme, withTheme } from '@storybook/theming'; import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components'; import { useStorybookApi, useParameter, useAddonState } from '@storybook/manager-api'; -import { Grow, Transfer } from '@storybook/icons'; +import { GrowIcon, TransferIcon } from '@storybook/icons'; import { registerShortcuts } from './shortcuts'; import { PARAM_KEY, ADDON_ID } from './constants'; import { MINIMAL_VIEWPORTS } from './defaults'; @@ -187,7 +187,7 @@ export const ViewportTool: FC = memo( setState({ ...state, selected: responsiveViewport.id }); }} > - <Grow /> + <GrowIcon /> {styles ? ( <IconButtonLabel> {isRotated ? `${item.title} (L)` : `${item.title} (P)`} @@ -218,7 +218,7 @@ export const ViewportTool: FC = memo( setState({ ...state, isRotated: !isRotated }); }} > - <Transfer /> + <TransferIcon /> </IconButton> <ActiveViewportLabel title="Viewport height"> {styles.height.replace('px', '')} diff --git a/code/ui/blocks/src/blocks/mdx.tsx b/code/ui/blocks/src/blocks/mdx.tsx index a60e20764bad..a5f707ea0f5b 100644 --- a/code/ui/blocks/src/blocks/mdx.tsx +++ b/code/ui/blocks/src/blocks/mdx.tsx @@ -4,7 +4,7 @@ import { NAVIGATE_URL } from '@storybook/core-events'; import { Code, components, nameSpaceClassNames } from '@storybook/components'; import { global } from '@storybook/global'; import { styled } from '@storybook/theming'; -import { Link as LinkIcon } from '@storybook/icons'; +import { LinkIcon } from '@storybook/icons'; import { Source } from '../components'; import type { DocsContextProps } from './DocsContext'; import { DocsContext } from './DocsContext'; diff --git a/code/ui/blocks/src/components/Toolbar.tsx b/code/ui/blocks/src/components/Toolbar.tsx index 2cc14a646f16..3fe7e6923097 100644 --- a/code/ui/blocks/src/components/Toolbar.tsx +++ b/code/ui/blocks/src/components/Toolbar.tsx @@ -2,7 +2,7 @@ import type { FC, MouseEvent } from 'react'; import React, { Fragment } from 'react'; import { styled } from '@storybook/theming'; import { FlexBar, IconButton, IconButtonSkeleton } from '@storybook/components'; -import { Zoom as ZoomIcon, ZoomOut, ZoomReset } from '@storybook/icons'; +import { ZoomIcon, ZoomOutIcon, ZoomResetIcon } from '@storybook/icons'; interface ZoomProps { zoom: (val: number) => void; @@ -44,7 +44,7 @@ const Zoom: FC<ZoomProps> = ({ zoom, resetZoom }) => ( }} title="Zoom out" > - <ZoomOut /> + <ZoomOutIcon /> </IconButton> <IconButton key="zoomreset" @@ -54,7 +54,7 @@ const Zoom: FC<ZoomProps> = ({ zoom, resetZoom }) => ( }} title="Reset zoom" > - <ZoomReset /> + <ZoomResetIcon /> </IconButton> </> ); diff --git a/code/ui/components/src/components/icon/icon.tsx b/code/ui/components/src/components/icon/icon.tsx index 9fc1fd8a922f..1bb8db8ec715 100644 --- a/code/ui/components/src/components/icon/icon.tsx +++ b/code/ui/components/src/components/icon/icon.tsx @@ -72,209 +72,209 @@ export const Symbols = memo<SymbolsProps>(function Symbols({ icons: keys = Objec }); export const icons = { - user: 'User', - useralt: 'UserAlt', - useradd: 'UserAdd', - users: 'Users', - profile: 'Profile', - facehappy: 'FaceHappy', - faceneutral: 'FaceNeutral', - facesad: 'FaceSad', - accessibility: 'Accessibility', - accessibilityalt: 'AccessibilityAlt', - arrowup: 'ChevronUp', - arrowdown: 'ChevronDown', - arrowleft: 'ChevronLeft', - arrowright: 'ChevronRight', - arrowupalt: 'ArrowUp', - arrowdownalt: 'ArrowDown', - arrowleftalt: 'ArrowLeft', - arrowrightalt: 'ArrowRight', - expandalt: 'ExpandAlt', - collapse: 'Collapse', - expand: 'Expand', - unfold: 'Unfold', - transfer: 'Transfer', - redirect: 'Redirect', - undo: 'Undo', - reply: 'Reply', - sync: 'Sync', - upload: 'Upload', - download: 'Download', - back: 'Back', - proceed: 'Proceed', - refresh: 'Refresh', - globe: 'Globe', - compass: 'Compass', - location: 'Location', - pin: 'Pin', - time: 'Time', - dashboard: 'Dashboard', - timer: 'Timer', - home: 'Home', - admin: 'Admin', - info: 'Info', - question: 'Question', - support: 'Support', - alert: 'Alert', - email: 'Email', - phone: 'Phone', - link: 'Link', - unlink: 'LinkBroken', - bell: 'Bell', - rss: 'RSS', - sharealt: 'ShareAlt', - share: 'Share', - circle: 'Circle', - circlehollow: 'CircleHollow', - bookmarkhollow: 'BookmarkHollow', - bookmark: 'Bookmark', - hearthollow: 'HeartHollow', - heart: 'Heart', - starhollow: 'StarHollow', - star: 'Star', - certificate: 'Certificate', - verified: 'Verified', - thumbsup: 'ThumbsUp', - shield: 'Shield', - basket: 'Basket', - beaker: 'Beaker', - hourglass: 'Hourglass', - flag: 'Flag', - cloudhollow: 'CloudHollow', - edit: 'Edit', - cog: 'Cog', - nut: 'Nut', - wrench: 'Wrench', - ellipsis: 'Ellipsis', - check: 'Check', - form: 'Form', - batchdeny: 'BatchDeny', - batchaccept: 'BatchAccept', - controls: 'Controls', - plus: 'Plus', - closeAlt: 'CloseAlt', - cross: 'Cross', - trash: 'Trash', - pinalt: 'PinAlt', - unpin: 'Unpin', - add: 'Add', - subtract: 'Subtract', - close: 'Close', - delete: 'Delete', - passed: 'Passed', - changed: 'Changed', - failed: 'Failed', - clear: 'Clear', - comment: 'Comment', - commentadd: 'CommentAdd', - requestchange: 'RequestChange', - comments: 'Comments', - lock: 'Lock', - unlock: 'Unlock', - key: 'Key', - outbox: 'Outbox', - credit: 'Credit', - button: 'Button', - type: 'Type', - pointerdefault: 'PointerDefault', - pointerhand: 'PointerHand', - browser: 'Browser', - tablet: 'Tablet', - mobile: 'Mobile', - watch: 'Watch', - sidebar: 'Sidebar', - sidebaralt: 'SidebarAlt', - sidebaralttoggle: 'SidebarAltToggle', - sidebartoggle: 'SidebarToggle', - bottombar: 'BottomBar', - bottombartoggle: 'BottomBarToggle', - cpu: 'CPU', - database: 'Database', - memory: 'Memory', - structure: 'Structure', - box: 'Box', - power: 'Power', - photo: 'Photo', - component: 'Component', - grid: 'Grid', - outline: 'Outline', - photodrag: 'PhotoDrag', - search: 'Search', - zoom: 'Zoom', - zoomout: 'ZoomOut', - zoomreset: 'ZoomReset', - eye: 'Eye', - eyeclose: 'EyeClose', - lightning: 'Lightning', - lightningoff: 'LightningOff', - contrast: 'Contrast', - switchalt: 'SwitchAlt', - mirror: 'Mirror', - grow: 'Grow', - paintbrush: 'PaintBrush', - ruler: 'Ruler', - stop: 'Stop', - camera: 'Camera', - video: 'Video', - speaker: 'Speaker', - play: 'Play', - playback: 'PlayBack', - playnext: 'PlayNext', - rewind: 'Rewind', - fastforward: 'FastForward', - stopalt: 'StopAlt', - sidebyside: 'SideBySide', - stacked: 'Stacked', - sun: 'Sun', - moon: 'Moon', - book: 'Book', - document: 'Document', - copy: 'Copy', - category: 'Category', - folder: 'Folder', - print: 'Print', - graphline: 'GraphLine', - calendar: 'Calendar', - graphbar: 'GraphBar', - menu: 'Menu', - menualt: 'Menu', - filter: 'Filter', - docchart: 'DocChart', - doclist: 'DocList', - markup: 'Markup', - bold: 'Bold', - paperclip: 'PaperClip', - listordered: 'ListOrdered', - listunordered: 'ListUnordered', - paragraph: 'Paragraph', - markdown: 'Markdown', - repository: 'Repo', - commit: 'Commit', - branch: 'Branch', - pullrequest: 'PullRequest', - merge: 'Merge', - apple: 'Apple', - linux: 'Linux', - ubuntu: 'Ubuntu', - windows: 'Windows', - storybook: 'Storybook', - azuredevops: 'AzureDevOps', - bitbucket: 'Bitbucket', - chrome: 'Chrome', - chromatic: 'Chromatic', - componentdriven: 'ComponentDriven', - discord: 'Discord', - facebook: 'Facebook', - figma: 'Figma', - gdrive: 'GDrive', - github: 'Github', - gitlab: 'Gitlab', - google: 'Google', - graphql: 'Graphql', - medium: 'Medium', - redux: 'Redux', - twitter: 'Twitter', - youtube: 'Youtube', - vscode: 'VSCode', + 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/tooltip/ListItem.stories.tsx b/code/ui/components/src/components/tooltip/ListItem.stories.tsx index 4776b0b66a5c..008c380cdcd5 100644 --- a/code/ui/components/src/components/tooltip/ListItem.stories.tsx +++ b/code/ui/components/src/components/tooltip/ListItem.stories.tsx @@ -1,5 +1,5 @@ import React, { Fragment } from 'react'; -import { Eye } from '@storybook/icons'; +import { EyeIcon } from '@storybook/icons'; import ListItem from './ListItem'; export default { @@ -11,10 +11,10 @@ export const All = { <div> <ListItem loading /> <ListItem title="Default" /> - <ListItem title="Default icon" right={<Eye />} /> + <ListItem title="Default icon" right={<EyeIcon />} /> <ListItem title="title" center="center" right="right" /> <ListItem active title="active" center="center" right="right" /> - <ListItem active title="active icon" center="center" right={<Eye />} /> + <ListItem active title="active icon" center="center" right={<EyeIcon />} /> <ListItem disabled title="disabled" center="center" right="right" /> </div> ), @@ -35,21 +35,21 @@ export const Loading = { export const DefaultIcon = { args: { title: 'Default icon', - right: <Eye />, + right: <EyeIcon />, }, }; export const ActiveIcon = { args: { title: 'Active icon', active: true, - right: <Eye />, + right: <EyeIcon />, }, }; export const ActiveIconLeft = { args: { title: 'Active icon', active: true, - left: <Eye />, + left: <EyeIcon />, }, }; export const ActiveIconLeftColored = { diff --git a/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx b/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx index 6e56ec79af7f..43a952cf61cc 100644 --- a/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx +++ b/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx @@ -2,7 +2,7 @@ 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 { Linux } from '@storybook/icons'; +import { LinuxIcon } from '@storybook/icons'; import { WithTooltip } from './WithTooltip'; import { TooltipLinkList } from './TooltipLinkList'; import ellipseUrl from './assets/ellipse.png'; @@ -186,7 +186,7 @@ export const WithCustomIcon = { id: '1', title: 'Link 1', active: true, - 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/yarn.lock b/code/yarn.lock index 3d466e7c9774..5b0b4fb0b93c 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6686,16 +6686,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/icons@npm:1.2.1--canary.21.f9be3b6.0": - version: 1.2.1--canary.21.f9be3b6.0 - resolution: "@storybook/icons@npm:1.2.1--canary.21.f9be3b6.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 1a2d9bcf4d95baf08c4c4973652e3e5db4e9e2c4679925d3c5e7ebf5ee478dfba2f4ac50db271fc2796aa0f949f503890ccee4a038d3f8cbe69281d72b6f2e1f - languageName: node - linkType: hard - "@storybook/icons@npm:1.2.1--canary.21.f9be3b6.0": version: 1.2.1--canary.21.f9be3b6.0 resolution: "@storybook/icons@npm:1.2.1--canary.21.f9be3b6.0" From 7a10141273f5b4a31321872d6829a596ee100cb9 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Wed, 18 Oct 2023 11:13:54 +0100 Subject: [PATCH 28/33] Updates most of the easy icons --- .../src/components/ArgsTable/ArgsTable.tsx | 5 +-- .../blocks/src/components/ArgsTable/Empty.tsx | 5 +-- code/ui/blocks/src/controls/Object.tsx | 3 +- .../Button/Button.deprecated.stories.tsx | 8 ++--- .../src/components/Button/Button.stories.tsx | 32 +++++++++---------- .../components/src/components/Button/Docs.mdx | 16 +++++----- .../IconButton/IconButton.stories.tsx | 6 ++-- .../src/components/tabs/tabs.stories.tsx | 6 ++-- .../typography/link/link.stories.tsx | 6 ++-- .../src/components/typography/link/link.tsx | 5 ++- .../components/mobile/about/MobileAbout.tsx | 13 ++++---- .../mobile/navigation/MobileNavigation.tsx | 7 ++-- .../notifications/NotificationItem.tsx | 3 +- .../src/components/panel/Panel.stories.tsx | 3 +- .../ui/manager/src/components/panel/Panel.tsx | 9 +++--- .../src/components/preview/Toolbar.tsx | 5 +-- .../src/components/preview/tools/addons.tsx | 5 +-- .../src/components/preview/tools/copy.tsx | 5 +-- .../src/components/preview/tools/eject.tsx | 5 +-- .../src/components/preview/tools/menu.tsx | 5 +-- .../src/components/preview/tools/remount.tsx | 5 +-- .../src/components/preview/tools/zoom.tsx | 9 +++--- .../manager/src/components/sidebar/Menu.tsx | 9 +++--- .../src/components/sidebar/RefBlocks.tsx | 10 +++--- .../src/components/sidebar/RefIndicator.tsx | 5 +-- .../components/sidebar/Sidebar.stories.tsx | 9 +++--- .../manager/src/components/sidebar/Tree.tsx | 5 +-- code/ui/manager/src/container/Menu.tsx | 11 ++++--- code/ui/manager/src/settings/About.tsx | 7 ++-- code/ui/manager/src/settings/index.tsx | 5 +-- code/ui/manager/src/settings/whats_new.tsx | 13 ++++---- docs/addons/writing-addons.md | 2 +- ...addon-consume-and-update-globaltype.js.mdx | 2 +- .../storybook-addon-tool-initial-setup.ts.mdx | 2 +- .../storybook-addon-toolbar-example.js.mdx | 2 +- ...don-toolkit-toolbar-example.toolbar.ts.mdx | 2 +- .../storybook-addons-api-getchannel.js.mdx | 2 +- .../storybook-addons-api-useaddonstate.js.mdx | 2 +- .../common/storybook-addons-api-useapi.js.mdx | 2 +- 39 files changed, 140 insertions(+), 116 deletions(-) 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<ArgsTableProps> = (props) => { Control{' '} {!isLoading && resetArgs && ( <StyledIconButton onClick={() => resetArgs()} title="Reset controls"> - <Icons icon="undo" aria-hidden /> + <UndoIcon aria-hidden /> </StyledIconButton> )} </ControlHeadingWrapper> 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<EmptyProps> = ({ inAddonPanel }) => { {inAddonPanel && ( <> <Link href="https://youtu.be/0gOfS6K0x0E" target="_blank" withArrow> - <Icons icon="video" /> Watch 5m video + <VideoIcon /> Watch 5m video </Link> <Divider /> <Link diff --git a/code/ui/blocks/src/controls/Object.tsx b/code/ui/blocks/src/controls/Object.tsx index e9f8389b54b0..c6b94fc23951 100644 --- a/code/ui/blocks/src/controls/Object.tsx +++ b/code/ui/blocks/src/controls/Object.tsx @@ -4,6 +4,7 @@ import type { ComponentProps, SyntheticEvent, FC, FocusEvent } from 'react'; import React, { useCallback, useMemo, useState, useEffect, useRef } from 'react'; import { styled, useTheme, type Theme } from '@storybook/theming'; import { Form, Icons, 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'; @@ -291,7 +292,7 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => { setShowRaw((v) => !v); }} > - <Icons icon={showRaw ? 'eyeclose' : 'eye'} /> + {showRaw ? <EyeCloseIcon /> : <EyeIcon />} <span>RAW</span> </RawButton> )} 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<typeof Button> = { @@ -73,11 +73,11 @@ export const IconPrimary: Story = { primary: true, containsIcon: true, title: 'link', - children: <Icons icon="link" />, + children: <LinkIcon />, }, }; export const IconOutline: Story = { - args: { outline: true, containsIcon: true, title: 'link', children: <Icons icon="link" /> }, + args: { outline: true, containsIcon: true, title: 'link', children: <LinkIcon /> }, }; export const IconOutlineSmall: Story = { args: { @@ -85,6 +85,6 @@ export const IconOutlineSmall: Story = { containsIcon: true, small: true, title: 'link', - children: <Icons icon="link" />, + children: <LinkIcon />, }, }; 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 = { </Row> <Row> <Button variant="solid" {...args}> - <Icons icon="facehappy" /> Solid + <FaceHappyIcon /> Solid </Button> <Button variant="outline" {...args}> - <Icons icon="facehappy" /> Outline + <FaceHappyIcon /> Outline </Button> <Button variant="ghost" {...args}> - <Icons icon="facehappy" /> Ghost + <FaceHappyIcon /> Ghost </Button> </Row> <Row> <Button variant="solid" padding="small" {...args}> - <Icons icon="facehappy" /> + <FaceHappyIcon /> </Button> <Button variant="outline" padding="small" {...args}> - <Icons icon="facehappy" /> + <FaceHappyIcon /> </Button> <Button variant="ghost" padding="small" {...args}> - <Icons icon="facehappy" /> + <FaceHappyIcon /> </Button> </Row> </Stack> @@ -68,7 +68,7 @@ export const Active: Story = { active: true, children: ( <> - <Icons icon="facehappy" /> + <FaceHappyIcon /> Button </> ), @@ -86,7 +86,7 @@ export const WithIcon: Story = { args: { children: ( <> - <Icons icon="facehappy" /> + <FaceHappyIcon /> Button </> ), @@ -102,7 +102,7 @@ export const WithIcon: Story = { export const IconOnly: Story = { args: { - children: <Icons icon="facehappy" />, + children: <FaceHappyIcon />, padding: 'small', }, render: (args) => ( @@ -160,24 +160,24 @@ export const Animated: Story = { </Row> <Row> <Button animation="glow" {...args}> - <Icons icon="facehappy" /> Button + <FaceHappyIcon /> Button </Button> <Button animation="jiggle" {...args}> - <Icons icon="facehappy" /> Button + <FaceHappyIcon /> Button </Button> <Button animation="rotate360" {...args}> - <Icons icon="facehappy" /> Button + <FaceHappyIcon /> Button </Button> </Row> <Row> <Button animation="glow" padding="small" {...args}> - <Icons icon="facehappy" /> + <FaceHappyIcon /> </Button> <Button animation="jiggle" padding="small" {...args}> - <Icons icon="facehappy" /> + <FaceHappyIcon /> </Button> <Button animation="rotate360" padding="small" {...args}> - <Icons icon="facehappy" /> + <FaceHappyIcon /> </Button> </Row> </Stack> 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={` <Button> - <FaceHappy />Button + <FaceHappyIcon />Button </Button> `} /> @@ -87,7 +87,7 @@ You can also use the button as an icon only button by removing the text. to make dark={true} code={` <Button padding="small"> - <FaceHappy /> + <FaceHappyIcon /> </Button> `} /> @@ -118,13 +118,13 @@ You can use the `animate` prop to add animations to the button. You can set the dark={true} code={` <Button animation="glow"> - <Icons icon="facehappy" />Button + <FaceHappyIcon />Button </Button> <Button animation="jiggle"> - <Icons icon="facehappy" />Button + <FaceHappyIcon />Button </Button> <Button animation="rotate360"> - <Icons icon="facehappy" />Button + <FaceHappyIcon />Button </Button> `} /> @@ -138,7 +138,7 @@ You can use the `active` prop to set the button as active. This will change the dark={true} code={` <Button active> - <Icons icon="facehappy" />Button + <FaceHappyIcon />Button </Button> `} /> @@ -153,7 +153,7 @@ You can use the `disabled` prop to set the button as disabled. dark={true} code={` <Button disabled> - <Icons icon="facehappy" />Button + <FaceHappyIcon />Button </Button> `} /> \ 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: <Icons icon="facehappy" /> }, + args: { children: <FaceHappyIcon /> }, } satisfies Meta<typeof IconButton>; export default meta; @@ -73,7 +73,7 @@ export const WithHref: Story = { <IconButton {...args} onClick={() => console.log('Hello')} /> <IconButton {...args} asChild> <a href="https://storybook.js.org/" aria-label="Visit Storybook website"> - <Icons icon="facehappy" /> + <FaceHappyIcon /> </a> </IconButton> </div> 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={ <Fragment> <IconButton title="Tool 1"> - <Icons icon="memory" /> + <MemoryIcon /> </IconButton> <IconButton title="Tool 2"> - <Icons icon="cpu" /> + <CPUIcon /> </IconButton> </Fragment> } 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/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..d6513c76b879 100644 --- a/code/ui/manager/src/components/panel/Panel.stories.tsx +++ b/code/ui/manager/src/components/panel/Panel.stories.tsx @@ -3,6 +3,7 @@ import { action } from '@storybook/addon-actions'; import { Badge, Icons, 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/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/Sidebar.stories.tsx b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx index 06f609e534b7..1d9c02d914a4 100644 --- a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx +++ b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx @@ -4,7 +4,8 @@ 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'; @@ -271,7 +272,7 @@ export const Bottom: Story = { type: types.experimental_SIDEBAR_BOTTOM, render: () => ( <Button> - <Icons icon="facehappy" /> + <FaceHappyIcon /> Custom addon A </Button> ), @@ -282,7 +283,7 @@ export const Bottom: Story = { render: () => ( <Button> {' '} - <Icons icon="facehappy" /> + <FaceHappyIcon /> Custom addon B </Button> ), @@ -293,7 +294,7 @@ export const Bottom: Story = { render: () => ( <IconButton> {' '} - <Icons icon="facehappy" /> + <FaceHappyIcon /> </IconButton> ), }, diff --git a/code/ui/manager/src/components/sidebar/Tree.tsx b/code/ui/manager/src/components/sidebar/Tree.tsx index 0ba49591c5d7..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, @@ -305,7 +306,7 @@ const Node = React.memo<NodeProps>(function Node({ setFullyExpanded(); }} > - <Icons icon={isFullyExpanded ? 'collapse' : 'expandalt'} /> + {isFullyExpanded ? <CollapseIconSvg /> : <ExpandAltIcon />} </Action> )} </RootNode> 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/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/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> ); }; From 990139227a72359d0c81bc8740630502b6b90975 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Wed, 18 Oct 2023 11:17:07 +0100 Subject: [PATCH 29/33] Update Panel.stories.tsx --- code/ui/manager/src/components/panel/Panel.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/panel/Panel.stories.tsx b/code/ui/manager/src/components/panel/Panel.stories.tsx index d6513c76b879..84640963b9f2 100644 --- a/code/ui/manager/src/components/panel/Panel.stories.tsx +++ b/code/ui/manager/src/components/panel/Panel.stories.tsx @@ -1,6 +1,6 @@ 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'; From be6af4bedb0ae1c731ad659f25bf35187c49a51b Mon Sep 17 00:00:00 2001 From: Norbert de Langen <ndelangen@me.com> Date: Wed, 18 Oct 2023 15:52:46 +0200 Subject: [PATCH 30/33] globalize new icons --- code/ui/manager/src/globals/exports.ts | 225 +++++++++++++++++++++++++ code/ui/manager/src/globals/runtime.ts | 2 + code/ui/manager/src/globals/types.ts | 1 + 3 files changed, 228 insertions(+) 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__', From 8bb1a43e114b3f2d71dfa4b99384bcdb10f2637b Mon Sep 17 00:00:00 2001 From: Norbert de Langen <ndelangen@me.com> Date: Wed, 18 Oct 2023 20:43:26 +0200 Subject: [PATCH 31/33] add missing typings --- code/ui/manager/src/typings.d.ts | 1 + 1 file changed, 1 insertion(+) 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; From 1d4118b5e7ee5ef8eb6a8a024296db9d416ebfc4 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Thu, 19 Oct 2023 10:01:24 +0100 Subject: [PATCH 32/33] Update icon library --- code/addons/a11y/package.json | 2 +- code/addons/backgrounds/package.json | 2 +- code/addons/interactions/package.json | 2 +- code/addons/measure/package.json | 2 +- code/addons/outline/package.json | 2 +- code/addons/themes/package.json | 2 +- code/addons/viewport/package.json | 2 +- code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- code/ui/manager/package.json | 2 +- code/yarn.lock | 28 +++++++++++++-------------- 11 files changed, 24 insertions(+), 24 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 3c535dc9bbf0..da55d0ed51a1 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -70,7 +70,7 @@ "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/icons": "1.2.1--canary.21.f9be3b6.0", + "@storybook/icons": "^1.2.1", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index dd23ea1cc74f..bfb8f99c4b6b 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -81,7 +81,7 @@ "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/icons": "1.2.1--canary.21.f9be3b6.0", + "@storybook/icons": "^1.2.1", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 18223f5645c5..709a06aa4f70 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -78,7 +78,7 @@ "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/icons": "1.2.1--canary.21.f9be3b6.0", + "@storybook/icons": "^1.2.1", "@storybook/instrumenter": "workspace:*", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index b942d69d9edc..23e6b0de4056 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -80,7 +80,7 @@ "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/icons": "1.2.1--canary.21.f9be3b6.0", + "@storybook/icons": "^1.2.1", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 35b0c9734d49..3224141f5216 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -83,7 +83,7 @@ "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/icons": "1.2.1--canary.21.f9be3b6.0", + "@storybook/icons": "^1.2.1", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 7cdb4eab7da1..73f5958100c7 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -77,7 +77,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/icons": "1.2.1--canary.21.f9be3b6.0", + "@storybook/icons": "^1.2.1", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 595df614fdc7..8ce820c76552 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -78,7 +78,7 @@ "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/icons": "1.2.1--canary.21.f9be3b6.0", + "@storybook/icons": "^1.2.1", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 88b11a0549fc..6f1b781e29a2 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -51,7 +51,7 @@ "@storybook/csf": "^0.1.0", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/icons": "1.2.1--canary.21.f9be3b6.0", + "@storybook/icons": "^1.2.1", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 1d96080b394f..0ed16fec93be 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -63,7 +63,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/csf": "^0.1.0", "@storybook/global": "^5.0.0", - "@storybook/icons": "1.2.1--canary.21.f9be3b6.0", + "@storybook/icons": "^1.2.1", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", "memoizerific": "^1.11.3", diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index ac38f4f87df6..a9be76824226 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -59,7 +59,7 @@ "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", - "@storybook/icons": "1.2.1--canary.21.f9be3b6.0", + "@storybook/icons": "^1.2.1", "@storybook/manager-api": "workspace:*", "@storybook/router": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index 2142b3a4e163..36c16ff030f5 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5304,7 +5304,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 - "@storybook/icons": 1.2.1--canary.21.f9be3b6.0 + "@storybook/icons": ^1.2.1 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" @@ -5368,7 +5368,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 - "@storybook/icons": 1.2.1--canary.21.f9be3b6.0 + "@storybook/icons": ^1.2.1 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" @@ -5519,7 +5519,7 @@ __metadata: "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 - "@storybook/icons": 1.2.1--canary.21.f9be3b6.0 + "@storybook/icons": ^1.2.1 "@storybook/instrumenter": "workspace:*" "@storybook/jest": next "@storybook/manager-api": "workspace:*" @@ -5616,7 +5616,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 - "@storybook/icons": 1.2.1--canary.21.f9be3b6.0 + "@storybook/icons": ^1.2.1 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" @@ -5641,7 +5641,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 - "@storybook/icons": 1.2.1--canary.21.f9be3b6.0 + "@storybook/icons": ^1.2.1 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" @@ -5804,7 +5804,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/icons": 1.2.1--canary.21.f9be3b6.0 + "@storybook/icons": ^1.2.1 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" @@ -5851,7 +5851,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 - "@storybook/icons": 1.2.1--canary.21.f9be3b6.0 + "@storybook/icons": ^1.2.1 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" @@ -6019,7 +6019,7 @@ __metadata: "@storybook/csf": ^0.1.0 "@storybook/docs-tools": "workspace:*" "@storybook/global": ^5.0.0 - "@storybook/icons": 1.2.1--canary.21.f9be3b6.0 + "@storybook/icons": ^1.2.1 "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" @@ -6329,7 +6329,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/csf": ^0.1.0 "@storybook/global": ^5.0.0 - "@storybook/icons": 1.2.1--canary.21.f9be3b6.0 + "@storybook/icons": ^1.2.1 "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" "@types/react-syntax-highlighter": 11.0.5 @@ -6677,13 +6677,13 @@ __metadata: languageName: unknown linkType: soft -"@storybook/icons@npm:1.2.1--canary.21.f9be3b6.0": - version: 1.2.1--canary.21.f9be3b6.0 - resolution: "@storybook/icons@npm:1.2.1--canary.21.f9be3b6.0" +"@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: f14276cebd55e1ec18571acd800d378718269693f8b50bf5a6b4e35660c2e089d8d5847484851ea9248f6a06fc534fa5cd0312969960a03d5d0b042b510f9856 + checksum: 3bb3b350cf29d6ad81d8922a1f8f0d15d14bde80f99a7a3d2c6810f2d8eb626e55c3b8e90e138ccc8de5f59b28a492f1b84cb0fff4f964faf5819e2595510791 languageName: node linkType: hard @@ -6782,7 +6782,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": ^5.0.0 - "@storybook/icons": 1.2.1--canary.21.f9be3b6.0 + "@storybook/icons": ^1.2.1 "@storybook/manager-api": "workspace:*" "@storybook/router": "workspace:*" "@storybook/theming": "workspace:*" From b332f40f472c8246d66a33857298053fc22d77ad Mon Sep 17 00:00:00 2001 From: Charles de Dreuille <charles.dedreuille@gmail.com> Date: Thu, 19 Oct 2023 12:43:03 +0100 Subject: [PATCH 33/33] Fix linting for now --- code/ui/components/src/components/icon/icon.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/ui/components/src/components/icon/icon.tsx b/code/ui/components/src/components/icon/icon.tsx index 1bb8db8ec715..28b78983b712 100644 --- a/code/ui/components/src/components/icon/icon.tsx +++ b/code/ui/components/src/components/icon/icon.tsx @@ -42,7 +42,8 @@ export const Icons: FC<IconsProps> = ({ icon, useSymbol, ...props }: IconsProps) ); return null; } - const Icon: FC = StorybookIcons[findIcon]; + // TODO: Find a better way to type this component + const Icon: FC = (StorybookIcons as any)[findIcon]; return <Icon {...props} />; };