Release: Patch 9.0.14

CHANGELOG.md

@@ -1,3 +1,12 @@
+## 9.0.14
+
+- CLI: Prebundle more in cli-storybook package - [#31746](https://github.com/storybookjs/storybook/pull/31746), thanks @ndelangen!
+- Core: Fix FIPS compliance - [#31806](https://github.com/storybookjs/storybook/pull/31806), thanks @JReinhold!
+- Core: Fix addon scrollbars and align scrollbar colors with toolbars - [#31844](https://github.com/storybookjs/storybook/pull/31844), thanks @Sidnioulz!
+- Deps: Extend `vite` peerDependencies range to include `7.0.0` - [#31859](https://github.com/storybookjs/storybook/pull/31859), thanks @ghengeveld!
+- Deps: Update vite-plugin-babel to 1.3.2 to fix vite 7.0.0 peerDependency issue - [#31888](https://github.com/storybookjs/storybook/pull/31888), thanks @ghengeveld!
+- UI: Hide keyboard shortcuts entry from menu when shortcuts are disabled - [#23411](https://github.com/storybookjs/storybook/pull/23411), thanks @Spielboerg!
+
 ## 9.0.13
 
 - Core: Gracefully handle disallowed cross-origin clipboard access - [#31834](https://github.com/storybookjs/storybook/pull/31834), thanks @ghengeveld!

code/addons/a11y/src/components/Tabs.tsx

@@ -58,6 +58,8 @@ const Subnav = styled.div(({ theme }) => ({
   overflow: 'auto',
   paddingRight: 10,
   gap: 6,
+  scrollbarColor: `${theme.barTextColor} ${theme.background.app}`,
+  scrollbarWidth: 'thin',
 }));
 
 const TabsWrapper = styled.div({});

code/addons/vitest/package.json

@@ -100,8 +100,8 @@
     "@types/micromatch": "^4.0.0",
     "@types/node": "^22.0.0",
     "@types/semver": "^7",
-    "@vitest/browser": "^3.2.0",
-    "@vitest/runner": "^3.2.0",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/runner": "^3.2.4",
     "boxen": "^8.0.1",
     "es-toolkit": "^1.36.0",
     "execa": "^8.0.1",
@@ -119,7 +119,7 @@
     "tree-kill": "^1.2.2",
     "ts-dedent": "^2.2.0",
     "typescript": "^5.8.3",
-    "vitest": "^3.2.0"
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "@vitest/browser": "^3.0.0",

code/builders/builder-vite/package.json

@@ -60,7 +60,7 @@
   },
   "peerDependencies": {
     "storybook": "workspace:^",
-    "vite": "^5.0.0 || ^6.0.0"
+    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
   },
   "publishConfig": {
     "access": "public"

code/core/package.json

@@ -437,8 +437,8 @@
     "@storybook/global": "^5.0.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.6.1",
-    "@vitest/expect": "3.0.9",
-    "@vitest/spy": "3.0.9",
+    "@vitest/expect": "3.2.4",
+    "@vitest/spy": "3.2.4",
     "better-opn": "^3.0.2",
     "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0",
     "esbuild-register": "^3.5.0",
@@ -488,7 +488,7 @@
     "@types/react-transition-group": "^4",
     "@types/semver": "^7.5.8",
     "@types/ws": "^8",
-    "@vitest/utils": "^3.0.9",
+    "@vitest/utils": "^3.2.4",
     "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
     "@yarnpkg/fslib": "2.10.3",
     "@yarnpkg/libzip": "2.3.0",

code/core/src/common/utils/file-cache.ts

@@ -35,7 +35,7 @@ export class FileSystemCache {
 
   constructor(options: FileSystemCacheOptions = {}) {
     this.prefix = (options.ns || options.prefix || '') + '-';
-    this.hash_alg = options.hash_alg || 'md5';
+    this.hash_alg = options.hash_alg || 'sha256';
     this.cache_dir =
       options.basePath || join(tmpdir(), randomBytes(15).toString('base64').replace(/\//g, '-'));
     this.ttl = options.ttl || 0;

code/core/src/component-testing/components/Subnav.tsx

@@ -19,7 +19,7 @@ import {
   SyncIcon,
 } from '@storybook/icons';
 
-import { styled } from 'storybook/theming';
+import { styled, useTheme } from 'storybook/theming';
 
 import { type Call, CallStates, type ControlStates } from '../../instrumenter/types';
 import type { Controls } from './InteractionsPanel';
@@ -33,13 +33,13 @@ const SubnavWrapper = styled.div(({ theme }) => ({
   zIndex: 1,
 }));
 
-const StyledSubnav = styled.nav(({ theme }) => ({
+const StyledSubnav = styled.nav({
   height: 40,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
   paddingLeft: 15,
-}));
+});
 
 interface SubnavProps {
   controls: Controls;
@@ -121,10 +121,11 @@ export const Subnav: React.FC<SubnavProps> = ({
   onScrollToEnd,
 }) => {
   const buttonText = status === CallStates.ERROR ? 'Scroll to error' : 'Scroll to end';
+  const theme = useTheme();
 
   return (
     <SubnavWrapper>
-      <Bar>
+      <Bar backgroundColor={theme.background.app}>
         <StyledSubnav aria-label="Component tests toolbar">
           <Group>
             <StatusBadge status={status} />

code/core/src/components/components/bar/bar.tsx

@@ -52,14 +52,17 @@ const UnstyledBar = ({ children, className, scrollable }: UnstyledBarProps) =>
   );
 
 export interface BarProps extends UnstyledBarProps {
+  backgroundColor?: string;
   border?: boolean;
 }
 export const Bar = styled(UnstyledBar)<BarProps>(
-  ({ theme, scrollable = true }) => ({
+  ({ backgroundColor, theme, scrollable = true }) => ({
     color: theme.barTextColor,
     width: '100%',
-    height: 40,
+    minHeight: 40,
     flexShrink: 0,
+    scrollbarColor: `${theme.barTextColor} ${backgroundColor || theme.barBg}`,
+    scrollbarWidth: 'thin',
     overflow: scrollable ? 'auto' : 'hidden',
     overflowY: 'hidden',
   }),
@@ -94,7 +97,7 @@ export interface FlexBarProps extends ComponentProps<typeof Bar> {
 export const FlexBar = ({ children, backgroundColor, className, ...rest }: FlexBarProps) => {
   const [left, right] = Children.toArray(children);
   return (
-    <Bar className={`sb-bar ${className}`} {...rest}>
+    <Bar backgroundColor={backgroundColor} className={`sb-bar ${className}`} {...rest}>
       <BarInner bgColor={backgroundColor}>
         <Side scrollable={rest.scrollable} left>
           {left}

code/core/src/manager/components/preview/Toolbar.tsx

@@ -233,6 +233,8 @@ const Toolbar = styled.div<{ shown: boolean }>(({ theme, shown }) => ({
   marginTop: shown ? 0 : -40,
   boxShadow: `${theme.appBorderColor}  0 -1px 0 0 inset`,
   background: theme.barBg,
+  scrollbarColor: `${theme.barTextColor} ${theme.barBg}`,
+  scrollbarWidth: 'thin',
   zIndex: 4,
 }));
 

code/core/src/manager/components/sidebar/Menu.stories.tsx

@@ -56,13 +56,13 @@ export const Expanded: Story = {
   globals: { sb_theme: 'light' },
   render: () => {
     const menu = useMenu(
-      { whatsNewData: { status: 'SUCCESS', disableWhatsNewNotifications: false } } as State,
+      { whatsNewData: undefined } as State,
       {
         // @ts-expect-error (Converted from ts-ignore)
         getShortcutKeys: () => ({}),
         getAddonsShortcuts: () => ({}),
         versionUpdateAvailable: () => false,
-        isWhatsNewUnread: () => true,
+        isWhatsNewUnread: () => false,
         getDocsUrl: () => 'https://storybook.js.org/docs/',
       },
       false,
@@ -73,7 +73,7 @@ export const Expanded: Story = {
     );
     return (
       <DoubleThemeRenderingHack>
-        <SidebarMenu menu={menu} isHighlighted />
+        <SidebarMenu menu={menu} />
       </DoubleThemeRenderingHack>
     );
   },
@@ -96,14 +96,27 @@ export const Expanded: Story = {
   ],
 };
 
-export const ExpandedWithoutWhatsNew: Story = {
+export const ExpandedWithShortcuts: Story = {
   ...Expanded,
   render: () => {
     const menu = useMenu(
       { whatsNewData: undefined } as State,
       {
         // @ts-expect-error (invalid)
-        getShortcutKeys: () => ({}),
+        getShortcutKeys: () => ({
+          shortcutsPage: ['⌘', '⇧​', ','],
+          toggleNav: ['⌥', 'S'],
+          togglePanel: ['⌥', 'A'],
+          toolbar: ['⌥', 'T'],
+          panelPosition: ['⌥', 'D'],
+          fullScreen: ['⌥', 'F'],
+          search: ['⌥', 'K'],
+          prevComponent: ['⌥', '↑'],
+          nextComponent: ['⌥', '↓'],
+          prevStory: ['⌥', '←'],
+          nextStory: ['⌥', '→'],
+          collapseAll: ['⌥', '⇧', '↑'],
+        }),
         getAddonsShortcuts: () => ({}),
         versionUpdateAvailable: () => false,
         isWhatsNewUnread: () => false,
@@ -113,7 +126,7 @@ export const ExpandedWithoutWhatsNew: Story = {
       false,
       false,
       false,
-      false
+      true
     );
 
     return (
@@ -133,3 +146,41 @@ export const ExpandedWithoutWhatsNew: Story = {
     await expect(releaseNotes).not.toBeInTheDocument();
   },
 };
+
+export const ExpandedWithWhatsNew: Story = {
+  ...Expanded,
+  render: () => {
+    const menu = useMenu(
+      { whatsNewData: { status: 'SUCCESS', disableWhatsNewNotifications: false } } as State,
+      {
+        // @ts-expect-error (invalid)
+        getShortcutKeys: () => ({}),
+        getAddonsShortcuts: () => ({}),
+        versionUpdateAvailable: () => false,
+        isWhatsNewUnread: () => true,
+        getDocsUrl: () => 'https://storybook.js.org/docs/',
+      },
+      false,
+      false,
+      false,
+      false,
+      false
+    );
+
+    return (
+      <DoubleThemeRenderingHack>
+        <SidebarMenu menu={menu} isHighlighted />
+      </DoubleThemeRenderingHack>
+    );
+  },
+  play: async (context) => {
+    const canvas = within(context.canvasElement);
+    await new Promise((res) => {
+      setTimeout(res, 500);
+    });
+    // @ts-expect-error (non strict)
+    await Expanded.play(context);
+    const releaseNotes = await canvas.queryByText(/What's new/);
+    await expect(releaseNotes).not.toBeInTheDocument();
+  },
+};