Users/dvoituron/dev v5/progressbar visible (#3771)

Author: dvoituron

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Progress/Examples/ProgressBarVisible.razor

@@ -0,0 +1,24 @@
+<FluentStack Orientation="@Orientation.Vertical">    
+    <div>
+        Content before the ProgressBar
+    </div>
+    <FluentProgressBar Width="200px" Visible="@Visible" Style="height: 5px;" />
+    <div>
+        Content after the ProgressBar
+    </div>
+</FluentStack>
+
+<FluentSelect Items="@([true, false, null])"
+              OptionText="@(i => GetVisibleText(i) )"
+              TOption="bool?"
+              @bind-Value="@Visible" />
+
+@code
+{
+    bool? Visible = true;
+
+    string GetVisibleText(bool? visible)
+    {
+        return $"Visible = {(visible.HasValue ? (visible == true ? "true" : "false") : "null")}";
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Progress/Examples/SpinnerVisible.razor

@@ -0,0 +1,24 @@
+<FluentStack Orientation="@Orientation.Vertical">    
+    <div>
+        Content before the ProgressBar
+    </div>
+    <FluentSpinner Visible="@Visible" />
+    <div>
+        Content after the ProgressBar
+    </div>
+</FluentStack>
+
+<FluentSelect Items="@([true, false, null])"
+              OptionText="@(i => GetVisibleText(i) )"
+              TOption="bool?"
+              @bind-Value="@Visible" />
+
+@code
+{
+    bool? Visible = true;
+
+    string GetVisibleText(bool? visible)
+    {
+        return $"Visible = {(visible.HasValue ? (visible == true ? "true" : "false") : "null")}";
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Progress/FluentProgressBar.md

@@ -40,6 +40,16 @@ The background color of the progress bar can be set using the `BackgroundColor`
 
 {{ ProgressBarState }}
 
+## Visible
+
+The `Visible` parameter can be used to show or hide the progress bar.
+This parameter is nullable:
+- If `true` (default), the component is visible.
+- If `false`, the component is hidden.
+- If `null`, the component is hidden and not rendered.
+
+{{ ProgressBarVisible }}
+
 ## API FluentProgressBar
 
 {{ API Type=FluentProgressBar }}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Progress/FluentSpinner.md

@@ -38,6 +38,16 @@ In some situations, you may need to display a spinner on a dark background.
 
 {{ SpinnerInverted }}
 
+## Visible
+
+The `Visible` parameter can be used to show or hide the progress bar.
+This parameter is nullable:
+- If `true` (default), the component is visible.
+- If `false`, the component is hidden.
+- If `null`, the component is hidden and not rendered.
+
+{{ SpinnerVisible }}
+
 ## API FluentSpinner
 
 {{ API Type=FluentSpinner }}

src/Core/Components/Progress/FluentProgressBar.razor

@@ -2,7 +2,7 @@
 @using Microsoft.FluentUI.AspNetCore.Components.Extensions
 @inherits FluentComponentBase
 
-@if (Visible)
+@if (Visible.HasValue)
 {
     @if (HasCustomStyle)
     {

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

@@ -21,6 +21,7 @@ public partial class FluentProgressBar : FluentComponentBase, ITooltipComponent
 
     /// <summary />
     protected string? StyleValue => DefaultStyleBuilder
+        .AddStyle("visibility", "hidden", () => Visible == false)
         .AddStyle("width", Width, () => !string.IsNullOrEmpty(Width))
         .AddStyle("background-color", BackgroundColor, () => !string.IsNullOrEmpty(BackgroundColor))
         .Build();
@@ -52,10 +53,13 @@ public partial class FluentProgressBar : FluentComponentBase, ITooltipComponent
     public int? Value { get; set; }
 
     /// <summary>
-    /// Gets or sets the visibility of the component
+    /// Gets or sets the visibility of the component.
+    /// If `true` (default), the component is visible.
+    /// If `false`, the component is hidden.
+    /// If `null`, the component is hidden and not rendered.
     /// </summary>
     [Parameter]
-    public bool Visible { get; set; } = true;
+    public bool? Visible { get; set; } = true;
 
     /// <summary>
     /// Gets or sets the component width.

src/Core/Components/Progress/FluentSpinner.razor

@@ -2,7 +2,7 @@
 @using Microsoft.FluentUI.AspNetCore.Components.Extensions
 @inherits FluentComponentBase
 
-@if (Visible)
+@if (Visible.HasValue)
 {
     <fluent-spinner id="@Id"
                     class="@ClassValue"

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

@@ -17,13 +17,17 @@ public partial class FluentSpinner : FluentComponentBase, ITooltipComponent
 
     /// <summary />
     protected string? StyleValue => DefaultStyleBuilder
+        .AddStyle("visibility", "hidden", () => Visible == false)
         .Build();
 
     /// <summary>
-    /// Gets or sets the visibility of the component
+    /// Gets or sets the visibility of the component.
+    /// If `true` (default), the component is visible.
+    /// If `false`, the component is hidden.
+    /// If `null`, the component is hidden and not rendered.
     /// </summary>
     [Parameter]
-    public bool Visible { get; set; } = true;
+    public bool? Visible { get; set; } = true;
 
     /// <summary>
     /// Gets or sets whether the spinner should be shown in an inverted color scheme (i.e. light spinner on dark background)

tests/Core/Components/Progress/FluentProgressBarTests.razor

@@ -34,19 +34,28 @@
     [Theory]
     [InlineData(true)]
     [InlineData(false)]
-    public void FluentProgressBar_Visible(bool visible)
+    [InlineData(null)]
+    public void FluentProgressBar_Visible(bool? visible)
     {
         // Act
         var cut = Render(@<FluentProgressBar Visible="@visible" />);
 
         // Assert
-        if (visible)
-        {
-            Assert.NotEmpty(cut.Markup);
-        }
-        else
+        switch (visible)
         {
-            Assert.Empty(cut.Markup);
+            case true:
+                Assert.NotEmpty(cut.Markup);
+                Assert.DoesNotContain("visibility: hidden", cut.Markup);
+                break;
+
+            case false:
+                Assert.NotEmpty(cut.Markup);
+                Assert.Contains("visibility: hidden", cut.Markup);
+                break;
+
+            default:
+                Assert.Empty(cut.Markup);
+                break;
         }
     }
 

tests/Core/Components/Progress/FluentSpinnerTests.razor

@@ -59,6 +59,34 @@
         }
     }
 
+    [Theory]
+    [InlineData(true)]
+    [InlineData(false)]
+    [InlineData(null)]
+    public void FluentSpinner_Visible(bool? visible)
+    {
+        // Act
+        var cut = Render(@<FluentSpinner Visible="@visible" />);
+
+        // Assert
+        switch (visible)
+        {
+            case true:
+                Assert.NotEmpty(cut.Markup);
+                Assert.DoesNotContain("visibility: hidden", cut.Markup);
+                break;
+
+            case false:
+                Assert.NotEmpty(cut.Markup);
+                Assert.Contains("visibility: hidden", cut.Markup);
+                break;
+
+            default:
+                Assert.Empty(cut.Markup);
+                break;
+        }
+    }
+
 #pragma warning disable CS0618
     [Theory]
     [InlineData(ProgressStroke.Small, "small")]