Merge branch 'next' into norbert/share-channel-events

Author: ndelangen

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 10.2.6
+
+- Addon-Vitest: Skip postinstall setup when configured - [#33712](https://github.com/storybookjs/storybook/pull/33712), thanks @valentinpalkovic!
+- Addon-Vitest: Support vite/vitest config with deferred export - [#33755](https://github.com/storybookjs/storybook/pull/33755), thanks @valentinpalkovic!
+- CLI: Support addon-vitest setup when --skip-install is passed - [#33718](https://github.com/storybookjs/storybook/pull/33718), thanks @valentinpalkovic!
+- Manager: Update logic to use base path instead of full pathname - [#33686](https://github.com/storybookjs/storybook/pull/33686), thanks @JSMike!
+
 ## 10.2.5
 
 - Angular: fix --loglevel options in docs and descriptions - [#33726](https://github.com/storybookjs/storybook/pull/33726), thanks @theRuslan!

code/addons/vitest/src/updateVitestFile.test.ts

@@ -293,7 +293,7 @@ describe('updateConfigFile', () => {
 
   it('updates config which is not exported immediately', async () => {
     const source = babel.babelParse(
-      await loadTemplate('vitest.config.3.2.template.ts', {
+      await loadTemplate('vitest.config.3.2.template', {
         CONFIG_DIR: '.storybook',
         BROWSER_CONFIG: "{ provider: 'playwright' }",
         SETUP_FILE: '../.storybook/vitest.setup.ts',

code/core/src/components/components/Select/Select.stories.tsx

@@ -1479,3 +1479,61 @@ export const ResetWithUndefinedOption = meta.story({
     });
   },
 });
+
+export const ShowSelectedOptionTitleTrue = meta.story({
+  name: 'Show Selected Option Title (prop=true)',
+  args: {
+    showSelectedOptionTitle: true,
+    defaultOptions: 'frog',
+  },
+  play: async ({ canvas, step }) => {
+    await step('Verify selected option title is shown', async () => {
+      const selectButton = await canvas.findByRole('button');
+      expect(selectButton).toHaveTextContent('Frog');
+    });
+  },
+});
+
+export const ShowSelectedOptionTitleFalse = meta.story({
+  name: 'Show Selected Option Title (prop=false)',
+  args: {
+    showSelectedOptionTitle: false,
+    defaultOptions: 'frog',
+  },
+  play: async ({ canvas, step }) => {
+    await step('Verify default title is shown instead of selected option', async () => {
+      const selectButton = await canvas.findByRole('button');
+      expect(selectButton).toHaveTextContent('Animal');
+    });
+  },
+});
+
+export const ShowSelectedOptionTitleFalseMulti = meta.story({
+  name: 'Show Selected Option Title (prop=false, multi)',
+  args: {
+    showSelectedOptionTitle: false,
+    multiSelect: true,
+    defaultOptions: ['frog', 'tadpole'],
+  },
+  play: async ({ canvas, step }) => {
+    await step('Verify default title is shown for multi-select', async () => {
+      const selectButton = await canvas.findByRole('button');
+      expect(selectButton).toHaveTextContent('Animal');
+    });
+  },
+});
+
+export const ShowSelectedOptionTitleTrueMulti = meta.story({
+  name: 'Show Selected Option Title (prop=true, multi)',
+  args: {
+    showSelectedOptionTitle: true,
+    multiSelect: true,
+    defaultOptions: ['frog'],
+  },
+  play: async ({ canvas, step }) => {
+    await step('Verify option count is shown for multi-select', async () => {
+      const selectButton = await canvas.findByRole('button');
+      expect(selectButton).toHaveTextContent('1');
+    });
+  },
+});

code/core/src/components/components/Select/Select.tsx

@@ -78,6 +78,13 @@ export interface SelectProps extends Omit<
   onSelect?: (option: Value) => void;
   onDeselect?: (option: Value) => void;
   onChange?: (selected: Value[]) => void;
+  /**
+   * Legacy option for ToolbarMenuSelect. Do not use in new code. Controls whether to show the
+   * selected option's title.
+   *
+   * @default true
+   */
+  showSelectedOptionTitle?: boolean;
 }
 
 function valueToId(parentId: string, { value }: InternalOption | ResetOption): string {
@@ -208,6 +215,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
       onChange,
       tooltip,
       ariaLabel,
+      showSelectedOptionTitle = true,
       ...props
     },
     ref
@@ -522,7 +530,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
           {!multiSelect && (
             <>
               {icon}
-              {selectedOptions[0]?.title ?? children}
+              {(showSelectedOptionTitle && selectedOptions[0]?.title) || children}
             </>
           )}
 

code/core/src/toolbar/components/ToolbarMenuSelect.tsx

@@ -29,7 +29,14 @@ export const ToolbarMenuSelect: FC<ToolbarMenuProps> = ({
   id,
   name,
   description,
-  toolbar: { icon: _icon, items, title: _title, preventDynamicIcon, dynamicTitle, shortcuts },
+  toolbar: {
+    icon: _icon,
+    items,
+    title: _title,
+    preventDynamicIcon,
+    dynamicTitle = true,
+    shortcuts,
+  },
 }) => {
   const api = useStorybookApi();
   const [globals, updateGlobals, storyGlobals] = useGlobals();
@@ -132,6 +139,7 @@ export const ToolbarMenuSelect: FC<ToolbarMenuProps> = ({
       onReset={resetItem ? () => updateGlobals({ [id]: resetItem?.value }) : undefined}
       onSelect={(selected) => updateGlobals({ [id]: selected })}
       icon={icon && <Icons icon={icon} __suppressDeprecationWarning={true} />}
+      showSelectedOptionTitle={dynamicTitle}
     >
       {title}
     </Select>

code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts

@@ -297,6 +297,62 @@ describe('stories codemod', () => {
       `);
     });
 
+    it('migrate cross-file story imports from `ImportedStories.Story.xyz` to `ImportedStories.Story.input.xyz`', async () => {
+      await expect(
+        transform(dedent`
+            import * as BaseStories from './Button.stories';
+            import { Primary as ImportedPrimary } from './Card.stories';
+
+            export default { title: 'Component' };
+
+            export const A = {
+              args: BaseStories.Primary.args,
+            };
+
+            export const B = {
+              ...BaseStories.Secondary,
+              args: {
+                ...BaseStories.Secondary.args,
+                label: 'Custom',
+              },
+            };
+
+            export const C = {
+              args: {
+                ...ImportedPrimary.args,
+              },
+            };
+          `)
+      ).resolves.toMatchInlineSnapshot(`
+        import preview from '#.storybook/preview';
+
+        import * as BaseStories from './Button.stories';
+        import { Primary as ImportedPrimary } from './Card.stories';
+
+        const meta = preview.meta({
+          title: 'Component',
+        });
+
+        export const A = meta.story({
+          args: BaseStories.Primary.input.args,
+        });
+
+        export const B = meta.story({
+          ...BaseStories.Secondary.input,
+          args: {
+            ...BaseStories.Secondary.input.args,
+            label: 'Custom',
+          },
+        });
+
+        export const C = meta.story({
+          args: {
+            ...ImportedPrimary.input.args,
+          },
+        });
+      `);
+    });
+
     it('does not migrate reused properties from disallowed list', async () => {
       await expect(
         transform(dedent`