[dev-v5] Refactor FluentCheckbox and FluentSwitch to use ChildContent

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationFluentCheckbox.md

@@ -4,19 +4,6 @@ route: /Migration/Checkbox
 hidden: true
 ---
 
-### ChildContent removed 💥
-
-In V5, `FluentCheckbox` no longer accepts `ChildContent` for the label.
-Use the `Label` property or `LabelTemplate` from the `FluentField` wrapper instead.
-
-```xml
-<!-- V4 -->
-<FluentCheckbox @bind-Value="isChecked">Accept terms</FluentCheckbox>
-
-<!-- V5 -->
-<FluentCheckbox @bind-Value="isChecked" Label="Accept terms" />
-```
-
 ### New parameters
 
 - `Element` (`ElementReference`) — reference to the underlying HTML element.

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationFluentSwitch.md

@@ -5,7 +5,6 @@ hidden: true
 ---
 
 ### Removed values💥
-The `ChildContent` property has been removed. Use `Label` instead.
 
 The `CheckedMessage` and `UncheckedMessage` properties have been removed.
 

src/Core/Components/Checkbox/FluentCheckbox.razor

@@ -2,7 +2,12 @@
 @using Microsoft.FluentUI.AspNetCore.Components.Extensions
 @inherits FluentInputBase<bool>
 
-<FluentField InputComponent="@this" ForId="@Id" Class="@ClassValue" Style="@StyleValue" Size="@Size.ToFieldSize()">
+<FluentField InputComponent="@this"
+             ForId="@Id"
+             Class="@ClassValue"
+             Style="@StyleValue"
+             LabelTemplate="@LabelTemplate.CombinedWith(ChildContent)"
+             Size="@Size.ToFieldSize()">
     <fluent-checkbox @ref="@Element"
                      aria-label="@AriaLabel"
                      autofocus="@Autofocus"

src/Core/Components/Checkbox/FluentCheckbox.razor.cs

@@ -80,6 +80,13 @@ public FluentCheckbox(LibraryConfiguration configuration) : base(configuration)
     [Parameter]
     public string? Tooltip { get; set; }
 
+    /// <summary>
+    /// The content to be rendered inside the checkbox component.
+    /// This is similar to set the <c>Label</c> or <c>LabelTemplate</c> parameter.
+    /// </summary>
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
     /// <summary>
     /// Handler for the OnFocus event.
     /// </summary>

src/Core/Components/Field/FluentFieldExtensions.cs

@@ -2,6 +2,8 @@
 // This file is licensed to you under the MIT License.
 // ------------------------------------------------------------------------
 
+using Microsoft.AspNetCore.Components;
+
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
 /// <summary>
@@ -19,4 +21,31 @@ public static FluentFieldConditionItem When(this IFluentField fluentField, Func<
     {
         return new FluentFieldCondition(fluentField).When(condition);
     }
+
+    /// <summary>
+    /// Combines two <see cref="RenderFragment"/> instances into one. If both fragments are null, returns null.
+    /// </summary>
+    /// <param name="item1"></param>
+    /// <param name="item2"></param>
+    /// <returns></returns>
+    public static RenderFragment? CombinedWith(this RenderFragment? item1, RenderFragment? item2)
+    {
+        if (item1 is null && item2 is null)
+        {
+            return null;
+        }
+
+        return builder =>
+        {
+            if (item1 is not null)
+            {
+                builder.AddContent(0, item1);
+            }
+
+            if (item2 is not null)
+            {
+                builder.AddContent(1, item2);
+            }
+        };
+    }
 }

src/Core/Components/Switch/FluentSwitch.razor

@@ -2,7 +2,12 @@
 @using Microsoft.FluentUI.AspNetCore.Components.Extensions
 @inherits FluentInputBase<bool>
 
-<FluentField InputComponent="@this" ForId="@Id" Class="@ClassValue" Style="@StyleValue" Label="@GetLabel"
+<FluentField InputComponent="@this"
+             ForId="@Id"
+             Class="@ClassValue"
+             Style="@StyleValue"
+             Label="@GetLabel"
+             LabelTemplate="@LabelTemplate.CombinedWith(ChildContent)"
              tabindex="@AdditionalAttributes.GetValueIfNoAdditionalAttribute("tabindex", "-1", when: () => ReadOnly)">
     <fluent-switch @ref="@Element"
                    aria-label="@AriaLabel"

src/Core/Components/Switch/FluentSwitch.razor.cs

