Chore: remove styled system components by francinelucca · Pull Request #6965 · primer/react

francinelucca · 2025-10-08T12:04:59Z

Migrates leftover styled-system components into css modules

Changelog

Changed

Migrate leftover styled-system components into css modules

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

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

This reverts commit cbcaff0.

changeset-bot · 2025-10-08T12:05:04Z

🦋 Changeset detected

Latest commit: fe9450b

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

This PR includes changesets to release 2 packages

Name	Type
@primer/react	Major
@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 · 2025-10-08T12:05:37Z

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

…system

primer-integration · 2025-10-08T18:21:50Z

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

…system

github-actions · 2025-10-09T21:52:01Z

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

…system

github-actions · 2025-10-09T22:00:36Z

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

…system

github-actions · 2025-10-09T22:25:54Z

👋 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.com:primer/react into revert-6964-revert-6941-chore/remove-styled-system

github-actions · 2025-10-09T22:27:40Z

👋 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 · 2025-10-09T23:01:35Z

🟢 ci completed with status success.

Copilot

Pull Request Overview

This PR migrates leftover styled-system components to CSS modules as part of the effort to remove styled-components from the Primer React codebase. The changes convert styled-components implementations to modern CSS modules with equivalent styling and functionality.

Key changes:

Convert styled-components to CSS modules for multiple components
Remove styled-system dependencies and replace with direct CSS properties
Update component implementations to use modern polymorphic patterns

Reviewed Changes

Copilot reviewed 27 out of 27 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/styled-react/src/components/Text.tsx	Updated Text component types and forward ref implementation
packages/react/src/internal/utils/sharedCheckboxAndRadioStyles.ts	Removed styled-components shared styles file
packages/react/src/internal/components/ValidationAnimationContainer.tsx	Migrated from styled-components to CSS modules
packages/react/src/internal/components/ValidationAnimationContainer.module.css	Added CSS module for validation animation styles
packages/react/src/internal/components/TextInputWrapper.tsx	Removed styled-system ResponsiveValue types
packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx	Removed SxProp from component interfaces
packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx	Migrated from styled-components to CSS modules
packages/react/src/deprecated/UnderlineNav/UnderlineNav.module.css	Added CSS module for UnderlineNav styles
packages/react/src/deprecated/ActionList/Item.tsx	Replaced styled-system get() function with CSS variable
packages/react/src/UnderlineNav/UnderlineNav.tsx	Removed styled MoreMenuListItem component
packages/react/src/Truncate/Truncate.tsx	Replaced styled-system MaxWidthProps with direct type
packages/react/src/Tooltip/Tooltip.tsx	Migrated from styled-components to CSS modules
packages/react/src/Tooltip/Tooltip.module.css	Added CSS module for Tooltip styles
packages/react/src/TextInput/TextInput.tsx	Reordered deprecated props
packages/react/src/TextInput/TextInput.docs.json	Updated documentation for width props
packages/react/src/Text/Text.tsx	Migrated to modern polymorphic pattern
packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx	Simplified style merging without sx utility
packages/react/src/Skeleton/SkeletonBox.tsx	Simplified style merging without sx utility
packages/react/src/SegmentedControl/SegmentedControl.features.stories.tsx	Replaced display prop with inline style
packages/react/src/PageLayout/PageLayout.examples.stories.tsx	Removed commented code
packages/react/src/LabelGroup/LabelGroup.tsx	Migrated from styled-components to CSS modules
packages/react/src/LabelGroup/LabelGroup.module.css	Added CSS module for LabelGroup styles
packages/react/src/FormControl/FormControlLeadingVisual.tsx	Replaced get() function with CSS variables
packages/react/src/DialogV1/Dialog.test.tsx	Replaced fontFamily prop with inline style
packages/react/src/BranchName/tests/BranchName.types.test.tsx	Added explicit type annotation for event parameter
packages/react/src/BranchName/BranchName.tsx	Migrated to modern polymorphic pattern
.changeset/chilled-spoons-roll.md	Added changelog entry

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

github-actions · 2025-10-10T00:27:56Z

👋 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 · 2025-10-10T00:40:43Z

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

…system

github-actions · 2025-10-10T00:52:40Z

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

Revert "Revert "Chore: remove styled system components" (#6964)"
d555156
This reverts commit cbcaff0.

github-actionsBot 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 Oct 8, 2025

francinelucca changed the title ~~Revert "Revert "Chore: remove styled system components""~~Chore: remove styled system components"Oct 8, 2025

francinelucca changed the title ~~Chore: remove styled system components"~~Chore: remove styled system componentsOct 8, 2025

francinelucca deployed to github-pages October 8, 2025 12:12 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6965 October 8, 2025 12:13 Inactive

Merge branch 'main' into revert-6964-revert-6941-chore/remove-styled-…
3987c40
…system

