Proposal: Update ToggleSwitch Toggle UI

[sravya03]

Proposal: Update ToggleSwitch's Toggle UI for consistency

Summary

There is an consistency effort across apps runnign on Windows as well as Fabric to align as much of the unnecessary differences as possible. This is one of them.

Windows design evaluated this size and this is more balanced with the text and also makes it feel less swipable (they are going after 'tappable' model) due to its size.

Rationale

• Web and app ecosystems are a mix of styles
• Styles are emerging to enforce purpose and function
• New design follow this trend, thus our updates should also follow

Scope

Capability	Priority
Developers are able to use WinUI2.2* package and without any work, get the new Windows visual style.	Must
Developers have flexibility to style the size of ToggleSwitch without retemplating. (This is to be a new GH item.)	Should
Developers and end users experience control update that feel coherent with the same controls used by Fabric, Edge, and Xbox.	Should

*Timing here is not a commitment, but to follow the release cycle. Just using the next version #.

Design details and visuals

This impacts only ToggleSwitch. Update the width of the Toggle icon to 40px (today it is 44px).
Visual Comp

Important Notes

• Note on flexibility: Edge allows ToggleSwitch size to be adjustable up to 7 sizes.

Open Questions

• Why are Edge creating 7 different sizes and how are they using them?
• Is it necessary to align this with text and have a smarter model?

[mdtauk]

I assume you mean the Width of the control, as it is 20px high

[chigy]

I assume you mean the Width of the control, as it is 20px high

@mdtauk , Yes, correct.

[chigy]

Added a couple of open issues.

[mdtauk]

Added a couple of open issues.

@chigy That 7 sizes point is curious...

https://explore.fastdna.net/components/toggle/
I came across this Microsoft project which has a Toggle control with a Density property with values of:

• -3
• -2
• -1
• 0
• 1
• 2
• 3

Perhaps this is the same framework Edge has chosen to use?

[chigy]

Added a couple of open issues.

@chigy That 7 sizes point is curious...

https://explore.fastdna.net/components/toggle/
I came across this Microsoft project which has a Toggle control with a Density property with values of:

• -3
• -2
• -1
• 0
• 1
• 2
• 3

Perhaps this is the same framework Edge has chosen to use?

@mdtauk , I have no idea.

[chigy]

Status update: Reviewed with WinUI team and there was no immediate concern with the design's plan here if the work is merely to update existing toggle to have this new size. However I need to look more deeper into the scalability option (do we need it, if so how do we scale, etc.?) before making a formal pitch to the WinUI team.

[mdtauk]

@chigy the scalability option? You mean the Density? At the moment WinUI has the CompactDensity ResourceDictionary, and so any adjustments to the ToggleSwitch could be handled there.

As for offering more density options, this would likely be an option for the future, and would cover more than just one control.

[chigy]

@chigy the scalability option? You mean the Density? At the moment WinUI has the CompactDensity ResourceDictionary, and so any adjustments to the ToggleSwitch could be handled there.

As for offering more density options, this would likely be an option for the future, and would cover more than just one control.

@mdtauk , by scalability option, I meant to make this control more scalable. Today, if you want to change a text and that to impact the size of control, dev has to do all the work to change. While this wasn't raised as problematic afaik, when user scales text size, some controls do not scale the icons together with them and that's something we are aware. I'm just saying I need to look at more broadly into this before making a call.

[mdtauk]

Will the border around the ToggleSwitch control be updated to 1px, as with the borders on the other XAML controls?

[kaiguo]

Will the border around the ToggleSwitch control be updated to 1px, as with the borders on the other XAML controls?

Yeah it'll be updated, see the list here: #835

[mdtauk]

@kaiguo Thank you