Release: Patch 10.2.7

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 10.2.7
+
+- CSF: Fix cross-file story imports in csf-factories codemod  - [#33723](https://github.com/storybookjs/storybook/pull/33723), thanks @yatishgoel!
+- Core: Fix rendering of View Transitions in Firefox - [#33651](https://github.com/storybookjs/storybook/pull/33651), thanks @ghengeveld!
+- Globals: Repair dynamicTitle: false for user-defined tools - [#33284](https://github.com/storybookjs/storybook/pull/33284), thanks @ia319!
+- Logger: Honor --loglevel for npmlog output - [#33776](https://github.com/storybookjs/storybook/pull/33776), thanks @LouisLau-art!
+
 ## 10.2.6
 
 - Addon-Vitest: Skip postinstall setup when configured - [#33712](https://github.com/storybookjs/storybook/pull/33712), thanks @valentinpalkovic!

code/core/src/bin/core.ts

@@ -2,7 +2,7 @@ import { getEnvConfig, optionalEnvToBoolean, parseList } from 'storybook/interna
 import { logTracker, logger } from 'storybook/internal/node-logger';
 import { addToGlobalContext } from 'storybook/internal/telemetry';
 
-import { program } from 'commander';
+import { Option, program } from 'commander';
 import leven from 'leven';
 import picocolors from 'picocolors';
 
@@ -45,17 +45,20 @@ const command = (name: string) =>
     )
     .option('--debug', 'Get more logs in debug mode', false)
     .option('--enable-crash-reports', 'Enable sending crash reports to telemetry data')
-    .option('--loglevel <trace | debug | info | warn | error | silent>', 'Define log level', 'info')
+    .addOption(
+      new Option('--loglevel <level>', 'Define log level')
+        .choices(['trace', 'debug', 'info', 'warn', 'error', 'silent'])
+        .default('info')
+    )
     .option(
       '--logfile [path]',
       'Write all debug logs to the specified file at the end of the run. Defaults to debug-storybook.log when [path] is not provided'
     )
     .hook('preAction', async (self) => {
       try {
         const options = self.opts();
-        if (options.loglevel) {
-          logger.setLogLevel(options.loglevel);
-        }
+        const loglevel = options.debug ? 'debug' : options.loglevel;
+        logger.setLogLevel(loglevel);
 
         if (options.logfile) {
           logTracker.enableLogWriting();

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/manager/components/preview/Viewport.tsx

@@ -359,7 +359,7 @@ export const Viewport = ({
           style={{
             height: `${(1 / scale) * 100}%`,
             width: `${(1 / scale) * 100}%`,
-            transform: `scale(${scale})`,
+            transform: scale !== 1 ? `scale(${scale})` : 'none',
             transformOrigin: 'top left',
           }}
         >

code/core/src/node-logger/index.test.ts

@@ -48,6 +48,23 @@ describe('node-logger', () => {
     logger.warn(message);
     expect(loggerMock.warn).toHaveBeenCalledWith(message);
   });
+
+  it('should sync --loglevel with npmlog', () => {
+    logger.setLogLevel('debug');
+    expect(npmlog.level).toBe('verbose');
+    expect(loggerMock.setLogLevel).toHaveBeenCalledWith('debug');
+
+    logger.setLogLevel('trace');
+    expect(npmlog.level).toBe('silly');
+    expect(loggerMock.setLogLevel).toHaveBeenCalledWith('trace');
+  });
+
+  it('should keep setLevel and setLogLevel consistent', () => {
+    logger.setLevel('warn');
+    expect(npmlog.level).toBe('warn');
+    expect(loggerMock.setLogLevel).toHaveBeenCalledWith('warn');
+  });
+
   it('should have an error method', () => {
     const message = 'error message';
     logger.error(message);

code/core/src/node-logger/index.ts

@@ -17,6 +17,22 @@ export type { LogLevel } from './logger/logger';
 // there are issues with the build: https://github.com/storybookjs/storybook/issues/14621
 npmLog.stream = process.stdout;
 
+const toNpmLogLevel = (level: newLogger.LogLevel): string => {
+  switch (level) {
+    case 'trace':
+      return 'silly';
+    case 'debug':
+      return 'verbose';
+    default:
+      return level;
+  }
+};
+
+const setLoggerLevel = (level: newLogger.LogLevel = 'info'): void => {
+  npmLog.level = toNpmLogLevel(level);
+  newLogger.setLogLevel(level);
+};
+
 function hex(hexColor: string) {
   // Ensure the hex color is 6 characters long and starts with '#'
   if (!/^#?[0-9A-Fa-f]{6}$/.test(hexColor)) {
@@ -57,10 +73,8 @@ export const logger = {
   warn: (message: string): void => newLogger.warn(message),
   trace: ({ message, time }: { message: string; time: [number, number] }): void =>
     newLogger.debug(`${message} (${colors.purple(prettyTime(time))})`),
-  setLevel: (level: newLogger.LogLevel = 'info'): void => {
-    npmLog.level = level;
-    newLogger.setLogLevel(level);
-  },
+  setLevel: setLoggerLevel,
+  setLogLevel: setLoggerLevel,
   error: (message: unknown): void => {
     let msg: string;
     if (message instanceof Error && message.stack) {

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`