francinelucca deployed to github-pages October 8, 2025 15:51 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6965 October 8, 2025 15:52 Inactive

francinelucca deployed to github-pages October 8, 2025 16:05 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6965 October 8, 2025 16:05 Inactive

fix types
b790d75

francinelucca deployed to github-pages October 8, 2025 17:30 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6965 October 8, 2025 17:31 Inactive

github-actionsBot 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 Oct 8, 2025

add HTML attributes to Text
08d6cec

francinelucca deployed to github-pages October 8, 2025 19:38 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6965 October 8, 2025 19:38 Inactive

explicitly add cllassName to text
63b653e

francinelucca deployed to github-pages October 8, 2025 20:17 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6965 October 8, 2025 20:17 Inactive

francineluccaand others added 2 commits October 8, 2025 18:37

text type fixes
f9fa7e8

Merge branch 'main' into revert-6964-revert-6941-chore/remove-styled-…
569a352
…system

github-actionsBot requested a deployment to storybook-preview-6965 October 8, 2025 22:42 Abandoned

francinelucca deployed to github-pages October 8, 2025 22:49 — with GitHub Actions View deployment

github-actionsBot removed the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Oct 9, 2025

github-actionsBot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Oct 9, 2025

Merge branch 'main' into revert-6964-revert-6941-chore/remove-styled-…
40a23a2
…system

github-actionsBot removed the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Oct 9, 2025

github-actionsBot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Oct 9, 2025

github-actionsBottemporarily deployed to storybook-preview-6965 October 9, 2025 22:03 Inactive

francinelucca deployed to github-pages October 9, 2025 22:17 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6965 October 9, 2025 22:17 Inactive

Merge branch 'main' into revert-6964-revert-6941-chore/remove-styled-…
2a9ede1
…system

github-actionsBot added integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Oct 9, 2025

francinelucca added 2 commits October 9, 2025 18:26

type fix?
5816d4e

Merge branch 'revert-6964-revert-6941-chore/remove-styled-system' of …
a7db6d6
…github.com:primer/react into revert-6964-revert-6941-chore/remove-styled-system

github-actionsBot added integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Oct 9, 2025

github-actionsBot requested a deployment to storybook-preview-6965 October 9, 2025 22:30 Abandoned

CopilotAI reviewed Oct 9, 2025
View reviewed changes

Comment threadpackages/react/src/Text/Text.tsx
Comment threadpackages/react/src/BranchName/BranchName.tsx

jonrohan approved these changes Oct 10, 2025
View reviewed changes

Update packages/react/src/BranchName/BranchName.tsx
f3962d4
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

lint
d0b044d

Merge branch 'main' into revert-6964-revert-6941-chore/remove-styled-…
fe9450b
…system

primerBot mentioned this pull request Oct 10, 2025
Release tracking (rc) #6952
Merged

Navigation Menu

Uh oh!

Chore: remove styled system components - #6965

Chore: remove styled system components#6965
francinelucca merged 25 commits into
mainfrom
revert-6964-revert-6941-chore/remove-styled-system

francinelucca commented Oct 8, 2025•
edited
Loading

Uh oh!

changeset-botBot commented Oct 8, 2025•
edited
Loading

Uh oh!

github-actionsBot commented Oct 8, 2025

Uh oh!

primer-integrationBot commented Oct 8, 2025

Uh oh!

github-actionsBot commented Oct 9, 2025

Uh oh!

github-actionsBot commented Oct 9, 2025

Uh oh!

github-actionsBot commented Oct 9, 2025

Uh oh!

github-actionsBot commented Oct 9, 2025

Uh oh!

primer-integrationBot commented Oct 9, 2025

Uh oh!

CopilotAI left a comment

Uh oh!

Uh oh!

Uh oh!

github-actionsBot commented Oct 10, 2025

Uh oh!

github-actionsBot commented Oct 10, 2025

Uh oh!

github-actionsBot commented Oct 10, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

francinelucca commented Oct 8, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

Changed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-botBot commented Oct 8, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actionsBot commented Oct 8, 2025

Uh oh!

primer-integrationBot commented Oct 8, 2025

Uh oh!

github-actionsBot commented Oct 9, 2025

Uh oh!

github-actionsBot commented Oct 9, 2025

Uh oh!

github-actionsBot commented Oct 9, 2025

Uh oh!

github-actionsBot commented Oct 9, 2025

Uh oh!

primer-integrationBot commented Oct 9, 2025

Uh oh!

CopilotAI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

github-actionsBot commented Oct 10, 2025

Uh oh!

github-actionsBot commented Oct 10, 2025

Uh oh!

github-actionsBot commented Oct 10, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

francinelucca commented Oct 8, 2025•
edited
Loading

changeset-botBot commented Oct 8, 2025•
edited
Loading