Update the Visible property

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)