Skip to content

Commit

Permalink
Remove deprecate warning
Browse files Browse the repository at this point in the history
  • Loading branch information
cdedreuille committed Jan 31, 2024
1 parent 324152e commit 42c6704
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 7 deletions.
6 changes: 5 additions & 1 deletion code/addons/toolbars/src/components/ToolbarMenuButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<ToolbarMenuButtonProps> = ({
active,
title,
Expand All @@ -19,7 +23,7 @@ export const ToolbarMenuButton: FC<ToolbarMenuButtonProps> = ({
}) => {
return (
<IconButton active={active} title={description} onClick={onClick}>
{icon && <Icons icon={icon} />}
{icon && <Icons icon={icon} removeDeprecateWarning={true} />}
{title ? `\xa0${title}` : null}
</IconButton>
);
Expand Down
13 changes: 13 additions & 0 deletions code/ui/components/src/components/icon/icon.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -90,3 +90,16 @@ export const NoLabels = (args: ComponentProps<typeof Icons>) => (
</List>
</>
);

export const NoDeprecateWarning = (args: ComponentProps<typeof Icons>) => (
<>
<Header>{Object.keys(icons).length} icons</Header>
<List>
{Object.keys(icons).map((key) => (
<Item minimal key={key}>
<Icons icon={key as IconType} aria-label={key} removeDeprecateWarning {...args} />
</Item>
))}
</List>
</>
);
21 changes: 15 additions & 6 deletions code/ui/components/src/components/icon/icon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,18 +24,27 @@ export interface IconsProps extends ComponentProps<typeof Svg> {
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(
Expand Down

0 comments on commit 42c6704

Please sign in to comment.