[Slider] Make label respond to `Disabled` state (#2796)

* Fix #2794 by adding an owning slider cascading parameter and set label's disabled state to owner value

* Undo refactor. not needed anymore

* Fix test

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -8427,7 +8427,7 @@
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSliderLabel`1.Disabled">
             <summary>
-            Gets or sets disabled state of the label. This is generally controlled by the parent.
+            Gets the disabled state of the label. This is controlled by the owning <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentSlider`1"/>.
             </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSliderLabel`1.ChildContent">
@@ -8833,16 +8833,19 @@
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentStack.HorizontalAlignment">
             <summary>
             Gets or sets the horizontal alignment of the components in the stack.
+            Default is <see cref="F:Microsoft.FluentUI.AspNetCore.Components.HorizontalAlignment.Left"/>
             </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentStack.VerticalAlignment">
             <summary>
             Gets or sets the vertical alignment of the components in the stack.
+            Default is <see cref="F:Microsoft.FluentUI.AspNetCore.Components.VerticalAlignment.Top"/>
             </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentStack.Orientation">
             <summary>
             Gets or sets the orientation of the stacked components.
+            Default is <see cref="F:Microsoft.FluentUI.AspNetCore.Components.Orientation.Horizontal"/>.
             </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentStack.Width">

src/Core/Components/Slider/FluentSlider.razor

@@ -2,21 +2,23 @@
 @inherits FluentInputBase<TValue>
 @typeparam TValue
 @attribute [CascadingTypeParameter(nameof(TValue))]
-<FluentInputLabel ForId="@Id" Label="@Label" AriaLabel="@AriaLabel" ChildContent="@LabelTemplate" Required="@Required" style="margin-bottom: calc(var(--design-unit) * 3px);" />
+<CascadingValue Value="this" IsFixed="true">
-<fluent-slider @ref=Element
+    <FluentInputLabel ForId="@Id" Label="@Label" AriaLabel="@AriaLabel" ChildContent="@LabelTemplate" Required="@Required" style="margin-bottom: calc(var(--design-unit) * 3px);" />
-               class="@ClassValue"
+    <fluent-slider @ref=Element
-               style="@StyleValue"
+                   class="@ClassValue"
-               readonly="@ReadOnly"
+                   style="@StyleValue"
-               min="@FormatValueAsString(Min)"
+                   readonly="@ReadOnly"
-               max="@FormatValueAsString(Max)"
+                   min="@FormatValueAsString(Min)"
-               step="@FormatValueAsString(Step)"
+                   max="@FormatValueAsString(Max)"
-               orientation="@Orientation.ToAttributeValue()"
+                   step="@FormatValueAsString(Step)"
-               mode="@Mode.ToAttributeValue()"
+                   orientation="@Orientation.ToAttributeValue()"
-               id="@Id"
+                   mode="@Mode.ToAttributeValue()"
-               value="@FormatValueAsString(Value)"
+                   id="@Id"
-               disabled="@Disabled"
+                   value="@FormatValueAsString(Value)"
-               name=@Name
+                   disabled="@Disabled"
-               required=@Required
+                   name=@Name
-               @onsliderchange="@ChangeHandlerAsync">
+                   required=@Required
-    @ChildContent
+                   @onsliderchange="@ChangeHandlerAsync">
-</fluent-slider>
+        @ChildContent
+    </fluent-slider>
+</CascadingValue>

src/Core/Components/Slider/FluentSliderLabel.razor

@@ -1,6 +1,6 @@
-@namespace Microsoft.FluentUI.AspNetCore.Components
+@namespace Microsoft.FluentUI.AspNetCore.Components
 @inherits FluentComponentBase
-@typeparam TValue
+@typeparam TValue where TValue : System.Numerics.INumber<TValue>
 <fluent-slider-label @ref=Element
                      id="@Id"
                      class="@Class"

src/Core/Components/Slider/FluentSliderLabel.razor.cs

@@ -8,6 +8,7 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 public partial class FluentSliderLabel<TValue> : FluentComponentBase, IAsyncDisposable
 {
     private const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/Slider/FluentSliderLabel.razor.js";
+    private bool? _disabled;
 
     public FluentSliderLabel()
     {
@@ -38,10 +39,17 @@ public partial class FluentSliderLabel<TValue> : FluentComponentBase, IAsyncDisp
     public bool? HideMark { get; set; }
 
     /// <summary>
-    /// Gets or sets disabled state of the label. This is generally controlled by the parent.
+    /// Gets the disabled state of the label. This is controlled by the owning <see cref="FluentSlider{TValue}"/>.
     /// </summary>
     [Parameter]
-    public bool? Disabled { get; set; }
+    public bool? Disabled
+    {
+        get => Owner is null ? _disabled : Owner.Disabled;
+        set => _disabled = Owner is null ? value : Owner.Disabled;
+    }
+
+    [CascadingParameter]
+    internal FluentSlider<TValue> Owner { get; set; } = default!;
 
     /// <summary>
     /// Gets or sets the content to be rendered inside the component.

tests/Core/Slider/FluentSliderLabelTests.FluentSliderLabel_Default.verified.html

@@ -0,0 +1,4 @@
+
+<fluent-slider-label id="xxx" position="0" blazor:elementreference="xxx">
+  <b>render me</b>
+</fluent-slider-label>

tests/Core/Slider/FluentSliderLabelTests.cs

@@ -13,17 +13,21 @@ public class FluentSliderLabelTests : TestBase
     }
 
     [Fact]
-    public void FluentSliderLaber_Default()
+    public void FluentSliderLabel_Default()
     {
+
         //Arrange
+        FluentSlider<int> slider = new();
         var childContent = "<b>render me</b>";
         int position = default!;
         bool? hideMark = default!;
         bool? disabled = default!;
+
         var cut = TestContext.RenderComponent<FluentSliderLabel<int>>(parameters => parameters
             .Add(p => p.Position, position)
             .Add(p => p.HideMark, hideMark)
             .Add(p => p.Disabled, disabled)
+            .AddCascadingValue(slider)
             .AddChildContent(childContent)
         );
         //Act

tests/Core/Slider/FluentSliderLaberTests.FluentSliderLaber_Default.verified.html

@@ -1,4 +0,0 @@
-
-<fluent-slider-label position="0" blazor:elementreference="xxx">
-  <b>render me</b>
-</fluent-slider-label>