[FluentProgress] Update Stroke enumeration - v4 & v3

examples/Demo/Shared/Pages/Progress/Examples/ProgressStroke.razor → examples/Demo/Shared/Pages/Progress/Examples/ProgressStrokeExample.razor

@@ -1,6 +1,6 @@
 <h4>Stroke and Color</h4>
 
-<FluentSelect Label="Width" Items="@(new [] { ProgressStrokes.Thin, ProgressStrokes.Normal, ProgressStrokes.Large })" @bind-SelectedOption="@Stroke" Width="60px" />
+<FluentSelect Label="Width" Items="@(new [] { Microsoft.FluentUI.AspNetCore.Components.ProgressStroke.Small, Microsoft.FluentUI.AspNetCore.Components.ProgressStroke.Normal, Microsoft.FluentUI.AspNetCore.Components.ProgressStroke.Large })" @bind-SelectedOption="@Stroke" Width="60px" />
 <FluentCheckbox Label="Indeterminate" @bind-Value="@Indeterminate" />
 <FluentSelect Label="Color" Items="@(Enum.GetValues<OfficeColor>())" @bind-SelectedOption="@Color" Width="100px" Height="200px" />
 <FluentSlider Min="0" Max="100" Step="5" @bind-Value="@Percentage" Style="max-width: 200px; margin: 20px 0px;" Disabled="@Indeterminate" />
@@ -16,7 +16,7 @@
 
 @code
 {
-    ProgressStrokes Stroke = ProgressStrokes.Normal;
+    ProgressStroke Stroke = Microsoft.FluentUI.AspNetCore.Components.ProgressStroke.Normal;
     int Percentage = 30;
     bool Indeterminate = false;
     OfficeColor Color = OfficeColor.Default;

examples/Demo/Shared/Pages/Progress/ProgressPage.razor

@@ -25,7 +25,7 @@
 
 <DemoSection Title="Default" Component="@typeof(ProgressDefault)"></DemoSection>
 
-<DemoSection Title="Stroke and Color" Component="@typeof(ProgressStroke)"></DemoSection>
+<DemoSection Title="Stroke and Color" Component="@typeof(ProgressStrokeExample)"></DemoSection>
 
 <DemoSection Title="Paused" Component="@typeof(ProgressPaused)"></DemoSection>
 

examples/Demo/Shared/Pages/ProgressRing/Examples/ProgressRingStroke.razor

@@ -1,6 +1,6 @@
 <h4>Stroke and Color</h4>
 
-<FluentSelect Label="Width" Items="@(new [] { ProgressStrokes.Thin, ProgressStrokes.Normal, ProgressStrokes.Large })" @bind-SelectedOption="@Stroke" Width="60px" />
+<FluentSelect Label="Width" Items="@(new [] { ProgressStroke.Small, ProgressStroke.Normal, ProgressStroke.Large })" @bind-SelectedOption="@Stroke" Width="60px" />
 <FluentCheckbox Label="Indeterminate" @bind-Value="@Indeterminate" />
 <FluentSelect Label="Color" Items="@(Enum.GetValues<OfficeColor>())" @bind-SelectedOption="@Color" Width="100px" Height="200px" />
 <FluentSlider Min="0" Max="100" Step="5" @bind-Value="@Percentage" Style="max-width: 200px; margin: 20px 0px;" Disabled="@Indeterminate" />
@@ -26,7 +26,7 @@
 
 @code
 {
-    ProgressStrokes Stroke = ProgressStrokes.Normal;
+    ProgressStroke Stroke = ProgressStroke.Normal;
     int Percentage = 30;
     bool Indeterminate = false;
     OfficeColor Color = OfficeColor.Default;

src/Core/Components/Progress/FluentProgress.razor

@@ -2,7 +2,7 @@
 @inherits FluentComponentBase
 @if (Visible)
 {
-    if (Stroke != ProgressStrokes.Normal || !string.IsNullOrEmpty(Color) || !string.IsNullOrEmpty(BackgroundColor))
+    if (Stroke != ProgressStroke.Normal || !string.IsNullOrEmpty(Color) || !string.IsNullOrEmpty(BackgroundColor))
     {
         <style>
             @if (Value == null)

src/Core/Components/Progress/FluentProgress.razor.cs

@@ -63,7 +63,7 @@ public FluentProgress()
     /// Gets or sets the stroke width of the progress bar. If not set, the default theme stroke width is used.
     /// </summary>
     [Parameter]
-    public ProgressStrokes Stroke { get; set; } = ProgressStrokes.Normal;
+    public ProgressStroke Stroke { get; set; } = ProgressStroke.Normal;
 
     /// <summary>
     /// Gets or sets the color to be used for the progress bar. If not set, the default theme color is used.
@@ -79,9 +79,9 @@ public FluentProgress()
 
     private (int BarHeight, int BackgroundHeight, string DefaultBackgroundColor) StrokeDetails => Stroke switch
     {
-        ProgressStrokes.Thin => (2, 1, "--neutral-stroke-strong-rest"),
-        ProgressStrokes.Normal => (3, 1, "--neutral-stroke-strong-rest"),
-        ProgressStrokes.Large => (9, 6, "--neutral-stroke-rest"),
+        ProgressStroke.Small => (2, 1, "--neutral-stroke-strong-rest"),
+        ProgressStroke.Normal => (3, 1, "--neutral-stroke-strong-rest"),
+        ProgressStroke.Large => (9, 6, "--neutral-stroke-rest"),
         _ => throw new NotImplementedException(),
     };    
     private string StyleProgress => $"height: calc((var(--stroke-width) * {StrokeDetails.BackgroundHeight}) * 1px); " +

src/Core/Components/Progress/FluentProgressRing.razor

@@ -2,7 +2,7 @@
 @inherits FluentComponentBase
 @if (Visible)
 {
-    if (Stroke != ProgressStrokes.Normal || !string.IsNullOrEmpty(Color))
+    if (Stroke != ProgressStroke.Normal || !string.IsNullOrEmpty(Color))
     {
         <style>
             @($"#{Id}::part(background) {{ {StyleBackground} }}")

src/Core/Components/Progress/FluentProgressRing.razor.cs

@@ -62,7 +62,7 @@ public FluentProgressRing()
     /// Gets or sets the stroke width of the progress ring. If not set, the default theme stroke width is used.
     /// </summary>
     [Parameter]
-    public ProgressStrokes Stroke { get; set; } = ProgressStrokes.Normal;
+    public ProgressStroke Stroke { get; set; } = ProgressStroke.Normal;
 
     /// <summary>
     /// Gets or sets the color to be used for the progress ring. If not set, the default theme color is used.
@@ -72,9 +72,9 @@ public FluentProgressRing()
 
     private (int Width, int Radius, int Dashoffset) StrokeDetails => Stroke switch
     {
-        ProgressStrokes.Thin => (1, 7, 0),
-        ProgressStrokes.Normal => (2, 7, 0),
-        ProgressStrokes.Large => (4, 6, (int)(0.066 * (Value ?? 0) + 0.22)),
+        ProgressStroke.Small => (1, 7, 0),
+        ProgressStroke.Normal => (2, 7, 0),
+        ProgressStroke.Large => (4, 6, (int)(0.066 * (Value ?? 0) + 0.22)),
         _ => throw new NotImplementedException(),
     };
 

src/Core/Enums/ProgressStrokes.cs → src/Core/Enums/ProgressStroke.cs

@@ -1,8 +1,8 @@
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
-public enum ProgressStrokes
+public enum ProgressStroke
 {
+    Small,
     Normal,
-    Thin,
     Large,
 }

tests/Core/Microsoft.FluentUI.AspNetCore.Components.Tests.csproj

@@ -55,8 +55,6 @@
     </None>
 
     <None Include="**\*.received.razor.html" />
-
-    <None Include="Progress\FluentProgressTests.razor" />
     <None Update="**\*.received.razor.html">
       <ParentFile>$([System.String]::Copy('%(FileName)').Split('.')[0])</ParentFile>
       <DependentUpon>%(ParentFile).razor</DependentUpon>

tests/Core/Progress/FluentProgressRingTests.razor

@@ -58,7 +58,7 @@
     public void FluentProgressRing_Stroke()
     {
         // Arrange && Act
-        var cut = Render(@<FluentProgressRing Min="0" Max="100" Value="30" Stroke="ProgressStrokes.Large" />);
+        var cut = Render(@<FluentProgressRing Min="0" Max="100" Value="30" Stroke="ProgressStroke.Large" />);
 
         // Assert
         cut.Verify();
@@ -68,7 +68,7 @@
     public void FluentProgressRing_Stroke_Indeterminate()
     {
         // Arrange && Act
-        var cut = Render(@<FluentProgressRing Min="0" Max="100" Stroke="ProgressStrokes.Thin" />);
+        var cut = Render(@<FluentProgressRing Min="0" Max="100" Stroke="ProgressStroke.Small" />);
 
         // Assert
         cut.Verify();

tests/Core/Progress/FluentProgressTests.razor

@@ -58,7 +58,7 @@
     public void FluentProgress_Stroke()
     {
         // Arrange && Act
-        var cut = Render(@<FluentProgress Min="0" Max="100" Value="30" Stroke="ProgressStrokes.Large" />);
+        var cut = Render(@<FluentProgress Min="0" Max="100" Value="30" Stroke="ProgressStroke.Large" />);
 
         // Assert
         cut.Verify();