FormToggle: component styles for external use#12385
FormToggle: component styles for external use#12385gziolo merged 2 commits intoWordPress:masterfrom jrtashjian:update/8871-form-toggle-component-styles-external-use
Conversation
Necessary for proper positioning of elements within .components-form-toggle.
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.
|
Does it still work also when the element is disabled? (disabled state had some styling issues previously) |
|
Toggle works fine in the plugin, but not rending as expected outside editor To test |
gziolo
added
Needs Design Feedback
|
@jasmussen and @kjellr - can you help to land this PR as it seems like @jrtashjian doesn't work on it anymore. |
|
@simison Yes, the existing disabled styles work when the element is disabled. @ajitbohra Are you indicating the pull request doesn't fix the issue? @gziolo sorry, haven't had a chance to get back on this one in a while. I think it's ready for a review and hopefully be merged in if ready! |
|
Thank you for this PR. I just took it for a spin, and honestly, it seems perfect to me as is, and no other change should be made IMO. To answer @simison, if the form toggle gets wrapped in the
To answer @ajitbohra, this is how it looks like on storybook:
This is how it looks like on the calypso devdocs:
So you can see it's offset. But this is CSS bleed that we, in my opinion, should not accommodate in this PR, but report as a bug in Calypso. Behold this wonderful that is inherited from Calypso:
If we uncheck that margin ...
We get this:
That margin is pretty broad and heavy handed, so it should be fixed in Calypso. 👍 👍 to this PR as is! |
|
@jrtashjian congrats on your first code contribution to Gutenberg and thank you, everyone, for help with reviews 💯 |
|
Awesome. Thanks everyone! 🎉 |
|
@jrtashjian thanks for your contribution to Gutenberg. Shared those links for reviewers to check component in isolation. |
* 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.
* 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.
7 participants
Description
Identified styles causing rendering issues with the FormToggle component outside of the block editor.
How has this been tested?
@wordpress/componentspackage.Screenshots
Broken:
Fixed:
Types of changes
Fixes #8871
Checklist: