Skip to content

Conversation

francinelucca
Copy link
Member

@francinelucca francinelucca commented Sep 26, 2025

wraps all custom components in @primer/styled-react with forwardedAs prop to prevent issue caused by styled-components/styled-components#1981

Changelog

Changed

  • Modify all components in styled-react/src/components/* to use forwardedAs prop

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

@francinelucca francinelucca requested a review from a team as a code owner September 26, 2025 14:52
Copy link

changeset-bot bot commented Sep 26, 2025

🦋 Changeset detected

Latest commit: 4db0db3

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

This PR includes changesets to release 1 package
Name Type
@primer/styled-react Patch

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 Sep 26, 2025
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!

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

@github-actions github-actions bot requested a deployment to storybook-preview-6910 September 26, 2025 14:58 Abandoned
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

Copilot reviewed 18 out of 18 changed files in this pull request and generated 13 comments.

@github-actions github-actions bot temporarily deployed to storybook-preview-6910 September 26, 2025 15:07 Inactive
@github-actions github-actions bot requested a deployment to storybook-preview-6910 September 26, 2025 15:50 Abandoned
@github-actions github-actions bot temporarily deployed to storybook-preview-6910 September 26, 2025 15:58 Inactive
@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 Sep 26, 2025
@github-actions github-actions bot requested a deployment to storybook-preview-6910 September 26, 2025 20:53 Abandoned
@github-actions github-actions bot temporarily deployed to storybook-preview-6910 September 26, 2025 21:02 Inactive
@github-actions github-actions bot requested a deployment to storybook-preview-6910 September 29, 2025 19:52 Abandoned
@github-actions github-actions bot requested a deployment to storybook-preview-6910 September 29, 2025 21:04 Abandoned
@github-actions github-actions bot temporarily deployed to storybook-preview-6910 September 29, 2025 21:12 Inactive
@github-actions github-actions bot requested a deployment to storybook-preview-6910 September 30, 2025 01:14 Abandoned
@github-actions github-actions bot temporarily deployed to storybook-preview-6910 September 30, 2025 01:23 Inactive
@github-actions github-actions bot requested a deployment to storybook-preview-6910 September 30, 2025 01:31 Pending
@primer-integration
Copy link

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

@primer-integration
Copy link

🔴 ci completed with status cancelled.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
integration-tests: failing Changes in this PR cause breaking changes in gh/gh staff Author is a staff member
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants