search

microsoft / microsoft-ui-xaml

Windows UI Library: the latest Windows 10 native controls and Fluent styles for your applications
MIT License
6.27k stars 674 forks source link

Proposal: Update ToggleSwitch Toggle UI #836

Closed sravya03 closed 5 years ago

sravya03 commented 5 years ago

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

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

Open Questions

mdtauk commented 5 years ago

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

chigy commented 5 years ago

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

@mdtauk , Yes, correct.

chigy commented 5 years ago

Added a couple of open issues.

mdtauk commented 5 years ago

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:

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

chigy commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

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

kaiguo commented 5 years ago

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: https://github.com/microsoft/microsoft-ui-xaml/issues/835

mdtauk commented 5 years ago

@kaiguo Thank you