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

[UI Components] resolve missing styles from checkbox-control component (#11089) #16551

Merged
merged 4 commits into from
Aug 1, 2019

Conversation

jffng
Copy link
Contributor

@jffng jffng commented Jul 11, 2019

Description

This change affects the CheckboxControl UI component:

  • Applies missing styles when they are not enqueued by wp-admin
  • Uses SVG to display the checked state, rather than relying on the Dashicon font

How has this been tested?

On Gutenberg playground and in the editor on:
macOS 10.14.5
Chrome 75.0.3770.100
Safari 12.1.1
Firefox 67.0.4

Screenshots

Screen Recording 2019-07-11 at 06 49 PM

Types of changes

Fixes #11089

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.

height: 16px;
margin: 0 4px 0 0;
outline: 0;
padding: 0 !important;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For anyone else reviewing this, this whole green section is largely copied from http://localhost:8888/wp-admin/css/forms.css?ver=5.2.2, so it is as it says on the bin, a copy of the CSS from wp-admin. So while it would be nice to refactor away the !important, this is a separate task bringing these components to all of wp-admin.

Copy link
Contributor

@jasmussen jasmussen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really cool work! Works as advertised for me. This work will also benefit us when we at some point in the future can refactor to use the same components everywhere in WP-admin as oppposed to just the block editor.

Before:

before

After:

after

I left one small comment about vendor prefixes but other than that, 👍 👍

packages/components/src/checkbox-control/style.scss Outdated Show resolved Hide resolved
jffng and others added 3 commits July 12, 2019 14:16
Remove vendor prefixing and target svg.dashicon css
… CSS

Co-Authored-By: Riad Benguella <benguella@gmail.com>
@youknowriad youknowriad merged commit 3421006 into WordPress:master Aug 1, 2019
@youknowriad
Copy link
Contributor

Congrats for the first contribution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Components: Missing Core styles in CheckboxControl
3 participants