feat(dialog): align component with fusion DS - FE-7151 by DipperTheDan · Pull Request #7807 · Sage/carbon

DipperTheDan · 2026-02-27T12:47:59Z

Proposed behaviour

Current behaviour

Dialog is currently out of alignment with the Fusion DS.

Checklist

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

Due to Dialog also being used in AdvancedColorPicker, Alert, Confirm and Pages, some styling updates will be seen in these components. I have confirmed that this is expected with UX and I have been assured that we can accept the changes in styling that will inevitably happen due to these audit changes.

Testing instructions

Copilot

Pull request overview

This PR introduces a new Design-System-aligned Dialog implementation and converts the existing Dialog export into a legacy migration wrapper, updating docs/stories/tests and a couple of dependent components to match the new sizing/styling.

Changes:

Added a new Dialog implementation under src/components/dialog/__internal__/__next__/ (styles, config, stories, tests, Playwright CT) including a withDialogHeader HOC.
Replaced the old Dialog implementation with a wrapper that maps legacy props/sizes to the new API and emits deprecation warnings; moved Storybook entries under Deprecated/.
Updated consuming code/tests to reflect the new sizing/radius/background tokens (e.g. AdvancedColorPicker sizing, Alert/Confirm/Dialog tests).

Reviewed changes

Copilot reviewed 24 out of 24 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
src/components/dialog/dialog.test.tsx	Updates legacy Dialog tests for wrapper behavior, size mapping coverage, and new background/padding assertions.
src/components/dialog/dialog.style.ts	Removes the legacy styled-components implementation (superseded by `__internal__/__next__`).
src/components/dialog/dialog.stories.tsx	Moves legacy Dialog stories under `Deprecated/Dialog`.
src/components/dialog/dialog.pw.tsx	Updates Playwright expectations for new Dialog widths/radius and deprecation behavior.
src/components/dialog/dialog.mdx	Adds deprecation warning content and links to the newer Dialog docs.
src/components/dialog/dialog.component.tsx	Replaces legacy implementation with a migration wrapper around the new Dialog and adds legacy-to-new prop mapping.
src/components/dialog/dialog-test.stories.tsx	Moves legacy Dialog test stories under `Deprecated/Dialog/Test`.
src/components/dialog/internal/next/index.ts	Adds an index barrel for the new internal Dialog implementation.
src/components/dialog/internal/next/dialog.test.tsx	Adds RTL coverage for the new Dialog implementation (sizes, accessibility, sticky footer, etc.).
src/components/dialog/internal/next/dialog.style.ts	Adds new DS-token-based styles for the new Dialog (sizes, radius, keyline, footer/header behavior).
src/components/dialog/internal/next/dialog.stories.tsx	Adds Storybook stories demonstrating new Dialog behavior and header variants.
src/components/dialog/internal/next/dialog.pw.tsx	Adds Playwright CT coverage for the new Dialog implementation.
src/components/dialog/internal/next/dialog.mdx	Adds docs for the newer Dialog implementation (Quick Start, sizes, accessibility, examples).
src/components/dialog/internal/next/dialog.config.ts	Adds DS size config/tokens and types for the new Dialog.
src/components/dialog/internal/next/dialog.component.tsx	Introduces the new Dialog component implementation (Modal/FocusTrap/header/footer/sticky small-screen logic).
src/components/dialog/internal/next/dialog-test.stories.tsx	Adds test-oriented stories for the new Dialog implementation.
src/components/dialog/internal/next/dialog-header/dialog-header.test.tsx	Adds RTL coverage for `withDialogHeader` and status heading variants.
src/components/dialog/internal/next/dialog-header/dialog-header.component.tsx	Adds the `withDialogHeader` HOC and status icon heading rendering.
src/components/dialog/internal/next/components-test.pw.tsx	Adds Playwright CT helper fixtures for the new Dialog stories/tests.
src/components/dialog-full-screen/dialog-full-screen.test.tsx	Updates deprecation-warning assertions due to Dialog wrapper changes.
src/components/confirm/confirm.test.tsx	Removes disableCancel-related tests (reflecting changed/removed behavior).
src/components/alert/alert.test.tsx	Updates expected border-radius styling (now inherited from Dialog wrapper/new styles).
src/components/advanced-color-picker/advanced-color-picker.style.ts	Switches StyledDialogContent import to the new Dialog’s internal styles.
src/components/advanced-color-picker/advanced-color-picker.component.tsx	Changes Dialog `size` usage from legacy `auto` to `small`.

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

