[Chore] Update Storybook to latest v10 by weronikaolejniczak · Pull Request #9863 · elastic/eui

weronikaolejniczak · 2026-08-03T16:09:37Z

Important

No need to review all 275 files changed. The bulk of the change is updated imports: a6cc857

Note

This doesn't affect EUI production. Only local dev and CI.

Summary

Closes https://github.com/elastic/eui-private/issues/738

Storybook v8.4 → v10.5 (releases, migration guide)

Consolidated packages removed (@storybook/addon-essentials, @storybook/test, @storybook/manager-api, etc.), their functionality ships in the storybook package; imports updated accordingly (@storybook/addon-actions → storybook/actions, @storybook/test → storybook/test ...),
stories import types from @storybook/react-webpack5 instead of @storybook/react (because of the new storybook/no-renderer-packages lint rule; eslint-plugin-storybook bumped to v10.5,
.storybook/ config updated to the new APIs; new emotion-css-prop.d.ts types the css prop so Emotion's Theme resolves to the copy augmented by UseEuiTheme,
stories are excluded from the main tsconfig (v10 types require moduleResolution: "bundler") and instead evaluated by .storybook/tsconfig.json which yarn lint runs as a second tsc pass,
@testing-library/user-event upgraded v13 → v14 (replaces the removed @storybook/test's userEvent): 7 test suites migrated to the async APIs, plus advanceTimers setup for fake-timer tests,
storybook added to jest's transformIgnorePatterns exceptions (v10 ships ESM-only dist),
CI image bumped to Node 22.22.0 (matches .nvmrc); Storybook v10 requires Node ≥20.19, CI had 20.15.1,
make CI container resolve IPv4 first, otherwise it breaks Playwright browser downloads because of unroutable IPv6 addresses.

QA instructions for reviewer

Copilot

Pull request overview

This PR upgrades EUI’s Storybook tooling to the latest v10 release, updating Storybook configuration and migrating stories/tests to the new module entrypoints used by Storybook 10 and newer Testing Library APIs.

Changes:

Upgrades Storybook (and related tooling like @storybook/test-runner, eslint-plugin-storybook) and migrates story imports (e.g., @storybook/react-webpack5, storybook/actions, storybook/test).
Adjusts TypeScript project boundaries so package tsc excludes *.stories.* while .storybook/tsconfig.json typechecks Storybook sources/stories, and adds this check to the lint script.
Updates several Jest/RTL tests for @testing-library/user-event v14 async behavior and ensures Jest transpiles the storybook package when needed.

Reviewed changes

Copilot reviewed 273 out of 275 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/eui/package.json	Bumps Storybook + user-event versions and related dev tooling for v10 compatibility
packages/eui/tsconfig.json	Excludes story files from the package TS program (delegates to Storybook TS config)
packages/eui/.storybook/tsconfig.json	Expands Storybook TS includes (stories + d.ts) and switches to `moduleResolution: bundler`
packages/eui/.storybook/main.ts	Updates Storybook v10 config (stories glob, addons, webpack alias for `storybook/test`)
packages/eui/.storybook/preview.tsx	Migrates viewport import and normalizes `highContrastMode` global value handling
packages/eui/.storybook/decorator.tsx	Updates toolbar globals typing/values to match new globals handling
packages/eui/.storybook/utils.ts	Migrates actions import to `storybook/actions`
packages/eui/.storybook/test.ts	Migrates Storybook test utilities import to `storybook/test`
packages/eui/.storybook/vrt.ts	Migrates CSF type import to Storybook v10 internal CSF entrypoint
packages/eui/.storybook/test-runner.ts	Keeps VRT test runner integration compatible with updated Storybook toolchain
packages/eui/scripts/jest/config.js	Ensures Jest transpiles `storybook` package from `node_modules`
packages/eui/.storybook/emotion-css-prop.d.ts	Adds Storybook-local Emotion `css` prop typing support
packages/eui/.storybook/addons/code-snippet/event-handlers/query_params.ts	Migrates manager API import paths (and needs type-only imports per review comment)
packages/eui/.storybook/addons/code-snippet/event-handlers/setup.ts	Migrates core-events import path (and needs type-only import per review comment)
packages/eui/.storybook/addons/code-snippet/decorators/jsx_decorator.tsx	Updates addon internals to new Storybook module entrypoints
packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx	Updates user-event usage to v14 patterns (including setup for fake timers)
packages/eui/src/components/search_bar/search_bar.test.tsx	Updates user-event import + async `act` usage
packages/eui/src/components/tool_tip/tool_tip.test.tsx	Updates user-event import + async `act` usage
packages/eui/src/components/flyout/manager/flyout_managed.test.tsx	Updates user-event import + async `act` usage
packages/eui/src/components/datagrid/controls/display_selector.test.tsx	Updates user-event import + async interaction helpers
packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.test.tsx	Switches from Storybook user-event to RTL user-event for Jest environment
packages/eui/src/components///*.stories.tsx	Bulk migration of story `Meta`/`StoryObj` imports to `@storybook/react-webpack5` and actions/tests to `storybook/*` entrypoints

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 275 out of 277 changed files in this pull request and generated no new comments.

Suppressed comments (1)

packages/eui/.storybook/preview.tsx:36

highContrastMode is currently derived via a strict string check (=== 'true'). A number of stories set globals: { highContrastMode: true } (boolean), which will now be coerced to false here and prevent those stories from rendering in high contrast mode.

      <EuiProviderDecorator
        colorMode={context.globals.colorMode}
        highContrastMode={context.globals.highContrastMode === 'true'}
        {...(context.componentId === 'theming-euiprovider' && context.args)}

Copilot

Pull request overview

Copilot reviewed 281 out of 283 changed files in this pull request and generated no new comments.

elastic-vault-github-plugin-prod · 2026-08-04T15:59:21Z

50 visual difference(s) found - expand to review, then click Approve visual changes to update baselines

euiconfirmmodal (2 differences)

Story	Before	After	Diff
playground `desktop`
playground `mobile`

euiflyout (18 differences)

Story	Before	After	Diff
high contrast `desktop`
high contrast `mobile`
playground `desktop`
playground `mobile`
push flyouts `desktop`
push flyouts `mobile`
playground `desktop`
playground `mobile`
playground `desktop`
playground `mobile`
playground `desktop`
playground `mobile`
menu bar example `desktop`
menu bar example `mobile`
pagination example `desktop`
pagination example `mobile`
playground `desktop`
playground `mobile`

euiheader (5 differences)

Story	Before	After	Diff
elastic navigation pattern `desktop`
elastic navigation pattern `mobile`
multiple fixed headers `desktop`
multiple fixed headers `mobile`
popover example `mobile`

euimodal (14 differences)

Story	Before	After	Diff
initial focus `desktop`
initial focus `mobile`
playground `desktop`
playground `mobile`
toggle example `desktop`
toggle example `mobile`
playground `desktop`
playground `mobile`
playground `desktop`
playground `mobile`
playground `desktop`
playground `mobile`
playground `desktop`
playground `mobile`

euicollapsiblenav (4 differences)

Story	Before	After	Diff
full header pattern `desktop`
full header pattern `mobile`
playground `desktop`
playground `mobile`

euidatagrid (5 differences)

Story	Before	After	Diff
full screen with flyout `desktop`
full screen with flyout `mobile`
compact `desktop`
column selector `desktop`
column selector `mobile`

euioverlaymask (2 differences)

Story	Before	After	Diff
playground `desktop`
playground `mobile`

elastic-vault-github-plugin-prod · 2026-08-05T15:03:49Z

25 visual difference(s) found - expand to review, then click Approve visual changes to update baselines

euiflyout (14 differences)

Story	Before	After	Diff
playground `desktop`
playground `mobile`
playground `desktop`
playground `mobile`
playground `desktop`
playground `mobile`
playground `desktop`
playground `mobile`
menu bar example `desktop`
menu bar example `mobile`
pagination example `desktop`
pagination example `mobile`
playground `desktop`
playground `mobile`

euiheader (4 differences)

Story	Before	After	Diff
elastic navigation pattern `desktop`
elastic navigation pattern `mobile`
multiple fixed headers `mobile`
popover example `mobile`

euicollapsiblenav (4 differences)

Story	Before	After	Diff
full header pattern `desktop`
full header pattern `mobile`
playground `desktop`
playground `mobile`

euidatagrid (3 differences)

Story	Before	After	Diff
full screen with flyout `mobile`
column selector `desktop`
column selector `mobile`

elastic-vault-github-plugin-prod · 2026-08-06T08:55:39Z

2 visual difference(s) found - expand to review, then click Approve visual changes to update baselines

euidatagrid (2 differences)

Story	Before	After	Diff
full screen with header `desktop`
compact `desktop`

Storybook 10 requires Node.js 20.19+ or 22.12+.

elastic-vault-github-plugin-prod · 2026-08-06T09:23:58Z

8 visual difference(s) found - expand to review, then click Approve visual changes to update baselines

euiflyout (6 differences)

Story	Before	After	Diff
playground `desktop`
playground `mobile`
pagination example `desktop`
pagination example `mobile`
playground `desktop`
playground `mobile`

euidatagrid (2 differences)

Story	Before	After	Diff
full screen with header `desktop`
compact `desktop`

elastic-vault-github-plugin-prod · 2026-08-06T10:03:08Z

7 visual difference(s) found - expand to review, then click Approve visual changes to update baselines

euiflyout (6 differences)

Story	Before	After	Diff
playground `desktop`
playground `mobile`
pagination example `desktop`
pagination example `mobile`
playground `desktop`
playground `mobile`

euidatagrid (1 difference)

Story	Before	After	Diff
compact `desktop`

elastic-vault-github-plugin-prod · 2026-08-06T10:37:47Z

1 visual difference(s) found - expand to review, then click Approve visual changes to update baselines

euidatagrid (1 difference)

Story	Before	After	Diff
keyboard shortcuts `desktop`

elastic-vault-github-plugin-prod · 2026-08-06T11:13:37Z

1 visual difference(s) found - expand to review, then click Approve visual changes to update baselines

euidatagrid (1 difference)

Story	Before	After	Diff
compact `desktop`

elastic-vault-github-plugin-prod · 2026-08-07T10:07:51Z

2 visual difference(s) found - expand to review, then click Approve visual changes to update baselines

euidatagrid (2 differences)

Story	Before	After	Diff
full screen toggle `desktop`
full screen toggle `mobile`

elastic-vault-github-plugin-prod · 2026-08-07T10:48:34Z

1 visual difference(s) found - expand to review, then click Approve visual changes to update baselines

euidatagrid (1 difference)

Story	Before	After	Diff
no toolbar `desktop`

elastic-vault-github-plugin-prod · 2026-08-07T11:02:58Z

2 visual difference(s) found - expand to review, then click Approve visual changes to update baselines

euidatagrid (2 differences)

Story	Before	After	Diff
compact `desktop`
no toolbar `desktop`

elastic-vault-github-plugin-prod · 2026-08-07T11:41:25Z

3 visual difference(s) found - expand to review, then click Approve visual changes to update baselines

euidatagrid (3 differences)

Story	Before	After	Diff
compact `desktop`
keyboard shortcuts `desktop`
no toolbar `desktop`

elastic-vault-github-plugin-prod · 2026-08-10T15:18:12Z

1 visual difference(s) found - expand to review, then click Approve visual changes to update baselines

euidatagrid (1 difference)

Story	Before	After	Diff
compact `desktop`

weronikaolejniczak · 2026-08-10T15:20:53Z

buildkite test this

Adding skip-vrt because of this flake that's on main

infra-vault-gh-plugin-prod · 2026-08-10T15:36:48Z

💚 Build Succeeded

Buildkite Build
Commit: 0785268
Documentation website
Storybook
🚫 Visual regression tests skipped (remove the skip-vrt label to re-enable)

History

💔 Build #4652 failed 0785268
💔 Build #4601 failed c9fe73a
💔 Build #4594 failed 1cc5c99
💔 Build #4591 failed 709f450
💔 Build #4570 failed 249c949

cc @weronikaolejniczak

infra-vault-gh-plugin-prod · 2026-08-10T15:58:09Z

💔 Build Failed

Buildkite Build
Commit: 0785268

Failed CI Steps

🔨 EUI pull request test

History

💚 Build #7340 succeeded c9fe73a
💔 Build #7334 failed 1cc5c99
💚 Build #7331 succeeded 709f450
💚 Build #7312 succeeded 249c949
💚 Build #7307 succeeded 703527c
💚 Build #7303 succeeded a459c2a

cc @weronikaolejniczak

weronikaolejniczak self-assigned this Aug 3, 2026

weronikaolejniczak added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Aug 3, 2026

weronikaolejniczak force-pushed the chore/update-storybook branch from dbf5fb2 to 23e84f1 Compare August 3, 2026 16:13

weronikaolejniczak requested a review from Copilot August 3, 2026 16:14

Copilot started reviewing on behalf of weronikaolejniczak August 3, 2026 16:15 View session

Copilot AI reviewed Aug 3, 2026

View reviewed changes

Comment thread packages/eui/.storybook/addons/code-snippet/event-handlers/query_params.ts Outdated

Comment thread packages/eui/.storybook/addons/code-snippet/event-handlers/setup.ts Outdated

weronikaolejniczak force-pushed the chore/update-storybook branch 2 times, most recently from 1d1f793 to a806577 Compare August 4, 2026 10:49

weronikaolejniczak requested a review from Copilot August 4, 2026 10:55

Copilot started reviewing on behalf of weronikaolejniczak August 4, 2026 10:55 View session

Copilot AI reviewed Aug 4, 2026

View reviewed changes

weronikaolejniczak force-pushed the chore/update-storybook branch 3 times, most recently from b2d9202 to d1ae41a Compare August 4, 2026 15:32

weronikaolejniczak requested a review from Copilot August 4, 2026 15:35

Copilot started reviewing on behalf of weronikaolejniczak August 4, 2026 15:36 View session

Copilot AI reviewed Aug 4, 2026

View reviewed changes

weronikaolejniczak force-pushed the chore/update-storybook branch from d1ae41a to cbbd409 Compare August 5, 2026 14:36

weronikaolejniczak and others added 5 commits August 6, 2026 11:02

chore(eui): update Storybook dependencies and configuration to v10

4ce2e1c

chore(eui): update Storybook imports in stories

a6cc857

chore(eui): update @testing-library/user-event to v14

892631e

chore(ci): update CI image to Node.js 22

8d7bdea

Storybook 10 requires Node.js 20.19+ or 22.12+.

chore(eui): update VRT baseline screenshots

a459c2a

weronikaolejniczak force-pushed the chore/update-storybook branch from 6d12f3f to a459c2a Compare August 6, 2026 09:02

weronikaolejniczak force-pushed the chore/update-storybook branch from 0769df3 to a459c2a Compare August 6, 2026 09:41

chore(eui): update VRT baseline screenshots

703527c

chore(eui): update VRT baseline screenshots

249c949

weronikaolejniczak marked this pull request as ready for review August 6, 2026 10:52

weronikaolejniczak requested a review from a team as a code owner August 6, 2026 10:52

chore(eui): update VRT baseline screenshots

709f450

chore(eui): update VRT baseline screenshots

1cc5c99

chore(eui): update VRT baseline screenshots

c9fe73a

weronikaolejniczak marked this pull request as draft August 10, 2026 08:04

weronikaolejniczak added the skip-vrt Skips Visual Regression Testing job in CI (clearly state why you're using it in your PR) label Aug 10, 2026

weronikaolejniczak marked this pull request as ready for review August 10, 2026 14:41

weronikaolejniczak removed the skip-vrt Skips Visual Regression Testing job in CI (clearly state why you're using it in your PR) label Aug 10, 2026

chore(eui): update VRT baseline screenshots

0785268

weronikaolejniczak added the skip-vrt Skips Visual Regression Testing job in CI (clearly state why you're using it in your PR) label Aug 10, 2026

Uh oh!

Conversation

weronikaolejniczak commented Aug 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Storybook v8.4 → v10.5 (releases, migration guide)

QA instructions for reviewer

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

elastic-vault-github-plugin-prod Bot commented Aug 4, 2026

Uh oh!

elastic-vault-github-plugin-prod Bot commented Aug 5, 2026

Uh oh!

elastic-vault-github-plugin-prod Bot commented Aug 6, 2026

Uh oh!

elastic-vault-github-plugin-prod Bot commented Aug 6, 2026

Uh oh!

elastic-vault-github-plugin-prod Bot commented Aug 6, 2026

Uh oh!

elastic-vault-github-plugin-prod Bot commented Aug 6, 2026

Uh oh!

elastic-vault-github-plugin-prod Bot commented Aug 6, 2026

Uh oh!

elastic-vault-github-plugin-prod Bot commented Aug 7, 2026

Uh oh!

elastic-vault-github-plugin-prod Bot commented Aug 7, 2026

Uh oh!

elastic-vault-github-plugin-prod Bot commented Aug 7, 2026

Uh oh!

elastic-vault-github-plugin-prod Bot commented Aug 7, 2026

Uh oh!

elastic-vault-github-plugin-prod Bot commented Aug 10, 2026

Uh oh!

weronikaolejniczak commented Aug 10, 2026

Uh oh!

infra-vault-gh-plugin-prod Bot commented Aug 10, 2026

💚 Build Succeeded

History

Uh oh!

infra-vault-gh-plugin-prod Bot commented Aug 10, 2026

💔 Build Failed

Failed CI Steps

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

weronikaolejniczak commented Aug 3, 2026 •

edited

Loading