Feedback on Toggle touchup 🙏🏻

[andioneto]

Hi folks, after getting feedback from a PM that they wanted to use the legacy ui-component-toggle instead of <Radio /> for a migration, added the following stylings from the Theme package to make it look more like the newer components.

Curious how the padding looks, border radius, colors chosen, etc. I used styled to customize the toggle itself and used the FormHelpText instead of the default help text.

Unfortunately I couldn't attach the .mov file and the .gif is pretty grainy. LMK if you'd like me to slack the video to you so it's more clear. Thanks in advance!

[serifluous]

This looks great, @andipants12 !

Feedback:

• General feedback: The copy could be a little clearer to explain to the customer why they would set this setting to enable or disabled. Some informational text that doesn't change on toggle could help people make that decision. I'm not sure where this toggle lives in context of the rest of the page, so you might already have that in the Secure Trunking disclosure.
• It might just be the gif, but the blue on the Enabled state looks a little dark. Which tokens are you using to style it?
• Nit: The border radius on the switch's inward-facing corners could look slightly nicer at 0px border-radius (see this mockup for an example: https://share.goabstract.com/40f71ba3-9751-4eed-9d8e-81e0c7bee791?mode=design&sha=296cdfebfb52b14f2c757e2e1cb465bac8fe2fc1 Ignore the all caps in the mockup. The capitalization you have in your implementation is preferred.)

[andioneto]

@serifluous Unfortunately I don't have access to that abstract group. I just sent a request if you don't mind approving on Monday 🙏

As for the tokens, I'm using colorBackgroundPrimary/colorGray70 for the non-hover states, and colorBackgroundPrimaryDarker/colorGray90 for the hover states.

I'll go ahead and remove the border radius from the inner corners and post an update later. Thank you again! 🥳

[andioneto]

@serifluous Here is the updated border radius 😸

[serifluous]

Amazing! 💃