Update rtl redo and undo buttons (#136)

vaadin · Apr 28, 2020 · d220cb5 · d220cb5
1 parent d9b141a
commit d220cb5
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 0 deletions.
diff --git a/src/vaadin-rich-text-editor-icons.html b/src/vaadin-rich-text-editor-icons.html
@@ -67,6 +67,16 @@
       [part~="toolbar-button-undo"]::before {
         content: var(--vaadin-rte-icons-undo);
       }
+
+      /* RTL specific styles */
+
+      :host([dir="rtl"]) [part~="toolbar-button-redo"]::before {
+        content: var(--vaadin-rte-icons-undo);
+      }
+
+      :host([dir="rtl"]) [part~="toolbar-button-undo"]::before {
+        content: var(--vaadin-rte-icons-redo);
+      }
     </style>
   </template>
 </dom-module>
diff --git a/test/visual/default.html b/test/visual/default.html
@@ -18,6 +18,10 @@
 
     const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
     document.write('<link rel="import" href="../../theme/' + theme + '/vaadin-rich-text-editor.html">');
+
+    const dir = window.location.search.replace(/.*dir=(\w+).*/, '$1') || 'ltr';
+    document.documentElement.setAttribute('dir', dir);
+
     window.addEventListener('WebComponentsReady', function() {
       customElements.whenDefined('vaadin-rich-text-editor').then(function() {
         window.webComponentsAreReady = true; // Checked in gemini before capture callback

diff --git a/...ens/vaadin-rich-text-editor/default-lumo-rtl/vaadin-rich-text-editor/chrome.png b/...ens/vaadin-rich-text-editor/default-lumo-rtl/vaadin-rich-text-editor/chrome.png
diff --git a/...ns/vaadin-rich-text-editor/default-lumo-rtl/vaadin-rich-text-editor/firefox.png b/...ns/vaadin-rich-text-editor/default-lumo-rtl/vaadin-rich-text-editor/firefox.png
diff --git a/...vaadin-rich-text-editor/default-material-rtl/vaadin-rich-text-editor/chrome.png b/...vaadin-rich-text-editor/default-material-rtl/vaadin-rich-text-editor/chrome.png
diff --git a/...aadin-rich-text-editor/default-material-rtl/vaadin-rich-text-editor/firefox.png b/...aadin-rich-text-editor/default-material-rtl/vaadin-rich-text-editor/firefox.png
diff --git a/test/visual/test.js b/test/visual/test.js
@@ -26,6 +26,13 @@ gemini.suite('vaadin-rich-text-editor', function(rootSuite) {
           .capture(`vaadin-rich-text-editor`);
       });
     });
+
+    gemini.suite(`default-${theme}-rtl`, function(suite) {
+      suite
+        .setUrl(`/default.html?theme=${theme}&dir=rtl`)
+        .setCaptureElements(`#default`)
+        .capture(`vaadin-rich-text-editor`);
+    });
   });
 
 });
diff --git a/theme/lumo/vaadin-rich-text-editor-styles.html b/theme/lumo/vaadin-rich-text-editor-styles.html
@@ -219,6 +219,16 @@
       :host([theme~="compact"]) [part~="toolbar-group"] {
         margin: 0 calc(var(--lumo-space-m) / 2 - 1px);
       }
+
+      /* RTL specific styles */
+
+      :host([dir="rtl"]) [part~="toolbar-button-redo"]::before {
+        content: var(--lumo-icons-undo);
+      }
+
+      :host([dir="rtl"]) [part~="toolbar-button-undo"]::before {
+        content: var(--lumo-icons-redo);
+      }
     </style>
   </template>
 </dom-module>