feat: add stroke width property to FluentProgressRing

[JamesNK]

🙋 Feature Request

FluentProgressRing doesn't have an easy way to change the stroke width, i.e. the thickness of the circle outline. When a small progress ring is displayed the hard coded width is too small.

CSS alone can't change the ring width appearance because the SVG position of the outline also needs to change based on the line width.

🤔 Expected Behavior

There is a way to change the FluentProgressRing stroke width.

😯 Current Behavior

No customization.

💁 Possible Solution

A parameter on FluentProgressRing. I'm not sure what the unit would be because the width would be scaled with the ring.

🔦 Context

Displaying a small ring in a grid at dotnet/aspire#1387

💻 Examples

[JamesNK]

We were able to do this with a CSS solution: dotnet/aspire#1387 (comment)

[dvoituron]

Thanks. But I find interesting to add two new attributes in FluentProgressRing: Color and StrokeWidth.

[dvoituron]

Your solution proposed in Aspire is correct, but the Value seems not correct for the result. Ex. Value=50%.

• Before (without CSS)
  
• After (with CSS)
  

::deep fluent-progress-ring::part(background) {
    stroke: var(--neutral-fill-input-alt-active);
    stroke-width: 4px;
    r: 6px;
}

::deep fluent-progress-ring::part(determinate) {
    stroke-width: 4px;
    r: 6px;
}

[dvoituron]

I added 3 properties:

• Width: component width and height
• Stroke: stroke width of the progress ring (Thin, Normal, Large)
• Color: color to be used for the progress ring

<FluentProgressRing Value="30" Width="32px" Stroke="ProgressStrokes.Large" Color="red" />

This will be included in the next release (we need to do the same for the progress bar and add unit tests).

[dvoituron]

Will be included in the next release. See PR #1121