Adapt Button to styled-react and remove sx #6904
Conversation
🦋 Changeset detectedLatest commit: aefc40d The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
There was a problem hiding this comment.
Pull Request Overview
This PR adapts the Button component to the styled-react package and removes the sx prop implementation from the main @primer/react package. The changes introduce custom styled-react implementations for Button, IconButton, and ActionMenu components that support the SxProp interface for backward compatibility.
Key changes:
- Creates new styled-react wrapper components for Button, ActionMenu, and IconButton
- Moves CSSCustomProperties type to a shared location in sx.ts
- Updates package exports to use the new styled-react implementations
Reviewed Changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/styled-react/src/sx.ts | Adds CSSCustomProperties type export for shared use |
| packages/styled-react/src/index.tsx | Updates exports to use new styled-react components instead of direct @primer/react exports |
| packages/styled-react/src/components/PageHeader.tsx | Updates import to use shared CSSCustomProperties type |
| packages/styled-react/src/components/IconButton.tsx | Creates new styled-react wrapper for IconButton with sx prop support |
| packages/styled-react/src/components/Button.tsx | Creates new styled-react wrapper for Button with custom sx prop handling |
| packages/styled-react/src/components/ActionMenu.tsx | Creates new styled-react wrapper for ActionMenu with sx prop support |
github-actions
bot
added
the
integration-tests: recommended
|
👋 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! |
pksjce
had a problem deploying
to
github-pages
GitHub Actions
Failure
github-actions
bot
requested a deployment
to
storybook-preview-6904
github-actions
bot
requested a deployment
to
storybook-preview-6904
| @@ -0,0 +1,35 @@ | |||
| import { | |||
There was a problem hiding this comment.
borrowed from #6925 to get tests passing, I expect to merge that PR before this one so reviewers can ignore this since it'll be looked at in the context of the TextInput PR
|
👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/3678 |
github-actions
bot
added
integration-tests: failing
|
🟢 ci completed with status |
github-actions
bot
added
integration-tests: passing
|
✨ |
| test('ActionMenu.Button supports `sx` prop', () => { | ||
| const {container} = render(<ActionMenu.Button sx={{background: 'red'}}>test</ActionMenu.Button>) | ||
| expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)') | ||
| }) | ||
|
|
There was a problem hiding this comment.
No reason to support sx in ActionMenu.Button since the ActionMenu uses child type comparison that would be incompatible with an sx-wrapped component, making it essentially a no-op.
Instead, opting to remove any sx usage that we have right now on ActionMenu.Button.
I will make a note of this in v38 release notes.
Closes #6760
Current
sxusage:Button: 107
IconButton: 32
✅
sxusages are only in repos other than github-ui; those usages have been added to the tracking issueChangelog
Removed
Remove support for
sxfrom theButton,IconButtoncomponents, and associated stories, docs, and testsRollout strategy
Testing & Reviewing
Merge checklist