-
Notifications
You must be signed in to change notification settings - Fork 636
chore: use forwardedAs prop in styled-react #6910
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.
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
base: main
Are you sure you want to change the base?
Conversation
🦋 Changeset detectedLatest commit: 4db0db3 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
👋 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! |
There was a problem hiding this 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 implements forwardedAs
prop handling in the styled-react
package by creating wrapper components that pass the as
prop as forwardedAs
to styled components. This is necessary for proper polymorphic component behavior in styled-components.
- Refactors all styled-react components to use a two-layer architecture (styled component + wrapper)
- Adds consistent
forwardedAs
prop forwarding for polymorphic element rendering - Includes a minor Storybook port change from 6006 to 6007
Reviewed Changes
Copilot reviewed 18 out of 18 changed files in this pull request and generated 4 comments.
Show a summary per file
File | Description |
---|---|
packages/styled-react/src/components/UnderlineNav.tsx | Refactored to use StyledUnderlineNav wrapper with forwardedAs support |
packages/styled-react/src/components/Truncate.tsx | Added StyledTruncate wrapper with forwardedAs handling |
packages/styled-react/src/components/ToggleSwitch.tsx | Created StyledToggleSwitch with forwardedAs prop forwarding |
packages/styled-react/src/components/Timeline.tsx | Comprehensive refactor of all Timeline sub-components with forwardedAs support |
packages/styled-react/src/components/SubNav.tsx | Added styled wrappers for SubNav and SubNavLink components |
packages/styled-react/src/components/StateLabelProps.tsx | File deleted (appears to be duplicate/incorrect file) |
packages/styled-react/src/components/StateLabel.tsx | Added StyledStateLabel wrapper with forwardedAs prop |
packages/styled-react/src/components/Spinner.tsx | Refactored to use StyledSpinner with forwardedAs handling |
packages/styled-react/src/components/SegmentedControl.tsx | Added styled wrappers for all SegmentedControl sub-components |
packages/styled-react/src/components/RelativeTime.tsx | Created StyledRelativeTime with forwardedAs support |
packages/styled-react/src/components/RadioGroup.tsx | Comprehensive refactor of RadioGroup and all sub-components |
packages/styled-react/src/components/PageHeader.tsx | Complex refactor with forwardedAs support and type name changes |
packages/styled-react/src/components/LinkButton.tsx | Added StyledLinkButton wrapper with forwardedAs prop |
packages/styled-react/src/components/Header.tsx | Refactored Header and sub-components with forwardedAs handling |
packages/styled-react/src/components/Flash.tsx | Added StyledFlash wrapper with forwardedAs support |
packages/styled-react/src/components/CounterLabel.tsx | Created StyledCounterLabel with forwardedAs prop |
packages/styled-react/src/components/Checkbox.tsx | Added StyledCheckbox wrapper with forwardedAs handling |
packages/react/package.json | Changed Storybook dev server port from 6006 to 6007 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
Copilot reviewed 18 out of 18 changed files in this pull request and generated 13 comments.
c50979c
to
a3c1fb9
Compare
…components (#6911) Co-authored-by: Marie Lucca <[email protected]>
…nto chore/fix-forward-as-prop
👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/3526 |
🔴 ci completed with status |
wraps all custom components in @primer/styled-react with forwardedAs prop to prevent issue caused by styled-components/styled-components#1981
Changelog
Changed
forwardedAs
propRollout strategy
Testing & Reviewing
Merge checklist