feat(Dialog): remove support for sx #6812

joshblack · 2025-09-09T17:04:37Z

Closes #6762

Changelog

New

Changed

Refactor usage of Box internally from @mperrotti's work
Update tests in styled-react to account for sx usage in Dialog sub-components

Removed

Remove support for sx from Dialog

Rollout strategy

Major release; if selected, include a written rollout or migration plan

We will use the @primer/styled-react package to update usage downstream before rolling this change out

changeset-bot · 2025-09-09T17:04:42Z

🦋 Changeset detected

Latest commit: b3b1712

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@primer/react	Major
@primer/styled-react	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-09-09T17:05:13Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

Copilot

Pull Request Overview

This PR removes support for the sx prop from the Dialog component and its sub-components as part of a major version release. The change aims to simplify the Dialog API by removing styled-system integration while maintaining backward compatibility through the @primer/styled-react package.

Removes sx prop support from Dialog, Dialog.Header, Dialog.Title, Dialog.Subtitle, Dialog.Body, and Dialog.Footer
Refactors internal usage of Box component to native HTML elements with CSS modules
Creates a styled-react wrapper to maintain sx support for consumers during migration

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/styled-react/src/sx.ts	Adds utility function for styled-system CSS processing
packages/styled-react/src/index.tsx	Updates exports to include Dialog from styled-react package
packages/styled-react/src/experimental.tsx	Re-exports Dialog from local implementation instead of @primer/react
packages/styled-react/src/components/Dialog.tsx	Implements Dialog wrapper with sx support using styled-components
packages/styled-react/src/tests/primer-react.browser.test.tsx	Adds tests for Dialog sub-components with sx prop support
packages/react/src/Dialog/Dialog.tsx	Removes sx prop and Box usage, replaces with native HTML elements
packages/react/src/Dialog/Dialog.module.css	Adds CSS classes for header layout previously handled by Box
.changeset/sweet-results-smell.md	Documents breaking change for major version release

Copilot · 2025-09-09T17:06:01Z

packages/styled-react/src/components/Dialog.tsx

+  // @ts-expect-error - PrimerDialog.Header is not recognized as a valid component type
+  return <Wrapper as={PrimerDialog.Header} ref={ref} {...props} />


The TypeScript error suppression indicates a potential issue with the component typing. Consider properly typing the PrimerDialog sub-components or creating a more robust wrapper that doesn't require error suppression.

Copilot · 2025-09-09T17:06:02Z

packages/styled-react/src/components/Dialog.tsx

+  // @ts-expect-error - PrimerDialog.Body is not recognized as a valid component type
+  return <Wrapper as={PrimerDialog.Body} ref={ref} {...props} />


The TypeScript error suppression indicates a potential issue with the component typing. Consider properly typing the PrimerDialog sub-components or creating a more robust wrapper that doesn't require error suppression.

Copilot · 2025-09-09T17:06:02Z

packages/styled-react/src/components/Dialog.tsx

+  // @ts-expect-error - PrimerDialog.Footer is not recognized as a valid component type
+  return <Wrapper as={PrimerDialog.Footer} ref={ref} {...props} />


The TypeScript error suppression indicates a potential issue with the component typing. Consider properly typing the PrimerDialog sub-components or creating a more robust wrapper that doesn't require error suppression.

Copilot · 2025-09-09T17:06:02Z

packages/react/src/Dialog/Dialog.tsx