@@ -30,6 +30,13 @@ public FluentSwitch(LibraryConfiguration configuration) : base(configuration)
     [Parameter]
     public string? Tooltip { get; set; }
 
+    /// <summary>
+    /// The content to be rendered inside the switch component.
+    /// This is similar to set the <c>Label</c> or <c>LabelTemplate</c> parameter.
+    /// </summary>
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
     /// <summary />
     protected override async Task OnInitializedAsync()
     {

src/Core/Migration/FluentSwitch.cs

@@ -8,13 +8,6 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 
 public partial class FluentSwitch
 {
-    /// <summary>
-    /// Gets or sets the content to be rendered inside the component.
-    /// </summary>
-    [Parameter]
-    [Obsolete("This property is not supported anymore and will be removed in a future release.")]
-    public RenderFragment? ChildContent { get; set; }
-
     /// <summary>
     /// Gets or sets the checked message
     /// </summary>

tests/Core/Components/Checkbox/FluentCheckboxTests.razor

@@ -192,4 +192,43 @@
         // Assert
         Assert.Equal(expectedValue, value);
     }
+
+    [Fact]
+    public void FluentCheckbox_Label_ChildContent()
+    {
+        // Arrange
+        var cut = Render(@<FluentCheckbox>Content</FluentCheckbox>);
+
+        // Act
+        var label = cut.Find("label").TextContent.Replace("\n", "").Replace("\r", "").Replace(" ", "");
+
+        // Assert
+        Assert.Equal("Content", label);
+    }
+
+    [Fact]
+    public void FluentCheckbox_Label_LabelAndChildContent()
+    {
+        // Arrange
+        var cut = Render(@<FluentCheckbox Label="Label">Content</FluentCheckbox>);
+
+        // Act
+        var label = cut.Find("label").TextContent.Replace("\n", "").Replace("\r", "").Replace(" ", "");
+
+        // Assert
+        Assert.Equal("LabelContent", label);
+    }
+
+     [Fact]
+    public void FluentCheckbox_Label_LabelTemplateAndChildContent()
+    {
+        // Arrange
+        var cut = Render(@<FluentCheckbox><LabelTemplate>LabelTemplate</LabelTemplate><ChildContent>Content</ChildContent></FluentCheckbox>);
+
+        // Act
+        var label = cut.Find("label").TextContent.Replace("\n", "").Replace("\r", "").Replace(" ", "");
+
+        // Assert
+        Assert.Equal("LabelTemplateContent", label);
+    }
 }

tests/Core/Components/Switch/FluentSwitchTests.razor

@@ -97,22 +97,47 @@
         Assert.Throws<NotSupportedException>(() => fluentSwitch.InternalTryParseValueFromString(string.Empty, out var parsedValue, out var validationErrorMessage));
     }
 
-#pragma warning disable CS0618
+    [Fact]
+    public void FluentSwitch_Label_ChildContent()
+    {
+        // Arrange
+        var cut = Render(@<FluentSwitch>Content</FluentSwitch>);
+
+        // Act
+        var label = cut.Find("label").TextContent.Replace("\n", "").Replace("\r", "").Replace(" ", "");
+
+        // Assert
+        Assert.Equal("Content", label);
+    }
 
     [Fact]
-    public void FluentSwitch_ChildContent()
+    public void FluentSwitch_Label_LabelAndChildContent()
     {
         // Arrange
-        var cut = Render(@<FluentSwitch>My Label</FluentSwitch>);
+        var cut = Render(@<FluentSwitch Label="Label">Content</FluentSwitch>);
 
         // Act
-        var label = cut.FindAll("fluent-field > label");
+        var label = cut.Find("label").TextContent.Replace("\n", "").Replace("\r", "").Replace(" ", "");
 
         // Assert
-        Assert.Empty(label);
-        Assert.DoesNotContain("My Label", cut.Markup);
+        Assert.Equal("LabelContent", label);
     }
 
+     [Fact]
+    public void FluentSwitch_Label_LabelTemplateAndChildContent()
+    {
+        // Arrange
+        var cut = Render(@<FluentSwitch><LabelTemplate>LabelTemplate</LabelTemplate><ChildContent>Content</ChildContent></FluentSwitch>);
+
+        // Act
+        var label = cut.Find("label").TextContent.Replace("\n", "").Replace("\r", "").Replace(" ", "");
+
+        // Assert
+        Assert.Equal("LabelTemplateContent", label);
+    }
+
+#pragma warning disable CS0618
+
     [Theory]
     [InlineData(false, "Is unchecked")]
     [InlineData(true, "Is checked")]