-
Notifications
You must be signed in to change notification settings - Fork 637
Chore: remove styled system components #6965
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
Chore: remove styled system components #6965
Conversation
This reverts commit cbcaff0.
🦋 Changeset detectedLatest commit: fe9450b The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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! |
👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/4099 |
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 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>
👋 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! |
👋 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! |
👋 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! |
Migrates leftover styled-system components into css modules
Changelog
Changed
Rollout strategy
Testing & Reviewing
Merge checklist