Merge pull request #24140 from storybookjs/version-patch-from-7.4.1

Release: Patch 7.4.2

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 7.4.2
+
+- Addon API: Improve the updateStatus API - [#24007](https://github.com/storybookjs/storybook/pull/24007), thanks [@ndelangen](https://github.com/ndelangen)!
+- Nextjs: Migrate from config to previewAnnotations - [#24178](https://github.com/storybookjs/storybook/pull/24178), thanks [@yannbf](https://github.com/yannbf)!
+- UI: Fix SVG override fill when path has a fill attribute - [#24156](https://github.com/storybookjs/storybook/pull/24156), thanks [@ndelangen](https://github.com/ndelangen)!
+- UI: Improve look and feel of status UI in sidebar - [#24099](https://github.com/storybookjs/storybook/pull/24099), thanks [@ndelangen](https://github.com/ndelangen)!
+
 ## 7.4.1
 
 - CLI: Add uncaughtException handler - [#24018](https://github.com/storybookjs/storybook/pull/24018), thanks [@yannbf](https://github.com/yannbf)!

code/frameworks/nextjs/src/preset.ts

@@ -68,7 +68,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   };
 };
 
-export const config: StorybookConfig['previewAnnotations'] = (entry = []) => [
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => [
   ...entry,
   require.resolve('@storybook/nextjs/preview.js'),
 ];

code/lib/manager-api/src/modules/stories.ts

@@ -263,7 +263,10 @@ export interface SubAPI {
    * @param {StatusUpdate} update - An object containing the updated status information.
    * @returns {Promise<void>} A promise that resolves when the status has been updated.
    */
-  experimental_updateStatus: (addonId: string, update: API_StatusUpdate) => Promise<void>;
+  experimental_updateStatus: (
+    addonId: string,
+    update: API_StatusUpdate | ((state: API_StatusState) => API_StatusUpdate)
+  ) => Promise<void>;
   /**
    * Updates the filtering of the index.
    *
@@ -581,13 +584,27 @@ export const init: ModuleFn<SubAPI, SubState> = ({
     },
 
     /* EXPERIMENTAL APIs */
-    experimental_updateStatus: async (id, update) => {
+    experimental_updateStatus: async (id, input) => {
       const { status, internal_index: index } = store.getState();
       const newStatus = { ...status };
 
+      const update = typeof input === 'function' ? input(status) : input;
+
+      if (Object.keys(update).length === 0) {
+        return;
+      }
+
       Object.entries(update).forEach(([storyId, value]) => {
         newStatus[storyId] = { ...(newStatus[storyId] || {}) };
-        newStatus[storyId][id] = value;
+        if (value === null) {
+          delete newStatus[storyId][id];
+        } else {
+          newStatus[storyId][id] = value;
+        }
+
+        if (Object.keys(newStatus[storyId]).length === 0) {
+          delete newStatus[storyId];
+        }
       });
 
       await store.setState({ status: newStatus }, { persistence: 'session' });

code/lib/manager-api/src/tests/stories.test.ts

@@ -1273,6 +1273,90 @@ describe('stories API', () => {
         }
       `);
     });
+    it('delete when value is null', async () => {
+      const moduleArgs = createMockModuleArgs({});
+      const { api } = initStories(moduleArgs as unknown as ModuleArgs);
+      const { store } = moduleArgs;
+
+      await api.setIndex({ v: 4, entries: mockEntries });
+
+      await expect(
+        api.experimental_updateStatus('a-addon-id', {
+          'a-story-id': {
+            status: 'pending',
+            title: 'an addon title',
+            description: 'an addon description',
+          },
+          'another-story-id': { status: 'success', title: 'a addon title', description: '' },
+        })
+      ).resolves.not.toThrow();
+
+      // do a second update, this time with null
+      await expect(
+        api.experimental_updateStatus('a-addon-id', {
+          'a-story-id': null,
+          'another-story-id': { status: 'success', title: 'a addon title', description: '' },
+        })
+      ).resolves.not.toThrow();
+
+      expect(store.getState().status).toMatchInlineSnapshot(`
+        Object {
+          "another-story-id": Object {
+            "a-addon-id": Object {
+              "description": "",
+              "status": "success",
+              "title": "a addon title",
+            },
+          },
+        }
+      `);
+    });
+    it('updates with a function', async () => {
+      const moduleArgs = createMockModuleArgs({});
+      const { api } = initStories(moduleArgs as unknown as ModuleArgs);
+      const { store } = moduleArgs;
+
+      await api.setIndex({ v: 4, entries: mockEntries });
+
+      // setup initial state
+      await expect(
+        api.experimental_updateStatus('a-addon-id', () => ({
+          'a-story-id': {
+            status: 'pending',
+            title: 'an addon title',
+            description: 'an addon description',
+          },
+          'another-story-id': { status: 'success', title: 'a addon title', description: '' },
+        }))
+      ).resolves.not.toThrow();
+
+      // use existing state in function
+      await expect(
+        api.experimental_updateStatus('a-addon-id', (current) => {
+          return Object.fromEntries(
+            Object.entries(current).map(([k, v]) => [k, { ...v['a-addon-id'], status: 'success' }])
+          );
+        })
+      ).resolves.not.toThrow();
+      expect(store.getState().status).toMatchInlineSnapshot(`
+        Object {
+          "a-story-id": Object {
+            "a-addon-id": Object {
+              "description": "an addon description",
+              "status": "success",
+              "title": "an addon title",
+            },
+          },
+          "another-story-id": Object {
+            "a-addon-id": Object {
+              "description": "",
+              "status": "success",
+              "title": "a addon title",
+            },
+          },
+        }
+      `);
+    });
   });
   describe('experimental_setFilter', () => {
     it('is included in the initial state', async () => {

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

@@ -186,5 +186,5 @@ export type API_StatusState = Record<StoryId, Record<string, API_StatusObject>>;
 export type API_StatusUpdate = Record<StoryId, API_StatusObject>;
 
 export type API_FilterFunction = (
-  item: API_PreparedIndexEntry & { status: Record<string, API_StatusObject> }
+  item: API_PreparedIndexEntry & { status: Record<string, API_StatusObject | null> }
 ) => boolean;

code/package.json

@@ -327,5 +327,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "7.4.2"
 }

code/ui/components/src/components/Button/Button.tsx

@@ -167,7 +167,7 @@ const ButtonWrapper = styled.button<{
           boxShadow: `${color} 0 0 0 1px inset`,
           color,
 
-          'svg path': {
+          'svg path:not([fill])': {
             fill: color,
           },
 
@@ -205,7 +205,7 @@ const ButtonWrapper = styled.button<{
           boxShadow: `${color} 0 0 0 1px inset`,
           color,
 
-          'svg path': {
+          'svg path:not([fill])': {
             fill: color,
           },
 

code/ui/components/src/components/tooltip/ListItem.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import ListItem from './ListItem';
 import { Icons } from '../icon/icon';
 
@@ -51,6 +51,93 @@ export const ActiveIcon = {
     right: <Icons icon="eye" />,
   },
 };
+export const ActiveIconLeft = {
+  args: {
+    title: 'Active icon',
+    active: true,
+    left: <Icons icon="eye" />,
+  },
+};
+export const ActiveIconLeftColored = {
+  args: {
+    title: 'Active icon',
+    active: true,
+    left: (
+      <Fragment>
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-label="Chrome"
+        >
+          <path
+            d="M5.06982 9.68493L7.99484 4.63927L14.5786 4.62406C14.5252 4.52043 14.4696 4.41742 14.4109 4.31532C12.372 0.768556 7.84405 -0.453864 4.29726 1.58495C3.24614 2.1892 2.39921 3.01211 1.78076 3.96327L5.06982 9.68493Z"
+            fill="#DB4437"
+          />
+          <path
+            d="M10.9276 9.68457L5.09539 9.6743L1.79036 3.98022C1.72727 4.07822 1.66591 4.17795 1.60682 4.27985C-0.445348 7.81892 0.759985 12.3515 4.29905 14.4037C5.34791 15.0118 6.48403 15.3338 7.617 15.3939L10.9276 9.68457Z"
+            fill="#0F9D58"
+          />
+          <path
+            d="M7.98649 4.61194L10.9032 9.66241L7.63525 15.3778C7.75167 15.3833 7.86871 15.3863 7.98649 15.3863C12.0775 15.3863 15.3939 12.0699 15.3939 7.97893C15.3939 6.76648 15.1025 5.62211 14.5861 4.61194L7.98649 4.61194Z"
+            fill="#FFCD40"
+          />
+          <path
+            d="M8.01367 4.6366V6.40005L14.613 4.6366H8.01367Z"
+            fill="url(#paint0_radial_466_21161)"
+          />
+          <path
+            d="M1.78198 4.00098L6.60102 8.8192L5.09764 9.687L1.78198 4.00098Z"
+            fill="url(#paint1_radial_466_21161)"
+          />
+          <path
+            d="M7.6626 15.4017L9.42689 8.81921L10.9303 9.68702L7.6626 15.4017Z"
+            fill="url(#paint2_radial_466_21161)"
+          />
+          <ellipse cx="8.01347" cy="8.00358" rx="3.36699" ry="3.36699" fill="#F1F1F1" />
+          <ellipse cx="8.01367" cy="8.00354" rx="2.69361" ry="2.6936" fill="#4285F4" />
+          <defs>
+            <radialGradient
+              id="paint0_radial_466_21161"
+              cx="0"
+              cy="0"
+              r="1"
+              gradientUnits="userSpaceOnUse"
+              gradientTransform="translate(7.69229 4.63226) scale(7.07721 1.89116)"
+            >
+              <stop stopColor="#3E2723" stopOpacity="0.2" />
+              <stop offset="1" stopColor="#3E2723" stopOpacity="0.01" />
+            </radialGradient>
+            <radialGradient
+              id="paint1_radial_466_21161"
+              cx="0"
+              cy="0"
+              r="1"
+              gradientUnits="userSpaceOnUse"
+              gradientTransform="translate(1.77445 4.00677) scale(6.56938 7.75127)"
+            >
+              <stop stopColor="#3E2723" stopOpacity="0.2" />
+              <stop offset="1" stopColor="#3E2723" stopOpacity="0.01" />
+            </radialGradient>
+            <radialGradient
+              id="paint2_radial_466_21161"
+              cx="0"
+              cy="0"
+              r="1"
+              gradientUnits="userSpaceOnUse"
+              gradientTransform="translate(8.00025 8.01489) scale(7.39644 14.8995)"
+            >
+              <stop stopColor="#263238" stopOpacity="0.2" />
+              <stop offset="1" stopColor="#263238" stopOpacity="0.01" />
+            </radialGradient>
+          </defs>
+        </svg>
+      </Fragment>
+    ),
+  },
+};
 
 export const WPositions = {
   args: {

code/ui/components/src/components/tooltip/ListItem.tsx

@@ -107,7 +107,7 @@ const Left = styled.span<LeftProps>(
           '& svg': {
             opacity: 1,
           },
-          '& svg path': {
+          '& svg path:not([fill])': {
             fill: theme.color.secondary,
           },
         }

code/ui/components/src/components/tooltip/WithTooltip.tsx

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from 'react';
+import type { ComponentProps, FC, ReactNode } from 'react';
 import React, { useCallback, useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { styled } from '@storybook/theming';
@@ -28,6 +28,7 @@ interface WithHideFn {
 
 export interface WithTooltipPureProps
   extends Omit<ReactPopperTooltipConfig, 'closeOnOutsideClick'>,
+    Omit<ComponentProps<typeof TargetContainer>, 'trigger'>,
     PopperOptions {
   svg?: boolean;
   withArrows?: boolean;
@@ -129,7 +130,7 @@ const WithTooltipPure: FC<WithTooltipPureProps> = ({
 
   return (
     <>
-      <Container trigger={trigger} ref={setTriggerRef as any} {...props}>
+      <Container trigger={trigger} ref={setTriggerRef as any} {...(props as any)}>
         {children}
       </Container>
       {isVisible && ReactDOM.createPortal(tooltipComponent, document.body)}

code/ui/components/src/components/typography/link/link.tsx

@@ -73,13 +73,13 @@ const A = styled.a<LinkStylesProps>(
     '&:hover, &:focus': {
       cursor: 'pointer',
       color: darken(0.07, theme.color.secondary),
-      'svg path': {
+      'svg path:not([fill])': {
         fill: darken(0.07, theme.color.secondary),
       },
     },
     '&:active': {
       color: darken(0.1, theme.color.secondary),
-      'svg path': {
+      'svg path:not([fill])': {
         fill: darken(0.1, theme.color.secondary),
       },
     },
@@ -110,20 +110,20 @@ const A = styled.a<LinkStylesProps>(
     return colors
       ? {
           color: colors[0],
-          'svg path': {
+          'svg path:not([fill])': {
             fill: colors[0],
           },
 
           '&:hover': {
             color: colors[1],
-            'svg path': {
+            'svg path:not([fill])': {
               fill: colors[1],
             },
           },
 
           '&:active': {
             color: colors[2],
-            'svg path': {
+            'svg path:not([fill])': {
               fill: colors[2],
             },
           },
@@ -145,20 +145,20 @@ const A = styled.a<LinkStylesProps>(
     inverse
       ? {
           color: theme.color.lightest,
-          'svg path': {
+          ':not([fill])': {
             fill: theme.color.lightest,
           },
 
           '&:hover': {
             color: theme.color.lighter,
-            'svg path': {
+            'svg path:not([fill])': {
               fill: theme.color.lighter,
             },
           },
 
           '&:active': {
             color: theme.color.light,
-            'svg path': {
+            'svg path:not([fill])': {
               fill: theme.color.light,
             },
           },

code/ui/manager/src/components/sidebar/SearchResults.tsx

@@ -172,14 +172,12 @@ const Result: FC<
     node = <DocumentNode href={getLink(item, item.refId)} {...nodeProps} />;
   }
 
-  const [i, iconColor] = item.status ? statusMapping[item.status] : [];
+  const [i] = item.status ? statusMapping[item.status] : [];
 
   return (
     <ResultRow {...props}>
       {node}
-      {item.status ? (
-        <Icons width="8px" height="8px" icon={i} style={{ color: iconColor }} />
-      ) : null}
+      {item.status ? i : null}
     </ResultRow>
   );
 });