From a03653c6f44931fd1f8302821ef002d3dde2192a Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 20 Mar 2024 10:40:55 +0000 Subject: [PATCH] Merge pull request #26477 from storybookjs/charles-fix-deprecated-icons UI: Replace the icon prop in the Manager API (cherry picked from commit e13d0b7051f2a836a7bbc3130c74284959a4ac1e) --- code/lib/manager-api/package.json | 1 + .../src/modules/{whatsnew.ts => whatsnew.tsx} | 4 +- code/lib/types/src/modules/api.ts | 14 +++-- .../NotificationItem.stories.tsx | 59 +++++++++---------- .../notifications/NotificationItem.tsx | 24 +++++--- code/yarn.lock | 1 + 6 files changed, 60 insertions(+), 43 deletions(-) rename code/lib/manager-api/src/modules/{whatsnew.ts => whatsnew.tsx} (96%) diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 6a36b537a68f..f0b83b1ad10b 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -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:*", diff --git a/code/lib/manager-api/src/modules/whatsnew.ts b/code/lib/manager-api/src/modules/whatsnew.tsx similarity index 96% rename from code/lib/manager-api/src/modules/whatsnew.ts rename to code/lib/manager-api/src/modules/whatsnew.tsx index 8f465325d503..abdda88d6b10 100644 --- a/code/lib/manager-api/src/modules/whatsnew.ts +++ b/code/lib/manager-api/src/modules/whatsnew.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { global } from '@storybook/global'; import type { WhatsNewCache, WhatsNewData } from '@storybook/core-events'; import { @@ -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; @@ -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: , onClear({ dismissed }: any) { if (dismissed) { setWhatsNewCache({ lastDismissedPost: whatsNewData.url }); diff --git a/code/lib/types/src/modules/api.ts b/code/lib/types/src/modules/api.ts index cee23ca903ee..1ccc98cc9e24 100644 --- a/code/lib/types/src/modules/api.ts +++ b/code/lib/types/src/modules/api.ts @@ -120,6 +120,14 @@ 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; @@ -127,10 +135,8 @@ export interface API_Notification { headline: string; subHeadline?: string | any; }; - icon?: { - name: string; - color?: string; - }; + // TODO: Remove DeprecatedIconType in 9.0 + icon?: React.ReactNode | DeprecatedIconType; onClear?: (options: OnClearOptions) => void; } diff --git a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx index 87755129055e..5d58559b465b 100644 --- a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx +++ b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx @@ -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, @@ -78,10 +83,7 @@ export const LinkIconWithColor: Story = { content: { headline: 'Storybook with a smile!', }, - icon: { - name: 'facehappy', - color: 'hotpink', - }, + icon: , link: '/some/path', }, }, @@ -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: , link: '/some/path', }, }, @@ -115,9 +114,7 @@ export const BookIcon: Story = { content: { headline: 'Storybook has a book icon!', }, - icon: { - name: 'book', - }, + icon: , link: '/some/path', }, }, @@ -133,9 +130,7 @@ export const StrongSubHeadline: Story = { headline: 'Storybook has a book icon!', subHeadline: Strong subHeadline, }, - icon: { - name: 'book', - }, + icon: , link: '/some/path', }, }, @@ -155,9 +150,7 @@ export const StrongEmphasizedSubHeadline: Story = { ), }, - icon: { - name: 'book', - }, + icon: , link: '/some/path', }, }, @@ -173,9 +166,7 @@ export const BookIconSubHeadline: Story = { headline: 'Storybook has a book icon!', subHeadline: 'Find out more!', }, - icon: { - name: 'book', - }, + icon: , link: '/some/path', }, }, @@ -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: , link: '/some/path', }, }, @@ -210,9 +199,7 @@ export const AccessibilityIcon: Story = { headline: 'Storybook has a accessibility icon!', subHeadline: 'It is here!', }, - icon: { - name: 'accessibility', - }, + icon: , link: '/some/path', }, }, @@ -228,16 +215,28 @@ export const AccessibilityGoldIcon: Story = { headline: 'Accessibility icon!', subHeadline: 'It is gold!', }, - icon: { - name: 'accessibility', - color: 'gold', - }, + icon: , 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: , + link: '/some/path', + }, + }, +}; + +export const WithOldIconFormat: Story = { args: { ...Simple.args, notification: { diff --git a/code/ui/manager/src/components/notifications/NotificationItem.tsx b/code/ui/manager/src/components/notifications/NotificationItem.tsx index 3131d2116cbe..0028f87749cf 100644 --- a/code/ui/manager/src/components/notifications/NotificationItem.tsx +++ b/code/ui/manager/src/components/notifications/NotificationItem.tsx @@ -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'; @@ -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 }) => ({ @@ -78,16 +85,17 @@ const ItemContent: FC> = ({ }) => { const theme = useTheme(); const defaultColor = theme.base === 'dark' ? theme.color.mediumdark : theme.color.mediumlight; + return ( <> {!icon || ( - + {React.isValidElement(icon) + ? icon + : typeof icon === 'object' && + 'name' in icon && ( + + )} )} diff --git a/code/yarn.lock b/code/yarn.lock index 2a8cf58a01de..2fb0fb333137 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -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:*"