[FluentProgress] Add Width, Stroke, Color and BackgroundColor attribu…

…tes (#1121) - v3 * Add Width, Stroke and Color * Add Stroke for ProgressBar * Add Unit Tests * Update doc * Remove one crazy test (onl on server) --------- Co-authored-by: Vincent Baaij <[email protected]>
microsoft · Dec 15, 2023 · ecfa844 · ecfa844
1 parent 57a41cd
commit ecfa844
Show file tree

Hide file tree

Showing 30 changed files with 453 additions and 84 deletions.
diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -5674,6 +5674,16 @@
             Gets or sets the current value.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProgress.Visible">
+            <summary>
+            Gets or sets the visibility of the component
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProgress.Width">
+            <summary>
+            Gets or sets the component width.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProgress.Paused">
             <summary>
             Gets or sets a value indicating whether the progress element is paused.
@@ -5684,6 +5694,21 @@
             Gets or sets the content to be rendered inside the component.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProgress.Stroke">
+            <summary>
+            Gets or sets the stroke width of the progress bar. If not set, the default theme stroke width is used.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProgress.Color">
+            <summary>
+            Gets or sets the color to be used for the progress bar. If not set, the default theme color is used.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProgress.BackgroundColor">
+            <summary>
+            Gets or sets the color to be used for the background. If not set, the default theme color is used.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProgressRing.Min">
             <summary>
             Gets or sets the minimum value 
@@ -5709,6 +5734,21 @@
             Gets or sets the content to be rendered inside the component.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProgressRing.Width">
+            <summary>
+            Gets or sets the component width and height.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProgressRing.Stroke">
+            <summary>
+            Gets or sets the stroke width of the progress ring. If not set, the default theme stroke width is used.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProgressRing.Color">
+            <summary>
+            Gets or sets the color to be used for the progress ring. If not set, the default theme color is used.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentRadio`1.Context">
             <summary>
             Gets context for this <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentRadio`1"/>. 

diff --git a/examples/Demo/Shared/Pages/Progress/Examples/ProgressStroke.razor b/examples/Demo/Shared/Pages/Progress/Examples/ProgressStroke.razor
@@ -0,0 +1,23 @@
+<h4>Stroke and Color</h4>
+
+<FluentSelect Label="Width" Items="@(new [] { ProgressStrokes.Thin, ProgressStrokes.Normal, ProgressStrokes.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" />
+
+<FluentStack Style="margin: 30px;">
+    <FluentLabel Style="width: 20px;">@Percentage</FluentLabel>
+
+    <FluentProgress Min="0" Max="100" Value="@(Indeterminate ? null : Percentage)"
+                    Width="200px"
+                    Stroke="@Stroke"
+                    Color="@(Color.ToAttributeValue())" />
+</FluentStack>
+
+@code
+{
+    ProgressStrokes Stroke = ProgressStrokes.Normal;
+    int Percentage = 30;
+    bool Indeterminate = false;
+    OfficeColor Color = OfficeColor.Default;
+}
diff --git a/examples/Demo/Shared/Pages/Progress/ProgressPage.razor b/examples/Demo/Shared/Pages/Progress/ProgressPage.razor
@@ -25,6 +25,8 @@
 
 <DemoSection Title="Default" Component="@typeof(ProgressDefault)"></DemoSection>
 
+<DemoSection Title="Stroke and Color" Component="@typeof(ProgressStroke)"></DemoSection>
+
 <DemoSection Title="Paused" Component="@typeof(ProgressPaused)"></DemoSection>
 
 <h2 id="documentation">Documentation</h2>

diff --git a/examples/Demo/Shared/Pages/ProgressRing/Examples/ProgressRingCustomSizes.razor b/examples/Demo/Shared/Pages/ProgressRing/Examples/ProgressRingCustomSizes.razor
@@ -1,15 +1,15 @@
 <h4>Custom Sizes</h4>
-<div style="display: grid; grid-gap: 12px; grid-auto-flow: column;">
+<FluentStack>
     <FluentProgressRing Min="0" Max="100" Value="20"></FluentProgressRing>
     <FluentProgressRing Min="0" Max="100" Value="40" style="width: 42px; height: 42px;"></FluentProgressRing>
     <FluentProgressRing Min="0" Max="100" Value="60" style="width: 62px; height: 62px;"></FluentProgressRing>
     <FluentProgressRing Min="0" Max="100" Value="80" style="width: 82px; height: 82px;"></FluentProgressRing>
     <FluentProgressRing Min="0" Max="100" Value="100" style="width: 102px; height: 102px;"></FluentProgressRing>
-</div>
-<div style="display: grid; grid-gap: 12px; grid-auto-flow: column;">
+</FluentStack>
+<FluentStack>
     <FluentProgressRing></FluentProgressRing>
     <FluentProgressRing style="width: 42px; height: 42px;"></FluentProgressRing>
     <FluentProgressRing style="width: 62px; height: 62px;"></FluentProgressRing>
     <FluentProgressRing style="width: 82px; height: 82px;"></FluentProgressRing>
     <FluentProgressRing style="width: 102px; height: 102px;"></FluentProgressRing>
-</div>
+</FluentStack>
diff --git a/examples/Demo/Shared/Pages/ProgressRing/Examples/ProgressRingPaused.razor b/examples/Demo/Shared/Pages/ProgressRing/Examples/ProgressRingPaused.razor
@@ -1,5 +1,5 @@
 <h4>Paused</h4>
-<div style="width: 300px; display: grid; grid-gap: 12px; grid-auto-flow: column;">
+<FluentStack>
     <FluentProgressRing Paused="true" Min="0" Max="100" Value="75"></FluentProgressRing>
     <FluentProgressRing Paused="true"></FluentProgressRing>
-</div>
+</FluentStack>
diff --git a/examples/Demo/Shared/Pages/ProgressRing/Examples/ProgressRingStroke.razor b/examples/Demo/Shared/Pages/ProgressRing/Examples/ProgressRingStroke.razor
@@ -0,0 +1,33 @@
+<h4>Stroke and Color</h4>
+
+<FluentSelect Label="Width" Items="@(new [] { ProgressStrokes.Thin, ProgressStrokes.Normal, ProgressStrokes.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" />
+
+<FluentStack Style="margin: 30px;">
+    <FluentLabel Style="width: 20px;">@Percentage</FluentLabel>
+
+    <FluentProgressRing Value="@(Indeterminate ? null : Percentage)"
+                        Width="32px"
+                        Stroke="@Stroke"
+                        Color="@(Color.ToAttributeValue())" />
+
+    <FluentProgressRing Value="@(Indeterminate ? null : Percentage)"
+                        Width="64px"
+                        Stroke="@Stroke"
+                        Color="@(Color.ToAttributeValue())" />
+
+    <FluentProgressRing Value="@(Indeterminate ? null : Percentage)"
+                        Width="128px"
+                        Stroke="@Stroke"
+                        Color="@(Color.ToAttributeValue())" />
+</FluentStack>
+
+@code
+{
+    ProgressStrokes Stroke = ProgressStrokes.Normal;
+    int Percentage = 30;
+    bool Indeterminate = false;
+    OfficeColor Color = OfficeColor.Default;
+}
diff --git a/examples/Demo/Shared/Pages/ProgressRing/ProgressRingPage.razor b/examples/Demo/Shared/Pages/ProgressRing/ProgressRingPage.razor
@@ -24,6 +24,8 @@
 
 <DemoSection Title="Default" Component="@typeof(ProgressRingDefault)" />
 
+<DemoSection Title="Stroke and Color" Component="@typeof(ProgressRingStroke)"></DemoSection>
+
 <DemoSection Title="Paused" Component="@typeof(ProgressRingPaused)" />
 
 <DemoSection Title="Custom sizes" Component="@typeof(ProgressRingCustomSizes)"></DemoSection>

diff --git a/src/Core/Components/Progress/FluentProgress.razor b/src/Core/Components/Progress/FluentProgress.razor
@@ -2,7 +2,25 @@
 @inherits FluentComponentBase
 @if (Visible)
 {
-    <fluent-progress @ref=Element
+    if (Stroke != ProgressStrokes.Normal || !string.IsNullOrEmpty(Color) || !string.IsNullOrEmpty(BackgroundColor))
+    {
+        <style>
+            @if (Value == null)
+            {
+                @($" #{Id}::part(progress) {{ {StyleIndeterminate} }}")
+                @($" #{Id}::part(indeterminate-indicator-1) {{ {StyleIndeterminateIndicator} }}")
+                @($" #{Id}::part(indeterminate-indicator-2) {{ {StyleIndeterminateIndicator} }}")
+            }
+            else
+            {
+                @($" #{Id}::part(progress) {{ {StyleProgress} }}")
+                @($" #{Id}::part(determinate) {{ {StyleProgressIndicator} }}")
+            }
+        </style>
+    }
+
+    <fluent-progress id="@Id"
+                     @ref=Element
                      class="@ClassValue"
                      style="@StyleValue"
                      min="@Min"

diff --git a/src/Core/Components/Progress/FluentProgress.razor.cs b/src/Core/Components/Progress/FluentProgress.razor.cs
@@ -9,8 +9,14 @@ public partial class FluentProgress : FluentComponentBase
         .Build();
 
     protected string? StyleValue => new StyleBuilder(Style)
+        .AddStyle("width", Width, () => !string.IsNullOrEmpty(Width))
         .Build();
 
+    public FluentProgress()
+    {
+        Id = Identifier.NewId();
+    }
+
     /// <summary>
     /// Gets or sets the minimum value 
     /// </summary>
@@ -29,13 +35,20 @@ public partial class FluentProgress : FluentComponentBase
     [Parameter]
     public int? Value { get; set; }
 
-
-
+    /// <summary>
+    /// Gets or sets the visibility of the component
+    /// </summary>
     [Parameter]
     public bool Visible { get; set; } = true;
 
     /// <summary>
-    /// Gets or sets if the progress element is paused
+    /// Gets or sets the component width.
+    /// </summary>
+    [Parameter]
+    public string? Width { get; set; }
+
+    /// <summary>
+    /// Gets or sets a value indicating whether the progress element is paused.
     /// </summary>
     [Parameter]
     public bool? Paused { get; set; }
@@ -45,4 +58,41 @@ public partial class FluentProgress : FluentComponentBase
     /// </summary>
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>
+    /// 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;
+
+    /// <summary>
+    /// Gets or sets the color to be used for the progress bar. If not set, the default theme color is used.
+    /// </summary>
+    [Parameter]
+    public string? Color { get; set; }
+
+    /// <summary>
+    /// Gets or sets the color to be used for the background. If not set, the default theme color is used.
+    /// </summary>
+    [Parameter]
+    public string? BackgroundColor { get; set; }
+
+    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"),
+        _ => throw new NotImplementedException(),
+    };    
+    private string StyleProgress => $"height: calc((var(--stroke-width) * {StrokeDetails.BackgroundHeight}) * 1px); " +
+                                    $"background-color: {(string.IsNullOrEmpty(BackgroundColor) ? $"var({StrokeDetails.DefaultBackgroundColor})" : BackgroundColor)};";
+
+    private string StyleProgressIndicator => $"height: calc((var(--stroke-width) * {StrokeDetails.BarHeight}) * 1px); " +
+                                             $"background-color: {(string.IsNullOrEmpty(Color) ? "var(--accent-fill-rest)" : Color)};";
+
+    private string StyleIndeterminate => $"--stroke-width: {((double)StrokeDetails.BarHeight / 3d).ToString("0.00")}; " +
+                                         $"height: calc((1 * {StrokeDetails.BackgroundHeight}) * 1px); " +
+                                         $"background-color: {(string.IsNullOrEmpty(BackgroundColor) ? $"var({StrokeDetails.DefaultBackgroundColor})" : BackgroundColor)};";
+
+    private string StyleIndeterminateIndicator => $"background-color: {(string.IsNullOrEmpty(Color) ? "var(--accent-fill-rest)" : Color)};";
 }
diff --git a/src/Core/Components/Progress/FluentProgressRing.razor b/src/Core/Components/Progress/FluentProgressRing.razor
@@ -2,13 +2,22 @@
 @inherits FluentComponentBase
 @if (Visible)
 {
-    <fluent-progress-ring @ref=Element
+    if (Stroke != ProgressStrokes.Normal || !string.IsNullOrEmpty(Color))
+    {
+        <style>
+            @($"#{Id}::part(background) {{ {StyleBackground} }}")
+            @($"#{Id}::part({(Value == null ? "indeterminate-indicator-1" : "determinate")}) {{ {StyleIndicator} }}")
+        </style>
+    }
+
+    <fluent-progress-ring id="@Id"
+                          @ref=Element
                           class="@ClassValue"
                           style="@StyleValue"
                           min="@Min"
                           max="@Max"
                           value="@Value"
-                          Paused="@Paused"
+                          paused="@Paused"
                           @attributes="AdditionalAttributes">
         @ChildContent
     </fluent-progress-ring>

diff --git a/src/Core/Components/Progress/FluentProgressRing.razor.cs b/src/Core/Components/Progress/FluentProgressRing.razor.cs
@@ -9,8 +9,15 @@ public partial class FluentProgressRing : FluentComponentBase
         .Build();
 
     protected string? StyleValue => new StyleBuilder(Style)
+        .AddStyle("width", Width, () => !string.IsNullOrEmpty(Width))
+        .AddStyle("height", Width, () => !string.IsNullOrEmpty(Width))
         .Build();
 
+    public FluentProgressRing()
+    {
+        Id = Identifier.NewId();
+    }
+
     /// <summary>
     /// Gets or sets the minimum value 
     /// </summary>
@@ -44,4 +51,38 @@ public partial class FluentProgressRing : FluentComponentBase
     /// </summary>
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>
+    /// Gets or sets the component width and height.
+    /// </summary>
+    [Parameter]
+    public string? Width { get; set; }
+
+    /// <summary>
+    /// 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;
+
+    /// <summary>
+    /// Gets or sets the color to be used for the progress ring. If not set, the default theme color is used.
+    /// </summary>
+    [Parameter]
+    public string? Color { get; set; }
+
+    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)),
+        _ => throw new NotImplementedException(),
+    };
+
+    private string StyleBackground => $"stroke-width: {StrokeDetails.Width}px; " + 
+                                      $"r: {StrokeDetails.Radius}px;";
+
+    private string StyleIndicator => $"stroke-width: {StrokeDetails.Width}px; " + 
+                                     $"r: {StrokeDetails.Radius}px; " + 
+                                     $"stroke-dashoffset: {StrokeDetails.Dashoffset}px; " + 
+                                     $"stroke: {(string.IsNullOrEmpty(Color) ? "var(--accent-fill-rest)" : Color )};";
 }
diff --git a/src/Core/Enums/ProgressStrokes.cs b/src/Core/Enums/ProgressStrokes.cs
@@ -0,0 +1,8 @@
+namespace Microsoft.FluentUI.AspNetCore.Components;
+
+public enum ProgressStrokes
+{
+    Normal,
+    Thin,
+    Large,
+}
diff --git a/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Colors.verified.razor.html b/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Colors.verified.razor.html
@@ -0,0 +1,6 @@
+
+<style>
+  #f29effe6b::part(background) { stroke-width: 2px; r: 7px; }
+  #f29effe6b::part(determinate) { stroke-width: 2px; r: 7px; stroke-dashoffset: 0px; stroke: red; }
+</style>
+<fluent-progress-ring id="xxx" min="0" max="100" value="30" backgroundcolor="gray" blazor:elementreference="xxx"></fluent-progress-ring>
diff --git a/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Content.verified.razor.html b/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Content.verified.razor.html
@@ -0,0 +1,2 @@
+
+<fluent-progress-ring id="xxx" min="10" max="80" blazor:elementreference="xxx">My content</fluent-progress-ring>
diff --git a/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Default.verified.razor.html b/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Default.verified.razor.html
@@ -0,0 +1,2 @@
+
+<fluent-progress-ring id="xxx" min="0" max="100" value="30" blazor:elementreference="xxx"></fluent-progress-ring>
diff --git a/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Paused.verified.razor.html b/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Paused.verified.razor.html
@@ -0,0 +1,2 @@
+
+<fluent-progress-ring id="xxx" min="0" max="100" value="30" paused="" blazor:elementreference="xxx"></fluent-progress-ring>
diff --git a/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Stroke.verified.razor.html b/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Stroke.verified.razor.html
@@ -0,0 +1,6 @@
+
+<style>
+  #f6525a78d::part(background) { stroke-width: 4px; r: 6px; }
+  #f6525a78d::part(determinate) { stroke-width: 4px; r: 6px; stroke-dashoffset: 2px; stroke: var(--accent-fill-rest); }
+</style>
+<fluent-progress-ring id="xxx" min="0" max="100" value="30" blazor:elementreference="xxx"></fluent-progress-ring>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@

		<fluent-progress-ring id="xxx" min="10" max="80" blazor:elementreference="xxx">My content</fluent-progress-ring>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@

		<fluent-progress-ring id="xxx" min="0" max="100" value="30" blazor:elementreference="xxx"></fluent-progress-ring>