Skip to content

Adapt Button to styled-react and remove sx - #6904

Merged
francinelucca merged 82 commits into
mainfrom
pk/remove-button-sx-prop
Oct 11, 2025
Merged

Adapt Button to styled-react and remove sx#6904
francinelucca merged 82 commits into
mainfrom
pk/remove-button-sx-prop

Conversation

@pksjce

@pksjcepksjce commented Sep 24, 2025•
edited by francinelucca
Loading

Copy link
Copy Markdown
Contributor

Closes#6760

Current sx usage:

Button: 107
IconButton: 32

✅ 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 Button, IconButton components, 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

CopilotAI review requested due to automatic review settings September 24, 2025 13:10
@pksjce
pksjce requested a review from a team as a code ownerSeptember 24, 2025 13:10
@changeset-bot

changeset-botBot commented Sep 24, 2025•
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: e4ea9fe

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
NameType
@primer/reactMajor
@primer/styled-reactMajor

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

CopilotAI reviewed Sep 24, 2025
View reviewed changes

CopilotAI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

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
FileDescription
packages/styled-react/src/sx.tsAdds CSSCustomProperties type export for shared use
packages/styled-react/src/index.tsxUpdates exports to use new styled-react components instead of direct @primer/react exports
packages/styled-react/src/components/PageHeader.tsxUpdates import to use shared CSSCustomProperties type
packages/styled-react/src/components/IconButton.tsxCreates new styled-react wrapper for IconButton with sx prop support
packages/styled-react/src/components/Button.tsxCreates new styled-react wrapper for Button with custom sx prop handling
packages/styled-react/src/components/ActionMenu.tsxCreates new styled-react wrapper for ActionMenu with sx prop support

Comment threadpackages/styled-react/src/components/Button.tsx Outdated
Comment threadpackages/styled-react/src/components/Button.tsx Outdated
Comment threadpackages/styled-react/src/components/Button.tsx
@github-actions
github-actionsBottemporarily deployed to storybook-preview-6904 September 24, 2025 13:21 Inactive
@github-actions
github-actionsBottemporarily deployed to storybook-preview-6904 September 24, 2025 13:37 Inactive
@github-actionsgithub-actionsBot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Sep 24, 2025
@github-actions

github-actionsBot commented Sep 24, 2025

Copy link
Copy Markdown
Contributor

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

@github-actions
github-actionsBot requested a deployment to storybook-preview-6904 September 24, 2025 23:57 Abandoned
@github-actions
github-actionsBot requested a deployment to storybook-preview-6904 September 25, 2025 00:22 Abandoned
@github-actions
github-actionsBottemporarily deployed to storybook-preview-6904 September 25, 2025 00:30 Inactive
@github-actions
github-actionsBottemporarily deployed to storybook-preview-6904 September 25, 2025 01:13 Inactive
@github-actions
github-actionsBottemporarily deployed to storybook-preview-6904 September 25, 2025 04:21 Inactive
@github-actions

github-actionsBot commented Oct 6, 2025

Copy link
Copy Markdown
Contributor

👋 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

github-actionsBot commented Oct 6, 2025

Copy link
Copy Markdown
Contributor

👋 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

github-actionsBot commented Oct 7, 2025

Copy link
Copy Markdown
Contributor

👋 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

github-actionsBot commented Oct 7, 2025

Copy link
Copy Markdown
Contributor

👋 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

github-actionsBot commented Oct 7, 2025

Copy link
Copy Markdown
Contributor

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

@francineluccafrancinelucca mentioned this pull request Oct 7, 2025
Closed
13 tasks
@github-actions

github-actionsBot commented Oct 7, 2025

Copy link
Copy Markdown
Contributor

👋 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

github-actionsBot commented Oct 8, 2025

Copy link
Copy Markdown
Contributor

👋 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

github-actionsBot commented Oct 8, 2025

Copy link
Copy Markdown
Contributor

👋 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

github-actionsBot commented Oct 11, 2025

Copy link
Copy Markdown
Contributor

👋 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

github-actionsBot commented Oct 11, 2025

Copy link
Copy Markdown
Contributor

👋 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

github-actionsBot commented Oct 11, 2025

Copy link
Copy Markdown
Contributor

👋 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

primer-integrationBot commented Oct 11, 2025

Copy link
Copy Markdown

🔴 ci completed with status failure.

@francinelucca

francinelucca commented Oct 11, 2025

Copy link
Copy Markdown
Member

integration failures are present on main, should be fixed by #6986 and are independent of these changes, merging

@primerprimerBot mentioned this pull request Oct 11, 2025
Merged
@francineluccafrancinelucca mentioned this pull request Oct 11, 2025
Closed
9 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@francineluccafrancineluccafrancinelucca left review comments
Copilot code reviewCopilot
Copilot review effort, defaults to Lite
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments
@liuliu-devliuliu-devliuliu-dev approved these changes
@langermanklangermankAwaiting requested review from langermanklangermank was automatically assigned from primer/design-reviewers
+1 more reviewer
@hectahertzhectahertzhectahertz approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

@francineluccafrancinelucca

Labels

integration-tests: failingChanges in this PR cause breaking changes in gh/gh

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Remove support for sx from the Button component

5 participants

@pksjce@francinelucca@liuliu-dev@hectahertz