+// TODO: get rid of typecasting `forwardRef`
+const Title = React.forwardRef<HTMLHeadingElement, StyledTitleProps>(function Title({className, ...rest}, forwardRef) {


The TODO comment suggests this is temporary code. Consider addressing the type casting issue or creating a tracking issue if this needs to be resolved in a future iteration.

Suggested change

// TODO: get rid of typecasting `forwardRef`

const Title = React.forwardRef<HTMLHeadingElement, StyledTitleProps>(function Title({className, ...rest}, forwardRef) {

const Title = React.forwardRef<HTMLHeadingElement, StyledTitleProps>(function Title(

{className, ...rest},

forwardRef: React.ForwardedRef<HTMLHeadingElement>,

) {

This is just a comment I forgot to delete. Go ahead and remove it.

github-actions · 2025-09-09T17:09:06Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	89.44 KB (-0.2% 🔽)
packages/react/dist/browser.umd.js	89.6 KB (+0.04% 🔺)

francinelucca · 2025-09-09T18:08:54Z

packages/styled-react/src/index.tsx

+  Dialog as PrimerDialog,
+  type DialogProps as PrimerDialogProps,


I'm confused by what's happening here too 😅

I think the error is because we moved those imports to components/Dialog and forgot to remove from here.

mperrotti

Changes look good overall. Approved assuming you'll:

fix the broken "default" story VRT that was broken by removing Dialog sx props
remove the Dialog stories that use the sx prop
fix the linting errors

mperrotti

oops, forgot to select "Approve" radio

…om-dialog

primer-integration · 2025-09-16T22:52:38Z

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/2669

primer-integration · 2025-09-16T23:04:54Z

🔴 ci completed with status failure.

joshblack added 2 commits September 9, 2025 12:02

feat(Dialog): remove support for sx

1a7b404

chore: add changeset

1f09e57

Copilot AI review requested due to automatic review settings September 9, 2025 17:04

joshblack requested a review from a team as a code owner September 9, 2025 17:04

joshblack requested a review from jonrohan September 9, 2025 17:04

github-actions bot added staff Author is a staff member integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Sep 9, 2025

Copilot AI reviewed Sep 9, 2025

View reviewed changes

joshblack deployed to github-pages September 9, 2025 17:12 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6812 September 9, 2025 17:13 Inactive

francinelucca reviewed Sep 9, 2025

View reviewed changes

mperrotti reviewed Sep 10, 2025

View reviewed changes

jonrohan approved these changes Sep 10, 2025

View reviewed changes

mperrotti approved these changes Sep 10, 2025

View reviewed changes

mperrotti added 2 commits September 11, 2025 19:13

Merge branch 'main' of github.com:primer/react into 6762-remove-sx-fr…

475b5fb

…om-dialog

fixes typescript errors, removes Dialog's 'sx' prop dev stories

19b0741

mperrotti deployed to github-pages September 11, 2025 23:32 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6812 September 11, 2025 23:33 Inactive

mperrotti force-pushed the 6762-remove-sx-from-dialog branch from 60acad7 to 19b0741 Compare September 12, 2025 13:37

github-actions bot requested a deployment to storybook-preview-6812 September 12, 2025 13:41 Abandoned

mperrotti deployed to github-pages September 12, 2025 13:50 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6812 September 12, 2025 13:50 Inactive

Merge branch 'main' of github.com:primer/react into 6762-remove-sx-fr…

d7fd0b4

…om-dialog

mperrotti added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Sep 12, 2025

mperrotti deployed to github-pages September 12, 2025 17:45 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6812 September 12, 2025 17:46 Inactive

rm forgotten comment

327e21e

mperrotti deployed to github-pages September 12, 2025 17:54 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6812 September 12, 2025 17:54 Inactive

mperrotti added update snapshots 🤖 Command that updates VRT snapshots on the pull request and removed update snapshots 🤖 Command that updates VRT snapshots on the pull request labels Sep 12, 2025

rm outdated VRTs

d61ebbb

mperrotti deployed to github-pages September 12, 2025 18:29 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6812 September 12, 2025 18:29 Inactive

github-actions bot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Sep 15, 2025

Merge branch 'main' into 6762-remove-sx-from-dialog

a899f21

mperrotti deployed to github-pages September 15, 2025 16:32 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6812 September 15, 2025 16:32 Inactive

Merge branch 'main' of github.com:primer/react into 6762-remove-sx-fr…

58823c8

…om-dialog

mperrotti deployed to github-pages September 16, 2025 16:18 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6812 September 16, 2025 16:18 Inactive

fix: add automatic runtime to babel config for react

51cfe0a

joshblack removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Sep 16, 2025

joshblack deployed to github-pages September 16, 2025 22:17 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6812 September 16, 2025 22:17 Inactive

joshblack added 2 commits September 16, 2025 17:33

chore: try using Box instead of styled.div wrapper

9ca01f5

fix: update types to match original implementation

aa70b54

github-actions bot requested a deployment to storybook-preview-6812 September 16, 2025 22:39 Abandoned

chore: fix types for dialog and update tests

b3b1712

github-actions bot requested a deployment to storybook-preview-6812 September 16, 2025 22:46 Abandoned

joshblack deployed to github-pages September 16, 2025 22:53 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-6812 September 16, 2025 22:54 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(Dialog): remove support for sx #6812

feat(Dialog): remove support for sx #6812

Uh oh!

joshblack commented Sep 9, 2025

Uh oh!

changeset-bot bot commented Sep 9, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 9, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Sep 9, 2025

Uh oh!

Copilot AI Sep 9, 2025

Uh oh!

Copilot AI Sep 9, 2025

Uh oh!

Copilot AI Sep 9, 2025

Uh oh!

mperrotti Sep 9, 2025

Uh oh!

github-actions bot commented Sep 9, 2025 •

edited

Loading

Uh oh!

francinelucca Sep 9, 2025

Uh oh!

mperrotti Sep 9, 2025

Uh oh!

mperrotti left a comment

Uh oh!

mperrotti left a comment •

edited

Loading

Uh oh!

primer-integration bot commented Sep 16, 2025

Uh oh!

primer-integration bot commented Sep 16, 2025

Uh oh!

Uh oh!

		// @ts-expect-error - PrimerDialog.Header is not recognized as a valid component type
		return <Wrapper as={PrimerDialog.Header} ref={ref} {...props} />

		// @ts-expect-error - PrimerDialog.Body is not recognized as a valid component type
		return <Wrapper as={PrimerDialog.Body} ref={ref} {...props} />

		// @ts-expect-error - PrimerDialog.Footer is not recognized as a valid component type
		return <Wrapper as={PrimerDialog.Footer} ref={ref} {...props} />

		// TODO: get rid of typecasting `forwardRef`
		const Title = React.forwardRef<HTMLHeadingElement, StyledTitleProps>(function Title({className, ...rest}, forwardRef) {

		Dialog as PrimerDialog,
		type DialogProps as PrimerDialogProps,

feat(Dialog): remove support for sx #6812

Are you sure you want to change the base?

feat(Dialog): remove support for sx #6812

Uh oh!

Conversation

joshblack commented Sep 9, 2025

Changelog

New

Changed

Removed

Rollout strategy

Uh oh!

changeset-bot bot commented Sep 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Sep 9, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 9, 2025

Choose a reason for hiding this comment

Uh oh!

mperrotti Sep 9, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Sep 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

francinelucca Sep 9, 2025

Choose a reason for hiding this comment

Uh oh!

mperrotti Sep 9, 2025

Choose a reason for hiding this comment

Uh oh!

mperrotti left a comment

Choose a reason for hiding this comment

Uh oh!

mperrotti left a comment • 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!

primer-integration bot commented Sep 16, 2025

Uh oh!

primer-integration bot commented Sep 16, 2025

Uh oh!

Uh oh!

changeset-bot bot commented Sep 9, 2025 •

edited

Loading

github-actions bot commented Sep 9, 2025 •

edited

Loading

mperrotti left a comment •

edited

Loading