feat(storybook): upgrade to v10 by nineteen88 · Pull Request #7368 · Sage/carbon

nineteen88 · 2025-06-06T15:31:44Z

Proposed behaviour

update storybook and all dependencies to use v10
change the way we hide stories to the documented method as per Storybook docs

Current behaviour

update is currently on v8

Checklist

Commits follow our style guide
Storybook added or updated if required
Related docs have been updated if required

QA

Tested in provided StackBlitz sandbox/Storybook
Add new Playwright test coverage if required
Carbon implementation matches Design System/designs
UI Tests GitHub check reviewed if required

Additional context

Testing instructions

edleeks87 · 2025-06-09T06:35:14Z

  TooltipLinkList,
  TooltipLinkListLink,
-} from "@storybook/components";
+} from "storybook/internal/components";


question: the migration docs indicate anything moved to internal might be deprecated in v10, is this the right package to use here and if we have to do we have a ticket/plan for migrating off it asap?

This is within our addon (version-picker) and the migration docs also mention:

"Addon authors may continue to use the internal packages, there is currently not yet any replacement."

I might create a ticket to keep an eye on it essentially, but not sure there's much that can be done right now other that rewrite all these components and make them internal for our Storybook only?

suggestion: what do you think about adding a comment briefing explaining this and/or linking to the ticket once its raised?

Might be worth being clear Storybook only recommend addon authors use this API and it shouldn't be used elsewhere.

edleeks87 · 2025-06-09T06:35:24Z

 import { ADDON_ID, TOOL_ID } from "./version-picker/constants";
 import { VersionPicker } from "./version-picker";
-import { API_PreparedIndexEntry, API_StatusObject } from "@storybook/types";
+import { API_PreparedIndexEntry } from "storybook/internal/types";


Question: is this still needed? If it is, is it the appropriate type to use given that it's now internal?

nineteen88 · 2025-08-08T13:19:16Z

Blocked until this is resolved storybookjs/storybook#32007

Copilot

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Upgrades the repository’s Storybook setup to v10, updating story/test imports and docs blocks usage, and switching the “hidden story” mechanism to Storybook’s documented tagging approach.

Changes:

Bump Storybook/Chromatic dependencies and migrate imports to the new storybook/* and @storybook/react-vite entry points.
Replace the previous sidebar filtering approach (hideInSidebar) with Storybook tags (!dev) and remove the custom manager sidebar filter.
Migrate config/runtime files toward ESM-compatible patterns (Storybook config, Playwright CT config, dayjs ESM import).

Reviewed changes

Copilot reviewed 297 out of 377 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
src/components/select/simple-select/simple-select.mdx	Update docs blocks import path for Storybook v10
src/components/select/simple-select/simple-select-interaction.stories.tsx	Migrate test utilities import to `storybook/test`
src/components/select/option/option.stories.tsx	Switch framework typings to `@storybook/react-vite` and update hide tag
src/components/select/multi-select/multi-select.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/select/multi-select/multi-select.mdx	Update docs blocks import path for Storybook v10
src/components/select/multi-select/multi-select-interaction.stories.tsx	Migrate test utilities import to `storybook/test`
src/components/select/filterable-select/filterable-select.stories.tsx	Switch framework typings to `@storybook/react-vite` and actions import to `storybook/actions`
src/components/select/filterable-select/filterable-select.mdx	Update docs blocks import path for Storybook v10
src/components/select/filterable-select/filterable-select-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/select/filterable-select/filterable-select-interaction.stories.tsx	Migrate test utilities import to `storybook/test`
src/components/select/internal/select-textbox/select-textbox.stories.tsx	Switch framework typings to `@storybook/react-vite` and update hide tag
src/components/search/search.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/search/search.mdx	Update docs blocks import path for Storybook v10
src/components/search/search-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/search/search-interaction.stories.tsx	Migrate test utilities import to `storybook/test`
src/components/radio-button/radio-button.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/radio-button/radio-button.mdx	Update docs blocks import path for Storybook v10
src/components/progress-tracker/progress-tracker.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/progress-tracker/progress-tracker.mdx	Update docs blocks import path for Storybook v10
src/components/profile/profile.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/profile/profile.mdx	Update docs blocks import path for Storybook v10
src/components/preview/preview.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/preview/preview.mdx	Update docs blocks import path for Storybook v10
src/components/preview/preview-test.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/portrait/portrait.stories.tsx	Switch framework typings and adjust story implementation
src/components/portrait/portrait.mdx	Update docs blocks import path for Storybook v10
src/components/portrait/portrait-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/portal/portal.stories.tsx	Switch framework typings to `@storybook/react-vite` and update hide tag
src/components/popover-container/render-open/render-open.stories.tsx	Switch framework typings to `@storybook/react-vite` and update hide tag
src/components/popover-container/render-close/render-close.stories.tsx	Switch framework typings to `@storybook/react-vite` and update hide tag
src/components/popover-container/popover-container.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/popover-container/popover-container.mdx	Update docs blocks import path for Storybook v10
src/components/popover-container/popover-container-interaction.stories.tsx	Migrate test utilities import to `storybook/test`
src/components/pod/pod.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/pod/pod.mdx	Update docs blocks import path for Storybook v10
src/components/pill/pill.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/pill/pill.mdx	Update docs blocks import path for Storybook v10
src/components/pill/pill-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/password/password.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/password/password.mdx	Update docs blocks import path for Storybook v10
src/components/password/password-interaction.stories.tsx	Migrate test utilities import to `storybook/test`
src/components/pages/pages.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/pages/pages.mdx	Update docs blocks import path for Storybook v10
src/components/pages/pages-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/pages/page/page.stories.tsx	Switch framework typings to `@storybook/react-vite` and update hide tag
src/components/pager/pager.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/pager/pager.mdx	Update docs blocks import path for Storybook v10
src/components/pager/pager-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/numeral-date/numeral-date.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/numeral-date/numeral-date.mdx	Update docs blocks import path for Storybook v10
src/components/numeral-date/numeral-date-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/number/number.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/number/number.mdx	Update docs blocks import path for Storybook v10
src/components/number/number-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/note/note.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/note/note.mdx	Update docs blocks import path for Storybook v10
src/components/navigation-bar/navigation-bar.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/navigation-bar/navigation-bar.mdx	Update docs blocks import path for Storybook v10
src/components/multi-action-button/multi-action-button.stories.tsx	Switch framework typings and adjust story implementation
src/components/multi-action-button/multi-action-button.mdx	Update docs blocks import path for Storybook v10
src/components/multi-action-button/multi-action-button-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/multi-action-button/multi-action-button-interaction.stories.tsx	Migrate test utilities import to `storybook/test`
src/components/message/message.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/message/message.mdx	Update docs blocks import path for Storybook v10
src/components/message/message-test.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/menu/scrollable-block/scrollable-block.stories.tsx	Switch framework typings to `@storybook/react-vite` and update hide tag
src/components/menu/menu.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/menu/menu.mdx	Update docs blocks import path for Storybook v10
src/components/menu/menu-test.stories.tsx	Switch framework typings and migrate actions import
src/components/menu/menu-segment-title/menu-segment-title.stories.tsx	Switch framework typings to `@storybook/react-vite` and update hide tag
src/components/menu/menu-item/menu-item.stories.tsx	Switch framework typings to `@storybook/react-vite` and update hide tag
src/components/menu/menu-interaction.stories.tsx	Migrate test utilities import to `storybook/test`
src/components/menu/menu-full-screen/menu-full-screen.stories.tsx	Switch framework typings to `@storybook/react-vite` and update hide tag
src/components/menu/menu-divider/menu-divider.stories.tsx	Switch framework typings to `@storybook/react-vite` and update hide tag
src/components/loader/loader.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/loader/loader.mdx	Update docs blocks import path for Storybook v10
src/components/loader/next/loader.mdx	Update docs blocks import path for Storybook v10
src/components/loader-star/loader-star.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/loader-star/loader-star.mdx	Update docs blocks import path for Storybook v10
src/components/loader-spinner/loader-spinner.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/loader-spinner/loader-spinner.mdx	Update docs blocks import path for Storybook v10
src/components/loader-bar/loader-bar.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/loader-bar/loader-bar.mdx	Update docs blocks import path for Storybook v10
src/components/loader-bar/loader-bar-test.stories.tsx	Switch StoryFn typing import to `@storybook/react-vite`
src/components/link/link.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/link/link.mdx	Update docs blocks import path for Storybook v10
src/components/link/link-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/link/link-interaction.stories.tsx	Migrate test utilities import to `storybook/test`
src/components/link-preview/link-preview.stories.tsx	Switch framework typings and migrate actions import
src/components/link-preview/link-preview.mdx	Update docs blocks import path for Storybook v10
src/components/link-preview/link-preview-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/link-preview/link-preview-interaction.stories.tsx	Migrate actions import to `storybook/actions`
src/components/inline-inputs/inline-inputs.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/inline-inputs/inline-inputs.mdx	Update docs blocks import path for Storybook v10
src/components/image/image.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/image/image.mdx	Update docs blocks import path for Storybook v10
src/components/icon/icon.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/icon/icon.mdx	Update docs blocks import path for Storybook v10
src/components/icon-button/icon-button.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/icon-button/icon-button.mdx	Update docs blocks import path for Storybook v10
src/components/hr/hr.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/hr/hr.mdx	Update docs blocks import path for Storybook v10
src/components/hr/hr-test.stories.tsx	Fix invalid `@storybook/react/*` import
src/components/help/help.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/help/help.mdx	Update docs blocks import path for Storybook v10
src/components/heading/heading.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/heading/heading.mdx	Update docs blocks import path for Storybook v10
src/components/grouped-character/grouped-character.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/grouped-character/grouped-character.mdx	Update docs blocks import path for Storybook v10
src/components/grouped-character/grouped-character-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/grid/grid.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/grid/grid.mdx	Update docs blocks import path for Storybook v10
src/components/grid/grid-item/grid-item.stories.tsx	Switch framework typings and update hide tag
src/components/grid/grid-container/grid-container.stories.tsx	Switch framework typings and update hide tag
src/components/global-header/global-header.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/global-header/global-header.mdx	Update docs blocks import path for Storybook v10
src/components/global-header/global-header-test.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/form/form.stories.tsx	Switch framework typings and migrate actions import
src/components/form/form.mdx	Update docs blocks import path for Storybook v10
src/components/form/form-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/form/form-interaction.stories.tsx	Migrate test utilities import to `storybook/test`
src/components/flat-table/sort/sort.stories.tsx	Switch framework typings and update hide tag
src/components/flat-table/flat-table.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/flat-table/flat-table.mdx	Update docs blocks import path for Storybook v10
src/components/flat-table/flat-table.interaction.stories.tsx	Migrate test utilities import to `storybook/test`
src/components/flat-table/flat-table-themes.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/flat-table/flat-table-themes.mdx	Update `addon-docs` blocks import
src/components/flat-table/flat-table-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/flat-table/flat-table-row/flat-table-row.stories.tsx	Switch framework typings and update hide tag
src/components/flat-table/flat-table-row-header/flat-table-row-header.stories.tsx	Switch framework typings and update hide tag
src/components/flat-table/flat-table-header/flat-table-header.stories.tsx	Switch framework typings and update hide tag
src/components/flat-table/flat-table-head/flat-table-head.stories.tsx	Switch framework typings and update hide tag
src/components/flat-table/flat-table-expandable.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/flat-table/flat-table-expandable.mdx	Update docs blocks import path for Storybook v10
src/components/flat-table/flat-table-checkbox/flat-table-checkbox.stories.tsx	Switch framework typings and update hide tag
src/components/flat-table/flat-table-cell/flat-table-cell.stories.tsx	Switch framework typings and update hide tag
src/components/flat-table/flat-table-body/flat-table-body.stories.tsx	Switch framework typings and update hide tag
src/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.stories.tsx	Switch framework typings and update hide tag
src/components/file-input/file-input.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/file-input/file-input.mdx	Update docs blocks import path for Storybook v10
src/components/file-input/internal/file-upload-status/file-upload-status.stories.tsx	Switch framework typings and update hide tag
src/components/fieldset/fieldset.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/fieldset/fieldset.mdx	Update docs blocks import path for Storybook v10
src/components/fieldset/fieldset-test.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/duelling-picklist/picklist/picklist.stories.tsx	Switch framework typings and update hide tag
src/components/duelling-picklist/picklist-placeholder/picklist-placeholder.stories.tsx	Switch framework typings and update hide tag
src/components/duelling-picklist/picklist-item/picklist-item.stories.tsx	Switch framework typings and update hide tag
src/components/duelling-picklist/duelling-picklist.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/duelling-picklist/duelling-picklist.mdx	Update docs blocks import path for Storybook v10
src/components/drawer/drawer.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/drawer/drawer.mdx	Update docs blocks import path for Storybook v10
src/components/draggable/draggable.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/draggable/draggable.mdx	Update docs blocks import path for Storybook v10
src/components/draggable/draggable-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/draggable/draggable-item/draggable-item.stories.tsx	Switch framework typings and update hide tag
src/components/divider/divider.mdx	Update docs blocks import path for Storybook v10
src/components/dismissible-box/dismissible-box.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/dismissible-box/dismissible-box.mdx	Update docs blocks import path for Storybook v10
src/components/dialog/dialog.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/dialog/dialog.mdx	Update docs blocks import path for Storybook v10
src/components/dialog/dialog-test.stories.tsx	Switch types and migrate actions import
src/components/dialog/dialog-interaction.stories.tsx	Migrate test utilities import to `storybook/test`
src/components/detail/detail.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/detail/detail.mdx	Update docs blocks import path for Storybook v10
src/components/definition-list/dt/dt.stories.tsx	Switch framework typings and update hide tag
src/components/definition-list/definition-list.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/definition-list/definition-list.mdx	Update docs blocks import path for Storybook v10
src/components/definition-list/dd/dd.stories.tsx	Switch framework typings and update hide tag
src/components/decimal/decimal.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/decimal/decimal.mdx	Update docs blocks import path for Storybook v10
src/components/decimal/decimal-test.stories.tsx	Switch types and migrate actions import
src/components/date/date.stories.tsx	Switch framework typings and migrate actions import
src/components/date/date.pw.tsx	Use explicit ESM plugin path for dayjs
src/components/date/date.mdx	Update docs blocks import path for Storybook v10
src/components/date/date-test.stories.tsx	Switch types and migrate actions import
src/components/date/date-interaction.stories.tsx	Migrate test utilities import to `storybook/test`
src/components/date-range/date-range.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/date-range/date-range.mdx	Update docs blocks import path for Storybook v10
src/components/date-range/date-range-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/date-range/date-range-interaction.stories.tsx	Migrate test utilities import to `storybook/test`
src/components/content/content.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/content/content.mdx	Update docs blocks import path for Storybook v10
src/components/confirm/confirm.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/confirm/confirm.mdx	Update docs blocks import path for Storybook v10
src/components/confirm/confirm-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/checkbox/checkbox.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/checkbox/checkbox.mdx	Update docs blocks import path for Storybook v10
src/components/checkbox/checkbox-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/checkbox/checkbox-interaction.stories.tsx	Migrate test utilities import to `storybook/test`
src/components/checkbox/checkbox-group/checkbox-group.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/checkbox/checkbox-group/checkbox-group.mdx	Update docs blocks import path for Storybook v10
src/components/card/card.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/card/card.mdx	Update docs blocks import path for Storybook v10
src/components/card/card-test.stories.tsx	Switch Meta typing import to `@storybook/react-vite`
src/components/card/card-row/card-row.stories.tsx	Switch framework typings and update hide tag
src/components/card/card-footer/card-footer.stories.tsx	Switch framework typings and update hide tag
src/components/card/card-column/card-column.stories.tsx	Switch framework typings and update hide tag
src/components/carbon-provider/carbon-provider.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/carbon-provider/carbon-provider.mdx	Update docs blocks import path for Storybook v10
src/components/carbon-provider/carbon-provider-test.stories.tsx	Switch type imports to `@storybook/react-vite`
src/components/button/button.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/button/button.mdx	Update docs blocks import path for Storybook v10
src/components/button/button-test.stories.tsx	Switch types and migrate actions import
src/components/button/button-interaction.stories.tsx	Migrate actions and test utilities imports
src/components/button/next/button.mdx	Update docs blocks import path for Storybook v10
src/components/button/next/button-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/button-toggle/button-toggle.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/button-toggle/button-toggle.mdx	Update docs blocks import path for Storybook v10
src/components/button-toggle/button-toggle-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/button-toggle/button-toggle-interaction.stories.tsx	Migrate test utilities import to `storybook/test`
src/components/button-toggle/button-toggle-group/button-toggle-group.stories.tsx	Switch framework typings and update hide tag
src/components/button-toggle/button-toggle-group/button-toggle-group-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/button-minor/button-minor.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/button-minor/button-minor.mdx	Update docs blocks import path for Storybook v10
src/components/button-minor/button-minor-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/button-bar/button-bar.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/button-bar/button-bar.mdx	Update docs blocks import path for Storybook v10
src/components/breadcrumbs/breadcrumbs.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/breadcrumbs/breadcrumbs.mdx	Update docs blocks import path for Storybook v10
src/components/box/box.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/box/box.mdx	Update docs blocks import path for Storybook v10
src/components/batch-selection/batch-selection.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/batch-selection/batch-selection.mdx	Consolidate docs blocks imports into `addon-docs/blocks`
src/components/batch-selection/batch-selection-interaction.stories.tsx	Migrate test utilities import to `storybook/test`
src/components/badge/badge.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/badge/badge.mdx	Consolidate docs blocks imports into `addon-docs/blocks`
src/components/anchor-navigation/anchor-navigation.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/anchor-navigation/anchor-navigation.mdx	Update docs blocks import path for Storybook v10
src/components/anchor-navigation/anchor-navigation-test.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.stories.tsx	Switch framework typings and update hide tag
src/components/anchor-navigation/anchor-navigation-interaction.stories.tsx	Migrate test utilities import to `storybook/test`
src/components/alert/alert.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/alert/alert.mdx	Update docs blocks import path for Storybook v10
src/components/alert/alert-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/advanced-color-picker/advanced-color-picker.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/advanced-color-picker/advanced-color-picker.mdx	Update docs blocks import path for Storybook v10
src/components/advanced-color-picker/advanced-color-picker-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/advanced-color-picker/advanced-color-picker-interaction.stories.tsx	Migrate test utilities import to `storybook/test`
src/components/adaptive-sidebar/adaptive-sidebar.mdx	Update docs blocks import path for Storybook v10
src/components/adaptive-sidebar/adaptive-sidebar-test.stories.tsx	Fix invalid `@storybook/react/*` import
src/components/adaptive-sidebar/adaptive-sidebar-interaction.stories.tsx	Migrate test utilities import to `storybook/test`
src/components/action-popover/action-popover.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/action-popover/action-popover.mdx	Update docs blocks import path for Storybook v10
src/components/action-popover/action-popover-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/action-popover/action-popover-menu/action-popover-menu.stories.tsx	Switch framework typings and update hide tag
src/components/action-popover/action-popover-menu-button/action-popover-menu-button.stories.tsx	Switch framework typings and update hide tag
src/components/action-popover/action-popover-item/action-popover-item.stories.tsx	Switch framework typings and update hide tag
src/components/action-popover/action-popover-interaction.stories.tsx	Migrate test utilities import to `storybook/test`
src/components/accordion/accordion.stories.tsx	Switch framework typings to `@storybook/react-vite`
src/components/accordion/accordion.mdx	Update docs blocks import path for Storybook v10
src/components/accordion/accordion-test.stories.tsx	Migrate actions import to `storybook/actions`
src/components/accordion/accordion-interaction.stories.tsx	Migrate actions and test utilities imports
src/components/accordion/accordion-group/accordion-group.stories.tsx	Switch framework typings and update hide tag
src/internal/stories/z-index-interaction.stories.tsx	Migrate test utilities import to `storybook/test`
skills/carbon-react/references/docs/usage.md	Update docs blocks import path for Storybook v10
skills/carbon-react/references/docs/usage-with-routing.md	Update docs blocks import path for Storybook v10
skills/carbon-react/references/docs/recommended-practices.md	Update docs blocks import path for Storybook v10
skills/carbon-react/references/docs/installation.md	Update docs blocks import path for Storybook v10
skills/carbon-react/references/docs/i18n.md	Update docs blocks import path for Storybook v10
skills/carbon-react/references/docs/extending-styles-using-styled-components.md	Update docs blocks import path for Storybook v10
skills/carbon-react/references/docs/deprecation-migration.md	Update docs blocks import path for Storybook v10
skills/carbon-react/references/docs/colors.md	Update docs blocks import path for Storybook v10
skills/carbon-react/components/tooltip.md	Documentation link/wording tweak for Storybook v10 migration
skills/carbon-react/components/portrait.md	Keep docs example aligned with story changes
skills/carbon-react/components/multi-action-button.md	Keep docs example aligned with story changes
playwright-ct.config.ts	Migrate Playwright CT config toward ESM patterns
package.json	Upgrade Storybook/Chromatic deps and set module type
docs/validations.stories.tsx	Switch framework typings to `@storybook/react-vite`
docs/validations.mdx	Update docs blocks import path for Storybook v10
docs/using-lexical.mdx	Update docs blocks import path for Storybook v10
docs/usage.mdx	Update docs blocks import path for Storybook v10
docs/usage-with-routing.mdx	Update docs blocks import path for Storybook v10
docs/roadmap.mdx	Update docs blocks import path for Storybook v10
docs/recommended-practices.mdx	Update docs blocks import path for Storybook v10
docs/installation.mdx	Update docs blocks import path for Storybook v10
docs/i18n.mdx	Update docs blocks import path for Storybook v10
docs/how-to-contribute.mdx	Update docs blocks import path for Storybook v10
docs/extending-styles-using-styled-components.stories.tsx	Switch framework typings to `@storybook/react-vite`
docs/extending-styles-using-styled-components.mdx	Update docs blocks import path for Storybook v10
docs/deprecation-migration.mdx	Update docs blocks import path for Storybook v10
docs/colors.mdx	Update docs blocks import path for Storybook v10
docs/bundle-size.mdx	Update docs blocks import path for Storybook v10
contributing/codebase-overview.md	Update docs guidance to new blocks import
.storybook/withThemeProvider.jsx	Replace deprecated `makeDecorator` usage with function decorator
.storybook/with-locale-selector.tsx	Switch Decorator typing to `@storybook/react-vite`
.storybook/with-global-styles.tsx	Switch Decorator typing to `@storybook/react-vite`
.storybook/version-picker/version-picker.test.tsx	Update mocks to Storybook internal components API
.storybook/version-picker/index.tsx	Replace deprecated TooltipLinkList with ActionList
.storybook/utils/styled-system-props.ts	Update ArgTypes import and formatting
.storybook/utils/partial-action.ts	Migrate actions import to `storybook/actions`
.storybook/sage-storybook-theme.ts	Migrate theming import to `storybook/theming/create`
.storybook/sage-docs-theme.ts	Migrate theming import and theme token tweaks
.storybook/preview.ts	Switch Preview typing, test configure import, and viewport config shape
.storybook/manager.ts	Migrate manager API import and remove sidebar filter implementation
.storybook/manager-head.html	Add manager toolbar CSS overrides
.storybook/main.ts	Migrate to ESM setup and update addons/Vite final/type docgen opts
.storybook/interaction-toggle/reduced-motion.tsx	Switch IconButton import to Storybook internal components

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

Copilot · 2026-04-10T14:32:19Z

  "name": "carbon-react",
  "version": "158.41.0",
  "description": "A library of reusable React components for easily building user interfaces.",
+  "type": "module",


Setting "type": "module" at the package root is a breaking change for consumers that require() the published lib build (your files list implies you ship both lib and esm). If lib output is still CommonJS with .js extensions, Node will now interpret it as ESM and break CJS consumers; consider removing "type": "module" from the root and instead using .mjs for ESM-only config files, or updating the published outputs/exports so CJS files use .cjs and ESM uses .js (or explicit exports conditions).

Suggested change

"type": "module",

Could babel.config.mjs be the go to for this?

babel.config.mjs doesn't need to change as it already uses the .mjs extension so Node resolves it correctly. The root cause is that "type": "module" causes Node to interpret our CJS lib/*.js files as ESM, breaking require() for consumers

Copilot · 2026-04-10T14:32:20Z

@@ -55,22 +58,20 @@ const config: StorybookConfig = {
        },
      },
    },
-    "@storybook/addon-interactions",
    "storybook-addon-pseudo-states",
-    "@storybook/addon-essentials",
-    "@storybook/addon-toolbars",
-    "@storybook/addon-viewport",
    "@chromatic-com/storybook",
  ],


The addons list drops @storybook/addon-actions, @storybook/addon-controls, and @storybook/addon-viewport / @storybook/addon-essentials, but the codebase still uses action(...) across many *-test.stories.tsx and relies on controls/viewport parameters in preview.ts. Unless Storybook v10 is configured elsewhere to include these capabilities, this will remove expected UI panels/behavior. Re-add @storybook/addon-essentials (or the specific addons you need) to keep actions/controls/viewport working.

Copilot · 2026-04-10T14:32:20Z

 import React, { useState } from "react";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { StoryObj } from "@storybook/react";


This file still imports StoryObj from @storybook/react, while the PR migrates most other files to @storybook/react-vite and package.json removes @storybook/react as a devDependency. This is likely to cause a build/typecheck failure in CI. Update the import to come from @storybook/react-vite (or from the Storybook v10-recommended entry point used elsewhere in the PR).

Suggested change

import { StoryObj } from "@storybook/react";

import { StoryObj } from "@storybook/react-vite";

Copilot · 2026-04-10T14:32:21Z

 import { resolve } from "path";

-const playwrightDir = resolve(__dirname, "./playwright");
+const playwrightDir = resolve(import.meta.dirname, "./playwright");


import.meta.dirname is not a broadly supported Node ESM API (the more portable pattern is fileURLToPath(import.meta.url) + dirname(...), as already used in .storybook/main.ts). This may break Playwright config loading depending on the Node version/runtime Playwright uses. Align this file with the fileURLToPath/dirname approach to derive the base directory, and then build paths from that.

agree this is the better approach and will be cross-platform safe doing the following

import { fileURLToPath } from 'url'; import { dirname } from 'path'; const __dirname = dirname(fileURLToPath(import.meta.url));

The fileURLToPath(import.meta.url) approach also fails here. Playwright loads the config as CommonJS (since we have now removed the type in package.json as per the other feedback)

Copilot · 2026-04-10T14:32:21Z

 */
 export default defineConfig({
-  testDir: resolve(__dirname, "./src/components"),
+  testDir: resolve(import.meta.dirname, "./src/components"),


import.meta.dirname is not a broadly supported Node ESM API (the more portable pattern is fileURLToPath(import.meta.url) + dirname(...), as already used in .storybook/main.ts). This may break Playwright config loading depending on the Node version/runtime Playwright uses. Align this file with the fileURLToPath/dirname approach to derive the base directory, and then build paths from that.

agree again with the suggested approach, whilst it should be fine to assume that Node 21 and up is used we can mitigate fairly easily by following the suggestion

Copilot · 2026-04-10T14:32:21Z

        alias: {
          // Required to load font assets correctly from @sage/design-tokens package
-          "~@sage": resolve(__dirname, "./node_modules/@sage/"),
+          "~@sage": resolve(import.meta.dirname, "./node_modules/@sage/"),


import.meta.dirname is not a broadly supported Node ESM API (the more portable pattern is fileURLToPath(import.meta.url) + dirname(...), as already used in .storybook/main.ts). This may break Playwright config loading depending on the Node version/runtime Playwright uses. Align this file with the fileURLToPath/dirname approach to derive the base directory, and then build paths from that.

Copilot · 2026-04-10T14:32:21Z

  ],

-  globalTeardown: require.resolve("./playwright/global-teardown"),
+  globalTeardown: resolve(import.meta.dirname, "./playwright/global-teardown.js"),


import.meta.dirname is not a broadly supported Node ESM API (the more portable pattern is fileURLToPath(import.meta.url) + dirname(...), as already used in .storybook/main.ts). This may break Playwright config loading depending on the Node version/runtime Playwright uses. Align this file with the fileURLToPath/dirname approach to derive the base directory, and then build paths from that.

Copilot · 2026-04-10T14:32:22Z

+                  <ActionList.Button
+                    ariaLabel={false}
+                    onClick={() => {
+                      window.location.href = item.href;
+                      item.onClick();
+                    }}
+                  >


ariaLabel={false} produces an invalid ARIA label value (ARIA labels should be strings) and may also render a non-standard attribute (camelCased ariaLabel vs aria-label) depending on the component implementation. Prefer providing a meaningful string label (e.g., derived from item.title) or omit the prop entirely if the internal component already handles labeling.

ariaLabel is a Storybook-internal component prop where false explicitly signals "this button is labelled by its text content". It's not a DOM attribute, so standard ARIA rules don't apply here and will be required in storybook 11

Copilot · 2026-04-10T14:32:22Z

        <IconButton
          key={TOOL_ID}
          active={false}
+          ariaLabel={false}
          title="Open docs for a different version"


Same issue as above: ariaLabel={false} is not a valid ARIA label and may degrade screen reader behavior. Replace with a descriptive string (or use the properly named ARIA prop expected by the Storybook component, commonly aria-label).

Copilot · 2026-04-10T14:32:22Z

 | message | React.ReactNode | Yes |  | The message to be displayed within the tooltip |  |
 | bgColor | string \| undefined | No |  | Override background color of the Tooltip, provide any color from palette or any valid css color value. |  |
-| flipOverrides | TooltipPositions[] \| undefined | No |  | Overrides the default flip behaviour of the Tooltip, must be an array containing some or all of ["top", "bottom", "left", "right"] (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) |  |
+| flipOverrides | TooltipPositions[] \| undefined | No |  | Overrides the default flip behaviour of the Tooltip, 123 must be an array containing some or all of ["top", "bottom", "left", "right"] (see <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements" target="_blank">Popper.js documentation</a>) |  |


Remove stray text 123 from the tooltip prop description; it reads like an accidental insertion and makes the docs harder to understand.

Suggested change

| flipOverrides | TooltipPositions[] \| undefined | No | | Overrides the default flip behaviour of the Tooltip, 123 must be an array containing some or all of ["top", "bottom", "left", "right"] (see <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements" target="_blank">Popper.js documentation</a>) | |

| flipOverrides | TooltipPositions[] \| undefined | No | | Overrides the default flip behaviour of the Tooltip, must be an array containing some or all of ["top", "bottom", "left", "right"] (see <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements" target="_blank">Popper.js documentation</a>) | |

edleeks87 · 2026-04-13T12:59:14Z

+  [role="toolbar"] button[aria-label*="theme"],
+  [role="toolbar"] button[aria-label*="Locale"] *,
+  [role="toolbar"] button[aria-label*="Colour Mode"] *,
+  [role="toolbar"] button[aria-label*="Theme"] *,


question (non-blocking): would * not cover the below where we're targeting svg children?

edleeks87 · 2026-04-13T13:02:30Z

@@ -68,9 +68,9 @@ export interface TooltipProps extends TagProps {
  /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
  fontColor?: string;
  /**
-   * Overrides the default flip behaviour of the Tooltip,
+   * Overrides the default flip behaviour of the Tooltip, 123


question: why not 456? 😉

edleeks87 · 2026-04-13T13:03:55Z

@@ -14,7 +14,7 @@
      "dom.iterable"
    ],
    "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",


question (non-blocking): what's the reason for updating the module resolution? I'm fine with the change (probably should have been made a while ago) just wondering if something forced it now

Storybook 10 uses package exports subpaths (e.g. storybook/internal/components) which "node" resolution can't resolve. "bundler" was required to make TypeScript happy with the upgrade

tomdavies73

Brilliant work @nineteen88,

The only other thing I've noticed is some leftover usage of hideInSidebar, this is still being used in some slightly obscure stories and some legacy stories, namely tabs.

A simple find and replace in VS Code should do the trick hideInSidebar -> dev 👍

tomdavies73 · 2026-04-17T12:36:03Z

  "name": "carbon-react",
  "version": "158.41.0",
  "description": "A library of reusable React components for easily building user interfaces.",
+  "type": "module",


Could babel.config.mjs be the go to for this?

tomdavies73 · 2026-04-17T12:44:24Z

   * must be an array containing some or all of ["top", "bottom", "left", "right"]
-   * (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements)
+   * (see <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements" target="_blank">Popper.js documentation</a>)


praise: This works nicely in the props table

tomdavies73 · 2026-04-17T12:47:13Z

  typescript: {
    check: false,
    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {


question: when running storybook locally we're met with quite a few Vite warnings for docgen skipping

Vite warning: Skipping docgen for │ "/Users/thomas.davies/development-work/carbon/.storybook/utils/deprecation-warning.component.tsx" │ because it is not included in the active TypeScript project. │ Plugin: vite:react-docgen-typescript │ File:

Could we do some sort of exclusion in here to avoid this?

tomdavies73 · 2026-04-17T12:48:54Z

 import { Tab } from "./tab.component";

 /**
 * This file is used primarily as a means to generate the props table.
- * It contains the tag: ["hideInSidebar"] so that it is not included in the sidebar.
+ * It contains the tag: ["!hideInSidebar"] so that it is not included in the sidebar.


question: should this be "!dev" now?

tomdavies73 · 2026-04-17T12:49:09Z

 import { TabList } from "../tabs.component";

 /**
 * This file is used primarily as a means to generate the props table.
- * It contains the tag: ["hideInSidebar"] so that it is not included in the sidebar.
+ * It contains the tag: ["!hideInSidebar"] so that it is not included in the sidebar.


question: should this be "!dev" now?

tomdavies73 · 2026-04-17T12:51:29Z

-          {bgColors.map(({ label, value }) => (
-            <Option text={label} value={value} />
-          ))}
+          <Option text="paleblue" value="#A3CAF0" />


praise: much more readable

tomdavies73 · 2026-04-17T13:00:03Z

    },
  },
-  ...globalThemeProvider,
+  ...(globalThemeProvider as any),


question: is there any other type we can use here?

tomdavies73 · 2026-04-17T13:01:38Z

-  ) => {
-    const { theme: chromaticTheme, fourColumnLayout } = parameters.chromatic;
-    const isChromaticBuild = isChromatic();
+const withThemeProvider = (Story, context) => {


question: not necessarily related to the scope of your changes, but would we see any benefit in changing this file from jsx -> tsx?

Definitely scope creep but I did it to tidy it up and keep it consistent

- change the way we hide stories to the documented method as per Storybook docs

nineteen88 requested review from a team as code owners June 6, 2025 15:31

nineteen88 force-pushed the FE-7277 branch from b60f0f5 to 352208d Compare June 6, 2025 15:35

edleeks87 reviewed Jun 9, 2025

View reviewed changes

nineteen88 self-assigned this Jun 9, 2025

nineteen88 force-pushed the FE-7277 branch 2 times, most recently from db4acba to 79d67fa Compare June 9, 2025 14:38

edleeks87 previously approved these changes Jun 10, 2025

View reviewed changes

Parsium self-requested a review June 11, 2025 07:53

Parsium previously approved these changes Jun 11, 2025

View reviewed changes

nineteen88 added Passed Review Pending QA Squad Front End labels Jun 13, 2025

nineteen88 dismissed stale reviews from Parsium and edleeks87 via 9976de6 July 10, 2025 10:53

nineteen88 force-pushed the FE-7277 branch 3 times, most recently from 6a5f8c6 to e2e8404 Compare July 10, 2025 12:53

nineteen88 added the Blocked label Aug 8, 2025

nineteen88 force-pushed the FE-7277 branch 2 times, most recently from 2aa33a1 to 5943b5e Compare March 19, 2026 02:08

nineteen88 requested a review from a team as a code owner March 19, 2026 02:08

nineteen88 force-pushed the FE-7277 branch 2 times, most recently from 19df6eb to dd8e86b Compare March 19, 2026 02:19

nineteen88 requested a review from a team as a code owner March 19, 2026 02:19

nineteen88 force-pushed the FE-7277 branch from dd8e86b to 3a04240 Compare March 19, 2026 02:22

nineteen88 changed the title ~~feat(storybook): upgrade to v9~~ feat(storybook): upgrade to v10 Mar 19, 2026

nineteen88 force-pushed the FE-7277 branch from 3a04240 to 59dc21b Compare March 19, 2026 16:16

nineteen88 removed the Blocked label Mar 19, 2026

nineteen88 force-pushed the FE-7277 branch from 59dc21b to ec641d5 Compare March 19, 2026 16:40

nineteen88 marked this pull request as draft March 20, 2026 10:41

nineteen88 force-pushed the FE-7277 branch 3 times, most recently from 9c54566 to 9d5e6aa Compare April 10, 2026 13:24

nineteen88 marked this pull request as ready for review April 10, 2026 13:44

nineteen88 force-pushed the FE-7277 branch from 9d5e6aa to 4fc4b8f Compare April 10, 2026 14:03

nineteen88 requested a review from Copilot April 10, 2026 14:27

Copilot AI reviewed Apr 10, 2026

View reviewed changes

edleeks87 reviewed Apr 13, 2026

View reviewed changes

tomdavies73 self-requested a review April 17, 2026 10:38

tomdavies73 reviewed Apr 17, 2026

View reviewed changes

nineteen88 force-pushed the FE-7277 branch 5 times, most recently from 4cc71b5 to 79be31f Compare April 23, 2026 13:29

nineteen88 added 5 commits April 23, 2026 14:57

feat(storybook): upgrade to v9

5ebd162

- change the way we hide stories to the documented method as per Storybook docs

feat: fixes for qa issues

6ff31a0

feat(storybook): upgrade sb9 version

c6e75e1

feat(storybook): upgrade to version 10.3.5

7897d76

feat(sb): resolve pr comments - will be flattened

6b44498

nineteen88 force-pushed the FE-7277 branch from 79be31f to 6b44498 Compare April 23, 2026 13:59

	import { StoryObj } from "@storybook/react";
	import { StoryObj } from "@storybook/react-vite";

	\| flipOverrides \| TooltipPositions[] \\| undefined \| No \| \| Overrides the default flip behaviour of the Tooltip, 123 must be an array containing some or all of ["top", "bottom", "left", "right"] (see <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements" target="_blank">Popper.js documentation</a>) \| \|
	\| flipOverrides \| TooltipPositions[] \\| undefined \| No \| \| Overrides the default flip behaviour of the Tooltip, must be an array containing some or all of ["top", "bottom", "left", "right"] (see <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements" target="_blank">Popper.js documentation</a>) \| \|

Conversation

nineteen88 commented Jun 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed behaviour

Current behaviour

Checklist

QA

Additional context

Testing instructions

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Parsium Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nineteen88 commented Aug 8, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tomdavies73 left a comment

Choose a reason for hiding this comment

Uh oh!

nineteen88 commented Jun 6, 2025 •

edited

Loading

Parsium Jun 11, 2025 •

edited

Loading