feat(blazorui): add Dir to BitCalendar #7112 (#7113)

bitfoundation · Mar 12, 2024 · 8281a97 · 8281a97
1 parent 5ca2169
commit 8281a97
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 29 deletions.
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor
@@ -4,7 +4,8 @@
 <div @ref="RootElement" @attributes="HtmlAttributes"
      id="@_Id"
      style="@StyleBuilder.Value"
-     class="@ClassBuilder.Value">
+     class="@ClassBuilder.Value"
+     dir="@Dir?.ToString().ToLower()">
 
     <div style="@Styles?.Container" class="bit-cal-cnt @Classes?.Container" disabled=@(IsEnabled is false)>
         <div class="bit-cal-sdt" aria-live="polite" aria-atomic="true">

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs
@@ -317,7 +317,7 @@ protected override void RegisterCssClasses()
     {
         ClassBuilder.Register(() => Classes?.Root);
 
-        ClassBuilder.Register(() => Culture.TextInfo.IsRightToLeft ? $"{RootElementClass}-rtl" : string.Empty);
+        ClassBuilder.Register(() => (Dir is null && Culture.TextInfo.IsRightToLeft) ? "bit-rtl" : string.Empty);
     }
 
     protected override void RegisterCssStyles()

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss
@@ -31,6 +31,15 @@
             background-color: $color-background-disabled;
         }
     }
+
+    &.bit-rtl {
+        direction: rtl;
+
+        .bit-cal-wnm {
+            border-right: none;
+            border-left: $shape-border-width $shape-border-style $color-border-secondary;
+        }
+    }
 }
 
 .bit-cal-cnt {
@@ -204,14 +213,15 @@
     flex-grow: 1;
     cursor: text;
     overflow: hidden;
-    text-align: left;
     font-weight: 600;
+    text-align: start;
     position: relative;
     white-space: nowrap;
     align-items: center;
     outline: transparent;
     display: inline-block;
     text-overflow: ellipsis;
+    padding: 0 spacing(1.25);
     font-size: spacing(1.75);
     line-height: spacing(3.5);
     animation-fill-mode: both;
@@ -220,7 +230,6 @@
     background-color: transparent;
     color: $color-foreground-primary;
     border-radius: $shape-border-radius;
-    padding: 0 spacing(0.5) 0 spacing(1.25);
     animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
 }
 
@@ -400,15 +409,16 @@
 
 .bit-cal-tic {
     margin: 0;
-    padding: spacing(2);
+    flex: 0.85;
     display: flex;
     outline: none;
+    direction: ltr;
+    gap: spacing(1);
     box-shadow: none;
-    box-sizing: border-box;
+    padding: spacing(2);
     align-items: center;
+    box-sizing: border-box;
     justify-content: center;
-    flex: 0.85;
-    gap: spacing(1);
 }
 
 .bit-cal-tpr {
@@ -495,24 +505,3 @@
     box-sizing: content-box;
     flex-flow: column nowrap;
 }
-
-.bit-cal-rtl {
-    .bit-cal-cnt {
-        direction: rtl;
-    }
-
-    .bit-cal-wnm {
-        border-right: none;
-        border-left: $shape-border-width $shape-border-style $color-border-secondary;
-    }
-
-    .bit-cal-pkt,
-    .bit-cal-ptb {
-        text-align: right;
-        padding: 0 spacing(1.25) 0 spacing(0.5);
-    }
-
-    .bit-cal-twp {
-        flex-direction: row-reverse;
-    }
-}
diff --git a/...ient/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor b/...ient/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
@@ -210,4 +210,12 @@
             </div>
         </ExamplePreview>
     </ComponentExampleBox>
+
+    <ComponentExampleBox Title="RTL" RazorCode="@example10RazorCode" Id="example10">
+        <ExamplePreview>
+            <div class="example-content">
+                <BitCalendar Dir="BitDir.Rtl" />
+            </div>
+        </ExamplePreview>
+    </ComponentExampleBox>
 </ComponentDemo>
diff --git a/...t/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs b/...t/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs
@@ -880,4 +880,7 @@ public class BitCalendarValidationModel
 
 private void HandleValidSubmit() { }
 private void HandleInvalidSubmit() { }";
+
+    private readonly string example10RazorCode = @"
+<BitCalendar Dir=""BitDir.Rtl"" />";
 }