Fix and improve position feature of BitPivot (#11421)

src/BlazorUI/Bit.BlazorUI.Tests/Components/Navs/Pivot/BitPivotTests.cs

@@ -71,8 +71,8 @@ public void BitPivotAriaLabelTest(string ariaLabel)
     [DataTestMethod,
          DataRow(BitPivotPosition.Top),
          DataRow(BitPivotPosition.Bottom),
-         DataRow(BitPivotPosition.Left),
-         DataRow(BitPivotPosition.Right)
+         DataRow(BitPivotPosition.Start),
+         DataRow(BitPivotPosition.End)
     ]
     public void BitPivotShouldRespectPosition(BitPivotPosition position)
     {
@@ -85,8 +85,8 @@ public void BitPivotShouldRespectPosition(BitPivotPosition position)
         {
             BitPivotPosition.Top => "bit-pvt-top",
             BitPivotPosition.Bottom => "bit-pvt-btm",
-            BitPivotPosition.Left => "bit-pvt-lft",
-            BitPivotPosition.Right => "bit-pvt-rgt",
+            BitPivotPosition.Start => "bit-pvt-sta",
+            BitPivotPosition.End => "bit-pvt-end",
             _ => string.Empty
         };
 

src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor

@@ -29,7 +29,6 @@
                     @(item?.Body ?? item?.ChildContent)
                 </div>
             }
-
         }
         else
         {

src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor.cs

@@ -123,8 +123,8 @@ protected override void RegisterCssClasses()
         {
             BitPivotPosition.Top => "bit-pvt-top",
             BitPivotPosition.Bottom => "bit-pvt-btm",
-            BitPivotPosition.Left => "bit-pvt-lft",
-            BitPivotPosition.Right => "bit-pvt-rgt",
+            BitPivotPosition.Start => "bit-pvt-sta",
+            BitPivotPosition.End => "bit-pvt-end",
             _ => "bit-pvt-top"
         });
     }

src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss

@@ -53,16 +53,16 @@
     flex-flow: column-reverse;
 }
 
-.bit-pvt-lft {
+.bit-pvt-sta {
     flex-flow: row;
 }
 
-.bit-pvt-rgt {
+.bit-pvt-end {
     flex-flow: row-reverse;
 }
 
-.bit-pvt-left,
-.bit-pvt-right {
+.bit-pvt-sta,
+.bit-pvt-end {
     .bit-pvt-hct {
         height: unset;
         flex-flow: column;
@@ -88,8 +88,7 @@
         @media(hover:hover) {
             &:hover {
                 &::before {
-                    left: 0;
-                    right: 0;
+                    inset-inline: 0;
                 }
             }
         }
@@ -195,6 +194,7 @@
     font-weight: 600;
     border-radius: 0;
     user-select: none;
+    color: $clr-fg-pri;
     position: relative;
     text-align: center;
     height: spacing(5.5);
@@ -206,29 +206,42 @@
     margin-right: spacing(1);
     line-height: spacing(5.5);
     background-color: transparent;
-    color: $clr-fg-pri;
 
     &:before {
         bottom: 0;
         content: "";
-        left: spacing(1);
-        right: spacing(1);
         position: absolute;
         height: spacing(0.25);
+        inset-inline-end: spacing(1);
         background-color: transparent;
-        transition: left 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9) 0s, right 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9) 0s;
-    }
-
-    &:after {
-        display: block;
-        overflow: hidden;
-        font-weight: 700;
-        color: transparent;
-        visibility: hidden;
-        height: spacing(0.125);
+        inset-inline-start: spacing(1);
+        transition: inset-inline-start 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9) 0s, inset-inline-end 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9) 0s;
     }
 
     span {
         font-size: spacing(2);
     }
 }
+
+.bit-pvt-sta,
+.bit-pvt-end {
+    .bit-pvti-sel {
+        &:before {
+            bottom: auto;
+            top: spacing(1);
+            width: spacing(0.25);
+            inset-inline-start: 0;
+            height: calc(100% - spacing(2));
+            transition: top 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9) 0s, height 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9) 0s;
+        }
+
+        @media(hover:hover) {
+            &:hover {
+                &::before {
+                    top: 0;
+                    height: 100%;
+                }
+            }
+        }
+    }
+}

src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivotPosition.cs

