feat: add support for RTL of Kendo Angular Treeview (#581)

* feat: add support for Kendo Angular Treeview * chore: update visual previews * docs: split package names to Drop Downs and Date Inputs * docs: replace with Dropdowns * feat: modify tests for Angular TreeView RTL * chore: update visual previews * docs: split package names to Drop Downs and Date Inputs * docs: replace with Dropdowns * chore: update visual previews * fix: add style for RTL icons for Angular TreeView * chore: update visual previews * fix: RTL style for Angular TreeView * chore: update visual previews * fix: fix RTL style for Angular Treeview
telerik · Feb 14, 2019 · 71eb0ad · 71eb0ad
1 parent 3dba163
commit 71eb0ad
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 8 deletions.
diff --git a/packages/default/scss/common/_icons.scss b/packages/default/scss/common/_icons.scss
@@ -718,7 +718,7 @@
     .k-rtl .k-i-indent-increase,
     .k-rtl .k-i-indent-decrease,
     .k-rtl .k-i-expand,
-    .k-rtl .k-i-collapse {
+    .k-rtl .k-i-collapse{
         transform: scaleX(-1);
     }
 

diff --git a/packages/default/scss/treeview/_layout.scss b/packages/default/scss/treeview/_layout.scss
@@ -77,7 +77,8 @@
 
 
     // RTL
-    .k-rtl .k-treeview {
+    .k-rtl .k-treeview,
+    .k-treeview[dir=rtl] {
 
         // Items
         .k-item {
@@ -90,6 +91,7 @@
         .k-i-collapse {
             margin-left: 0;
             margin-right: -$treeview-indent;
+            transform: scaleX(-1);
         }
 
         // Other content

diff --git a/packages/material/docs/index.md b/packages/material/docs/index.md
@@ -53,7 +53,15 @@ The following additional configuration improves the look and feel of the theme i
 The following additional configuration improves the look and feel of the theme in your application:
 
 * Use a [Ripple effect]({% slug overview_ripple %})&mdash;Available through the `Ripple` component from the `@progress/kendo-react-ripple` NPM module. The `Ripple` component provides the [Material ink ripple effect](https://material.io/guidelines/motion/choreography.html#choreography-radial-reaction) for the Kendo UI components for React and is fully compatible with all available Kendo UI themes.
+<<<<<<< HEAD
+<<<<<<< HEAD
 * Use the `floatingLabel` property on components from the [Inputs]({% slug overview_inputs %}) and [Dropdowns]({% slug overview_dropdowns %}) packages for React.
+=======
+* Use the `floatingLabel` property on components from the [Inputs]({% slug overview_inputs %}) and [Drop Downs]({% slug overview_dropdowns %}) packages for React.
+>>>>>>> docs: split package names to Drop Downs and Date Inputs
+=======
+* Use the `floatingLabel` property on components from the [Inputs]({% slug overview_inputs %}) and [Dropdowns]({% slug overview_dropdowns %}) packages for React.
+>>>>>>> docs: replace with Dropdowns
 {% endplatform_content %}
 
 ## Preview

diff --git a/tests/visual/output/bootstrap/toolbar.png b/tests/visual/output/bootstrap/toolbar.png
diff --git a/tests/visual/output/bootstrap/treeview.png b/tests/visual/output/bootstrap/treeview.png
diff --git a/tests/visual/output/default/toolbar.png b/tests/visual/output/default/toolbar.png
diff --git a/tests/visual/output/material/toolbar.png b/tests/visual/output/material/toolbar.png
diff --git a/tests/visual/output/material/treeview.png b/tests/visual/output/material/treeview.png
diff --git a/tests/visual/toolbar.html b/tests/visual/toolbar.html
@@ -40,7 +40,15 @@
             </div>
         </div>
 
+<<<<<<< HEAD
+<<<<<<< HEAD
         <!-- normal state SplitButton and Dropdowns -->
+=======
+        <!-- normal state SplitButton and Drop Downs -->
+>>>>>>> docs: split package names to Drop Downs and Date Inputs
+=======
+        <!-- normal state SplitButton and Dropdowns -->
+>>>>>>> docs: replace with Dropdowns
         <div class="section">
             <div class="k-toolbar k-widget k-toolbar-resizable">
                 <div class="k-overflow-anchor k-button" style="visibility: visible;">

diff --git a/tests/visual/treeview.html b/tests/visual/treeview.html
@@ -65,8 +65,8 @@
                 </ul>
             </kendo-treeview>
         </section>
-        <section class="k-rtl">
-            <kendo-treeview class="k-widget k-treeview">
+        <section>
+            <kendo-treeview class="k-widget k-treeview" dir="rtl">
                 <ul class="k-treeview-lines k-group">
                     <li class="k-item">
                         <div class="k-top">
@@ -139,8 +139,8 @@
                 </ul>
             </kendo-treeview>
         </section>
-        <section class="k-rtl">
-            <kendo-treeview class="k-widget k-treeview">
+        <section>
+            <kendo-treeview class="k-widget k-treeview" dir="rtl">
                 <ul class="k-treeview-lines k-group">
                     <li class="k-item">
                         <div class="k-top">
@@ -215,8 +215,8 @@
                 </ul>
             </kendo-treeview>
         </section>
-        <section class="k-rtl">
-            <kendo-treeview class="k-widget k-treeview">
+        <section>
+            <kendo-treeview class="k-widget k-treeview" dir="rtl">
                 <ul class="k-treeview-lines k-group">
                     <li class="k-item">
                         <div class="k-mid">