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

Components: Missing Core styles in CheckboxControl #11089

Closed
mmtr opened this issue Oct 26, 2018 · 4 comments · Fixed by #16551
Closed

Components: Missing Core styles in CheckboxControl #11089

mmtr opened this issue Oct 26, 2018 · 4 comments · Fixed by #16551
Labels
[Package] Components /packages/components [Type] Bug An existing feature does not function as intended

Comments

@mmtr
Copy link
Contributor

mmtr commented Oct 26, 2018

Describe the bug
When rendering the CheckboxControl component from the @wordpress/components package outside of Core, there are some styling issues caused by the lack of the Core styles.

To Reproduce

  • Load Gutenberg without Core styles by adding the following snippet into gutenberg.php:
function remove_default_stylesheets() {
  wp_deregister_style('wp-admin');
}
add_action('admin_init', 'remove_default_stylesheets');
  • Go to the Gutenberg editor
  • Check the Discussion settings on the sidebar

Expected behavior
As @wordpress/components pretends to work standalone, I expect the checkboxes to look like when the Core styles are present (see screenshots below).

Screenshots
With Core styles
screen shot 2018-10-26 at 10 03 37

Without Core styles
screen shot 2018-10-26 at 10 03 31

Additional context
Issue found while integrating Gutenberg into Calypso (Automattic/wp-calypso#28101)

@designsimply designsimply added [Package] Components /packages/components [Type] Bug An existing feature does not function as intended Needs Technical Feedback Needs testing from a developer perspective. labels Oct 26, 2018
@youknowriad youknowriad removed the Needs Technical Feedback Needs testing from a developer perspective. label Feb 1, 2019
@youknowriad
Copy link
Contributor

I think the screenshots are outdated but the checkboxes are still showing in a different style.

@jffng
Copy link
Contributor

jffng commented Jul 9, 2019

I tested out rendering a CheckboxControl component in the Gutenberg playground and applying the missing Core styles directly in the component scss:

Screen Recording 2019-07-09 at 02 24 PM

However the way that checkbox inputs are styled today requires the Dashicon icon font to display its checked state. I think there are two options to achieve correct styling behavior for this component outside of wp-admin:

  1. Build the @wordpress/component styles with the icon font (feels redundant given there's already a Dashicon and Icon component)
  2. Alter the CheckboxControl component to accept an Icon or Dashicon component

Are there simpler approaches?

@youknowriad
Copy link
Contributor

@jffng Can we replace it with the SVG instead, since @wordpress/components already contains those?

So probably something more like option 2 but built-in in the component (not a new prop or something).

@jffng
Copy link
Contributor

jffng commented Jul 11, 2019

Attempted a patch (#16551) that places a SVG component inside the label, to maintain expected behavior of the input.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants