feat(blazorui): add Dir to BitDropdown #7103 (#7104)

bitfoundation · Mar 10, 2024 · 518f51a · 518f51a
1 parent 14f5bdb
commit 518f51a
Show file tree

Hide file tree

Showing 11 changed files with 42 additions and 68 deletions.
diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Dropdown/BitDropdownTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Dropdown/BitDropdownTests.cs
@@ -999,25 +999,25 @@ public void BitDropdownCaretDownTemplateTest(string iconFragment)
     }
 
     [DataTestMethod,
-        DataRow(true),
-        DataRow(false)
+        DataRow(BitDir.Rtl),
+        DataRow(BitDir.Ltr)
     ]
-    public void BitDropdownIsRtlTest(bool isRtl)
+    public void BitDropdownDirTest(BitDir dir)
     {
         var component = RenderComponent<BitDropdown<BitDropdownItem<string>, string>>(parameters =>
         {
-            parameters.Add(p => p.IsRtl, isRtl);
+            parameters.Add(p => p.Dir, dir);
         });
 
         var bitDrp = component.Find(".bit-drp");
 
-        if (isRtl)
+        if (dir is BitDir.Rtl)
         {
-            Assert.IsTrue(bitDrp.ClassList.Contains("bit-drp-rtl"));
+            Assert.IsTrue(bitDrp.ClassList.Contains("bit-rtl"));
         }
         else
         {
-            Assert.IsFalse(bitDrp.ClassList.Contains("bit-drp-rtl"));
+            Assert.IsFalse(bitDrp.ClassList.Contains("bit-rtl"));
         }
     }
 

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
@@ -11,6 +11,7 @@
      id="@_Id"
      style="@StyleBuilder.Value"
      class="@ClassBuilder.Value"
+     dir="@Dir?.ToString().ToLower()"
      aria-owns="@(IsOpen ? _calloutId : null)">
 
     @if (LabelTemplate is not null)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
@@ -143,22 +143,6 @@ public bool IsRequired
     [Parameter]
     public bool IsResponsive { get; set; }
 
-    /// <summary>
-    /// Enables the RTL direction for the component.
-    /// </summary>
-    [Parameter]
-    public bool IsRtl
-    {
-        get => isRtl;
-        set
-        {
-            if (isRtl == value) return;
-
-            isRtl = value;
-            ClassBuilder.Reset();
-        }
-    }
-
     /// <summary>
     /// The list of items to display in the callout.
     /// </summary>
@@ -564,8 +548,6 @@ protected override void RegisterCssClasses()
 
         ClassBuilder.Register(() => IsRequired ? $"{RootElementClass}-req" : string.Empty);
 
-        ClassBuilder.Register(() => IsRtl ? $"{RootElementClass}-rtl" : string.Empty);
-
         ClassBuilder.Register(() => _selectedItems?.Count > 0 ? $"{RootElementClass}-hvl" : string.Empty);
 
         ClassBuilder.Register(() => Chips ? $"{RootElementClass}-sch" : string.Empty);
@@ -854,7 +836,7 @@ private async Task ToggleCallout()
                                                     IsOpen,
                                                     IsResponsive ? BitResponsiveMode.Panel : BitResponsiveMode.None,
                                                     DropDirection,
-                                                    IsRtl,
+                                                    Dir is BitDir.Rtl,
                                                     _scrollContainerId,
                                                     ShowSearchBox && Combo is false ? 32 : 0,
                                                     CalloutHeaderTemplate is not null ? _headerId : "",

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss
@@ -81,6 +81,26 @@
         }
     }
 
+    &.bit-rtl {
+        .bit-drp-sb {
+            padding: spacing(0.125) spacing(1) spacing(0.125) 0;
+        }
+
+        .bit-drp-tcn {
+            padding-left: 0;
+            padding-right: spacing(1);
+        }
+
+        .bit-drp-cls {
+            margin-left: unset;
+            margin-right: auto;
+        }
+
+        .bit-drp-rsp {
+            animation-name: bit-fade-show, bit-drp-trans-x-reverse;
+        }
+    }
+
     @keyframes bit-drp-trans-x {
         0% {
             pointer-events: none;
@@ -665,8 +685,8 @@
     display: flex;
     cursor: pointer;
     overflow: hidden;
-    text-align: left;
     font-weight: 400;
+    text-align: start;
     user-select: none;
     position: relative;
     white-space: nowrap;
@@ -777,25 +797,3 @@
         justify-content: space-between;
     }
 }
-
-.bit-drp-rtl {
-    direction: rtl;
-
-    .bit-drp-sb {
-        padding: spacing(0.125) spacing(1) spacing(0.125) 0;
-    }
-
-    .bit-drp-tcn {
-        padding-left: 0;
-        padding-right: spacing(1);
-    }
-
-    .bit-drp-cls {
-        margin-left: unset;
-        margin-right: auto;
-    }
-
-    .bit-drp-rsp {
-        animation-name: bit-fade-show, bit-drp-trans-x-reverse;
-    }
-}
diff --git a/...t/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs b/...t/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
@@ -138,13 +138,6 @@ public partial class BitDropdownDemo
             Description = "Enables the responsive mode of the component for small screens.",
         },
         new()
-        {
-            Name = "IsRtl",
-            Type = "bool",
-            DefaultValue = "false",
-            Description = "Enables the RTL direction for the component.",
-        },
-        new()
         {
             Name = "Items",
             Type = "ICollection<TItem>?",

diff --git a/...t.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor b/...t.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
@@ -381,14 +381,14 @@
                              Items="GetRtlCustoms()"
                              NameSelectors="nameSelectors"
                              Placeholder="لطفا انتخاب کنید"
-                             IsRtl="true" />
+                             Dir="BitDir.Rtl" />
 
                 <BitDropdown Label="چند انتخابی"
                              Items="GetRtlCustoms()"
                              NameSelectors="nameSelectors"
                              Placeholder="انتخاب چند گزینه ای"
                              IsMultiSelect="true"
-                             IsRtl="true" />
+                             Dir="BitDir.Rtl" />
             </div>
         </div>
     </ExamplePreview>

diff --git a/...Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs b/...Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
@@ -722,14 +722,14 @@ public class BitDropdownCustom
              Items=""GetRtlCustoms()""
              NameSelectors=""nameSelectors""
              Placeholder=""لطفا انتخاب کنید""
-             IsRtl=""true"" />
+             Dir=""BitDir.Rtl"" />
 
 <BitDropdown Label=""چند انتخابی""
              Items=""GetRtlCustoms()""
              NameSelectors=""nameSelectors""
              Placeholder=""انتخاب چند گزینه ای""
              IsMultiSelect=""true""
-             IsRtl=""true"" />";
+             Dir=""BitDir.Rtl"" />";
     private readonly string example9CsharpCode = @"
 public class BitDropdownCustom
 {

diff --git a/...Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor b/...Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor
@@ -373,14 +373,14 @@
                              Items="GetRtlItems()"
                              DefaultValue="@string.Empty"
                              Placeholder="لطفا انتخاب کنید"
-                             IsRtl="true" />
+                             Dir="BitDir.Rtl" />
 
                 <BitDropdown Label="چند انتخابی"
                              Items="GetRtlItems()"
                              DefaultValue="@string.Empty"
                              Placeholder="انتخاب چند گزینه ای"
                              IsMultiSelect="true"
-                             IsRtl="true" />
+                             Dir="BitDir.Rtl" />
             </div>
         </div>
     </ExamplePreview>

diff --git a/...I.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs b/...I.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs
@@ -494,14 +494,14 @@ Combo Chips Dynamic
              Items=""GetRtlItems()""
              DefaultValue=""@string.Empty""
              Placeholder=""لطفا انتخاب کنید""
-             IsRtl=""true"" />
+             Dir=""BitDir.Rtl"" />
 
 <BitDropdown Label=""چند انتخابی""
              Items=""GetRtlItems()""
              DefaultValue=""@string.Empty""
              Placeholder=""انتخاب چند گزینه ای""
              IsMultiSelect=""true""
-             IsRtl=""true"" />";
+             Dir=""BitDir.Rtl"" />";
     private readonly string example9CsharpCode = @"
 private List<BitDropdownItem<string>> GetRtlItems() => new()
 {

diff --git a/...t.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor b/...t.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor
@@ -537,7 +537,7 @@
             <div class="example-content">
                 <BitDropdown Label="تک انتخابی"
                              Placeholder="لطفا انتخاب کنید"
-                             IsRtl="true"
+                             Dir="BitDir.Rtl"
                              TItem="BitDropdownOption<string>" TValue="string">
                     @foreach (var item in rtlItems)
                     {
@@ -548,7 +548,7 @@
                 <BitDropdown Label="چند انتخابی"
                              Placeholder="انتخاب چند گزینه ای"
                              IsMultiSelect="true"
-                             IsRtl="true"
+                             Dir="BitDir.Rtl"
                              TItem="BitDropdownOption<string>" TValue="string">
                     @foreach (var item in rtlItems)
                     {

diff --git a/...Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs b/...Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
@@ -646,7 +646,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     private readonly string example9RazorCode = @"
 <BitDropdown Label=""تک انتخابی""
              Placeholder=""لطفا انتخاب کنید""
-             IsRtl=""true""
+             Dir=""BitDir.Rtl""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
     @foreach (var item in rtlItems)
     {
@@ -657,7 +657,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
 <BitDropdown Label=""چند انتخابی""
              Placeholder=""انتخاب چند گزینه ای""
              IsMultiSelect=""true""
-             IsRtl=""true""
+             Dir=""BitDir.Rtl""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
     @foreach (var item in rtlItems)
     {