fix(icon): include chevron icons in flipRtl (#740)

* include new chevron in fliprtl' * add test
ionic-team · Nov 19, 2019 · 352c80b · 352c80b
1 parent cecdb9c
commit 352c80b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
@@ -142,7 +142,7 @@ export class Icon {
 
   render() {
     const mode = this.mode || 'md';
-    const flipRtl = this.flipRtl || (this.ariaLabel && this.ariaLabel.indexOf('arrow') > -1 && this.flipRtl !== false);
+    const flipRtl = this.flipRtl || (this.ariaLabel && (this.ariaLabel.indexOf('arrow') > -1 || this.ariaLabel.indexOf('chevron') > -1) && this.flipRtl !== false);
 
     return (
       <Host role="img" class={{

diff --git a/src/index.html b/src/index.html
@@ -109,6 +109,18 @@ <h2>Un-flip: arrows</h2>
   <ion-icon name="arrow-down" flip-rtl="false"></ion-icon>
   <ion-icon name="arrow-back" flip-rtl="false"></ion-icon>
 
+  <h2>Auto Flip: chevrons</h2>
+  <ion-icon name="chevron-up"></ion-icon>
+  <ion-icon name="chevron-forward"></ion-icon>
+  <ion-icon name="chevron-down"></ion-icon>
+  <ion-icon name="chevron-back"></ion-icon>
+
+  <h2>Un-flip: chevrons</h2>
+  <ion-icon name="chevron-up" flip-rtl="false"></ion-icon>
+  <ion-icon name="chevron-forward" flip-rtl="false"></ion-icon>
+  <ion-icon name="chevron-down" flip-rtl="false"></ion-icon>
+  <ion-icon name="chevron-back" flip-rtl="false"></ion-icon>
+
   <p>
     <a href="./cheatsheet.html">Cheatsheet</a>
   </p>