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

FormToggle: Component wrongly styled #8871

Closed
mmtr opened this issue Aug 11, 2018 · 1 comment · Fixed by #12385
Closed

FormToggle: Component wrongly styled #8871

mmtr opened this issue Aug 11, 2018 · 1 comment · Fixed by #12385
Labels
[Feature] UI Components Impacts or related to the UI component system [Type] Bug An existing feature does not function as intended

Comments

@mmtr
Copy link
Contributor

mmtr commented Aug 11, 2018

Describe the bug
When rendering a FormToggle component outside WordPress, it is displayed with wrong styles because of the lack of the WordPress core styles.

To Reproduce

Expected behavior
It is styled like if the component is rendered inside WordPress.

Screenshots
screen shot 2018-08-11 at 12 34 58
screen shot 2018-08-11 at 12 35 05

Desktop:

  • OS: macOS High Sierra
  • Browser: Chrome
  • Version: 67

Additional context
Issue found while working on #8338 and Automattic/wp-calypso#26367

@designsimply designsimply added [Type] Bug An existing feature does not function as intended [Feature] UI Components Impacts or related to the UI component system labels Aug 13, 2018
@jrtashjian
Copy link
Contributor

@mmtr I've submitted a pull request for this bug. I've been using the components outside of Gutenberg a lot lately and have run into this same issue. I tracked down the issue to a style being applied to all components within the .block-editor class.

.block-editor * {
    box-sizing: inherit
}

This computed value of this on the .components-form-toggle class is box-sizing: border-box;. Applying this style to the following classes resolved part of the issue.

.components-form-toggle__thumb,
.components-form-toggle__track,
.components-form-toggle__on,
.components-form-toggle__off {
    box-sizing: border-box;
}

The SVG icon with the applied classes of .components-form-toggle__on and .components-form-toggle__off still had a slight offset. I noticed removing the line-height attribute on the entire page resolved the display. As I drilled down I saw that the .components-form-toggle within the block editor had received the display value of inline-block. Moving this style into the FormToggle component resolved this final issue.

gziolo pushed a commit that referenced this issue Feb 6, 2019
* FormToggle wrapper class needs inline-block styling.

Necessary for proper positioning of elements within .components-form-toggle.

* Elements within FormToggle component need to have border-box box-sizing.

This styling occurs within the block-editor on the post edit screen but does not exist outside of it. Moving this box-sizing value to the component resolves #8871.
youknowriad pushed a commit that referenced this issue Mar 6, 2019
* FormToggle wrapper class needs inline-block styling.

Necessary for proper positioning of elements within .components-form-toggle.

* Elements within FormToggle component need to have border-box box-sizing.

This styling occurs within the block-editor on the post edit screen but does not exist outside of it. Moving this box-sizing value to the component resolves #8871.
youknowriad pushed a commit that referenced this issue Mar 6, 2019
* FormToggle wrapper class needs inline-block styling.

Necessary for proper positioning of elements within .components-form-toggle.

* Elements within FormToggle component need to have border-box box-sizing.

This styling occurs within the block-editor on the post edit screen but does not exist outside of it. Moving this box-sizing value to the component resolves #8871.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] UI Components Impacts or related to the UI component system [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants