Merge pull request #26477 from storybookjs/charles-fix-deprecated-icons

UI: Replace the icon prop in the Manager API
(cherry picked from commit e13d0b7)

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:*",

code/lib/manager-api/src/modules/whatsnew.ts → 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: <StorybookIcon />,
         onClear({ dismissed }: any) {
           if (dismissed) {
             setWhatsNewCache({ lastDismissedPost: whatsNewData.url });

code/lib/types/src/modules/api.ts

@@ -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;
 }
 

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: <FaceHappyIcon color="hotpink" />,
       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: <FaceHappyIcon color="tomato" />,
       link: '/some/path',
     },
   },
@@ -115,9 +114,7 @@ export const BookIcon: Story = {
       content: {
         headline: 'Storybook has a book icon!',
       },
-      icon: {
-        name: 'book',
-      },
+      icon: <BookIconIcon />,
       link: '/some/path',
     },
   },
@@ -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',
     },
   },
@@ -155,9 +150,7 @@ export const StrongEmphasizedSubHeadline: Story = {
           </span>
         ),
       },
-      icon: {
-        name: 'book',
-      },
+      icon: <BookIconIcon />,
       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: <BookIconIcon />,
       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: <BookIconIcon />,
       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: <AccessibilityIconIcon />,
       link: '/some/path',
     },
   },
@@ -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: {

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<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>

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:*"