Merge pull request #26580 from storybookjs/version-patch-from-8.0.2

Release: Patch 8.0.3
storybookjs · Mar 21, 2024 · bc200ae · bc200ae
2 parents 01c44fb + 5b67582
commit bc200ae
Show file tree

Hide file tree

Showing 12 changed files with 79 additions and 56 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 8.0.3
+
+- Bug: Remove redundant component check, as we auto-generate titles from the file system - [#26516](https://github.com/storybookjs/storybook/pull/26516), thanks @kasperpeulen!
+- UI: Replace the icon prop in the Manager API - [#26477](https://github.com/storybookjs/storybook/pull/26477), thanks @cdedreuille!
+
 ## 8.0.2
 
 - Addon Docs: Fix [Object object] displayName in some JSX components - [#26566](https://github.com/storybookjs/storybook/pull/26566), thanks @yannbf!

diff --git a/code/lib/csf-tools/src/CsfFile.test.ts b/code/lib/csf-tools/src/CsfFile.test.ts
@@ -619,15 +619,23 @@ describe('CsfFile', () => {
     });
 
     it('no metadata', () => {
-      expect(() =>
+      expect(
         parse(
           dedent`
           export default { foo: '5' };
           export const A = () => {};
           export const B = () => {};
       `
         )
-      ).toThrow('CSF: missing title/component');
+      ).toMatchInlineSnapshot(`
+        meta:
+          title: Default Title
+        stories:
+          - id: default-title--a
+            name: A
+          - id: default-title--b
+            name: B
+      `);
     });
 
     it('dynamic titles', () => {

diff --git a/code/lib/csf-tools/src/CsfFile.ts b/code/lib/csf-tools/src/CsfFile.ts
@@ -478,14 +478,6 @@ export class CsfFile {
       throw new NoMetaError('missing default export', self._ast, self._fileName);
     }
 
-    if (!self._meta.title && !self._meta.component) {
-      throw new Error(dedent`
-        CSF: missing title/component ${formatLocation(self._ast, self._fileName)}
-
-        More info: https://storybook.js.org/docs/react/writing-stories#default-export
-      `);
-    }
-
     // default export can come at any point in the file, so we do this post processing last
     const entries = Object.entries(self._stories);
     self._meta.title = this._makeTitle(self._meta?.title as string);

diff --git 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 → .../lib/manager-api/src/modules/whatsnew.tsx b/code/lib/manager-api/src/modules/whatsnew.ts → .../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 });

diff --git a/code/lib/types/src/modules/api.ts b/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;
 }
 

diff --git a/code/package.json b/code/package.json
@@ -295,5 +295,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.0.3"
 }
diff --git 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: <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: {

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

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

diff --git a/docs/versions/latest.json b/docs/versions/latest.json
@@ -1 +1 @@
-{"version":"8.0.2","info":{"plain":"- Addon Docs: Fix [Object object] displayName in some JSX components - [#26566](https://github.com/storybookjs/storybook/pull/26566), thanks @yannbf!\n- CLI: Add yarn1 package manager fallback for init in empty directory - [#26500](https://github.com/storybookjs/storybook/pull/26500), thanks @valentinpalkovic!\n- CSF: Make sure loaders/decorators can be used as array - [#26514](https://github.com/storybookjs/storybook/pull/26514), thanks @kasperpeulen!\n- Controls: Fix disable condition in ArgControl component - [#26567](https://github.com/storybookjs/storybook/pull/26567), thanks @valentinpalkovic!\n- UI: Add key property to list children in Highlight component - [#26471](https://github.com/storybookjs/storybook/pull/26471), thanks @valentinpalkovic!\n- UI: Fix theming of elements inside bars - [#26527](https://github.com/storybookjs/storybook/pull/26527), thanks @valentinpalkovic!\n- UI: Improve empty state of addon panel - [#26481](https://github.com/storybookjs/storybook/pull/26481), thanks @yannbf!"}}
+{"version":"8.0.3","info":{"plain":"- Bug: Remove redundant component check, as we auto-generate titles from the file system - [#26516](https://github.com/storybookjs/storybook/pull/26516), thanks @kasperpeulen!\n- UI: Replace the icon prop in the Manager API - [#26477](https://github.com/storybookjs/storybook/pull/26477), thanks @cdedreuille!"}}
diff --git a/docs/versions/next.json b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"8.1.0-alpha.2","info":{"plain":"- CLI: Automigrate improve upgrade storybook related packages - [#26497](https://github.com/storybookjs/storybook/pull/26497), thanks @ndelangen!\n- CLI: Improve `vite-config-file.ts` - [#26375](https://github.com/storybookjs/storybook/pull/26375), thanks @joevaugh4n!\n- Controls: Fix number controls do not reset - [#26372](https://github.com/storybookjs/storybook/pull/26372), thanks @jiyiru!\n- Core: Optimize clearNotification - [#26415](https://github.com/storybookjs/storybook/pull/26415), thanks @ndelangen!\n- Portable stories: Make setProjectAnnotations accept multiple types of imports - [#26316](https://github.com/storybookjs/storybook/pull/26316), thanks @yannbf!\n- UI: Add key property to list children in Highlight component - [#26471](https://github.com/storybookjs/storybook/pull/26471), thanks @valentinpalkovic!\n- UI: Fix search result color contrast - [#26287](https://github.com/storybookjs/storybook/pull/26287), thanks @winchesHe!"}}
+{"version":"8.1.0-alpha.3","info":{"plain":"- Addon Docs: Fix [Object object] displayName in some JSX components - [#26566](https://github.com/storybookjs/storybook/pull/26566), thanks @yannbf!\n- CLI: Introduce package manager fallback for initializing Storybook in an empty directory with yarn1 - [#26500](https://github.com/storybookjs/storybook/pull/26500), thanks @valentinpalkovic!\n- CSF: Make sure loaders/decorators can be used as array - [#26514](https://github.com/storybookjs/storybook/pull/26514), thanks @kasperpeulen!\n- Controls: Fix disable condition in ArgControl component - [#26567](https://github.com/storybookjs/storybook/pull/26567), thanks @valentinpalkovic!\n- Portable stories: Introduce experimental Playwright CT API and Support for more renderers - [#26063](https://github.com/storybookjs/storybook/pull/26063), thanks @yannbf!\n- UI: Fix theming of elements inside bars - [#26527](https://github.com/storybookjs/storybook/pull/26527), thanks @valentinpalkovic!\n- UI: Improve empty state of addon panel - [#26481](https://github.com/storybookjs/storybook/pull/26481), thanks @yannbf!"}}