feat(Dialog): remove support for sx by joshblack · Pull Request #6812 · primer/react

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: b0c7810

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

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% 🔺)

mperrotti

Changes look good overall. Approved assuming you'll:

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

mperrotti

oops, forgot to select "Approve" radio

…om-dialog

github-actions · 2025-09-24T01:22:17Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

…om-dialog

github-actions · 2025-09-24T13:58:26Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

github-actions · 2025-09-24T13:58:49Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

github-actions · 2025-09-24T14:00:35Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

primer-integration · 2025-09-25T20:33:43Z

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

primer-integration · 2025-09-25T20:47:33Z

🟢 ci completed with status success.

Co-authored-by: Mike Perrotti <mperrotti@github.com> Co-authored-by: Jon Rohan <yes@jonrohan.codes> Co-authored-by: Marie Lucca <francinelucca@github.com>

joshblack added 2 commits September 9, 2025 12:02

feat(Dialog): remove support for sx
1a7b404

chore: add changeset
1f09e57

CopilotAI 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-actionsBot 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

CopilotAI reviewed Sep 9, 2025
View reviewed changes

Comment threadpackages/styled-react/src/components/Dialog.tsx Outdated
Comment threadpackages/styled-react/src/components/Dialog.tsx Outdated
Comment threadpackages/styled-react/src/components/Dialog.tsx Outdated
Comment threadpackages/react/src/Dialog/Dialog.tsx Outdated

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

github-actionsBottemporarily deployed to storybook-preview-6812 September 9, 2025 17:13 Inactive

francinelucca reviewed Sep 9, 2025
View reviewed changes

Comment threadpackages/styled-react/src/index.tsx Outdated

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-actionsBottemporarily deployed to storybook-preview-6812 September 11, 2025 23:33 Inactive

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

github-actionsBot 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-actionsBottemporarily 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-actionsBottemporarily deployed to storybook-preview-6812 September 12, 2025 17:46 Inactive

rm forgotten comment
327e21e

github-actionsBottemporarily deployed to storybook-preview-6812 September 22, 2025 17:32 Inactive

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

github-actionsBot added integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Sep 24, 2025

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

github-actionsBottemporarily deployed to storybook-preview-6812 September 24, 2025 01:29 Inactive

francinelucca disabled auto-merge September 24, 2025 03:14

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

github-actionsBot removed the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Sep 24, 2025

add Dialog to experimental exports
d8a88f3

github-actionsBot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Sep 24, 2025

alphabetical sort
b0c7810

github-actionsBot added integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Sep 24, 2025

github-actionsBot requested a deployment to storybook-preview-6812 September 24, 2025 14:01 Abandoned

francinelucca deployed to github-pages September 24, 2025 14:11 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6812 September 24, 2025 14:11 Inactive

github-actionsBot removed the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Sep 25, 2025

francinelucca added this pull request to the merge queue Sep 26, 2025

Merged via the queue into main with commit 0834e9eSep 26, 2025
43 of 44 checks passed

francinelucca deleted the 6762-remove-sx-from-dialog branch September 26, 2025 21:00

primerBot mentioned this pull request Sep 26, 2025
Release tracking (rc) #6913
Merged

llastflowers pushed a commit that referenced this pull request Sep 29, 2025
feat(Dialog): remove support for sx (#6812)
46d9d1c
Co-authored-by: Mike Perrotti <mperrotti@github.com> Co-authored-by: Jon Rohan <yes@jonrohan.codes> Co-authored-by: Marie Lucca <francinelucca@github.com>

Uh oh!

Conversation

joshblack commented Sep 9, 2025

Changelog

New

Changed

Removed

Rollout strategy

Uh oh!

changeset-botBot 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-actionsBot commented Sep 9, 2025

Uh oh!

CopilotAI 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!

github-actionsBot 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!

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!

github-actionsBot commented Sep 24, 2025

Uh oh!

github-actionsBot commented Sep 24, 2025

Uh oh!

github-actionsBot commented Sep 24, 2025

Uh oh!

github-actionsBot commented Sep 24, 2025

Uh oh!

primer-integrationBot commented Sep 25, 2025

Uh oh!

primer-integrationBot commented Sep 25, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

changeset-botBot commented Sep 9, 2025•
edited
Loading

github-actionsBot commented Sep 9, 2025•
edited
Loading

mperrotti left a comment •
edited
Loading