@@ -3,22 +3,22 @@
 public enum BitPivotPosition
 {
     /// <summary>
-    /// Display header at the top
+    /// Display header at the top.
     /// </summary>
     Top,
 
     /// <summary>
-    /// Display header at the bottom
+    /// Display header at the bottom.
     /// </summary>
     Bottom,
 
     /// <summary>
-    /// Display header at the Left
+    /// Display header at the start (Left for LTR and Right for RTL).
     /// </summary>
-    Left,
+    Start,
 
     /// <summary>
-    /// Display header at the right
+    /// Display header at the end (Right for LTR and Left for RTL).
     /// </summary>
-    Right,
+    End,
 }

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor

@@ -459,9 +459,9 @@
             </BitPivot>
         </div>
         <br /><br /><br />
-        <div>Pivot Position: <b>Left</b></div><br />
+        <div>Pivot Position: <b>Start</b></div><br />
         <div class="box">
-            <BitPivot Position="BitPivotPosition.Left">
+            <BitPivot Position="BitPivotPosition.Start">
                 <BitPivotItem HeaderText="File">
                     <h1>Pivot #1: File</h1>
                     <div>
@@ -496,9 +496,9 @@
             </BitPivot>
         </div>
         <br /><br /><br />
-        <div>Pivot Position: <b>Right</b></div><br />
+        <div>Pivot Position: <b>End</b></div><br />
         <div class="box">
-            <BitPivot Position="BitPivotPosition.Right">
+            <BitPivot Position="BitPivotPosition.End">
                 <BitPivotItem HeaderText="File">
                     <h1>Pivot #1: File</h1>
                     <div>
@@ -677,27 +677,77 @@
     </DemoExample>
 
     <DemoExample Title="RTL" RazorCode="@example12RazorCode" Id="example12">
-        <BitPivot Dir="BitDir.Rtl" OverflowBehavior="@BitPivotOverflowBehavior.Scroll">
-            <BitPivotItem HeaderText="اسناد" IconName="@BitIconName.Info">
-                <div>
+        <div class="box">
+            <BitPivot Dir="BitDir.Rtl" OverflowBehavior="@BitPivotOverflowBehavior.Scroll">
+                <BitPivotItem HeaderText="اسناد" IconName="@BitIconName.Info">
                     لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
                     چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و
                     برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
-                </div>
-            </BitPivotItem>
-            <BitPivotItem HeaderText="آخرین ها" ItemCount="8">
-                <div>
+                </BitPivotItem>
+                <BitPivotItem HeaderText="آخرین ها" ItemCount="8">
                     کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها
                     شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
-                </div>
-            </BitPivotItem>
-            <BitPivotItem HeaderText="شخصی" IconName="@BitIconName.Info" ItemCount="6">
-                <div>
+                </BitPivotItem>
+                <BitPivotItem HeaderText="شخصی" IconName="@BitIconName.Info" ItemCount="6">
                     در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه
                     راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای
                     اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد
-                </div>
-            </BitPivotItem>
-        </BitPivot>
+                </BitPivotItem>
+            </BitPivot>
+        </div>
+        <br /><br /><br />
+        <div class="box">
+            <BitPivot Dir="BitDir.Rtl" Position="BitPivotPosition.Start">
+                <BitPivotItem HeaderText="اسناد">
+                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
+                    چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و
+                    برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
+                    چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و
+                    برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+                </BitPivotItem>
+                <BitPivotItem HeaderText="آخرین ها">
+                    کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها
+                    شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
+                    کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها
+                    شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
+                </BitPivotItem>
+                <BitPivotItem HeaderText="شخصی">
+                    در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه
+                    راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای
+                    اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                    در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه
+                    راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای
+                    اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                </BitPivotItem>
+            </BitPivot>
+        </div>
+        <br /><br /><br />
+        <div class="box">
+            <BitPivot Dir="BitDir.Rtl" Position="BitPivotPosition.End">
+                <BitPivotItem HeaderText="اسناد">
+                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
+                    چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و
+                    برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
+                    چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و
+                    برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+                </BitPivotItem>
+                <BitPivotItem HeaderText="آخرین ها">
+                    کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها
+                    شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
+                    کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها
+                    شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
+                </BitPivotItem>
+                <BitPivotItem HeaderText="شخصی">
+                    در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه
+                    راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای
+                    اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                    در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه
+                    راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای
+                    اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                </BitPivotItem>
+            </BitPivot>
+        </div>
     </DemoExample>
 </DemoPage>