chore: remove sx from Overlay by francinelucca · Pull Request #6865 · primer/react

francinelucca · 2025-09-17T03:43:49Z

Closes#6769

Current `sx` usage: 5

✅ sx usages are only in repos other than github-ui; those usages have been added to the tracking issue

Changelog

Removed

Remove support for sx from the CircleBadge component, and associated stories, docs, and tests

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2025-09-17T03:43:53Z

🦋 Changeset detected

Latest commit: 8b95e0f

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-17T03:44:27Z

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

…rom-overlay

…t into chore/remove-sx-from-overlay

primer-integration · 2025-09-24T01:07:04Z

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

primer-integration · 2025-09-24T01:31:21Z

🟢 ci completed with status success.

francinelucca · 2025-09-24T02:07:44Z

will need https://github.com/github/github-ui/pull/3154/commits/8e5a761a0a6ac4f035fded148214fb8fa394070e

Copilot

Pull Request Overview

This PR removes the deprecated sx prop support from the Overlay component as part of the migration away from styled-components. The change involves updating the main Overlay component to no longer accept sx props and creating styled-components wrappers in the @primer/styled-react package to maintain backwards compatibility.

Remove sx prop support and SxProp type from the main Overlay component
Create styled-components wrappers for Overlay, ActionMenu.Overlay, and Autocomplete.Overlay in the styled-react package
Update stories, tests, and documentation to reflect the removal of sx support

Reviewed Changes

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

Show a summary per file

File	Description
packages/react/src/Overlay/Overlay.tsx	Remove sx prop support and SxProp type, replace BoxWithFallback with direct component rendering
packages/styled-react/src/components/Overlay.tsx	Create styled-components wrapper for Overlay with sx support
packages/styled-react/src/components/Autocomplete.tsx	Create styled-components wrapper for Autocomplete with sx-enabled Overlay
packages/styled-react/src/components/ActionMenu.tsx	Create styled-components wrapper for ActionMenu with sx-enabled Overlay
packages/styled-react/src/index.tsx	Update exports to include new styled components
packages/react/src/Overlay/Overlay.features.stories.tsx	Replace sx usage with style prop
packages/react/src/Overlay/Overlay.dev.stories.tsx	Remove SxProps story
packages/react/src/Overlay/Overlay.docs.json	Remove sx prop from documentation
e2e/components/Overlay.test.ts	Remove SX Props test
.changeset/lazy-gifts-join.md	Add changeset for major version bump

Copilot · 2025-09-24T02:09:50Z

+import {Overlay as PrimerOverlay, type OverlayProps as PrimerOverlayProps, sx, type SxProp} from '@primer/react'
+import styled from 'styled-components'
+import {type ForwardRefComponent} from '../polymorphic'
+


The sx utility and SxProp type are being imported from @primer/react, but according to the PR changes, sx support is being removed from the main package. These should be imported from a local sx module like in the other styled components.
Suggested change
import{OverlayasPrimerOverlay,typeOverlayPropsasPrimerOverlayProps,sx,typeSxProp}from'@primer/react'
importstyledfrom'styled-components'
import{typeForwardRefComponent}from'../polymorphic'
import{OverlayasPrimerOverlay,typeOverlayPropsasPrimerOverlayProps}from'@primer/react'
importstyledfrom'styled-components'
import{typeForwardRefComponent}from'../polymorphic'
import{sx,typeSxProp}from'../sx'

Copilot · 2025-09-24T02:09:50Z

+ Autocomplete as PrimerAutocomplete,
+ type AutocompleteOverlayProps as PrimerAutocompleteOverlayProps,
+} from '@primer/react'
+import {sx, type SxProp} from '../sx'


[nitpick] Inconsistent import pattern - this file imports sx and SxProp from ../sx, while the Overlay component imports them from @primer/react. All styled components should use the same import source for consistency.
Suggested change
import{sx,typeSxProp}from'../sx'
import{sx,typeSxProp}from'@primer/react'

…rom-overlay

github-actions · 2025-09-29T20:46:00Z

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

chore: remove sx from Overlay
1a2a692

github-actionsBot added the staff Author is a staff member label Sep 17, 2025

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 17, 2025

francinelucca deployed to github-pages September 17, 2025 03:52 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6865 September 17, 2025 03:52 Inactive

francinelucca added 3 commits September 22, 2025 22:00

Merge branch 'main' of github.com:primer/react into chore/remove-sx-f…
80c4b1b
…rom-overlay

add styled wrapper for Overlay
35585da

remove unused import
5220aa3

github-actionsBot requested a deployment to storybook-preview-6865 September 23, 2025 02:07 Abandoned

francinelucca added 2 commits September 22, 2025 22:09

Update changeset for Overlay component
469a9a1

Update version for @primer/react to major
6fb241f

github-actionsBot requested a deployment to storybook-preview-6865 September 23, 2025 02:12 Abandoned

francinelucca added 2 commits September 22, 2025 22:15

remove sx usage
b4a97d2

Merge branch 'chore/remove-sx-from-overlay' of github.com:primer/reac…
93071cb
…t into chore/remove-sx-from-overlay

github-actionsBot requested a deployment to storybook-preview-6865 September 23, 2025 02:18 Abandoned

francinelucca deployed to github-pages September 23, 2025 02:27 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6865 September 23, 2025 02:28 Inactive

fix
4e34144

francinelucca deployed to github-pages September 23, 2025 02:44 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6865 September 23, 2025 02:45 Inactive

fix as type for BaseOverlay
7066200

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

github-actionsBottemporarily deployed to storybook-preview-6865 September 23, 2025 14:44 Inactive

Merge branch 'main' into chore/remove-sx-from-overlay
b5957bb

francinelucca deployed to github-pages September 23, 2025 15:43 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6865 September 23, 2025 15:43 Inactive

github-actionsBot 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 23, 2025

Merge branch 'main' into chore/remove-sx-from-overlay
e32bb5a

francinelucca deployed to github-pages September 23, 2025 20:18 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6865 September 23, 2025 20:18 Inactive

Merge branch 'main' into chore/remove-sx-from-overlay
939930f

francinelucca deployed to github-pages September 23, 2025 21:47 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6865 September 23, 2025 21:47 Inactive

github-actionsBot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: failing Changes in this PR cause breaking changes in gh/gh labels Sep 24, 2025

francinelucca marked this pull request as ready for review September 24, 2025 02:09

francinelucca requested a review from a team as a code owner September 24, 2025 02:09

francinelucca requested review from Copilot and jonrohan September 24, 2025 02:09

CopilotAI reviewed Sep 24, 2025
View reviewed changes

jonrohan approved these changes Sep 24, 2025
View reviewed changes

Merge branch 'main' of github.com:primer/react into chore/remove-sx-f…
8b95e0f
…rom-overlay

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 29, 2025

francinelucca enabled auto-merge September 29, 2025 20:50

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

francinelucca deployed to github-pages September 29, 2025 20:53 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6865 September 29, 2025 20:53 Inactive

Merged via the queue into main with commit eaf7e58Sep 29, 2025
42 checks passed

francinelucca deleted the chore/remove-sx-from-overlay branch September 29, 2025 20:57

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

francinelucca mentioned this pull request Sep 30, 2025
Remove support for sx from the Overlay component #6769
Closed
9 tasks

Navigation Menu

Uh oh!

chore: remove sx from Overlay - #6865

chore: remove sx from Overlay#6865
francinelucca merged 14 commits into
mainfrom
chore/remove-sx-from-overlay

francinelucca commented Sep 17, 2025•
edited
Loading

Uh oh!

changeset-botBot commented Sep 17, 2025•
edited
Loading

Uh oh!

github-actionsBot commented Sep 17, 2025

Uh oh!

primer-integrationBot commented Sep 24, 2025

Uh oh!

primer-integrationBot commented Sep 24, 2025

Uh oh!

francinelucca commented Sep 24, 2025•
edited
Loading

Uh oh!

CopilotAI left a comment

Uh oh!

CopilotAISep 24, 2025

Uh oh!

CopilotAISep 24, 2025

Uh oh!

github-actionsBot commented Sep 29, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-import{OverlayasPrimerOverlay,typeOverlayPropsasPrimerOverlayProps,sx,typeSxProp}from'@primer/react'
-importstyledfrom'styled-components'
-import{typeForwardRefComponent}from'../polymorphic'
+import{OverlayasPrimerOverlay,typeOverlayPropsasPrimerOverlayProps}from'@primer/react'
+importstyledfrom'styled-components'
+import{typeForwardRefComponent}from'../polymorphic'
+import{sx,typeSxProp}from'../sx'

	import{sx,typeSxProp}from'../sx'
	import{sx,typeSxProp}from'@primer/react'

Uh oh!

Conversation

francinelucca commented Sep 17, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Current sx usage: 5

Changelog

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

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

Uh oh!

primer-integrationBot commented Sep 24, 2025

Uh oh!

primer-integrationBot commented Sep 24, 2025

Uh oh!

francinelucca commented Sep 24, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CopilotAI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

CopilotAISep 24, 2025

Choose a reason for hiding this comment

Uh oh!

CopilotAISep 24, 2025

Choose a reason for hiding this comment

Uh oh!

github-actionsBot commented Sep 29, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

francinelucca commented Sep 17, 2025•
edited
Loading

Current `sx` usage: 5

changeset-botBot commented Sep 17, 2025•
edited
Loading

francinelucca commented Sep 24, 2025•
edited
Loading