Skip to content

Remove Overlay, CounterLabel, and ActionMenu from styled-react package #7728

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jonrohan wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Remove Overlay, CounterLabel, and ActionMenu from styled-react package #7728

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1718efb
refactor: remove deprecated styled components (ActionMenu, CounterLab…
jonrohan Apr 3, 2026
cc9deef
Remove unused components from styled-react package
jonrohan Apr 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/rotten-radios-check.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/styled-react": patch
Copy link

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changeset marks this as a patch release, but this PR removes exported components/types from @primer/styled-react, which is a breaking public API change and should be released as a major bump per the repo’s versioning guidance ("A component is removed" => major). This also conflicts with the PR description’s selected rollout strategy (minor). Please update the changeset (and PR rollout checkbox) accordingly.

Suggested change
"@primer/styled-react": patch
"@primer/styled-react": major

Copilot uses AI. Check for mistakes.
---

Remove Overlay, CounterLabel, and ActionMenu from styled-react package
3 changes: 0 additions & 3 deletions packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,11 @@
exports[`@primer/styled-react exports 1`] = `
[
"ActionList",
"ActionMenu",
"BaseStyles",
"Box",
"Breadcrumb",
"Breadcrumbs",
"Button",
"CounterLabel",
"Dialog",
"Flash",
"FormControl",
Expand All @@ -20,7 +18,6 @@ exports[`@primer/styled-react exports 1`] = `
"Link",
"LinkButton",
"merge",
"Overlay",
"PageHeader",
"SegmentedControl",
"Spinner",
Expand Down
48 changes: 0 additions & 48 deletions packages/styled-react/src/__tests__/primer-react.browser.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
import {userEvent} from '@testing-library/user-event'
import {render, screen} from '@testing-library/react'
import {createRef} from 'react'
import {describe, expect, test} from 'vitest'
import {
ActionList,
ActionMenu,
Box,
Breadcrumbs,
Button,
CounterLabel,
Dialog,
Flash,
FormControl,
Expand All @@ -18,13 +14,11 @@ import {
Label,
Link,
LinkButton,
Overlay,
PageHeader,
SegmentedControl,
Spinner,
Text,
TextInput,
ThemeProvider,
Timeline,
Token,
Tooltip,
Expand All @@ -39,24 +33,6 @@ describe('@primer/react', () => {
expect(screen.getByTestId('component')).toHaveAttribute('data-variant', 'inset')
})

test('ActionMenu.Overlay supports `sx` prop', async () => {
const user = userEvent.setup()
render(
<ThemeProvider>
<ActionMenu>
<ActionMenu.Button>test</ActionMenu.Button>
<ActionMenu.Overlay data-testid="component" sx={{background: 'red'}}>
test
</ActionMenu.Overlay>
</ActionMenu>
</ThemeProvider>,
)

await user.click(screen.getByText('test'))

expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
})

test('Box supports `sx` prop', () => {
render(<Box as="div" data-testid="component" sx={{background: 'red'}} />)
expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
Expand All @@ -79,11 +55,6 @@ describe('@primer/react', () => {
expect(screen.getByTestId('component')).toHaveAttribute('data-size', 'medium')
})

test('CounterLabel supports `sx` prop', () => {
render(<CounterLabel data-testid="component" sx={{background: 'red'}} />)
expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
})

test('Dialog supports `sx` prop', () => {
render(<Dialog data-testid="component" sx={{background: 'red'}} onClose={() => {}} />)
expect(window.getComputedStyle(screen.getByRole('dialog')).backgroundColor).toBe('rgb(255, 0, 0)')
Expand Down Expand Up @@ -178,25 +149,6 @@ describe('@primer/react', () => {
expect(screen.getByTestId('component')).toHaveAttribute('icon')
})

test('Overlay supports `sx` prop', () => {
const ref = createRef<HTMLElement>()
render(
<ThemeProvider>
<Overlay
as="div"
data-testid="component"
sx={{background: 'red'}}
onClickOutside={() => {}}
onEscape={() => {}}
returnFocusRef={ref}
role="dialog"
/>
</ThemeProvider>,
)
expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
expect(screen.getByTestId('component')).toHaveAttribute('role', 'dialog')
})

test('PageHeader supports `sx` prop', () => {
const {container} = render(<PageHeader as="div" data-testid="component" sx={{background: 'red'}} role="article" />)
expect(container.firstElementChild!).toHaveAttribute('role', 'article')
Expand Down
28 changes: 0 additions & 28 deletions packages/styled-react/src/components/ActionMenu.tsx
View file
Open in desktop

This file was deleted.

10 changes: 0 additions & 10 deletions packages/styled-react/src/components/CounterLabel.tsx
View file
Open in desktop

This file was deleted.

15 changes: 0 additions & 15 deletions packages/styled-react/src/components/Overlay.tsx
View file
Open in desktop

This file was deleted.

30 changes: 0 additions & 30 deletions packages/styled-react/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,14 +127,6 @@ export {
type ActionListTrailingActionProps,
} from './components/ActionList'

export {
/**
* @deprecated Usage of the `sx` prop with this component is no longer
* supported. Use the component from `@primer/react` with CSS Modules instead.
*/
ActionMenu,
} from './components/ActionMenu'

export {
/**
* @deprecated Usage of the `sx` prop with this component is no longer
Expand Down Expand Up @@ -175,20 +167,6 @@ export {
type ButtonComponentProps as ButtonProps,
} from './components/Button'

export {
/**
* @deprecated Usage of the `sx` prop with this component is no longer
* supported. Use the component from `@primer/react` with CSS Modules instead.
*/
CounterLabel,

/**
* @deprecated Usage of the `sx` prop with this component is no longer
* supported. Use the component from `@primer/react` with CSS Modules instead.
*/
type CounterLabelProps,
} from './components/CounterLabel'

export {
/**
* @deprecated Usage of the `sx` prop with this component is no longer
Expand Down Expand Up @@ -303,14 +281,6 @@ export {
type LinkButtonProps,
} from './components/LinkButton'

export {
/**
* @deprecated Usage of the `sx` prop with this component is no longer
* supported. Use the component from `@primer/react` with CSS Modules instead.
*/
Overlay,
} from './components/Overlay'

export {
/**
* @deprecated Usage of the `sx` prop with this component is no longer
Expand Down
Loading