fix(scrollview): fix prev and next icons position in RTL

telerik · Apr 25, 2023 · 1c4ebe3 · 1c4ebe3
1 parent 2943b8b
commit 1c4ebe3
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 7 deletions.
diff --git a/packages/default/scss/scrollview/_layout.scss b/packages/default/scss/scrollview/_layout.scss
@@ -174,11 +174,11 @@
     }
 
     .k-scrollview-prev {
-        left: 0;
+        inset-inline-start: 0;
     }
 
     .k-scrollview-next {
-        right: 0;
+        inset-inline-end: 0;
     }
 
 
@@ -204,6 +204,17 @@
         }
     }
 
+    .k-rtl,
+    [dir="rtl"] {
+        .k-scrollview-prev,
+        .k-scrollview-next {
+            .k-icon,
+            .k-svg-icon {
+                transform: scaleX(-1);
+            }
+        }
+    }
+
 }
 
 

diff --git a/packages/fluent/scss/scrollview/_layout.scss b/packages/fluent/scss/scrollview/_layout.scss
@@ -168,11 +168,11 @@
     }
 
     .k-scrollview-prev {
-        left: 0;
+        inset-inline-start: 0;
     }
 
     .k-scrollview-next {
-        right: 0;
+        inset-inline-end: 0;
     }
 
 
@@ -197,4 +197,15 @@
             pointer-events: none;
         }
     }
+
+    .k-rtl,
+    [dir="rtl"] {
+        .k-scrollview-prev,
+        .k-scrollview-next {
+            .k-icon,
+            .k-svg-icon {
+                transform: scaleX(-1);
+            }
+        }
+    }
 }
diff --git a/packages/html/src/scrollview/tests/scrollview.tsx b/packages/html/src/scrollview/tests/scrollview.tsx
@@ -27,7 +27,7 @@ root.render(
             <span>Normal</span>
             <span>Dark mode</span>
 
-            <div className="k-widget k-scrollview k-scrollview-light">
+            <div className="k-scrollview k-scrollview-light">
                 <div className="k-scrollview-wrap" style={{ transform: "translateX(0px)" }}>
                     <div>
                     </div>
@@ -55,7 +55,7 @@ root.render(
                 </div>
             </div>
 
-            <div className="k-widget k-scrollview">
+            <div className="k-scrollview">
                 <div className="k-scrollview-wrap" style={{ transform: "translateX(0px)" }}>
                     <div>
                     </div>
@@ -87,7 +87,7 @@ root.render(
                 </div>
             </div>
 
-            <div className="k-widget k-scrollview k-scrollview-dark">
+            <div className="k-scrollview k-scrollview-dark">
                 <div className="k-scrollview-wrap" style={{ transform: "translateX(0px)" }}>
                     <div>
                     </div>
@@ -116,6 +116,38 @@ root.render(
                     </div>
                 </div>
             </div>
+
+            <span>RTL</span>
+            <span></span>
+            <span></span>
+
+            <div className="k-scrollview k-rtl">
+                <div className="k-scrollview-wrap" style={{ transform: "translateX(0px)" }}>
+                    <div>
+                    </div>
+                    <div>
+                    </div>
+                    <div>
+                    </div>
+                </div>
+                <div className="k-scrollview-elements">
+                    <a className="k-scrollview-prev">
+                        <Icon icon="chevron-left"></Icon>
+                    </a>
+                    <a className="k-scrollview-next">
+                        <Icon icon="chevron-right"></Icon>
+                    </a>
+                    <div className="k-scrollview-nav-wrap">
+                        <ul className="k-scrollview-nav">
+                            <li className="k-link"></li>
+                            <li className="k-link k-primary"></li>
+                            <li className="k-link k-primary k-focus"></li>
+                            <li className="k-link k-focus"></li>
+                            <li className="k-link"></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
         </div>
     </>
 );