Skip to content
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

BaseControl: Use CSS-in-JS #25842

Conversation

@sarayourfriend
Copy link
Contributor

@sarayourfriend sarayourfriend commented Oct 5, 2020

Description

This PR updates the BaseControl component to use CSS-in-JS similar to how newer components do like the AnglePickerControl and Text. 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 TextareaControl component rather than a raw textarea.

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__row rule. I'm unsure how to test this.

Screenshots

Storybook before
Captura de Tela 2020-10-08 às 08 03 11

Storybook after
Captura de Tela 2020-10-08 às 08 03 06

Types of changes

Non-breaking CSS-in-JS usage instead of Sass.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.
@sarayourfriend sarayourfriend changed the title Refactor/use css in js for base control BaseControl: Use CSS-in-JS Oct 5, 2020
@sarayourfriend sarayourfriend requested a review from ellatrix as a code owner Oct 8, 2020
@sarayourfriend sarayourfriend force-pushed the sarayourfriend:refactor/use-css-in-js-for-base-control branch 2 times, most recently Oct 8, 2020
@ItsJonQ
ItsJonQ approved these changes Oct 9, 2020
Copy link
Contributor

@ItsJonQ ItsJonQ left a 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 👍

@sarayourfriend sarayourfriend force-pushed the sarayourfriend:refactor/use-css-in-js-for-base-control branch to 2d33ec7 Oct 9, 2020
@ItsJonQ ItsJonQ merged commit 3cbfa27 into WordPress:master Oct 14, 2020
14 checks passed
14 checks passed
@github-actions
Cancel Previous Runs Cancel Previous Runs
Details
@github-actions
Check Check
Details
@github-actions
build
Details
@github-actions
Admin - 1
Details
@github-actions
Compare performance with master
Details
@github-actions
test (gutenberg-editor-gallery) test (gutenberg-editor-gallery)
Details
@github-actions
test (gutenberg-editor-gallery)
Details
@github-actions
JavaScript
Details
@github-actions
Admin - 2
Details
@github-actions
Admin - 3
Details
@github-actions
Mobile
Details
@github-actions
Admin - 4
Details
@github-actions github-actions bot added this to the Gutenberg 9.2 milestone Oct 14, 2020
@@ -1,6 +1,5 @@
@import "./animate/style.scss";
@import "./autocomplete/style.scss";
@import "./base-control/style.scss";

This comment has been minimized.

@talldan

talldan Mar 4, 2021
Contributor

@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?

This comment has been minimized.

@sarayourfriend

sarayourfriend Mar 4, 2021
Author Contributor

@talldan It should be deleted, that was an oversight on my part, sorry about that! Thanks for catching it 🙂

This comment has been minimized.

@talldan

talldan Mar 5, 2021
Contributor

@sarayourfriend Cool, thanks for confirming. I can delete as part of #29550.

@sarayourfriend sarayourfriend deleted the sarayourfriend:refactor/use-css-in-js-for-base-control branch Mar 4, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants