Fix issue with disabled togglecontrol double border #12091
Conversation
Fixes #12049. This PR fixes an issue where a togglecontrol, wrapped in a Disabled component, would show a double border. The issue was that it inherited a border from the parent checkbox style (because the toggle is technically a reskinned checkbox).
sirreal
left a comment
sirreal
left a comment
There was a problem hiding this comment.
I didn't recompile styles, but I verified that a toggle control wrapped in Disabled does not have the double border when manually adding this style via browser dev tools:
.components-toggle-control .components-base-control__field .components-form-toggle__input {
border: none;
}Looks like this fixes the issue. Thanks!
|
Thanks for the review! Not sure why the button doesn't turn green with your approval. But in any case, it's milestoned, so we'll get it in. |
simison
left a comment
simison
left a comment
There was a problem hiding this comment.
Compiled and confirmed this fixes it for both content area and the sidebar:
We don't have special rights to this repo. 😉 ✨ |
|
Looks like checked state is still messed up even with this branch:
|
|
CC: @ockham, perhaps the real fix is to add a disabled style to the component itself? |
| } | ||
|
|
||
| // This overrides a border style that is inherited from parent checkbox styles. | ||
| .components-form-toggle__input { |
There was a problem hiding this comment.
Since this styles components-form-toggle__input -- should the styling actually go to packages/components/src/form-toggle/style.scss so it'd also apply to FormToggle when not wrapped in a ToggleControl? Cf Automattic/wp-calypso#28701
There was a problem hiding this comment.
Let me take a look as I address the other item from @simison, thanks!
Sorry I guess I just left this there without too much context :D What i meant was that instead of wrapping the FormToggle in a Disabled component to disable it, perhaps having an actual disabled prop on the form toggle would be a better approach? Though I suppose both use cases need to work. |
- Add a better disabled state that works for both checked and unchecked states. - Move code to the right component. - Fix some additional bleed issues.
|
Thanks for the review, everyone. Fixed a few issues, including those mentioned:
|
ockham
left a comment
ockham
left a comment
There was a problem hiding this comment.
Thanks @jasmussen, looks great! Any chance this makes it into 4.5? Would be great for people testing the Jetpack beta after today's code freeze so they won't run into Automattic/wp-calypso#28701 😄
|
Thanks for the review. I think that's up to @youknowriad. |
youknowriad
left a comment
youknowriad
left a comment
There was a problem hiding this comment.
How can I go against three approvals?
|
Thanks @jasmussen and @youknowriad! ❤️ |
…rnmobile/wire-on-replace-para-block * 'master' of https://github.com/WordPress/gutenberg: Remove "permalink settings" link from permalink panel. (#12121) preserve quote content (#12122) Replace gutenberg domain with default for Core blocks (#12108) Fix issue with disabled togglecontrol double border (#12091) Fix the TinyMCE init array (#10968)
Use the `Disabled` component rather than a `disabled` prop to conditionally wrap `FormToggle` when the `toggleable` attribute is `false`. This should style the toggles properly when using Gutenberg `master` or a version that includes WordPress/gutenberg#12091.
Fixes #12049.
This PR fixes an issue where a togglecontrol, wrapped in a Disabled component, would show a double border. The issue was that it inherited a border from the parent checkbox style (because the toggle is technically a reskinned checkbox).
Before:
After: