Skip to content

Storybook: Upgrade Storybook to 10.4 #77382

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aduth merged 23 commits into from
Jun 17, 2026
Merged

Storybook: Upgrade Storybook to 10.4 #77382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
272d73c
Storybook: Upgrade to 10.4
aduth May 22, 2026
fb2d7cc
Storybook: Switch components manifest to react-component-meta
aduth May 22, 2026
79a743f
Storybook: Add compatibility legacy reactDocgen field on built manifest
aduth May 22, 2026
14716b2
design-system-mcp: Read props from reactComponentMeta manifest field
aduth May 22, 2026
7348d88
Storybook: Simplify code comment for enabling component meta
aduth May 26, 2026
2bde55e
Storybook: Add clarifying comment about meta extractor difference
aduth May 26, 2026
7cc7836
Storybook: Add temporary `render` patch for Story components
aduth May 27, 2026
e26a391
Components: Remove forwardRef usage for Button component
aduth May 27, 2026
3df4ac9
Storybook: Add docgen TypeScript configuration to restore descriptions
aduth May 27, 2026
fe95e45
Sync documentation
aduth May 27, 2026
1038340
Manually remove glibc references from lockfile
aduth May 27, 2026
e59dd15
Remove more libc references from lockfile
aduth May 27, 2026
fd122b5
Update typos in comment description
aduth Jun 1, 2026
8b51784
Storybook: Remove invalid routes pattern from docgen tsconfig
aduth Jun 1, 2026
0358551
Storybook: Replace invalid fallback path with forced argument
aduth Jun 1, 2026
4f26ed5
Components: Include ref typing through React built-in types
aduth Jun 1, 2026
65e30a3
Components: Fix type errors with typed ref on Button
aduth Jun 1, 2026
80ed496
Components: Remove code relying on React 19 forwardRef changes
aduth Jun 11, 2026
f1185c7
Components: Wrap UnforwardedButton directly with forwardRef
aduth Jun 12, 2026
e88c950
Remove unnecessary displayName assignment on Button
aduth Jun 16, 2026
042527f
Sync new Storybook package entries across repo
aduth Jun 16, 2026
1680357
Storybook: Disable shouldIncludePropTagMap to retain ignore in descri…
aduth Jun 16, 2026
20b0949
Storybook: Disable setDisplayName option for docgen plugin
aduth Jun 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,009 changes: 1,086 additions & 923 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,8 +103,8 @@
},
"devDependencies": {
"@ariakit/test": "^0.4.13",
"@storybook/addon-docs": "^10.2.8",
"@storybook/react-vite": "^10.2.8",
"@storybook/addon-docs": "^10.4.3",
"@storybook/react-vite": "^10.4.3",
"@testing-library/dom": "^10.4.1",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.2",
Expand All @@ -114,7 +114,7 @@
"@wordpress/jest-console": "file:../jest-console",
"@wordpress/stylelint-tools": "file:../../tools/stylelint",
"snapshot-diff": "^0.10.0",
"storybook": "^10.2.8",
"storybook": "^10.4.3",
"timezone-mock": "^1.3.6"
},
"peerDependencies": {
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/base-control/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const MyCustomTextareaControl = ({ children, ...baseProps }) => (

### `as`

- Type: `"symbol" | "object" | "label" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 516 more ... | ("view" & FunctionComponent<...>)`
- Type: `"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 516 more ... | ("view" & FunctionComponent<...>)`
- Required: No

The HTML element or React component to render the component as.
Expand Down Expand Up @@ -107,7 +107,7 @@ const MyBaseControl = () => (

##### `as`

- Type: `"symbol" | "object" | "label" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | ...`
- Type: `"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | ...`
- Required: No

The HTML element or React component to render the component as.
Expand Down
6 changes: 2 additions & 4 deletions packages/components/src/button/index.tsx
View file
Open in desktop

@ciampo ciampo Jun 15, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we add a CHANGELOG entry to highlight this (subtle) change to the exported shape of the Button API?

@aduth aduth Jun 15, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I could add an internal note? I'm not sure it's a perceptible change to an external consumer? (i.e. we never exported UnforwardedButton from the package, and the wrapped function is still a named function)

@aduth aduth Jun 15, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess it's possible this could affect IDE autocompletion for descriptions in the same way it helped Storybook.

@mirka mirka Jun 15, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I wouldn't say this affects consumers.

Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ function useDeprecatedProps( {
* );
* ```
*/
export function UnforwardedButton(
export const Button = forwardRef( function UnforwardedButton(
props: ButtonProps & DeprecatedButtonProps,
ref: ForwardedRef< any >
) {
Expand Down Expand Up @@ -301,8 +301,6 @@ export function UnforwardedButton(
) }
</>
);
}
} );

export const Button = forwardRef( UnforwardedButton );
Button.displayName = 'Button';
export default Button;
5 changes: 5 additions & 0 deletions packages/components/src/composite/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,11 @@ const meta: Meta< typeof Composite > = {
// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
'Composite.Context': Composite.Context,
},
// Temporary: Due to an upstream bug, render the root explicitly so the
// components manifest extractor can resolve props from the JSX.
//
// See: https://github.com/storybookjs/storybook/issues/34877
render: ( args ) => <Composite { ...args } />,
argTypes: {
children: { control: false },
render: { control: false },
Expand Down
5 changes: 5 additions & 0 deletions packages/components/src/dropdown/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@ const meta: Meta< typeof Dropdown > = {
id: 'components-dropdown',
component: Dropdown,
subcomponents: { DropdownContentWrapper },
// Temporary: Due to an upstream bug, render the root explicitly so the
// components manifest extractor can resolve props from the JSX.
//
// See: https://github.com/storybookjs/storybook/issues/34877
render: ( args ) => <Dropdown { ...args } />,
args: {
onClose: fn(),
onToggle: fn(),
Expand Down
6 changes: 3 additions & 3 deletions packages/dataviews/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,15 +74,15 @@
"remove-accents": "^0.5.0"
},
"devDependencies": {
"@storybook/addon-docs": "^10.2.8",
"@storybook/react-vite": "^10.2.8",
"@storybook/addon-docs": "^10.4.3",
"@storybook/react-vite": "^10.4.3",
"@testing-library/dom": "^10.4.1",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.2",
"@testing-library/user-event": "^14.6.1",
"@types/jest": "^29.5.14",
"esbuild": "^0.27.2",
"storybook": "^10.2.8"
"storybook": "^10.4.3"
},
"peerDependencies": {
"@types/react": "^18.3.27",
Expand Down
12 changes: 6 additions & 6 deletions packages/design-system-mcp/src/parse-components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,20 +74,20 @@ function canonicalComponentName( name: string ): string {
}

/**
* Parse props from a component's reactDocgen data, filtering out
* Parse props from a component's `reactComponentMeta` data, filtering out
* deprecated and ignored props.
*
* @param rawProps - The reactDocgen props record.
* @param rawProps - The component meta props record.
* @return Parsed props with deprecated entries removed.
*/
export function parseProps(
rawProps: Record<
string,
{
required?: boolean;
tsType?: { name: string; raw?: string };
type?: { name: string; raw?: string };
description?: string;
defaultValue?: { value: string };
defaultValue?: { value: string } | null;
}
>
): ComponentProp[] {
Expand All @@ -104,7 +104,7 @@ export function parseProps(
// Prefer `raw` when present, as it carries the source-authored type
// expression a consumer could use directly. Primitives emit only
// `name`, so fall back if `raw` is not present.
type: propInfo.tsType?.raw || propInfo.tsType?.name || 'unknown',
type: propInfo.type?.raw || propInfo.type?.name || 'unknown',
required: propInfo.required || false,
description: propInfo.description || '',
defaultValue: propInfo.defaultValue?.value ?? null,
Expand Down Expand Up @@ -180,7 +180,7 @@ export function parseComponentDetail(
}

const description = component.description || '';
const props = parseProps( component.reactDocgen?.props || {} );
const props = parseProps( component.reactComponentMeta?.props || {} );
const stories = component.stories || [];

if ( ! detail ) {
Expand Down
7 changes: 4 additions & 3 deletions packages/design-system-mcp/src/test/fixtures/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,13 @@
"name": "Button",
"path": "../packages/components/src/button/stories/index.story.tsx",
"description": "A button.",
"reactDocgen": {
"reactComponentMeta": {
"props": {
"variant": {
"required": false,
"tsType": { "name": "string" },
"description": "The variant."
"type": { "name": "string" },
"description": "The variant.",
"defaultValue": null
}
}
},
Expand Down
30 changes: 15 additions & 15 deletions packages/design-system-mcp/src/test/parse-components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,21 +34,21 @@ describe( 'parseProps', () => {
const result = parseProps( {
disabled: {
required: false,
tsType: { name: 'boolean' },
type: { name: 'boolean' },
description: 'Whether the button is disabled.',
defaultValue: { value: 'false' },
},
variant: {
required: false,
tsType: {
type: {
name: 'union',
raw: "'solid' | 'outline' | 'minimal' | 'unstyled'",
},
description: 'The button variant.',
},
style: {
required: false,
tsType: {
type: {
name: 'ReactCSSProperties',
raw: 'React.CSSProperties',
},
Expand Down Expand Up @@ -85,12 +85,12 @@ describe( 'parseProps', () => {
const result = parseProps( {
variant: {
required: false,
tsType: { name: 'string' },
type: { name: 'string' },
description: 'The button variant.',
},
oldProp: {
required: false,
tsType: { name: 'string' },
type: { name: 'string' },
description: '@deprecated Use variant instead.',
},
} );
Expand All @@ -103,12 +103,12 @@ describe( 'parseProps', () => {
const result = parseProps( {
visible: {
required: true,
tsType: { name: 'boolean' },
type: { name: 'boolean' },
description: 'Whether visible.',
},
internal: {
required: false,
tsType: { name: 'string' },
type: { name: 'string' },
description: '@ignore Internal use only.',
},
} );
Expand Down Expand Up @@ -307,11 +307,11 @@ describe( 'parseComponentDetail', () => {
name: 'Button',
description: 'A button component.',
path: '../packages/ui/src/button/stories/index.story.tsx',
reactDocgen: {
reactComponentMeta: {
props: {
variant: {
required: false,
tsType: { name: 'string' },
type: { name: 'string' },
description: 'The button variant.',
},
},
Expand Down Expand Up @@ -394,14 +394,14 @@ describe( 'parseComponentDetail', () => {
button: {
name: 'Button',
path: '../packages/ui/src/button/stories/index.story.tsx',
reactDocgen: {
reactComponentMeta: {
props: {
variant: {
tsType: { name: 'string' },
type: { name: 'string' },
description: 'Current prop.',
},
legacy: {
tsType: { name: 'string' },
type: { name: 'string' },
description: '@deprecated Use variant.',
},
},
Expand Down Expand Up @@ -484,16 +484,16 @@ describe( 'parseComponentDetail', () => {
const components = createComponents( {
'badge-index': {
name: 'Badge',
// First entry has no reactDocgen props
// First entry has no component meta props
path: '../packages/ui/src/badge/stories/index.story.tsx',
},
'badge-intent': {
name: 'Badge',
path: '../packages/ui/src/badge/stories/choosing-intent.story.tsx',
reactDocgen: {
reactComponentMeta: {
props: {
intent: {
tsType: { name: 'string' },
type: { name: 'string' },
description: 'The badge intent.',
},
},
Expand Down
7 changes: 4 additions & 3 deletions packages/design-system-mcp/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,17 @@ export interface ManifestComponent {
snippet?: string;
description?: string;
} >;
reactDocgen?: {
reactComponentMeta?: {
description?: string;
displayName?: string;
exportName?: string;
props?: Record<
string,
{
required?: boolean;
tsType?: { name: string; raw?: string };
type?: { name: string; raw?: string };
description?: string;
defaultValue?: { value: string };
defaultValue?: { value: string } | null;
}
>;
};
Expand Down
4 changes: 2 additions & 2 deletions packages/grid/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,13 +55,13 @@
"clsx": "^2.1.1"
},
"devDependencies": {
"@storybook/react-vite": "^10.2.8",
"@storybook/react-vite": "^10.4.3",
"@testing-library/dom": "^10.4.1",
"@testing-library/react": "^16.3.2",
"@types/jest": "^29.5.14",
"@wordpress/icons": "file:../icons",
"@wordpress/ui": "file:../ui",
"storybook": "^10.2.8"
"storybook": "^10.4.3"
},
"peerDependencies": {
"@types/react": "^18.3.27",
Expand Down
4 changes: 2 additions & 2 deletions packages/theme/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
"memize": "^2.1.0"
},
"devDependencies": {
"@storybook/react-vite": "^10.2.8",
"@storybook/react-vite": "^10.4.3",
"@terrazzo/parser": "^2.0.3",
"@terrazzo/plugin-css": "^2.0.3",
"@terrazzo/token-tools": "^2.0.3",
Expand All @@ -98,7 +98,7 @@
"esbuild": "^0.27.2",
"esbuild-esm-loader": "^0.3.3",
"prettier": "npm:wp-prettier@^3.0.3",
"storybook": "^10.2.8",
"storybook": "^10.4.3",
"stylelint": "^16.8.2"
},
"peerDependencies": {
Expand Down
6 changes: 3 additions & 3 deletions packages/ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,15 +58,15 @@
"tabbable": "^6.4.0"
},
"devDependencies": {
"@storybook/addon-docs": "^10.2.8",
"@storybook/react-vite": "^10.2.8",
"@storybook/addon-docs": "^10.4.3",
"@storybook/react-vite": "^10.4.3",
"@testing-library/dom": "^10.4.1",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.2",
"@testing-library/user-event": "^14.6.1",
"@types/jest": "^29.5.14",
"@types/node": "^20.19.39",
"storybook": "^10.2.8"
"storybook": "^10.4.3"
},
"peerDependencies": {
"@types/react": "^18.3.27",
Expand Down
5 changes: 5 additions & 0 deletions packages/ui/src/card/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,11 @@ const meta: Meta< typeof Card.Root > = {
'Card.FullBleed': Card.FullBleed,
'Card.Title': Card.Title,
},
// Temporary: Due to an upstream bug, render the root explicitly so the
// components manifest extractor can resolve props from the JSX.
//
// See: https://github.com/storybookjs/storybook/issues/34877
render: ( args ) => <Card.Root { ...args } />,
parameters: {
componentStatus: {
status: 'recommended',
Expand Down
5 changes: 5 additions & 0 deletions packages/ui/src/empty-state/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ const meta: Meta< typeof EmptyState.Root > = {
'EmptyState.Description': EmptyState.Description,
'EmptyState.Actions': EmptyState.Actions,
},
// Temporary: Due to an upstream bug, render the root explicitly so the
// components manifest extractor can resolve props from the JSX.
//
// See: https://github.com/storybookjs/storybook/issues/34877
render: ( args ) => <EmptyState.Root { ...args } />,
parameters: {
componentStatus: {
status: 'recommended',
Expand Down
5 changes: 5 additions & 0 deletions packages/ui/src/icon/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@ const meta: Meta< typeof Icon > = {
title: 'Design System/Components/Icon',
component: Icon,
tags: [ 'manifest' ],
// Temporary: Due to an upstream bug, render the root explicitly so the
// components manifest extractor can resolve props from the JSX.
//
// See: https://github.com/storybookjs/storybook/issues/34877
render: ( args ) => <Icon { ...args } />,
decorators: [
( Story ) => {
return (
Expand Down
6 changes: 3 additions & 3 deletions packages/widget-primitives/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,12 +51,12 @@
"@wordpress/i18n": "file:../i18n"
},
"devDependencies": {
"@storybook/addon-docs": "^10.2.8",
"@storybook/react-vite": "^10.2.8",
"@storybook/addon-docs": "^10.4.3",
"@storybook/react-vite": "^10.4.3",
"@wordpress/components": "file:../components",
"@wordpress/icons": "file:../icons",
"@wordpress/ui": "file:../ui",
"storybook": "^10.2.8"
"storybook": "^10.4.3"
},
"peerDependencies": {
"@types/react": "^18.3.27",
Expand Down
Loading
Loading