Skip to content

Remove deprecated component exports from @primer/styled-react #7499

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

Merged
jonrohan merged 4 commits into from
Feb 3, 2026
Merged

Remove deprecated component exports from @primer/styled-react #7499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
50ae365
Initial plan
Copilot Feb 2, 2026
2ecf0d2
Remove unnecessary component exports from styled-react package
Copilot Feb 2, 2026
14e12c1
Remove unused component files from styled-react package
Copilot Feb 2, 2026
1a199a8
Update changeset to specify removed exports
jonrohan Feb 2, 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/bright-donkeys-cheat.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/styled-react": patch
---

Remove deprecated component exports from @primer/styled-react that no longer have usage tracked in primer query
13 changes: 0 additions & 13 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 @@ -4,18 +4,13 @@ exports[`@primer/styled-react exports 1`] = `
[
"ActionList",
"ActionMenu",
"Autocomplete",
"Avatar",
"BaseStyles",
"Box",
"Breadcrumb",
"Breadcrumbs",
"Button",
"Checkbox",
"CheckboxGroup",
"CircleBadge",
"CounterLabel",
"Details",
"Dialog",
"Flash",
"FormControl",
Expand All @@ -26,17 +21,10 @@ exports[`@primer/styled-react exports 1`] = `
"Link",
"LinkButton",
"merge",
"NavList",
"Overlay",
"PageHeader",
"ProgressBar",
"RadioGroup",
"RelativeTime",
"SegmentedControl",
"Select",
"Spinner",
"StateLabel",
"SubNav",
"sx",
"Text",
"Textarea",
Expand Down Expand Up @@ -71,6 +59,5 @@ exports[`@primer/styled-react/experimental exports 1`] = `
"PageHeader",
"Table",
"Tooltip",
"UnderlinePanels",
]
`;
12 changes: 1 addition & 11 deletions packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {render, screen} from '@testing-library/react'
import {describe, expect, test} from 'vitest'
import {Dialog, PageHeader, Table, Tooltip, UnderlinePanels} from '../experimental'
import {Dialog, PageHeader, Table, Tooltip} from '../experimental'

describe('@primer/react/experimental', () => {
test('Dialog supports `sx` prop', () => {
Expand Down Expand Up @@ -28,16 +28,6 @@ describe('@primer/react/experimental', () => {
expect(window.getComputedStyle(screen.getByRole('tooltip', {hidden: true})).backgroundColor).toBe('rgb(255, 0, 0)')
})

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

test('Table.Container supports `sx` prop', () => {
render(
<Table.Container data-testid="component" sx={{background: 'red'}}>
Expand Down
132 changes: 0 additions & 132 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
Expand Up @@ -5,14 +5,10 @@ import {describe, expect, test} from 'vitest'
import {
ActionList,
ActionMenu,
Autocomplete,
Avatar,
Box,
Breadcrumbs,
Button,
Checkbox,
CheckboxGroup,
CircleBadge,
CounterLabel,
Dialog,
Flash,
Expand All @@ -23,16 +19,10 @@ import {
Label,
Link,
LinkButton,
NavList,
Overlay,
PageHeader,
RadioGroup,
RelativeTime,
SegmentedControl,
Select,
Spinner,
StateLabel,
SubNav,
Text,
TextInput,
Textarea,
Expand Down Expand Up @@ -69,35 +59,6 @@ describe('@primer/react', () => {
expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
})

test('Autocomplete.Input supports `sx` prop', () => {
const {container} = render(
<Autocomplete>
<Autocomplete.Input data-testid="component" sx={{background: 'red'}} />
</Autocomplete>,
)
expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
})

test('Autocomplete.Overlay supports `sx` prop', async () => {
const user = userEvent.setup()

render(
<ThemeProvider>
<Autocomplete>
<Autocomplete.Input />
<Autocomplete.Overlay data-testid="component" sx={{background: 'red'}}>
test
</Autocomplete.Overlay>
</Autocomplete>
</ThemeProvider>,
)

await user.click(screen.getByRole('combobox'))
await user.keyboard('a')

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

test('Avatar supports `sx` prop', () => {
render(<Avatar data-testid="component" sx={{background: 'red'}} src="" />)
expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
Expand Down Expand Up @@ -125,28 +86,6 @@ describe('@primer/react', () => {
expect(screen.getByTestId('component')).toHaveAttribute('data-size', 'medium')
})

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

test('CheckboxGroup supports `sx` prop', () => {
const {container} = render(<CheckboxGroup aria-labelledby="hi" data-testid="component" sx={{background: 'red'}} />)
expect(window.getComputedStyle(container.firstElementChild!.firstElementChild!).backgroundColor).toBe(
'rgb(255, 0, 0)',
)
})

test('CheckboxGroup.Label supports `sx` prop', () => {
const {container} = render(<CheckboxGroup.Label data-testid="component" sx={{background: 'red'}} />)
expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
})

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

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)')
Expand Down Expand Up @@ -246,35 +185,6 @@ describe('@primer/react', () => {
expect(screen.getByTestId('component')).toHaveAttribute('icon')
})

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

test('NavList.Item supports `sx` prop', () => {
render(
<NavList>
<NavList.Item data-testid="component" sx={{background: 'red'}}>
item
</NavList.Item>
</NavList>,
)

const itemAnchorEl = screen.getByTestId('component')
const itemLiEl = itemAnchorEl.closest('li')
expect(itemLiEl).not.toBeNull()
expect(window.getComputedStyle(itemLiEl!).backgroundColor).toBe('rgb(255, 0, 0)')
})

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

test('Overlay supports `sx` prop', () => {
const ref = createRef<HTMLElement>()
render(
Expand Down Expand Up @@ -310,27 +220,6 @@ describe('@primer/react', () => {
expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
})

test('RadioGroup supports `sx` prop', () => {
const {container} = render(
<RadioGroup data-testid="component" name="test" sx={{background: 'red'}}>
<RadioGroup.Label>test</RadioGroup.Label>
</RadioGroup>,
)
expect(window.getComputedStyle(container.firstElementChild!.firstElementChild!).backgroundColor).toBe(
'rgb(255, 0, 0)',
)
})

test('RadioGroup.Label supports `sx` prop', () => {
const {container} = render(<RadioGroup.Label data-testid="component" sx={{background: 'red'}} />)
expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
})

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

test('SegmentedControl supports `sx` prop', () => {
render(<SegmentedControl data-testid="component" sx={{background: 'red'}} />)
expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
Expand Down Expand Up @@ -360,32 +249,11 @@ describe('@primer/react', () => {
expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
})

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

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

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

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

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

test('Text supports `sx` prop', () => {
render(<Text as="span" data-testid="component" sx={{background: 'red'}} size="small" />)
expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
Expand Down
46 changes: 0 additions & 46 deletions packages/styled-react/src/components/Autocomplete.tsx
View file
Open in desktop

This file was deleted.

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

This file was deleted.

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

This file was deleted.

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

This file was deleted.

Loading
Loading