Release: Prerelease 10.2.0-alpha.6

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 10.1.6
+
+- Manager: Do not display non-existing shortcuts in the settings page - [#32711](https://github.com/storybookjs/storybook/pull/32711), thanks @DKER2!
+- Preview: Enforce inert body if manager is focus-trapped - [#33186](https://github.com/storybookjs/storybook/pull/33186), thanks @Sidnioulz!
+- Telemetry: Await pending operations in getLastEvents to prevent race conditions - [#33285](https://github.com/storybookjs/storybook/pull/33285), thanks @valentinpalkovic!
+- UI: Fix keyboard navigation bug for "reset" option in `Select` - [#33268](https://github.com/storybookjs/storybook/pull/33268), thanks @Sidnioulz!
+
 ## 10.1.5
 
 - Addon-Vitest: Isolate error reasons during postinstall - [#33295](https://github.com/storybookjs/storybook/pull/33295), thanks @valentinpalkovic!

CHANGELOG.prerelease.md

@@ -1,3 +1,12 @@
+## 10.2.0-alpha.6
+
+- Controls: Fix displaying as object instead of select for optional union types - [#33200](https://github.com/storybookjs/storybook/pull/33200), thanks @tanujbhaud!
+- Controls: Force object control JSON mode to reset - [#33330](https://github.com/storybookjs/storybook/pull/33330), thanks @Sidnioulz!
+- Docs-Blocks: Fix broken tooltip in ArgValue details - [#33264](https://github.com/storybookjs/storybook/pull/33264), thanks @Sidnioulz!
+- Manager: Ensure reset item only appears in globals toolbar when specified - [#33276](https://github.com/storybookjs/storybook/pull/33276), thanks @mrginglymus!
+- Nextjs-Vite: Install `vite` during migration if not installed yet - [#33316](https://github.com/storybookjs/storybook/pull/33316), thanks @ghengeveld!
+- UI: Make vertical alignment of TestStatusIcon more robust - [#33305](https://github.com/storybookjs/storybook/pull/33305), thanks @Sidnioulz!
+
 ## 10.2.0-alpha.5
 
 - Addon-Vitest: Added timeout for fetching localhost 6006 during global setup.  - [#33232](https://github.com/storybookjs/storybook/pull/33232), thanks @snippy4!

code/.storybook/preview.tsx

@@ -349,7 +349,6 @@ const parameters = {
             plugins: [prettierPluginBabel, prettierPluginEstree],
           });
         } catch (error) {
-          console.error(error);
           return source;
         }
       },

code/addons/docs/src/blocks/components/ArgsTable/ArgRow.stories.tsx

@@ -2,6 +2,10 @@ import React from 'react';
 
 import { ResetWrapper } from 'storybook/internal/components';
 
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { expect, screen } from 'storybook/test';
+
 import { ArgRow } from './ArgRow';
 import { TableWrapper } from './ArgsTable';
 
@@ -10,7 +14,7 @@ export default {
   title: 'Components/ArgsTable/ArgRow',
 
   decorators: [
-    (getStory: any) => (
+    (getStory) => (
       <ResetWrapper>
         <TableWrapper>
           <tbody>{getStory()}</tbody>
@@ -21,7 +25,7 @@ export default {
   argTypes: {
     updateArgs: { action: 'updateArgs' },
   },
-};
+} satisfies Meta<typeof ArgRow>;
 
 export const String = {
   args: {
@@ -309,6 +313,52 @@ export const Func = {
   },
 };
 
+export const LongFunc = {
+  args: {
+    row: {
+      ...Func.args.row,
+      table: {
+        ...Func.args.row.table,
+        defaultValue: {
+          summary: 'func',
+          detail: `(a, b) => {
+  // Calculate various metrics between a and b
+  const lengthA = a.length;
+  const lengthB = b.length;
+
+  // Determine the longer string
+  const maxLength = Math.max(lengthA, lengthB);
+  const minLength = Math.min(lengthA, lengthB);
+
+  // Calculate similarity score
+  let matchCount = 0;
+  for (let i = 0; i < minLength; i++) {
+    if (a[i] === b[i]) {
+      matchCount++;
+    }
+  }
+
+  // Compute weighted average
+  const similarity = (matchCount / maxLength) * 100;
+
+  // Generate result string
+  const result = \`Similarity: \${similarity.toFixed(2)}%, Length diff: \${Math.abs(lengthA - lengthB)}\`;
+
+  return result;
+}`,
+        },
+      },
+    },
+  },
+  play: async ({ canvas }) => {
+    const funcButton = canvas.getByRole('button', { name: 'func' });
+    funcButton.click();
+    expect(
+      await screen.findByText(/Calculate various metrics between a and b/)
+    ).toBeInTheDocument();
+  },
+} satisfies StoryObj<typeof ArgRow>;
+
 const enumeration =
   '"search" | "arrow-to-bottom" | "arrow-to-right" | "bell" | "check" | "check-circle"';
 export const Enum = {
@@ -345,7 +395,20 @@ export const LongEnum = {
       },
     },
   },
-};
+  play: async ({ canvas, step }) => {
+    await step('Expand long enum', async () => {
+      canvas.getByRole('button', { name: 'Show 26 more...' }).click();
+      expect(await canvas.findByText(/exclamation-triangle/)).toBeVisible();
+    });
+    await step('Collapse long enum', async () => {
+      (await canvas.findByRole('button', { name: 'Show less...' })).click();
+      expect(await canvas.findByText(/exclamation-triangle/)).not.toBeVisible();
+    });
+    await step('Re-expand for visual test', async () => {
+      (await canvas.findByRole('button', { name: 'Show 26 more...' })).click();
+    });
+  },
+} satisfies StoryObj<typeof ArgRow>;
 
 const complexUnion =
   '((a: string | SVGSVGElement) => void) | RefObject<SVGSVGElement | number> | [a|b] | {a|b}';

code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx

@@ -1,12 +1,11 @@
 import type { FC } from 'react';
 import React, { useState } from 'react';
 
-import { SyntaxHighlighter, TooltipProvider, codeCommon } from 'storybook/internal/components';
+import { PopoverProvider, SyntaxHighlighter, codeCommon } from 'storybook/internal/components';
 
 import { ChevronSmallDownIcon, ChevronSmallUpIcon } from '@storybook/icons';
 
 import { uniq } from 'es-toolkit/array';
-import memoize from 'memoizerific';
 import { styled } from 'storybook/theming';
 
 import type { PropSummaryValue } from './types';
@@ -37,6 +36,27 @@ const Summary = styled.div<{ isExpanded?: boolean }>(({ isExpanded }) => ({
   minWidth: 100,
 }));
 
+const DetailsContainer = styled.details({
+  display: 'flex',
+  flexDirection: 'column',
+  summary: {
+    order: 2,
+  },
+  'summary::-webkit-details-marker': {
+    display: 'none',
+  },
+  'summary::marker': {
+    content: 'none',
+  },
+});
+
+const AlignedDetails = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flexWrap: 'wrap',
+  alignItems: 'flex-start',
+});
+
 const Text = styled.span<{ simple?: boolean }>(codeCommon, ({ theme, simple = false }) => ({
   flex: '0 0 auto',
   fontFamily: theme.typography.fonts.mono,
@@ -57,29 +77,40 @@ const Text = styled.span<{ simple?: boolean }>(codeCommon, ({ theme, simple = fa
   }),
 }));
 
-const ExpandButton = styled.button(({ theme }) => ({
+const ExpandButton = styled.summary(({ theme }) => ({
   fontFamily: theme.typography.fonts.mono,
   color: theme.color.secondary,
-  marginBottom: '4px',
+  cursor: 'pointer',
+  lineHeight: 'normal',
+  margin: '0 0 4px',
+  padding: '1px 6px',
   background: 'none',
   border: 'none',
 }));
 
-const Expandable = styled.div(codeCommon, ({ theme }) => ({
+const Expandable = styled.button(codeCommon, ({ theme }) => ({
   fontFamily: theme.typography.fonts.mono,
   color: theme.color.secondary,
   fontSize: theme.typography.size.s1, // overrides codeCommon
   margin: 0,
   whiteSpace: 'nowrap',
   display: 'flex',
   alignItems: 'center',
+  cursor: 'pointer',
+  '&:hover': {
+    border:
+      theme.base === 'light' ? '1px solid hsl(0 0 0 / 0.15)' : '1px solid hsl(0 0 100 / 0.15)',
+  },
+  '&:focus-visible': {
+    outline: `2px solid ${theme.color.secondary}`,
+    outlineOffset: '2px',
+  },
 }));
 
-const Detail = styled.div<{ width: string }>(({ theme, width }) => ({
-  width,
+const Detail = styled.div(({ theme }) => ({
   minWidth: 200,
   maxWidth: 800,
-  padding: 15,
+  paddingRight: 16,
   // Don't remove the mono fontFamily here even if it seems useless, this is used by the browser to calculate the length of a "ch" unit.
   fontFamily: theme.typography.fonts.mono,
   fontSize: theme.typography.size.s1,
@@ -107,12 +138,6 @@ const ArgText: FC<ArgTextProps> = ({ text, simple }) => {
   return <Text simple={simple}>{text}</Text>;
 };
 
-const calculateDetailWidth = memoize(1000)((detail: string): string => {
-  const lines = detail.split(/\r?\n/);
-
-  return `${Math.max(...lines.map((x) => x.length))}ch`;
-});
-
 const getSummaryItems = (summary: string) => {
   if (!summary) {
     return [summary];
@@ -123,13 +148,16 @@ const getSummaryItems = (summary: string) => {
   return uniq(summaryItems);
 };
 
-const renderSummaryItems = (summaryItems: string[], isExpanded = true) => {
-  let items = summaryItems;
-  if (!isExpanded) {
-    items = summaryItems.slice(0, ITEMS_BEFORE_EXPANSION);
-  }
+const renderSummaryItems = (summaryItems: string[]) => {
+  return summaryItems
+    .slice(0, ITEMS_BEFORE_EXPANSION)
+    .map((item) => <ArgText key={item} text={item === '' ? '""' : item} />);
+};
 
-  return items.map((item) => <ArgText key={item} text={item === '' ? '""' : item} />);
+const renderExpandedItems = (summaryItems: string[]) => {
+  return summaryItems
+    .slice(ITEMS_BEFORE_EXPANSION)
+    .map((item) => <ArgText key={item} text={item === '' ? '""' : item} />);
 };
 
 const ArgSummary: FC<ArgSummaryProps> = ({ value, initialExpandedArgs }) => {
@@ -160,25 +188,29 @@ const ArgSummary: FC<ArgSummaryProps> = ({ value, initialExpandedArgs }) => {
 
     return hasManyItems ? (
       <Summary isExpanded={isExpanded}>
-        {renderSummaryItems(summaryItems, isExpanded)}
-        <ExpandButton onClick={() => setIsExpanded(!isExpanded)}>
-          {isExpanded ? 'Show less...' : `Show ${itemsCount - ITEMS_BEFORE_EXPANSION} more...`}
-        </ExpandButton>
+        {renderSummaryItems(summaryItems)}
+        <DetailsContainer open={isExpanded} onToggle={(e) => setIsExpanded(e.currentTarget.open)}>
+          <AlignedDetails>{renderExpandedItems(summaryItems)}</AlignedDetails>
+          <ExpandButton role="button">
+            {isExpanded ? 'Show less...' : `Show ${itemsCount - ITEMS_BEFORE_EXPANSION} more...`}
+          </ExpandButton>
+        </DetailsContainer>
       </Summary>
     ) : (
       <Summary>{renderSummaryItems(summaryItems)}</Summary>
     );
   }
 
   return (
-    <TooltipProvider
+    <PopoverProvider
       placement="bottom"
       visible={isOpen}
       onVisibleChange={(isVisible) => {
         setIsOpen(isVisible);
       }}
-      tooltip={
-        <Detail width={calculateDetailWidth(detail)}>
+      hasCloseButton
+      popover={
+        <Detail>
           <SyntaxHighlighter language="jsx" format={false}>
             {detail}
           </SyntaxHighlighter>
@@ -189,7 +221,7 @@ const ArgSummary: FC<ArgSummaryProps> = ({ value, initialExpandedArgs }) => {
         <span>{summaryAsString}</span>
         {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
       </Expandable>
-    </TooltipProvider>
+    </PopoverProvider>
   );
 };
 

code/addons/docs/src/blocks/controls/Object.tsx

@@ -207,6 +207,11 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType
     }
   }, [forceVisible]);
 
+  // Use string value as key to force re-render on Arg value reset.
+  const jsonString = useMemo(() => {
+    return JSON.stringify(data ?? '', null, 2);
+  }, [data]);
+
   if (!hasData) {
     return (
       <Button
@@ -226,7 +231,8 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType
       id={getControlId(name)}
       minRows={3}
       name={name}
-      defaultValue={value === null ? '' : JSON.stringify(value, null, 2)}
+      key={jsonString}
+      defaultValue={jsonString}
       onBlur={(event: FocusEvent<HTMLTextAreaElement>) => updateRaw(event.target.value)}
       placeholder="Edit JSON string..."
       autoFocus={forceVisible}

code/addons/vitest/src/components/TestProviderRender.tsx

@@ -295,9 +295,9 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
               });
             }}
           >
-            <TestStatusIcon status={componentTestStatusIcon} isRunning={isRunning} />
             {componentTestStatusValueToStoryIds['status-value:error'].length +
               componentTestStatusValueToStoryIds['status-value:warning'].length || null}
+            <TestStatusIcon status={componentTestStatusIcon} isRunning={isRunning} />
           </ActionList.Button>
         </ActionList.Item>
 
@@ -343,12 +343,12 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
                 }
               >
                 <a href="/coverage/index.html" target="_blank">
+                  {currentRun.coverageSummary.percentage}%
                   <TestStatusIcon
                     isRunning={isRunning}
                     percentage={currentRun.coverageSummary.percentage}
                     status={currentRun.coverageSummary.status}
                   />
-                  {currentRun.coverageSummary.percentage}%
                 </a>
               </ActionList.Button>
             ) : (
@@ -412,9 +412,9 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
                 });
               }}
             >
-              <TestStatusIcon status={a11yStatusIcon} isRunning={isRunning} />
               {a11yStatusValueToStoryIds['status-value:error'].length +
                 a11yStatusValueToStoryIds['status-value:warning'].length || null}
+              <TestStatusIcon status={a11yStatusIcon} isRunning={isRunning} />
             </ActionList.Button>
           </ActionList.Item>
         )}

code/core/src/components/components/Popover/PopoverProvider.tsx

@@ -77,7 +77,7 @@ export const PopoverProvider = ({
     },
     [onVisibleChange]
   );
-  const onHide = useCallback(() => setIsOpen(false), []);
+  const onHide = useCallback(() => onOpenChange(false), [onOpenChange]);
 
   return (
     <DialogTrigger