Remove styled-system usage - TextInputWrapper and related #6666
Conversation
🦋 Changeset detectedLatest commit: d364402 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! |
github-actions
bot
added
the
integration-tests: recommended
size-limit report 📦
|
There was a problem hiding this comment.
Pull Request Overview
This pull request removes styled-system usage from TextInputWrapper and related input components as part of the migration away from styled-system dependencies. The changes eliminate the sx prop and width-related props from multiple input components and their wrapper.
- Removes styled-system imports and
SxPropusage from input components - Eliminates deprecated width, minWidth, and maxWidth props from TextInputWrapper
- Updates component type definitions to remove styled-system prop references
Reviewed Changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/internal/components/TextInputWrapper.tsx | Removes styled-system imports, width props, and sx prop from TextInputBaseWrapper |
| packages/react/src/Textarea/Textarea.tsx | Removes SxProp import and sx prop usage |
| packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx | Removes sx and width-related props from component |
| packages/react/src/TextInput/TextInput.tsx | Removes sx and width props from TextInput component and type definitions |
| packages/react/src/TextInput/TextInput.docs.json | Removes documentation for deprecated width-related props |
| packages/react/src/TextInput/TextInput.dev.stories.tsx | Replaces sx prop usage with CSS classes and updates story structure |
| packages/react/src/Select/Select.tsx | Removes sx prop usage from Select component |
| packages/react/src/Overlay/Overlay.features.stories.tsx | Migrates from sx props to CSS modules and semantic components |
| packages/react/src/Overlay/Overlay.features.stories.module.css | Adds CSS module styles to replace inline sx styling |
| .changeset/gold-dingos-sneeze.md | Documents the major version change for removing styled-system usage |
Comments suppressed due to low confidence (1)
packages/react/src/internal/components/TextInputWrapper.tsx:1
- The
styleprop is being destructured from props but removed from the component signature. This will cause the prop to be included inrestPropsand passed to the underlying component, but it's no longer in the type definition. Either remove it from destructuring or add it back to the type definition.
import React, {type ComponentProps} from 'react'
| @@ -58,7 +56,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>( | |||
| { | |||
| value, | |||
| disabled, | |||
| sx: sxProp, | |||
There was a problem hiding this comment.
I see usage of this in dotcom, are we planning to migrate?
There was a problem hiding this comment.
I assume we would, but we're also planning to get rid of sx props in this upcoming release. Is there a plan for how to handle this? I know we have react-styled, but I don't really know what it is or how to use it.
There was a problem hiding this comment.
ah yes I think react-styled is the way to go here. @joshblack would it be part of https://github.com/github/primer/issues/5422 as well to go in dotcom and replace the textarea + sx usage with react-styled instead or what's the pipeline here?
There was a problem hiding this comment.
Exactly, yeah. I would make sure in github-ui to update usage there first (the migration in this case is just find the places that use styled-system for these components and update the imports to pull the component from @primer/styled-react) and then merge here so that we don't have to deal with any challenges in the release.
Hope that makes sense, let me know if it'd be helpful to walk through this or do a loom or something since this is a new process 👀
| @@ -51,9 +42,6 @@ export const TextInputBaseWrapper = React.forwardRef<HTMLElement, StyledTextInpu | |||
| contrast, | |||
| monospace, | |||
| block, | |||
| width, | |||
| minWidth, | |||
| maxWidth, | |||
There was a problem hiding this comment.
should we have left these props? They're getting added to the style attribute.
There was a problem hiding this comment.
We totally could, but they're deprecated anyway. A major release seemed like a good opportunity to get rid of them.
Happy to add them back if you or other reviewers feel strongly.
| <Box as="form" sx={{display: 'flex', flexDirection: 'column', p: 3}} aria-label="Set Duration Form"> | ||
| <Text color="fg.muted" sx={{fontSize: 1, mb: 3}}> | ||
| <Stack as="form" gap="condensed" padding="normal" aria-label="Set Duration Form"> | ||
| <Text color="fg.muted" size="medium"> |
There was a problem hiding this comment.
Can you convert the color here?
Relates to https://github.com/github/primer/issues/5422
Changelog
New
Changed
Removed
Note
Reviewers: I misunderstood the scope of https://github.com/github/primer/issues/5422 when I started on it and also removed
sxprops. If we want to preserve those for now, I can revert those changes.sxprop fromSelectTextareaTextInputTextInputWithTokensTextInputWrapperwidth,minWidth, andmaxWidthprops fromTextInputWrapperstyled-systemdependenciesRollout strategy
Testing & Reviewing
Merge checklist