feat(Dialog): remove support for sx

[joshblack]

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]

🦋 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]

👋 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]

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 Dialog sx props
• remove the Dialog stories that use the sx prop
• fix the linting errors

[mperrotti]

oops, forgot to select "Approve" radio

[github-actions]

👋 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]

👋 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]

👋 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]

👋 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]

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

[primer-integration]

🟢 ci completed with status success.