Checkbox: Add LabelPosition property to specify the label's Start/End…

… position (MudBlazor#5163)
jammerware · Sep 20, 2022 · 3ac4c34 · 3ac4c34
1 parent b37edf5
commit 3ac4c34
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 7 deletions.
diff --git a/src/MudBlazor.Docs/Pages/Components/Checkbox/CheckboxPage.razor b/src/MudBlazor.Docs/Pages/Components/Checkbox/CheckboxPage.razor
@@ -28,7 +28,10 @@
 
         <DocsPageSection>
             <SectionHeader Title="Labels">
-                <Description></Description>
+                <Description>
+                    Text can be added using the <CodeInline>Label</CodeInline> property and its
+                    position can be specified using the <CodeInline>LabelPosition</CodeInline> property
+                </Description>
             </SectionHeader>
             <SectionContent Code="CheckboxLabelExample">
                 <CheckboxLabelExample />

diff --git a/src/MudBlazor.Docs/Pages/Components/Checkbox/Examples/CheckboxLabelExample.razor b/src/MudBlazor.Docs/Pages/Components/Checkbox/Examples/CheckboxLabelExample.razor
@@ -2,8 +2,8 @@
 
 <MudCheckBox @bind-Checked="@Label_CheckBox1" Label="Default"></MudCheckBox>
 <MudCheckBox @bind-Checked="@Label_CheckBox2" Label="Primary" Color="Color.Primary"></MudCheckBox>
-<MudCheckBox @bind-Checked="@Label_CheckBox3" Label="Secondary" Color="Color.Secondary"></MudCheckBox>
-<MudCheckBox @bind-Checked="@Label_CheckBox1" Disabled="true" Label="Disabled"></MudCheckBox>
+<MudCheckBox @bind-Checked="@Label_CheckBox3" Label="Secondary" LabelPosition="LabelPosition.Start" Color="Color.Secondary"></MudCheckBox>
+<MudCheckBox @bind-Checked="@Label_CheckBox1" Disabled="true" Label="Disabled" LabelPosition="LabelPosition.Start"></MudCheckBox>
 
 @code {
     public bool Label_CheckBox1 { get; set; } = true;

diff --git a/src/MudBlazor.UnitTests/Components/CheckBoxTests.cs b/src/MudBlazor.UnitTests/Components/CheckBoxTests.cs
@@ -1,10 +1,9 @@
-
-using System;
+using System;
 using System.Linq;
-using System.Threading.Tasks;
 using Bunit;
 using FluentAssertions;
 using Microsoft.AspNetCore.Components.Web;
+using MudBlazor.Docs.Examples;
 using MudBlazor.Extensions;
 using MudBlazor.UnitTests.TestComponents;
 using NUnit.Framework;
@@ -323,5 +322,24 @@ public void CheckBoxColorTest(Color color, Color uncheckedcolor)
             box.Checked.Should().Be(true);
             checkboxClasses.ClassList.Should().ContainInOrder(new[] { $"mud-{color.ToDescriptionString()}-text", $"hover:mud-{color.ToDescriptionString()}-hover" });
         }
+
+        [Test]
+        public void CheckBoxDisabledTest()
+        {
+            var comp = Context.RenderComponent<CheckboxLabelExample>();
+            var checkboxes = comp.FindAll("label.mud-checkbox");
+            checkboxes[3].ClassList.Should().Contain("mud-disabled"); // 4rd checkbox
+        }
+
+        [Test]
+        public void CheckBoxLabelPositionTest()
+        {
+            var comp = Context.RenderComponent<CheckboxLabelExample>();
+            //Console.WriteLine(comp.Markup);
+            var checkboxes = comp.FindAll("label.mud-checkbox");
+
+            checkboxes[0].ClassList.Should().Contain("mud-ltr"); // 1st checkbox: (default) LabelPosition.End
+            checkboxes[2].ClassList.Should().Contain("mud-rtl"); // 3rd checkbox: LabelPosition.Start
+        }
     }
 }
diff --git a/src/MudBlazor/Components/CheckBox/MudCheckBox.razor.cs b/src/MudBlazor/Components/CheckBox/MudCheckBox.razor.cs
@@ -19,6 +19,7 @@ public partial class MudCheckBox<T> : MudBooleanInput<T>
         new CssBuilder("mud-checkbox")
             .AddClass($"mud-disabled", Disabled)
             .AddClass($"mud-readonly", ReadOnly)
+            .AddClass(LabelPosition == LabelPosition.End ? "mud-ltr" : "mud-rtl", true)
         .Build();
 
         protected string CheckBoxClassname =>
@@ -46,12 +47,19 @@ public partial class MudCheckBox<T> : MudBooleanInput<T>
         public Color? UnCheckedColor { get; set; } = null;
 
         /// <summary>
-        /// If applied the text will be added to the component.
+        /// The text/label will be displayed next to the checkbox if set.
         /// </summary>
         [Parameter]
         [Category(CategoryTypes.FormComponent.Behavior)]
         public string Label { get; set; }
 
+        /// <summary>
+        /// The position of the text/label.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.FormComponent.Behavior)]
+        public LabelPosition LabelPosition { get; set; } = LabelPosition.End;
+
         /// <summary>
         /// If true, the checkbox can be controlled with the keyboard.
         /// </summary>