Docs for process for refactoring a Primer React Component to CSS modules #5135
Conversation
|
jonrohan
requested review from
keithamus,
joshblack and
langermank
and removed request for
TylerJDev
size-limit report 📦
|
| 2. **Feature Flagging:** | ||
| - Add a feature flag to toggle the `sx` prop for controlled rollout (staff shipping). | ||
| 3. **Create CSS Module:** | ||
| - Add a corresponding `{Component}.module.css` file. |
There was a problem hiding this comment.
Would this be a good place to talk about how we use :where() for managing specificity or would this be a different doc?
There was a problem hiding this comment.
Maybe we could just link to the doc I'm writing here when its done
There was a problem hiding this comment.
I think that would fall into the css authoring doc https://github.com/primer/react/pull/5037/files
|
|
||
| 1. **Check for `className` and `style` Prop:** | ||
| - Ensure the component accepts a `className` for styling from outside of primer/react. | ||
| - Ensure the component accepts a `style` prop for more dynamic styling like positioning. |
There was a problem hiding this comment.
Do we have to explicitly set this as a prop, or does it just come for free? CC @joshblack
There was a problem hiding this comment.
@langermank it will come for free with {...props} most of the time but it may be good for us to make both explicit to avoid issues like:
<MyComponent
className="hi"
styles={{ /* ... */ }}
{...props}
/>Where either could be overridden instead of merged like we would want
| 2. **Feature Flagging:** | ||
| - Add a feature flag to toggle the `sx` prop for controlled rollout (staff shipping). | ||
| 3. **Create CSS Module:** | ||
| - Add a corresponding `{Component}.module.css` file. |
There was a problem hiding this comment.
Maybe we could just link to the doc I'm writing here when its done
Co-authored-by: Katie Langerman <[email protected]>
Closes https://github.com/github/primer/issues/3657
This PR documents how to migrate a styled component into a CSS module in primer react.