BaseControl: Use CSS-in-JS #25842
BaseControl: Use CSS-in-JS #25842
Conversation
sarayourfriend
requested review from
ajitbohra,
chrisvanpatten and
youknowriad
as code owners
sarayourfriend
changed the title
ItsJonQ
left a comment
ItsJonQ
left a comment
There was a problem hiding this comment.
🚀 from me! Thank you @saramarcondes 🙏
It looks like this is the start of a collection of font based CSS-in-JS mixins :).
That's exciting!
The snapshot changes make sense, as BaseField is adding a couple of Jest emotion classes.
I think we may need to rebase + regenerate a snapshot, and we should be good 👍
| @@ -1,6 +1,5 @@ | |||
| @import "./animate/style.scss"; | |||
| @import "./autocomplete/style.scss"; | |||
| @import "./base-control/style.scss"; | |||
There was a problem hiding this comment.
@sarayourfriend Was just making some changes to BaseControl and wondering if the style.scss file should be deleted as well, or do we keep it around for some back compat purposes?
There was a problem hiding this comment.
@talldan It should be deleted, that was an oversight on my part, sorry about that! Thanks for catching it 🙂
There was a problem hiding this comment.
@sarayourfriend Cool, thanks for confirming. I can delete as part of #29550.
3 participants
Description
This PR updates the
BaseControlcomponent to use CSS-in-JS similar to how newer components do like theAnglePickerControlandText. This should not include any breaking changes as all the old classnames are still being rendered so consumers may still easily target those components.I also updated the story to use the
TextareaControlcomponent rather than arawtextarea.This also introduces a new style-mixin called
font. I'm just guessing at this part @ItsJonQ might have some good input.How has this been tested?
I've tested the changes in Storybook and have confirmed there are no visual changes between the two versions.
One thing that is not tested is the
components-panel__rowrule. I'm unsure how to test this.Screenshots
Storybook before
Storybook after
Types of changes
Non-breaking CSS-in-JS usage instead of Sass.
Checklist: