Skip to content

Commit

Permalink
Merge pull request #26477 from storybookjs/charles-fix-deprecated-icons
Browse files Browse the repository at this point in the history
UI: Replace the icon prop in the Manager API
(cherry picked from commit e13d0b7)
  • Loading branch information
cdedreuille authored and storybook-bot committed Mar 20, 2024
1 parent 891244f commit 72e39b5
Show file tree
Hide file tree
Showing 6 changed files with 60 additions and 43 deletions.
1 change: 1 addition & 0 deletions code/lib/manager-api/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
"@storybook/core-events": "workspace:*",
"@storybook/csf": "^0.1.2",
"@storybook/global": "^5.0.0",
"@storybook/icons": "^1.2.5",
"@storybook/router": "workspace:*",
"@storybook/theming": "workspace:*",
"@storybook/types": "workspace:*",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import React from 'react';
import { global } from '@storybook/global';
import type { WhatsNewCache, WhatsNewData } from '@storybook/core-events';
import {
Expand All @@ -7,6 +8,7 @@ import {
TOGGLE_WHATS_NEW_NOTIFICATIONS,
} from '@storybook/core-events';
import type { ModuleFn } from '../lib/types';
import { StorybookIcon } from '@storybook/icons';

export type SubState = {
whatsNewData?: WhatsNewData;
Expand Down Expand Up @@ -95,7 +97,7 @@ export const init: ModuleFn = ({ fullAPI, store, provider }) => {
headline: whatsNewData.title,
subHeadline: "Learn what's new in Storybook",
},
icon: { name: 'storybook' },
icon: <StorybookIcon />,
onClear({ dismissed }: any) {
if (dismissed) {
setWhatsNewCache({ lastDismissedPost: whatsNewData.url });
Expand Down
14 changes: 10 additions & 4 deletions code/lib/types/src/modules/api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -120,17 +120,23 @@ interface OnClearOptions {
dismissed: boolean;
}

/**
* @deprecated Use ReactNode for the icon instead.
* @see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#icons-is-deprecated
*/
interface DeprecatedIconType {
name: string;
color?: string;
}
export interface API_Notification {
id: string;
link: string;
content: {
headline: string;
subHeadline?: string | any;
};
icon?: {
name: string;
color?: string;
};
// TODO: Remove DeprecatedIconType in 9.0
icon?: React.ReactNode | DeprecatedIconType;
onClear?: (options: OnClearOptions) => void;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@ import React from 'react';
import { LocationProvider } from '@storybook/router';
import type { Meta, StoryObj } from '@storybook/react';
import NotificationItem from './NotificationItem';
import {
AccessibilityIcon as AccessibilityIconIcon,
BookIcon as BookIconIcon,
FaceHappyIcon,
} from '@storybook/icons';

const meta = {
component: NotificationItem,
Expand Down Expand Up @@ -78,10 +83,7 @@ export const LinkIconWithColor: Story = {
content: {
headline: 'Storybook with a smile!',
},
icon: {
name: 'facehappy',
color: 'hotpink',
},
icon: <FaceHappyIcon color="hotpink" />,
link: '/some/path',
},
},
Expand All @@ -97,10 +99,7 @@ export const LinkIconWithColorSubHeadline: Story = {
headline: 'Storybook X.X is available with a smile! Download now »',
subHeadline: 'This link also has a sub headline',
},
icon: {
name: 'facehappy',
color: 'tomato',
},
icon: <FaceHappyIcon color="tomato" />,
link: '/some/path',
},
},
Expand All @@ -115,9 +114,7 @@ export const BookIcon: Story = {
content: {
headline: 'Storybook has a book icon!',
},
icon: {
name: 'book',
},
icon: <BookIconIcon />,
link: '/some/path',
},
},
Expand All @@ -133,9 +130,7 @@ export const StrongSubHeadline: Story = {
headline: 'Storybook has a book icon!',
subHeadline: <strong>Strong subHeadline</strong>,
},
icon: {
name: 'book',
},
icon: <BookIconIcon />,
link: '/some/path',
},
},
Expand All @@ -155,9 +150,7 @@ export const StrongEmphasizedSubHeadline: Story = {
</span>
),
},
icon: {
name: 'book',
},
icon: <BookIconIcon />,
link: '/some/path',
},
},
Expand All @@ -173,9 +166,7 @@ export const BookIconSubHeadline: Story = {
headline: 'Storybook has a book icon!',
subHeadline: 'Find out more!',
},
icon: {
name: 'book',
},
icon: <BookIconIcon />,
link: '/some/path',
},
},
Expand All @@ -192,9 +183,7 @@ export const BookIconLongSubHeadline: Story = {
subHeadline:
'Find out more! by clicking on on buttons and downloading some applications. Find out more! by clicking on buttons and downloading some applications',
},
icon: {
name: 'book',
},
icon: <BookIconIcon />,
link: '/some/path',
},
},
Expand All @@ -210,9 +199,7 @@ export const AccessibilityIcon: Story = {
headline: 'Storybook has a accessibility icon!',
subHeadline: 'It is here!',
},
icon: {
name: 'accessibility',
},
icon: <AccessibilityIconIcon />,
link: '/some/path',
},
},
Expand All @@ -228,16 +215,28 @@ export const AccessibilityGoldIcon: Story = {
headline: 'Accessibility icon!',
subHeadline: 'It is gold!',
},
icon: {
name: 'accessibility',
color: 'gold',
},
icon: <AccessibilityIconIcon color="gold" />,
link: '/some/path',
},
},
};

export const AccessibilityGoldIconLongHeadLineNoSubHeadline: Story = {
args: {
...Simple.args,
notification: {
id: '13',
onClear,
content: {
headline: 'Storybook notifications has a accessibility icon it can be any color!',
},
icon: <AccessibilityIconIcon color="gold" />,
link: '/some/path',
},
},
};

export const WithOldIconFormat: Story = {
args: {
...Simple.args,
notification: {
Expand Down
24 changes: 16 additions & 8 deletions code/ui/manager/src/components/notifications/NotificationItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import React from 'react';
import { type State } from '@storybook/manager-api';
import { Link } from '@storybook/router';
import { styled, useTheme } from '@storybook/theming';
import { Icons, IconButton, type IconsProps } from '@storybook/components';
import type { IconsProps } from '@storybook/components';
import { IconButton, Icons } from '@storybook/components';
import { transparentize } from 'polished';
import { CloseAltIcon } from '@storybook/icons';

Expand Down Expand Up @@ -45,12 +46,18 @@ const NotificationIconWrapper = styled.div(() => ({
display: 'flex',
marginRight: 10,
alignItems: 'center',

svg: {
width: 16,
height: 16,
},
}));

const NotificationTextWrapper = styled.div(() => ({
const NotificationTextWrapper = styled.div(({ theme }) => ({
width: '100%',
display: 'flex',
flexDirection: 'column',
color: theme.base === 'dark' ? theme.color.mediumdark : theme.color.mediumlight,
}));

const Headline = styled.div<{ hasIcon: boolean }>(({ theme, hasIcon }) => ({
Expand Down Expand Up @@ -78,16 +85,17 @@ const ItemContent: FC<Pick<State['notifications'][0], 'icon' | 'content'>> = ({
}) => {
const theme = useTheme();
const defaultColor = theme.base === 'dark' ? theme.color.mediumdark : theme.color.mediumlight;

return (
<>
{!icon || (
<NotificationIconWrapper>
<Icons
icon={icon.name as IconsProps['icon']}
width={16}
height={16}
color={icon.color || defaultColor}
/>
{React.isValidElement(icon)
? icon
: typeof icon === 'object' &&
'name' in icon && (
<Icons icon={icon.name as IconsProps['icon']} color={icon.color || defaultColor} />
)}
</NotificationIconWrapper>
)}
<NotificationTextWrapper>
Expand Down
1 change: 1 addition & 0 deletions code/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -5970,6 +5970,7 @@ __metadata:
"@storybook/core-events": "workspace:*"
"@storybook/csf": "npm:^0.1.2"
"@storybook/global": "npm:^5.0.0"
"@storybook/icons": "npm:^1.2.5"
"@storybook/router": "workspace:*"
"@storybook/theming": "workspace:*"
"@storybook/types": "workspace:*"
Expand Down

0 comments on commit 72e39b5

Please sign in to comment.