FormToggle styling mis-alignment

[roykho]

Describe the bug
The form control is mis-aligned by 2 pixels. See screenshots.

Proposed solution

	.components-form-toggle__on,
	.components-form-toggle__off {
		top: $toggle-border-width * 2; // reduced by 2 px.
	}

	.components-form-toggle__thumb {
		top: $toggle-border-width;  // remove the multiply by 2.
	}

Screenshots
Before the fix.

After applying the fix.

[jorgefilipecosta]

Hi @roykho thank you for reporting this issue 👍 I checked that on the toggles rendered by block editor core (latest posts, paragraph drop cap, archives block) the unalignment problem is not happening.
What were the steps you used to reproduce the issue? Are you able to replicate this problem in a default install without plugins loading styles?

Thank you in advance!

[roykho]

Hi @jorgefilipecosta so the item I am working on requires some dependencies such as WooCommerce and WooCommerce Bookings however I've checked and I don't believe anything from those are causing the styling issue.

Since opening this, I have then learned to use ToggleControl instead of FormToggle which aligns correctly.

Here is a reference of both form inputs together so you can see the misalignment between the two.

As you can see using ToggleControl is aligned correctly but not FormToggle.

I hope that helps.

[jorgefilipecosta]

Hi @roykho,
I tried adding the FormToggle component sample code to Gutenberg, and I'm still having troubles replicating this problem:

I tested the FormToggle inside a BaseControl, and outside one and in both cases the component aligned correctly.

By default, FormToggle does not create labels, in the screenshots provided labels exist, could you provide more information regarding the code you are using with this component? E.g.: the wrapping components, and how the label is being set.

In my tests, if we use top: $toggle-border-width; the component starts rendering incorrectly:

Thank you for the help debugging this problem.

[roykho]

Hi @jorgefilipecosta so the label you see in my first screenshot I added myself since FormToggle doesn't supply a label. But that is not related to the misalignment. You can see in my last screenshot, I added FormToggle without the "self" added label and it is still misaligned. I am not sure if this makes a difference but in my test FormToggle is wrapped inside InspectorControls > PanelBody

If you're still unable to replicate, then I am ok to just close this out and re-open if we get more issues about that and thanks for your help!

[kjellr]

I'm unable to reproduce this as well, so I'm going to close for now. If it needs to be opened for any reason, feel free to comment below! Thank you!