Microsoft-ui-xaml: Proposal: New Progress Ring Style

[sravya03]

Proposal: Update progress ring style

There is an open spec here and PR here for this proposal.

Summary

ProgressRing is one control that many apps customize and seem to carry branding personality. Windows wants to update the personality by introducing a new progress ring style.

Rationale

• Alignment with Edge and other apps
• Introduce a lighter, simpler aesthetic
• Introduce consistency across all Shell surfaces

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 ProgressRing's visual and motion 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 only impacts ProgressRing control.
Visual comp

Important Notes

Open Questions

• Should Background property control the color of the ring's track or the entire backplate?
  
  
  
  • Option 1: Background = ring track color
    
    Pros: Aligns with ProgressBar's use of Background property; no need to change API by introducing new property.
    
    Cons: Changes the meaning of an existing property and introduces a breaking change. Requires adding a new element behind ProgressRing to achieve the appearance of a backplate.
  
  
  • Option 2: Background = backplate color
    
    Pros: Matches current ProgressRing behavior.
    
    Cons: Need to add new RingBackground property to the API.
  
  
  • Consensus from feature team is Option 1
  
  

Release Checklists

Prerelease readiness

• [x] Dev: quality review + code review done
• [x] Dev: test coverage added
• [x] Dev: initial accessibility review done
• [x] Dev: telemetry implemented
• [x] PM: spec up to date
• [x] PM: feature ready for feedback

• [x] PM: docs.microsoft.com updates ready

  Stable release readiness

• [x] Dev: feature previously shipped in a prerelease NuGet package

• [x] Dev: Azure CI tests passing
• [x] Dev: accessibility review done
• [x] Dev: API review done
• [x] Dev: IDL attribute switched from preview to public
• [x] Dev: Add test coverage to the NugetReleaseTest test
• [x] PM: spec done
• [x] PM: glob/loc, privacy, security, license compliance ready
• [x] PM: customer validation done
• [ ] PM: docs.microsoft.com updated
• [x] PM: Xaml Controls Gallery updated

[mdtauk]

There are three kinds of Progress Rings used by Microsoft platforms right now, I agree these should be consolidated into a single design. #688

[kathyang]

Thank you @mdtauk for sharing the visual!

[mdtauk]

It may be worth considering using a gradient to soften the ends of the Indeterminate animated segment - but this is very much a decision about the character of Fluent Design.

Xbox uses a very distinct animation which makes use of neutral shades as well as the Accent Colour.

[chigy]

Thank you, @mdtauk for your design suggestion. As you indicate, this is more of a design choice and I'm waiting for motion comp from design team.

[chigy]

Status update: Reviewed with WinUI team and this item will be looked at with a holistic POV for ProgressRing overall. @kathyang

[Poopooracoocoo]

Can't help but feel that this looks like Material Design. The dots looked rather unique.

[mdtauk]

The dots feels like a Windows Phone and Windows 8 Metro design, it is also cumbersome to customise for branded apps.

I look forward to seeing them in motion, but I think the indeterminate States could do with a gradient to show the incomplete nature of the action

[kathyang]

I've started the spec for progress style updates (and ProgressRing determinate mode) here and the PR is here. I'd love to keep getting your thoughtful contributions and feedback on the spec!

[jevansaks]

Should Background property control the color of the ring's track or the entire backplate?

My preference is Option 2, Background is the whole background's color simply because it's most consistent with other controls. When faced with this problem we usually offer a "lightweight styling key" solution. It's not great, but it's consistent.

Going forward I hope that we can design a holistic solution that makes it so that lightweight styling keys can be API, but for now that's the approach we've taken.

[mdtauk]

Would this be possible?

Background = Ring colour
Foreground = Progress colour

[YuliKl]

Would this be possible?

Background = Ring colour
Foreground = Progress colour

This is exactly what we settled on during an internal review.

[mdtauk]

Currently when you press the "IsIndeterminate" checkbox in the ProgressRing test page - there is a subtle fade transition from the Determinate state to the animation playing.

But there is none when moving from the Indeterminate state back to a Determinate state.

[mdtauk]

The Indeterminate ProgressRing does not scale in the same way as the Determinate one...

This is width set to 90