From b2701d1d15d8bd76391b12f9b22bc1d6074cec0e Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 30 Jan 2024 13:52:48 +0000 Subject: [PATCH 01/19] Remove Icons component --- code/addons/toolbars/src/components/ToolbarMenuButton.tsx | 8 ++++---- code/addons/toolbars/src/types.ts | 8 ++++---- code/ui/.storybook/preview.tsx | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/code/addons/toolbars/src/components/ToolbarMenuButton.tsx b/code/addons/toolbars/src/components/ToolbarMenuButton.tsx index f7d297be6b93..e1607057904f 100644 --- a/code/addons/toolbars/src/components/ToolbarMenuButton.tsx +++ b/code/addons/toolbars/src/components/ToolbarMenuButton.tsx @@ -1,11 +1,11 @@ -import type { FC } from 'react'; +import type { FC, ReactNode } from 'react'; import React from 'react'; -import { Icons, IconButton, type IconsProps } from '@storybook/components'; +import { IconButton } from '@storybook/components'; interface ToolbarMenuButtonProps { active: boolean; title: string; - icon?: IconsProps['icon']; + icon?: ReactNode; description: string; onClick?: () => void; } @@ -19,7 +19,7 @@ export const ToolbarMenuButton: FC = ({ }) => { return ( - {icon && } + {icon} {title ? `\xa0${title}` : null} ); diff --git a/code/addons/toolbars/src/types.ts b/code/addons/toolbars/src/types.ts index e07d11f73ae0..8683cf79fa45 100644 --- a/code/addons/toolbars/src/types.ts +++ b/code/addons/toolbars/src/types.ts @@ -1,5 +1,5 @@ -import type { IconsProps } from '@storybook/components'; import type { InputType } from '@storybook/types'; +import type { ReactNode } from 'react'; export type ToolbarShortcutType = 'next' | 'previous' | 'reset'; @@ -14,7 +14,7 @@ export type ToolbarShortcuts = Record Date: Tue, 30 Jan 2024 16:43:05 +0000 Subject: [PATCH 02/19] Update ToolbarMenuButton.tsx --- .../src/components/ToolbarMenuButton.tsx | 27 ++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/code/addons/toolbars/src/components/ToolbarMenuButton.tsx b/code/addons/toolbars/src/components/ToolbarMenuButton.tsx index e1607057904f..1d75b313dbcd 100644 --- a/code/addons/toolbars/src/components/ToolbarMenuButton.tsx +++ b/code/addons/toolbars/src/components/ToolbarMenuButton.tsx @@ -1,11 +1,15 @@ import type { FC, ReactNode } from 'react'; import React from 'react'; -import { IconButton } from '@storybook/components'; +import { icons } from '@storybook/components'; +import { IconButton, Icons } from '@storybook/components'; +import { deprecate } from '@storybook/client-logger'; + +type IconType = keyof typeof icons; interface ToolbarMenuButtonProps { active: boolean; title: string; - icon?: ReactNode; + icon?: IconType | ReactNode; description: string; onClick?: () => void; } @@ -17,9 +21,26 @@ export const ToolbarMenuButton: FC = ({ description, onClick, }) => { + // Check if icon is one of IconType + function isIconType(ico: any): ico is IconType { + const iconTypes: IconType[] = Object.keys(icons) as IconType[]; + return iconTypes.includes(ico); + } + + if (isIconType(icon)) { + const newComponent = icons[icon as IconType]; + deprecate( + `Use of deprecated icon ${ + `(${icon})` || '' + } in the Toolbars addon. Instead of using a string form the icon prop, please use the @storybook/icons component directly${ + newComponent ? ` like so: <${newComponent} />` : '' + }.` + ); + } + return ( - {icon} + {isIconType(icon) ? : icon} {title ? `\xa0${title}` : null} ); From 96068044508faa452b65831421cf08cbf5402461 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 30 Jan 2024 16:53:03 +0000 Subject: [PATCH 03/19] Update preview.tsx --- code/ui/.storybook/preview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/.storybook/preview.tsx b/code/ui/.storybook/preview.tsx index 03b3383a1c39..8d2bfc9aa908 100644 --- a/code/ui/.storybook/preview.tsx +++ b/code/ui/.storybook/preview.tsx @@ -304,7 +304,7 @@ export const globalTypes = { name: 'Theme', description: 'Global theme for components', toolbar: { - // icon: 'circlehollow', + icon: 'circlehollow', title: 'Theme', items: [ { value: 'light', icon: 'circlehollow', title: 'light' }, From 875744d9f92e705121e189d28dd71d058366018d Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 30 Jan 2024 16:55:34 +0000 Subject: [PATCH 04/19] Update types --- code/addons/toolbars/src/components/ToolbarMenuButton.tsx | 3 +-- code/addons/toolbars/src/types.ts | 7 ++++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/code/addons/toolbars/src/components/ToolbarMenuButton.tsx b/code/addons/toolbars/src/components/ToolbarMenuButton.tsx index 1d75b313dbcd..33434a3d7142 100644 --- a/code/addons/toolbars/src/components/ToolbarMenuButton.tsx +++ b/code/addons/toolbars/src/components/ToolbarMenuButton.tsx @@ -3,8 +3,7 @@ import React from 'react'; import { icons } from '@storybook/components'; import { IconButton, Icons } from '@storybook/components'; import { deprecate } from '@storybook/client-logger'; - -type IconType = keyof typeof icons; +import type { IconType } from '../types'; interface ToolbarMenuButtonProps { active: boolean; diff --git a/code/addons/toolbars/src/types.ts b/code/addons/toolbars/src/types.ts index 8683cf79fa45..768c09e80fb4 100644 --- a/code/addons/toolbars/src/types.ts +++ b/code/addons/toolbars/src/types.ts @@ -1,8 +1,9 @@ import type { InputType } from '@storybook/types'; import type { ReactNode } from 'react'; +import type { icons } from '@storybook/components'; export type ToolbarShortcutType = 'next' | 'previous' | 'reset'; - +export type IconType = keyof typeof icons; export type ToolbarItemType = 'item' | 'reset'; export interface ToolbarShortcutConfig { @@ -14,7 +15,7 @@ export type ToolbarShortcuts = Record Date: Wed, 31 Jan 2024 11:57:51 +0000 Subject: [PATCH 05/19] Bring back old version --- .../src/components/ToolbarMenuButton.tsx | 28 +++---------------- code/addons/toolbars/src/types.ts | 11 ++++---- code/ui/.storybook/preview.tsx | 1 - 3 files changed, 9 insertions(+), 31 deletions(-) diff --git a/code/addons/toolbars/src/components/ToolbarMenuButton.tsx b/code/addons/toolbars/src/components/ToolbarMenuButton.tsx index 33434a3d7142..f7d297be6b93 100644 --- a/code/addons/toolbars/src/components/ToolbarMenuButton.tsx +++ b/code/addons/toolbars/src/components/ToolbarMenuButton.tsx @@ -1,14 +1,11 @@ -import type { FC, ReactNode } from 'react'; +import type { FC } from 'react'; import React from 'react'; -import { icons } from '@storybook/components'; -import { IconButton, Icons } from '@storybook/components'; -import { deprecate } from '@storybook/client-logger'; -import type { IconType } from '../types'; +import { Icons, IconButton, type IconsProps } from '@storybook/components'; interface ToolbarMenuButtonProps { active: boolean; title: string; - icon?: IconType | ReactNode; + icon?: IconsProps['icon']; description: string; onClick?: () => void; } @@ -20,26 +17,9 @@ export const ToolbarMenuButton: FC = ({ description, onClick, }) => { - // Check if icon is one of IconType - function isIconType(ico: any): ico is IconType { - const iconTypes: IconType[] = Object.keys(icons) as IconType[]; - return iconTypes.includes(ico); - } - - if (isIconType(icon)) { - const newComponent = icons[icon as IconType]; - deprecate( - `Use of deprecated icon ${ - `(${icon})` || '' - } in the Toolbars addon. Instead of using a string form the icon prop, please use the @storybook/icons component directly${ - newComponent ? ` like so: <${newComponent} />` : '' - }.` - ); - } - return ( - {isIconType(icon) ? : icon} + {icon && } {title ? `\xa0${title}` : null} ); diff --git a/code/addons/toolbars/src/types.ts b/code/addons/toolbars/src/types.ts index 768c09e80fb4..e07d11f73ae0 100644 --- a/code/addons/toolbars/src/types.ts +++ b/code/addons/toolbars/src/types.ts @@ -1,9 +1,8 @@ +import type { IconsProps } from '@storybook/components'; import type { InputType } from '@storybook/types'; -import type { ReactNode } from 'react'; -import type { icons } from '@storybook/components'; export type ToolbarShortcutType = 'next' | 'previous' | 'reset'; -export type IconType = keyof typeof icons; + export type ToolbarItemType = 'item' | 'reset'; export interface ToolbarShortcutConfig { @@ -15,7 +14,7 @@ export type ToolbarShortcuts = Record Date: Wed, 31 Jan 2024 12:54:30 +0000 Subject: [PATCH 06/19] Remove deprecate warning --- .../src/components/ToolbarMenuButton.tsx | 6 +++++- .../src/components/icon/icon.stories.tsx | 13 ++++++++++++ .../components/src/components/icon/icon.tsx | 21 +++++++++++++------ 3 files changed, 33 insertions(+), 7 deletions(-) diff --git a/code/addons/toolbars/src/components/ToolbarMenuButton.tsx b/code/addons/toolbars/src/components/ToolbarMenuButton.tsx index f7d297be6b93..14fb01bc07dc 100644 --- a/code/addons/toolbars/src/components/ToolbarMenuButton.tsx +++ b/code/addons/toolbars/src/components/ToolbarMenuButton.tsx @@ -10,6 +10,10 @@ interface ToolbarMenuButtonProps { onClick?: () => void; } +// We can't remove the Icons component just yet because there's no way for now to import icons +// in the preview directly. Before having a better solution, we are going to keep the Icons component +// for now and remove the deprecated warning. + export const ToolbarMenuButton: FC = ({ active, title, @@ -19,7 +23,7 @@ export const ToolbarMenuButton: FC = ({ }) => { return ( - {icon && } + {icon && } {title ? `\xa0${title}` : null} ); diff --git a/code/ui/components/src/components/icon/icon.stories.tsx b/code/ui/components/src/components/icon/icon.stories.tsx index d3da4af90ed1..92dcba29a13a 100644 --- a/code/ui/components/src/components/icon/icon.stories.tsx +++ b/code/ui/components/src/components/icon/icon.stories.tsx @@ -90,3 +90,16 @@ export const NoLabels = (args: ComponentProps) => ( ); + +export const NoDeprecateWarning = (args: ComponentProps) => ( + <> +
{Object.keys(icons).length} icons
+ + {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 b0164ef2a276..a8a019daf889 100644 --- a/code/ui/components/src/components/icon/icon.tsx +++ b/code/ui/components/src/components/icon/icon.tsx @@ -24,18 +24,27 @@ export interface IconsProps extends ComponentProps { icon: IconType; useSymbol?: boolean; onClick?: () => void; + removeDeprecateWarning?: boolean; } /** * @deprecated No longer used, will be removed in Storybook 9.0 * Please use the `@storybook/icons` package instead. * */ -export const Icons = ({ icon, useSymbol, ...props }: IconsProps) => { - deprecate( - `Use of the deprecated Icons ${ - `(${icon})` || '' - } component detected. Please use the @storybook/icons component directly. For more informations, see the migration notes at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#icons-is-deprecated` - ); +export const Icons = ({ + icon, + useSymbol, + removeDeprecateWarning = false, + ...props +}: IconsProps) => { + if (!removeDeprecateWarning) { + 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( From 98f9f1c843d4e3fdd5ca57a7467ca9ea027d87d6 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 31 Jan 2024 13:38:45 +0000 Subject: [PATCH 07/19] Replace icons --- .../a11y/src/components/Report/Item.tsx | 8 +-- .../interactions/src/components/List.tsx | 8 +-- .../src/components/StatusIcon.tsx | 58 +++++++------------ code/ui/manager/src/settings/shortcuts.tsx | 7 ++- 4 files changed, 29 insertions(+), 52 deletions(-) diff --git a/code/addons/a11y/src/components/Report/Item.tsx b/code/addons/a11y/src/components/Report/Item.tsx index 2d34ee58d745..1830a10771fc 100644 --- a/code/addons/a11y/src/components/Report/Item.tsx +++ b/code/addons/a11y/src/components/Report/Item.tsx @@ -1,7 +1,6 @@ import React, { Fragment, useState } from 'react'; import { styled } from '@storybook/theming'; -import { Icons } from '@storybook/components'; import type { Result } from 'axe-core'; import { Info } from './Info'; @@ -11,6 +10,7 @@ import { Tags } from './Tags'; import type { RuleType } from '../A11YPanel'; import HighlightToggle from './HighlightToggle'; +import { ChevronSmallDownIcon } from '@storybook/icons'; const Wrapper = styled.div(({ theme }) => ({ display: 'flex', @@ -21,10 +21,7 @@ const Wrapper = styled.div(({ theme }) => ({ }, })); -const Icon = styled(Icons)({ - height: 10, - width: 10, - minWidth: 10, +const Icon = styled(ChevronSmallDownIcon)({ marginRight: 10, transition: 'transform 0.1s ease-in-out', verticalAlign: 'inherit', @@ -75,7 +72,6 @@ export const Item = (props: ItemProps) => { onToggle(!open)} role="button"> ({ - height: 10, - width: 10, - minWidth: 10, +const Icon = styled(ChevronSmallDownIcon)({ color: convert(themes.light).textMutedColor, marginRight: 10, transition: 'transform 0.1s ease-in-out', @@ -68,7 +65,6 @@ export const ListItem: React.FC = ({ item }) => { onToggle(!open)} role="button"> (({ theme, status }) => { - const color = { - [CallStates.DONE]: theme.color.positive, - [CallStates.ERROR]: theme.color.negative, - [CallStates.ACTIVE]: theme.color.secondary, - [CallStates.WAITING]: transparentize(0.5, gray[500]), - }[status]; - return { - width: status === CallStates.WAITING ? 6 : 12, - height: status === CallStates.WAITING ? 6 : 12, - color, - justifySelf: 'center', - }; +const WarningContainer = styled.div({ + width: 14, + height: 14, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', }); -export const StatusIcon: React.FC = ({ status, className }) => { - const icon = { - [CallStates.DONE]: 'check', - [CallStates.ERROR]: 'stopalt', - [CallStates.ACTIVE]: 'play', - [CallStates.WAITING]: 'circle', - }[status] as IconsProps['icon']; +export const StatusIcon: React.FC = ({ status }) => { + const theme = useTheme(); + return ( - + <> + {status === CallStates.DONE && } + {status === CallStates.ERROR && } + {status === CallStates.ACTIVE && } + {status === CallStates.WAITING && ( + + + + )} + ); }; diff --git a/code/ui/manager/src/settings/shortcuts.tsx b/code/ui/manager/src/settings/shortcuts.tsx index dc02ff9166b0..58529c605a20 100644 --- a/code/ui/manager/src/settings/shortcuts.tsx +++ b/code/ui/manager/src/settings/shortcuts.tsx @@ -7,8 +7,9 @@ import { shortcutToHumanString, shortcutMatchesShortcut, } from '@storybook/manager-api'; -import { Button, Form, Icons } from '@storybook/components'; +import { Button, Form } from '@storybook/components'; import SettingsFooter from './SettingsFooter'; +import { CheckIcon } from '@storybook/icons'; const Header = styled.header(({ theme }) => ({ marginBottom: 20, @@ -80,7 +81,7 @@ export const Fade = keyframes` 50% { opacity: 1; } `; -export const SuccessIcon = styled(Icons)<{ valid: string }>( +export const SuccessIcon = styled(CheckIcon)<{ valid: string }>( ({ valid, theme }) => valid === 'valid' ? { @@ -283,7 +284,7 @@ class ShortcutsScreen extends Component - + )); From f85c41b85ee62beeeedc5a48411c70256cc94866 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 31 Jan 2024 14:23:06 +0000 Subject: [PATCH 08/19] Continue to remove Icons --- code/addons/jest/package.json | 1 + code/addons/jest/src/components/Result.tsx | 8 ++----- .../src/components/ArgsTable/ArgValue.tsx | 14 +++++++------ .../src/components/ArgsTable/SectionRow.tsx | 21 +++++++++++++++---- .../src/components/IconGallery.stories.tsx | 10 ++++----- code/yarn.lock | 1 + 6 files changed, 34 insertions(+), 21 deletions(-) diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 3ebea532c4cd..22842357cac7 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -54,6 +54,7 @@ }, "dependencies": { "@storybook/global": "^5.0.0", + "@storybook/icons": "^1.2.3", "tiny-invariant": "^1.3.1", "ts-dedent": "^2.0.0", "upath": "^2.0.1" diff --git a/code/addons/jest/src/components/Result.tsx b/code/addons/jest/src/components/Result.tsx index d50fa6f34a1a..61bacd9e6af7 100644 --- a/code/addons/jest/src/components/Result.tsx +++ b/code/addons/jest/src/components/Result.tsx @@ -1,8 +1,8 @@ import React, { Fragment, useState } from 'react'; import { styled, themes, convert } from '@storybook/theming'; -import { Icons } from '@storybook/components'; // eslint-disable-next-line import/no-named-as-default import Message from './Message'; +import { ChevronSmallDownIcon } from '@storybook/icons'; const Wrapper = styled.div<{ status: string }>(({ theme, status }) => ({ display: 'flex', @@ -30,10 +30,7 @@ const HeaderBar = styled.div<{ status: string }>(({ theme, status }) => ({ }, })); -const Icon = styled(Icons)(({ theme }) => ({ - height: 10, - width: 10, - minWidth: 10, +const Icon = styled(ChevronSmallDownIcon)(({ theme }) => ({ color: theme.textMutedColor, marginRight: 10, transition: 'transform 0.1s ease-in-out', @@ -66,7 +63,6 @@ export function Result(props: ResultProps) { {status === `failed` ? ( (({ theme, width }) => ({ }, })); -const ArrowIcon = styled(Icons)({ - height: 10, - width: 10, - minWidth: 10, +const ChevronUpIcon = styled(ChevronSmallUpIcon)({ + marginLeft: 4, +}); + +const ChevronDownIcon = styled(ChevronSmallDownIcon)({ marginLeft: 4, }); @@ -176,7 +178,7 @@ const ArgSummary: FC = ({ value, initialExpandedArgs }) => { > {summaryAsString} - + {isOpen ? : } ); diff --git a/code/ui/blocks/src/components/ArgsTable/SectionRow.tsx b/code/ui/blocks/src/components/ArgsTable/SectionRow.tsx index b23f225584db..482fb692d228 100644 --- a/code/ui/blocks/src/components/ArgsTable/SectionRow.tsx +++ b/code/ui/blocks/src/components/ArgsTable/SectionRow.tsx @@ -2,7 +2,7 @@ import type { FC } from 'react'; import React, { useState } from 'react'; import { transparentize, lighten } from 'polished'; import { styled } from '@storybook/theming'; -import { Icons } from '@storybook/components'; +import { ChevronSmallDownIcon, ChevronSmallRightIcon } from '@storybook/icons'; type Level = 'section' | 'subsection'; @@ -14,7 +14,21 @@ export interface SectionRowProps { colSpan: number; } -const ExpanderIcon = styled(Icons)(({ theme }) => ({ +const ExpanderIconDown = styled(ChevronSmallDownIcon)(({ theme }) => ({ + marginRight: 8, + marginLeft: -10, + marginTop: -2, // optical alignment + height: 12, + width: 12, + color: + theme.base === 'light' + ? transparentize(0.25, theme.color.defaultText) + : transparentize(0.3, theme.color.defaultText), + border: 'none', + display: 'inline-block', +})); + +const ExpanderIconRight = styled(ChevronSmallRightIcon)(({ theme }) => ({ marginRight: 8, marginLeft: -10, marginTop: -2, // optical alignment @@ -100,7 +114,6 @@ export const SectionRow: FC = ({ // @ts-expect-error (Converted from ts-ignore) const itemCount = children?.length || 0; const caption = level === 'subsection' ? `${itemCount} item${itemCount !== 1 ? 's' : ''}` : ''; - const icon = expanded ? 'arrowdown' : 'arrowright'; const helperText = `${expanded ? 'Hide' : 'Show'} ${ level === 'subsection' ? itemCount : label @@ -114,7 +127,7 @@ export const SectionRow: FC = ({ {helperText} - + {expanded ? : } {label} diff --git a/code/ui/blocks/src/components/IconGallery.stories.tsx b/code/ui/blocks/src/components/IconGallery.stories.tsx index b14417402fdd..0dc183e79311 100644 --- a/code/ui/blocks/src/components/IconGallery.stories.tsx +++ b/code/ui/blocks/src/components/IconGallery.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Icons as ExampleIcon } from '@storybook/components'; import { IconItem, IconGallery } from './IconGallery'; +import { AddIcon, FaceHappyIcon, HomeIcon, SubtractIcon } from '@storybook/icons'; export default { component: IconGallery, @@ -9,16 +9,16 @@ export default { export const DefaultStyle = () => ( - + - + - + - + example diff --git a/code/yarn.lock b/code/yarn.lock index 7ba452bc433f..7b6925f8c4a7 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4949,6 +4949,7 @@ __metadata: "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" + "@storybook/icons": "npm:^1.2.3" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" From 963140af0db5644bdc16f00b92abc864c17ded8e Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 31 Jan 2024 14:46:05 +0000 Subject: [PATCH 09/19] Remove other icons from addons --- code/ui/blocks/src/controls/Color.tsx | 7 +- code/ui/blocks/src/controls/Object.tsx | 31 ++-- .../ui/blocks/src/controls/options/Select.tsx | 4 +- .../src/components/Loader/Loader.tsx | 6 +- .../src/components/sidebar/RefIndicator.tsx | 152 ++++++++++-------- code/ui/manager/src/utils/status.tsx | 12 +- docs/addons/writing-addons.md | 5 +- 7 files changed, 123 insertions(+), 94 deletions(-) diff --git a/code/ui/blocks/src/controls/Color.tsx b/code/ui/blocks/src/controls/Color.tsx index c9bf13a526c9..1a98a3792b05 100644 --- a/code/ui/blocks/src/controls/Color.tsx +++ b/code/ui/blocks/src/controls/Color.tsx @@ -4,10 +4,11 @@ import { HexColorPicker, HslaStringColorPicker, RgbaStringColorPicker } from 're import convert from 'color-convert'; import throttle from 'lodash/throttle.js'; import { styled } from '@storybook/theming'; -import { TooltipNote, WithTooltip, Form, Icons } from '@storybook/components'; +import { TooltipNote, WithTooltip, Form } from '@storybook/components'; import type { ControlProps, ColorValue, ColorConfig, PresetColor } from './types'; import { getControlId } from './helpers'; +import { MarkdownIcon } from '@storybook/icons'; const Wrapper = styled.div({ position: 'relative', @@ -74,7 +75,7 @@ const Input = styled(Form.Input)(({ theme }) => ({ fontFamily: theme.typography.fonts.base, })); -const ToggleIcon = styled(Icons)(({ theme }) => ({ +const ToggleIcon = styled(MarkdownIcon)(({ theme }) => ({ position: 'absolute', zIndex: 1, top: 6, @@ -358,7 +359,7 @@ export const ColorControl: FC = ({ onFocus={(e: FocusEvent) => e.target.select()} placeholder="Choose color..." /> - {value ? : null} + {value ? : null} ); }; diff --git a/code/ui/blocks/src/controls/Object.tsx b/code/ui/blocks/src/controls/Object.tsx index c6b94fc23951..d6c4d2328af0 100644 --- a/code/ui/blocks/src/controls/Object.tsx +++ b/code/ui/blocks/src/controls/Object.tsx @@ -3,8 +3,8 @@ import cloneDeep from 'lodash/cloneDeep.js'; import type { ComponentProps, SyntheticEvent, FC, FocusEvent } from 'react'; import React, { useCallback, useMemo, useState, useEffect, useRef } from 'react'; import { styled, useTheme, type Theme } from '@storybook/theming'; -import { Form, Icons, IconButton, Button } from '@storybook/components'; -import { EyeCloseIcon, EyeIcon } from '@storybook/icons'; +import { Form, IconButton, Button } from '@storybook/components'; +import { AddIcon, EyeCloseIcon, EyeIcon, SubtractIcon } from '@storybook/icons'; import { JsonTree, getObjectType } from './react-editable-json-tree'; import { getControlId, getControlSetterButtonId } from './helpers'; import type { ControlProps, ObjectValue, ObjectConfig } from './types'; @@ -133,7 +133,7 @@ const ButtonInline = styled.button<{ primary?: boolean }>(({ theme, primary }) = order: primary ? 'initial' : 9, })); -const ActionIcon = styled(Icons)<{ disabled?: boolean }>(({ theme, icon, disabled }) => ({ +const ActionAddIcon = styled(AddIcon)<{ disabled?: boolean }>(({ theme, disabled }) => ({ display: 'inline-block', verticalAlign: 'middle', width: 15, @@ -142,11 +142,22 @@ const ActionIcon = styled(Icons)<{ disabled?: boolean }>(({ theme, icon, disable marginLeft: 5, cursor: disabled ? 'not-allowed' : 'pointer', color: theme.textMutedColor, - '&:hover': disabled - ? {} - : { - color: icon === 'subtract' ? theme.color.negative : theme.color.ancillary, - }, + '&:hover': disabled ? {} : { color: theme.color.ancillary }, + 'svg + &': { + marginLeft: 0, + }, +})); + +const ActionSubstractIcon = styled(SubtractIcon)<{ disabled?: boolean }>(({ theme, disabled }) => ({ + display: 'inline-block', + verticalAlign: 'middle', + width: 15, + height: 15, + padding: 3, + marginLeft: 5, + cursor: disabled ? 'not-allowed' : 'pointer', + color: theme.textMutedColor, + '&:hover': disabled ? {} : { color: theme.color.negative }, 'svg + &': { marginLeft: 0, }, @@ -309,8 +320,8 @@ export const ObjectControl: FC = ({ name, value, onChange }) => { Save } - plusMenuElement={} - minusMenuElement={} + plusMenuElement={} + minusMenuElement={} inputElement={(_: any, __: any, ___: any, key: string) => key ? : } diff --git a/code/ui/blocks/src/controls/options/Select.tsx b/code/ui/blocks/src/controls/options/Select.tsx index e2f9835a7c47..574c604b180b 100644 --- a/code/ui/blocks/src/controls/options/Select.tsx +++ b/code/ui/blocks/src/controls/options/Select.tsx @@ -3,12 +3,12 @@ import React from 'react'; import { styled } from '@storybook/theming'; import type { CSSObject } from '@storybook/theming'; import { logger } from '@storybook/client-logger'; -import { Icons } from '@storybook/components'; import type { ControlProps, OptionsSelection, NormalizedOptionsConfig } from '../types'; import { selectedKey, selectedKeys, selectedValues } from './helpers'; import { getControlId } from '../helpers'; +import { ChevronSmallDownIcon } from '@storybook/icons'; const styleResets: CSSObject = { // resets @@ -102,7 +102,7 @@ const SingleSelect: FC = ({ name, value, options, onChange }) => { return ( - +