Skip to content

refactor(Stack): Remove sx prop support from the Stack component #6610

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

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

refactor(Stack): Remove sx prop support from the Stack component #6610

wants to merge 1 commit into from

Conversation

jonrohan
Copy link
Member

@jonrohan jonrohan commented Aug 14, 2025 •
edited
Loading

Closes https://github.com/github/primer/issues/5716

Changelog

New

Changed

Removed

Remove sx prop support from the Stack component

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

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Aug 14, 2025

🦋 Changeset detected

Latest commit: 69d64eb

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

This PR includes changesets to release 3 packages
Name Type
@primer/react Major
@primer/mcp Patch
@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 github-actions bot added staff Author is a staff member integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Aug 14, 2025
@github-actions GitHub Actions
Copy link
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 Actions
Copy link
Contributor

size-limit report 📦

Path Size
packages/react/dist/browser.esm.js 90.21 KB (-0.05% 🔽)
packages/react/dist/browser.umd.js 90.41 KB (-0.03% 🔽)

@primer-integration
Copy link

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

@github-actions github-actions bot 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 Aug 14, 2025
@primer-integration
Copy link

🟢 golden-jobs completed with status success.

@github-actions github-actions bot 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 Aug 14, 2025
@jonrohan jonrohan marked this pull request as ready for review August 14, 2025 21:21
@Copilot Copilot AI review requested due to automatic review settings August 14, 2025 21:21
@jonrohan jonrohan requested a review from a team as a code owner August 14, 2025 21:21
@jonrohan jonrohan requested a review from francinelucca August 14, 2025 21:21
@jonrohan jonrohan enabled auto-merge August 14, 2025 21:21
Copilot
Copilot AI reviewed Aug 14, 2025
View reviewed changes
Copy link
Contributor

@Copilot Copilot AI left a comment

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 removes sx prop support from the Stack component by replacing the BoxWithFallback wrapper with direct element rendering. This is a breaking change that simplifies the Stack component's implementation by eliminating styled-system functionality.

Key changes:

  • Replace BoxWithFallback with direct component rendering for both Stack and StackItem
  • Remove the BoxWithFallback import that provided sx prop support
  • Default the as prop to 'div' directly in the destructuring assignment

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
packages/react/src/Stack/Stack.tsx Remove BoxWithFallback wrapper and sx prop support, use direct component rendering
.changeset/young-dots-heal.md Add major version changeset documenting the breaking change

You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.

packages/react/src/Stack/Stack.tsx
ref={forwardedRef}
{...rest}
className={clsx(className, classes.StackItem)}
{...getResponsiveAttributes('grow', grow)}
{...getResponsiveAttributes('shrink', shrink)}
>
{children}
</BoxWithFallback>
</Component>
)
}) as PolymorphicForwardRefComponent<ElementType, StackProps<ElementType>>
Copy link
Preview

Copilot AI Aug 14, 2025

Choose a reason for hiding this comment

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

The type assertion for StackItem should reference StackItemProps<ElementType> instead of StackProps<ElementType> to match the correct props interface.

Suggested change
}) as PolymorphicForwardRefComponent<ElementType, StackProps<ElementType>>
}) as PolymorphicForwardRefComponent<ElementType, StackItemProps<ElementType>>

Copilot uses AI. Check for mistakes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

Copilot code review Copilot Copilot left review comments

@pksjce pksjce pksjce approved these changes

@francinelucca francinelucca francinelucca approved these changes

Assignees
No one assigned
Labels
integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh staff Author is a staff member
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@jonrohan @pksjce @francinelucca