fix(icon): update ionicons to flip for rtl (#17196)

- updates to latest ionicons 4.55 and adds rtl test - includes e2e test for RTL icons references #17012
2026-03-13 10:22:08 +08:00 · 2019-01-22 13:37:39 -05:00
parent 39c119ab4b
commit d3b6e60adf
9 changed files with 195 additions and 103 deletions
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -280,7 +280,7 @@ export class IonHeader {
 proxyInputs(IonHeader, ['mode', 'translucent']);

 export declare interface IonIcon extends StencilComponents<'IonIcon'> {}
-@Component({ selector: 'ion-icon', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['ariaLabel', 'color', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'size', 'src'] })
+@Component({ selector: 'ion-icon', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['ariaLabel', 'color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'size', 'src'] })
 export class IonIcon {
  protected el: HTMLElement;
  constructor(c: ChangeDetectorRef, r: ElementRef) {
@@ -288,7 +288,7 @@ export class IonIcon {
    this.el = r.nativeElement;
  }
 }
-proxyInputs(IonIcon, ['ariaLabel', 'color', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'size', 'src']);
+proxyInputs(IonIcon, ['ariaLabel', 'color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'size', 'src']);

 export declare interface IonImg extends StencilComponents<'IonImg'> {}
@Component({ selector: 'ion-img', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['alt', 'src'] })
--- a/core/package.json
+++ b/core/package.json
@@ -30,16 +30,16 @@
    "loader/"
  ],
  "dependencies": {
-    "ionicons": "4.5.1"
+    "ionicons": "4.5.5"
  },
  "devDependencies": {
    "@stencil/core": "0.17.0",
    "@stencil/sass": "0.1.1",
    "@stencil/utils": "latest",
    "@types/jest": "^23.3.13",
+    "@types/node": "10.12.18",
    "@types/puppeteer": "1.6.4",
    "@types/swiper": "4.4.1",
-    "@types/node": "10.12.18",
    "agadoo": "^1.0.0",
    "autoprefixer": "9.4.6",
    "aws-sdk": "^2.320.0",
--- a/core/src/components/app/fonts/ionicons.scss
+++ b/core/src/components/app/fonts/ionicons.scss
@@ -1,53 +0,0 @@
-
-// Ionicons Icon Font CSS
-// --------------------------
-// Ionicons CSS for Ionic's <ion-icon> element
-// ionicons-icons.scss has the icons and their unicode characters
-
-$ionicons-font-path: $font-path !default;
-
-@import "ionicons-icons";
-@import "ionicons-variables";
-
-
-@font-face {
-  font-family: "Ionicons";
-  font-style: normal;
-  font-weight: normal;
-  src: url("#{$ionicons-font-path}/ionicons.woff2?v=#{$ionicons-version}") format("woff2"),
-    url("#{$ionicons-font-path}/ionicons.woff?v=#{$ionicons-version}") format("woff"),
-    url("#{$ionicons-font-path}/ionicons.ttf?v=#{$ionicons-version}") format("truetype");
-}
-
-ion-icon {
-  @include font-smoothing();
-
-  @include rtl() {
-    &[aria-label^="arrow"]::before,
-    &[flip-rtl]::before {
-      transform: scaleX(-1);
-    }
-
-    &[unflip-rtl]::before {
-      transform: scaleX(1);
-    }
-  }
-
-  display: inline-block;
-
-  font-family: "Ionicons";
-  font-style: normal;
-  font-variant: normal;
-  font-weight: normal;
-
-  line-height: 1;
-
-  text-rendering: auto;
-  text-transform: none;
-
-  speak: none;
-
-  &::before {
-    display: inline-block;
-  }
-}
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -72,13 +72,9 @@ export class BackButton implements ComponentInterface {

  render() {
    const defaultBackButtonText = this.mode === 'ios' ? 'Back' : null;
+    const backButtonIcon = this.icon != null ? this.icon : this.config.get('backButtonIcon', 'arrow-back');
    const backButtonText = this.text != null ? this.text : this.config.get('backButtonText', defaultBackButtonText);

-    let backButtonIcon = this.icon != null ? this.icon : this.config.get('backButtonIcon', 'arrow-back');
-    if (backButtonIcon === 'arrow-back' && document.dir === 'rtl') {
-      backButtonIcon = 'arrow-forward';
-    }
-
    return (
      <button
        type="button"
--- a/core/src/components/icon/test/dir/e2e.ts
+++ b/core/src/components/icon/test/dir/e2e.ts
@@ -0,0 +1,19 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('icon: dir', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/icon/test/dir?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
+
+test('icon: dir, rtl', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/icon/test/dir?ionic:_testing=true&rtl=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
--- a/core/src/components/icon/test/dir/heart-broken.svg
+++ b/core/src/components/icon/test/dir/heart-broken.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>heart-broken</title>
+<path d="M23.6 2c4.637 0 8.4 3.764 8.4 8.401 0 9.132-9.87 11.964-15.999 21.232-6.485-9.326-16.001-11.799-16.001-21.232 0-4.637 3.763-8.401 8.4-8.401 1.886 0 3.625 0.86 5.025 2.12l-2.425 3.88 7 4-4 10 11-12-7-4 1.934-2.901c1.107-0.68 2.35-1.099 3.665-1.099z"></path>
+</svg>
--- a/core/src/components/icon/test/dir/index.html
+++ b/core/src/components/icon/test/dir/index.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Icon - Direction</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script src="../../../../../dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button class="show-back-button"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Icon - Direction</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <h1>Flip RTL</h1>
+
+      <ion-grid>
+        <ion-row align-items-center>
+          <ion-col size="auto"><code>null</code></ion-col>
+          <ion-col><ion-icon name="call" color="primary"></ion-icon></ion-col>
+          <ion-col><ion-icon name="cut" color="secondary"></ion-icon></ion-col>
+          <ion-col><ion-icon name="journal" color="tertiary"></ion-icon></ion-col>
+          <ion-col><ion-icon name="alarm" color="success"></ion-icon></ion-col>
+          <ion-col><ion-icon name="checkbox" color="warning"></ion-icon></ion-col>
+          <ion-col><ion-icon name="brush" color="danger"></ion-icon></ion-col>
+          <ion-col><ion-icon name="bicycle" color="medium"></ion-icon></ion-col>
+        </ion-row>
+        <ion-row align-items-center>
+          <ion-col size="auto"><code>true</code></ion-col>
+          <ion-col><ion-icon name="call" color="primary" flip-rtl></ion-icon></ion-col>
+          <ion-col><ion-icon name="cut" color="secondary" flip-rtl></ion-icon></ion-col>
+          <ion-col><ion-icon name="journal" color="tertiary" flip-rtl></ion-icon></ion-col>
+          <ion-col><ion-icon name="alarm" color="success" flip-rtl></ion-icon></ion-col>
+          <ion-col><ion-icon name="checkbox" color="warning" flip-rtl></ion-icon></ion-col>
+          <ion-col><ion-icon name="brush" color="danger" flip-rtl></ion-icon></ion-col>
+          <ion-col><ion-icon name="bicycle" color="medium" flip-rtl></ion-icon></ion-col>
+        </ion-row>
+      </ion-grid>
+
+      <ion-grid>
+        <ion-row align-items-center>
+          <ion-col size="auto"><code>null</code></ion-col>
+          <ion-col><ion-icon name="arrow-dropright"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-dropright-circle"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-round-forward"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-dropleft"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-dropleft-circle"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-round-back"></ion-icon></ion-col>
+        </ion-row>
+        <ion-row align-items-center>
+          <ion-col size="auto"><code>false</code></ion-col>
+          <ion-col><ion-icon name="arrow-dropright" flip-rtl="false"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-dropright-circle" flip-rtl="false"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-forward" flip-rtl="false"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-round-forward" flip-rtl="false"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-dropleft" flip-rtl="false"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-dropleft-circle" flip-rtl="false"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-back" flip-rtl="false"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-round-back" flip-rtl="false"></ion-icon></ion-col>
+        </ion-row>
+      </ion-grid>
+
+      <ion-list>
+        <ion-list-header>
+          <ion-label>Item Detail Icons</ion-label>
+        </ion-list-header>
+
+        <ion-item detail>
+          <ion-label>
+            ion-item [detail] attr
+          </ion-label>
+        </ion-item>
+
+        <ion-item href="#">
+          <ion-label>
+            a[ion-item] w/ push detail
+          </ion-label>
+        </ion-item>
+
+        <ion-item onclick="testClick(event)">
+          <ion-label>
+            button[ion-item] w/ push detail
+          </ion-label>
+        </ion-item>
+
+        <ion-item detail detail-icon="arrow-down">
+          <ion-label>Detail with icon arrow down</ion-label>
+        </ion-item>
+
+        <ion-item detail detail-icon="home">
+          <ion-label>Detail with icon home</ion-label>
+        </ion-item>
+
+        <ion-item detail detail-icon="/src/components/item/test/icons/heart-broken.svg">
+          <ion-label>Detail with custom icon svg</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+
+    <style>
+      h1 {
+        padding-left: 10px;
+        padding-inline-start: 10px;
+      }
+
+      ion-icon {
+        font-size: 26px;
+      }
+
+      code {
+        background: #e5e5e5;
+      }
+
+      ion-col[size=auto] {
+        width: 60px !important;
+      }
+    </style>
+  </ion-app>
+</body>
+</html>
--- a/core/src/components/icon/test/preview/index.html
+++ b/core/src/components/icon/test/preview/index.html
@@ -26,8 +26,8 @@
          <ion-icon name="home" id="dynamicColor" slot="start"></ion-icon>
          <ion-label>
            <code>
-                name="home"
-              </code>
+              name="home"
+            </code>
          </ion-label>
        </ion-item>

@@ -35,8 +35,8 @@
          <ion-icon name="home" slot="start"></ion-icon>
          <ion-label>
            <code>
-                name="home"
-              </code>
+              name="home"
+            </code>
          </ion-label>
        </ion-item>

@@ -44,8 +44,8 @@
          <ion-icon id="dynamicHomeIcon" slot="start"></ion-icon>
          <ion-label>
            <code>
-                id="dynamicHomeIcon"
-              </code>
+              id="dynamicHomeIcon"
+            </code>
          </ion-label>
        </ion-item>

@@ -53,8 +53,8 @@
          <ion-icon name="md-home" slot="start"></ion-icon>
          <ion-label>
            <code>
-                name="md-home"
-              </code>
+              name="md-home"
+            </code>
          </ion-label>
        </ion-item>

@@ -62,8 +62,8 @@
          <ion-icon name="ios-home" slot="start"></ion-icon>
          <ion-label>
            <code>
-                name="ios-home"
-              </code>
+              name="ios-home"
+            </code>
          </ion-label>
        </ion-item>

@@ -71,8 +71,8 @@
          <ion-icon name="ios-home" slot="end"></ion-icon>
          <ion-label>
            <code>
-                name="ios-home"
-              </code>
+              name="ios-home"
+            </code>
          </ion-label>
        </ion-item>

@@ -80,8 +80,8 @@
          <ion-icon name="ios-star-outline" slot="start"></ion-icon>
          <ion-label>
            <code>
-                name="ios-star-outline"
-              </code>
+              name="ios-star-outline"
+            </code>
          </ion-label>
        </ion-item>

@@ -89,8 +89,8 @@
          <ion-icon name="IOS-STAR-OUTLINE" slot="end"></ion-icon>
          <ion-label>
            <code>
-                name="IOS-STAR-OUTLINE"
-              </code>
+              name="IOS-STAR-OUTLINE"
+            </code>
          </ion-label>
        </ion-item>

@@ -98,8 +98,8 @@
          <ion-icon name="md-home" color="primary" slot="start"></ion-icon>
          <ion-label>
            <code>
-                name="md-home"
-              </code>
+              name="md-home"
+            </code>
          </ion-label>
        </ion-item>

@@ -107,8 +107,8 @@
          <ion-icon name="logo-twitter" color="secondary" slot="start"></ion-icon>
          <ion-label>
            <code>
-                name="logo-twitter"
-              </code>
+              name="logo-twitter"
+            </code>
          </ion-label>
        </ion-item>

@@ -116,8 +116,8 @@
          <ion-icon ios="logo-apple" md="logo-android" slot="start"></ion-icon>
          <ion-label>
            <code>
-                ios="logo-apple" md="logo-android"
-              </code>
+              ios="logo-apple" md="logo-android"
+            </code>
          </ion-label>
        </ion-item>

@@ -125,8 +125,8 @@
          <ion-icon name="color-filter" slot="start"></ion-icon>
          <ion-label>
            <code>
-                name="color-filter"
-              </code>
+              name="color-filter"
+            </code>
          </ion-label>
        </ion-item>

@@ -134,8 +134,8 @@
          <ion-icon ios="ios-color-filter" md="md-color-filter" slot="start"></ion-icon>
          <ion-label>
            <code>
-                ios="ios-color-filter" md="md-color-filter"
-              </code>
+              ios="ios-color-filter" md="md-color-filter"
+            </code>
          </ion-label>
        </ion-item>

@@ -143,8 +143,8 @@
          <ion-icon ios="MD-COLOR-FILTER" md="IOS-COLOR-FILTER" slot="start"></ion-icon>
          <ion-label>
            <code>
-                ios="MD-COLOR-FILTER" md="IOS-COLOR-FILTER"
-              </code>
+              ios="MD-COLOR-FILTER" md="IOS-COLOR-FILTER"
+            </code>
          </ion-label>
        </ion-item>

@@ -152,16 +152,16 @@
          <ion-icon slot="start"></ion-icon>
          <ion-label>
            <code>
-                name="null"
-              </code>
+              name="null"
+            </code>
          </ion-label>
        </ion-item>

        <ion-item detail="true">
          <ion-label>
            <code>
-                ion-item w/ [detail="true"] attr. text text text text text text
-              </code>
+              ion-item w/ [detail="true"] attr. text text text text text text
+            </code>
          </ion-label>
        </ion-item>
      </ion-list>
@@ -177,12 +177,9 @@


    <style>
-
-      /*to ensure ng css encapsulation doesn't mess with icon attributes*/
      code {
        font-size: 0.8em;
      }
-
    </style>

  </ion-app>
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -143,18 +143,13 @@ export class Item implements ComponentInterface {
  }

  render() {
-    const { href, detail, mode, win, routerDirection, type } = this;
-    let detailIcon = this.detailIcon;
+    const { href, detail, mode, win, detailIcon, routerDirection, type } = this;

    const clickable = this.isClickable();
    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div' as any;
    const attrs = TagType === 'button' ? { type } : { href };
    const showDetail = detail !== undefined ? detail : mode === 'ios' && clickable;

-    if (showDetail && detailIcon === 'ios-arrow-forward' && document.dir === 'rtl') {
-      detailIcon = 'ios-arrow-back';
-    }
-
    return [
      <TagType
        {...attrs}