Copilot · 2026-03-02T14:46:35Z

 import { StyledColorOptions } from "../simple-color-picker/simple-color-picker.style";
 import { StyledSimpleColor } from "../simple-color-picker/simple-color/simple-color.style";
-import { StyledDialogContent } from "../dialog/dialog.style";
+import { StyledDialogContent } from "../dialog/__internal__/__next__/dialog.style";
 import Dialog from "../dialog/dialog.component";
 import StyledIconButton from "../icon-button/icon-button.style";
 import checkerBoardSvg from "../simple-color-picker/simple-color/checker-board.svg";


Importing StyledDialogContent from ../dialog/__internal__/__next__/dialog.style couples AdvancedColorPicker to Dialog’s internal implementation details. If Dialog’s internal structure changes again, this will break. Consider exposing the needed selector/styled export via a public dialog/__next__ entry point, or switch to targeting stable attributes (e.g. [data-element="dialog-content"]). Also note the existing ${StyledIconButton} overrides further down won’t apply now that Dialog’s close button is a Button in the new implementation.

edleeks87 · 2026-03-03T15:14:20Z

+  };
+
+const DialogPositioner = styled.div.attrs(
+  applyBaseTheme,


comment: fine to leave for now but we should have a wider conversation with the rest of the team about how we handle zindexing as ideally we drop the use of the legacy themes in the next versions

edleeks87 · 2026-03-03T15:17:29Z

+          wrapperRef={containerRef}
+        >
+          <DialogPositioner
+            $size={size}


praise: nice one for handling the transitive props

Copilot

Pull request overview

Copilot reviewed 26 out of 26 changed files in this pull request and generated 5 comments.

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

Copilot

Pull request overview

Copilot reviewed 31 out of 31 changed files in this pull request and generated 6 comments.

Comments suppressed due to low confidence (1)

src/components/confirm/confirm.component.tsx:202

disableCancel previously disabled the close icon as well (there was a test covering this), but Confirm now only sets disableEscKey and leaves the close icon enabled. This changes cancellation behaviour for existing consumers relying on disableCancel to fully prevent cancelling. Consider restoring the old behaviour by disabling the close icon when disableCancel is true (and/or preventing onCancel via the close icon) and keeping Escape disabled too.

    <Dialog
      open={open}
      onCancel={onCancel}
      disableEscKey={disableCancel}
      subtitle={subtitle}
      title={getTitle()}
      role="alertdialog"
      size={size}
      showCloseIcon={showCloseIcon}
      topModalOverride={topModalOverride}

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

edleeks87

Looks like there's a lot of tokens that are uppercase when they should be lower etc, there's also fallbacks which is preventing the undefined tokens from being caught

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

@@ -16,12 +16,12 @@ import { getDataElementByValue } from "../../../playwright/components";
 const specialCharacters = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
 const viewportHeights = [250, 500, 650];
 const viewportWidths = [


comment: if these are already being captured in chromatic we don't need this

edleeks87 · 2026-04-13T13:31:38Z

+};
+
+const applyDefaultPadding = () => css`
+  padding: 0 var(--spacing200);


comment: we should update these to use the new tokens if possible

edleeks87 · 2026-04-13T13:47:54Z

+`;
+
+const hasPaddingProps = (props: PaddingProps) => {
+  return (


Question: do we need to check this? Wouldn't it just override if we did the following

const applyContentPadding = (disableContentPadding = false) => (props: PaddingProps) => { if (disableContentPadding) { return css` padding: 0; `; } return css` ${applyDefaultPadding()} ${padding} `; };

edleeks87 · 2026-04-13T13:49:20Z

+    $size === "fullscreen"
+      ? css`
+          flex: 1;
+          ${applyContentPadding(Boolean(disableContentPadding))(props)}


suggestion: we shouldn't need to coerce to Boolean, there's a default value on the function but we dont' really need that as undefined is still falsy etc

edleeks87 · 2026-04-13T13:51:09Z

+                box-shadow:
+                  0 -2px 4px 0 rgba(0, 0, 0, 0.1),
+                  0 -10px 60px 0 rgba(0, 0, 0, 0.1);
+                background: var(--container-standard-bg-default, #fff);


Suggested change

background: var(--container-standard-bg-default, #fff);

background: var(--container-standard-bg-default);

edleeks87 · 2026-04-13T13:53:33Z

+          flex-grow: 1;
+          padding: ${disableContentPadding
+            ? "0px"
+            : "var(--spacing300) var(--spacing400)"};


comment: legacy tokens

edleeks87 · 2026-04-13T13:54:34Z

+  box-sizing: border-box;
+  width: 100%;
+  height: var(--global-size-3XL, 72px);
+  padding-top: var(--global-space-comp-L, 16px);


Suggested change

padding-top: var(--global-space-comp-L, 16px);

padding-top: var(--global-space-comp-l);

lower case needed here and fallbacks should be removed

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

+
+const StyledDialogTitle = styled.div<StyledDialogTitleProps>`
+  background: var(--container-standard-bg-default, #fff);
+  padding: var(--global-space-comp-XL, 24px);


comment: same as above lowercase and no fallbacks etc

edleeks87 · 2026-04-13T13:57:06Z

-      { size: SIZE.MEDIUM, width: "750px" },
-      { size: SIZE.MEDIUMLARGE, width: "850px" },
-      { size: SIZE.LARGE, width: "960px" },
+      { size: SIZE.EXTRASMALL, width: "540px" },


comment: similar to above this can be removed if there's chromatic

edleeks87 · 2026-04-13T13:57:21Z


 const meta: Meta<typeof Dialog> = {
-  title: "Dialog",
+  title: "Deprecated/Dialog",


Suggested change

title: "Deprecated/Dialog",

title: "Dialog",

We should show old and new in local/dev docs but only the public facing one in production etc. To the end consumer there shouldn't be a change when we remove legacy etc

edleeks87 · 2026-04-14T14:03:00Z

          padding: ${disableContentPadding
            ? "0px"
-            : "var(--spacing300) var(--spacing400)"};
+            : "var(--global-space-layout-xs) var(--global-space-layout-§s)"};


edleeks87 · 2026-04-14T14:03:29Z

          css`
            min-width: 288px;
-            max-width: var(--container-size-dialog-maxW-S, 540px);
+            max-width: 540px;


Can we check with UX/DS to confirm there's no appropriate tokens to use here?

Checked with DS. They did have some originally but they were stripped out for hard coded values. I've let the DS know that we'd prefer token values incase these values need updating in future, it'll save us a manual job.

DipperTheDan · 2026-04-28T09:58:39Z

+    "^@sage/design-tokens-fusion/js/es6/(.*)$":
+      "@sage/design-tokens-fusion/js/common/$1",


I have had to add these here to avoid an error of SyntaxError: Unexpected token 'export' when running the test suite because Jest runs in a Node CJS environment and ignores node_modules by default, so the export const syntax in the ES6 token files is never transpiled.

DipperTheDan self-assigned this Feb 27, 2026

DipperTheDan added DO NOT MERGE Work in progress This is a WIP PR so may not be ready for review labels Feb 27, 2026

DipperTheDan requested a review from Copilot March 2, 2026 14:36

Copilot started reviewing on behalf of DipperTheDan March 2, 2026 14:36 View session

Copilot AI reviewed Mar 2, 2026

View reviewed changes

edleeks87 reviewed Mar 3, 2026

View reviewed changes

DipperTheDan requested a review from Copilot March 5, 2026 14:05

Copilot started reviewing on behalf of DipperTheDan March 5, 2026 14:06 View session

Copilot AI reviewed Mar 5, 2026

View reviewed changes

DipperTheDan force-pushed the option-B-test-branch-for-dialog-DS-audit branch 2 times, most recently from a022b01 to 1d0a5a5 Compare March 11, 2026 13:53

DipperTheDan requested a review from Copilot March 11, 2026 14:07

Copilot started reviewing on behalf of DipperTheDan March 11, 2026 14:12 View session

Copilot AI reviewed Mar 11, 2026

View reviewed changes

Sage deleted a comment from Copilot AI Mar 11, 2026

DipperTheDan force-pushed the option-B-test-branch-for-dialog-DS-audit branch 2 times, most recently from f1f6e97 to 729b881 Compare March 12, 2026 11:51

DipperTheDan mentioned this pull request Mar 12, 2026

feat(dialog): align component with fusion DS - FE-7151 #7791

Closed

14 tasks

DipperTheDan changed the title ~~Option b test branch for dialog ds audit~~ feat(dialog): align component with fusion DS - FE-7151 Mar 23, 2026

DipperTheDan added Pending Review Pending QA Pending UX QA Squad Front End and removed DO NOT MERGE Work in progress This is a WIP PR so may not be ready for review labels Apr 10, 2026

edleeks87 reviewed Apr 13, 2026

View reviewed changes

edleeks87 reviewed Apr 14, 2026

View reviewed changes

DipperTheDan force-pushed the option-B-test-branch-for-dialog-DS-audit branch 2 times, most recently from 96525d4 to 62e2273 Compare April 14, 2026 15:01

mihai-albu-sage previously approved these changes Apr 22, 2026

View reviewed changes

DipperTheDan dismissed mihai-albu-sage’s stale review via fe6ded0 April 27, 2026 12:47

DipperTheDan force-pushed the option-B-test-branch-for-dialog-DS-audit branch 2 times, most recently from 06965f5 to 3f9df3c Compare April 27, 2026 13:06

DipperTheDan added 9 commits April 27, 2026 14:49

feat(dialog): align component with fusion DS

8ccecdd

feat(dialog): update component with ds audit

b6fc6fc

chore: address review comments part one - tbs

6c661e2

chore: update with master and fix a few things - tbs

6b688a1

chore: address issues with Pages component styling regressions - tbs

93f2ba3

fix: ensure min-width is applied correctly - tbs

25c6876

chore: address first round of code review comments - tbs

09d0b74

chore: replace max-width values with new tokens - tbs

a2f1d9d

chore: resolve conflicts and update skills - tbs

d0a2997

DipperTheDan force-pushed the option-B-test-branch-for-dialog-DS-audit branch from 3f9df3c to d0a2997 Compare April 27, 2026 13:53

mihai-albu-sage previously approved these changes Apr 27, 2026

View reviewed changes

edleeks87 reviewed Apr 27, 2026

View reviewed changes

Comment thread src/components/dialog/__internal__/__next__/dialog.style.ts

Comment thread src/components/dialog/__internal__/__next__/dialog.config.ts

chore: remove token values for media queries - tbs

def2d21

DipperTheDan dismissed mihai-albu-sage’s stale review via def2d21 April 27, 2026 14:44

chore: refactor maxWidth token in config - tbs

48522d8

DipperTheDan commented Apr 28, 2026

View reviewed changes

edleeks87 approved these changes Apr 29, 2026

View reviewed changes

mihai-albu-sage approved these changes Apr 29, 2026

View reviewed changes

DipperTheDan marked this pull request as ready for review April 29, 2026 15:13

DipperTheDan requested review from a team as code owners April 29, 2026 15:13

	background: var(--container-standard-bg-default, #fff);
	background: var(--container-standard-bg-default);

	padding-top: var(--global-space-comp-L, 16px);
	padding-top: var(--global-space-comp-l);

		"^@sage/design-tokens-fusion/js/es6/(.*)$":
		"@sage/design-tokens-fusion/js/common/$1",

Conversation

DipperTheDan commented Feb 27, 2026 • 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!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

edleeks87 left a comment

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!

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!

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!

DipperTheDan commented Feb 27, 2026 •

edited

Loading