fix(icons): fix the ellipsis fill in ionicons (#20137)

- update docs icon usage for Ionicons 5 - update tests to remove mode prefixed icons - update tests to use the correct icons for Ionicons 5 - update to latest ionicons dev which fixes the ellipsis icon fill
ionic-team · Jan 3, 2020 · 9318d24 · 9318d24
1 parent 02a46a1
commit 9318d24
Show file tree

Hide file tree

Showing 48 changed files with 217 additions and 233 deletions.
diff --git a/core/package.json b/core/package.json
@@ -30,7 +30,7 @@
     "loader/"
   ],
   "dependencies": {
-    "ionicons": "^5.0.0-13",
+    "ionicons": "5.0.0-15",
     "tslib": "^1.10.0"
   },
   "devDependencies": {

diff --git a/core/src/components/button/test/toolbar/index.html b/core/src/components/button/test/toolbar/index.html
@@ -40,7 +40,7 @@
         </ion-buttons>
         <ion-buttons slot="primary">
           <ion-button color="secondary">
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
@@ -57,7 +57,7 @@
         </ion-buttons>
         <ion-buttons slot="primary">
           <ion-button color="secondary">
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
@@ -74,7 +74,7 @@
         </ion-buttons>
         <ion-buttons slot="primary">
           <ion-button fill="solid" color="secondary">
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
@@ -91,7 +91,7 @@
         </ion-buttons>
         <ion-buttons slot="primary">
           <ion-button color="secondary">
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>Defaults</ion-title>
@@ -108,7 +108,7 @@
         </ion-buttons>
         <ion-buttons slot="primary">
           <ion-button color="secondary" class="activated">
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>Defaults.activated</ion-title>

diff --git a/core/src/components/buttons/readme.md b/core/src/components/buttons/readme.md
@@ -30,7 +30,7 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
 <ion-toolbar>
   <ion-buttons slot="secondary">
     <ion-button>
-      <ion-icon slot="icon-only" name="contact"></ion-icon>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
     </ion-button>
     <ion-button>
       <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -39,7 +39,7 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
   <ion-title>Default Buttons</ion-title>
   <ion-buttons slot="primary">
     <ion-button color="secondary">
-      <ion-icon slot="icon-only" name="more"></ion-icon>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
     </ion-button>
   </ion-buttons>
 </ion-toolbar>
@@ -80,7 +80,7 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
 <ion-toolbar>
   <ion-buttons slot="secondary">
     <ion-button>
-      <ion-icon slot="icon-only" name="contact"></ion-icon>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
     </ion-button>
     <ion-button>
       <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -89,7 +89,7 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
   <ion-title>Default Buttons</ion-title>
   <ion-buttons slot="primary">
     <ion-button color="secondary">
-      <ion-icon slot="icon-only" name="more"></ion-icon>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
     </ion-button>
   </ion-buttons>
 </ion-toolbar>
@@ -148,7 +148,7 @@ export const ButtonsExample: React.FC = () => (
     <IonToolbar>
       <IonButtons slot="secondary">
         <IonButton>
-          <IonIcon slot="icon-only" name="contact" />
+          <IonIcon slot="icon-only" name="person-circle" />
         </IonButton>
         <IonButton>
           <IonIcon slot="icon-only" name="search" />
@@ -157,7 +157,7 @@ export const ButtonsExample: React.FC = () => (
       <IonTitle>Default Buttons</IonTitle>
       <IonButtons slot="primary">
         <IonButton color="secondary">
-          <IonIcon slot="icon-only" name="more" />
+          <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
         </IonButton>
       </IonButtons>
     </IonToolbar>
@@ -173,7 +173,7 @@ export const ButtonsExample: React.FC = () => (
         <IonMenuButton autoHide={false} />
       </IonButtons>
     </IonToolbar>
-    
+
     <IonToolbar>
       <IonButtons collapse="true">
         <IonButton>
@@ -201,7 +201,7 @@ export const ButtonsExample: React.FC = () => (
   <ion-toolbar>
     <ion-buttons slot="secondary">
       <ion-button>
-        <ion-icon slot="icon-only" name="contact"></ion-icon>
+        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
       </ion-button>
       <ion-button>
         <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -210,7 +210,7 @@ export const ButtonsExample: React.FC = () => (
     <ion-title>Default Buttons</ion-title>
     <ion-buttons slot="primary">
       <ion-button color="secondary">
-        <ion-icon slot="icon-only" name="more"></ion-icon>
+        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
       </ion-button>
     </ion-buttons>
   </ion-toolbar>
@@ -226,7 +226,7 @@ export const ButtonsExample: React.FC = () => (
       <ion-menu-button autoHide="false"></ion-menu-button>
     </ion-buttons>
   </ion-toolbar>
-  
+
   <ion-toolbar>
     <ion-buttons collapse="true">
       <ion-button>

diff --git a/core/src/components/buttons/test/icon/index.html b/core/src/components/buttons/test/icon/index.html
@@ -22,7 +22,7 @@
         </ion-buttons>
         <ion-buttons slot="primary">
           <ion-button slot="icon-only">
-            <ion-icon name="more"></ion-icon>
+            <ion-icon ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
       </ion-toolbar>

diff --git a/core/src/components/buttons/usage/angular.md b/core/src/components/buttons/usage/angular.md
@@ -9,7 +9,7 @@
 <ion-toolbar>
   <ion-buttons slot="secondary">
     <ion-button>
-      <ion-icon slot="icon-only" name="contact"></ion-icon>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
     </ion-button>
     <ion-button>
       <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -18,7 +18,7 @@
   <ion-title>Default Buttons</ion-title>
   <ion-buttons slot="primary">
     <ion-button color="secondary">
-      <ion-icon slot="icon-only" name="more"></ion-icon>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
     </ion-button>
   </ion-buttons>
 </ion-toolbar>

diff --git a/core/src/components/buttons/usage/javascript.md b/core/src/components/buttons/usage/javascript.md
@@ -9,7 +9,7 @@
 <ion-toolbar>
   <ion-buttons slot="secondary">
     <ion-button>
-      <ion-icon slot="icon-only" name="contact"></ion-icon>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
     </ion-button>
     <ion-button>
       <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -18,7 +18,7 @@
   <ion-title>Default Buttons</ion-title>
   <ion-buttons slot="primary">
     <ion-button color="secondary">
-      <ion-icon slot="icon-only" name="more"></ion-icon>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
     </ion-button>
   </ion-buttons>
 </ion-toolbar>

diff --git a/core/src/components/buttons/usage/react.md b/core/src/components/buttons/usage/react.md
@@ -23,7 +23,7 @@ export const ButtonsExample: React.FC = () => (
     <IonToolbar>
       <IonButtons slot="secondary">
         <IonButton>
-          <IonIcon slot="icon-only" name="contact" />
+          <IonIcon slot="icon-only" name="person-circle" />
         </IonButton>
         <IonButton>
           <IonIcon slot="icon-only" name="search" />
@@ -32,7 +32,7 @@ export const ButtonsExample: React.FC = () => (
       <IonTitle>Default Buttons</IonTitle>
       <IonButtons slot="primary">
         <IonButton color="secondary">
-          <IonIcon slot="icon-only" name="more" />
+          <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
         </IonButton>
       </IonButtons>
     </IonToolbar>
@@ -48,7 +48,7 @@ export const ButtonsExample: React.FC = () => (
         <IonMenuButton autoHide={false} />
       </IonButtons>
     </IonToolbar>
-    
+
     <IonToolbar>
       <IonButtons collapse="true">
         <IonButton>

diff --git a/core/src/components/buttons/usage/vue.md b/core/src/components/buttons/usage/vue.md
@@ -10,7 +10,7 @@
   <ion-toolbar>
     <ion-buttons slot="secondary">
       <ion-button>
-        <ion-icon slot="icon-only" name="contact"></ion-icon>
+        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
       </ion-button>
       <ion-button>
         <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -19,7 +19,7 @@
     <ion-title>Default Buttons</ion-title>
     <ion-buttons slot="primary">
       <ion-button color="secondary">
-        <ion-icon slot="icon-only" name="more"></ion-icon>
+        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
       </ion-button>
     </ion-buttons>
   </ion-toolbar>
@@ -35,7 +35,7 @@
       <ion-menu-button autoHide="false"></ion-menu-button>
     </ion-buttons>
   </ion-toolbar>
-  
+
   <ion-toolbar>
     <ion-buttons collapse="true">
       <ion-button>

diff --git a/core/src/components/card/test/translucent/index.html b/core/src/components/card/test/translucent/index.html
@@ -232,7 +232,7 @@ <h2>Card With An Inset Picture</h2>
             </ion-col>
             <ion-col class="ion-no-padding ion-text-right">
               <ion-button fill="clear" size="small" color="dark">
-                <ion-icon slot="start" name="share-alt"></ion-icon>
+                <ion-icon slot="start" name="share"></ion-icon>
                 Share
               </ion-button>
             </ion-col>

diff --git a/core/src/components/fab/readme.md b/core/src/components/fab/readme.md
@@ -21,21 +21,21 @@ Fabs are container elements that contain one or more fab buttons. They should be
   <!-- fab placed to the bottom end -->
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
     <ion-fab-button>
-      <ion-icon name="arrow-dropleft"></ion-icon>
+      <ion-icon name="arrow-forward-circle"></ion-icon>
     </ion-fab-button>
   </ion-fab>
 
   <!-- fab placed to the top start -->
   <ion-fab vertical="top" horizontal="start" slot="fixed">
     <ion-fab-button>
-      <ion-icon name="arrow-dropright"></ion-icon>
+      <ion-icon name="arrow-back-circle"></ion-icon>
     </ion-fab-button>
   </ion-fab>
 
   <!-- fab placed to the bottom start -->
   <ion-fab vertical="bottom" horizontal="start" slot="fixed">
     <ion-fab-button>
-      <ion-icon name="arrow-dropup"></ion-icon>
+      <ion-icon name="arrow-up-circle"></ion-icon>
     </ion-fab-button>
   </ion-fab>
 
@@ -110,21 +110,21 @@ export const FabExample: React.FC = () => (
     {/*-- fab placed to the bottom end --*/}
     <IonFab vertical="bottom" horizontal="end" slot="fixed">
       <IonFabButton>
-        <IonIcon name="arrow-dropleft" />
+        <IonIcon name="arrow-forward-circle" />
       </IonFabButton>
     </IonFab>
 
     {/*-- fab placed to the top start --*/}
     <IonFab vertical="top" horizontal="start" slot="fixed">
       <IonFabButton>
-        <IonIcon name="arrow-dropright" />
+        <IonIcon name="arrow-back-circle" />
       </IonFabButton>
     </IonFab>
 
     {/*-- fab placed to the bottom start --*/}
     <IonFab vertical="bottom" horizontal="start" slot="fixed">
       <IonFabButton>
-        <IonIcon name="arrow-dropup" />
+        <IonIcon name="arrow-up-circle" />
       </IonFabButton>
     </IonFab>
 
@@ -197,21 +197,21 @@ export const FabExample: React.FC = () => (
     <!-- fab placed to the bottom end -->
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
       <ion-fab-button>
-        <ion-icon name="arrow-dropleft"></ion-icon>
+        <ion-icon name="arrow-forward-circle"></ion-icon>
       </ion-fab-button>
     </ion-fab>
 
     <!-- fab placed to the top start -->
     <ion-fab vertical="top" horizontal="start" slot="fixed">
       <ion-fab-button>
-        <ion-icon name="arrow-dropright"></ion-icon>
+        <ion-icon name="arrow-back-circle"></ion-icon>
       </ion-fab-button>
     </ion-fab>
 
     <!-- fab placed to the bottom start -->
     <ion-fab vertical="bottom" horizontal="start" slot="fixed">
       <ion-fab-button>
-        <ion-icon name="arrow-dropup"></ion-icon>
+        <ion-icon name="arrow-up-circle"></ion-icon>
       </ion-fab-button>
     </ion-fab>
 

diff --git a/core/src/components/fab/usage/angular.md b/core/src/components/fab/usage/angular.md
@@ -10,21 +10,21 @@
   <!-- fab placed to the bottom end -->
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
     <ion-fab-button>
-      <ion-icon name="arrow-dropleft"></ion-icon>
+      <ion-icon name="arrow-forward-circle"></ion-icon>
     </ion-fab-button>
   </ion-fab>
 
   <!-- fab placed to the top start -->
   <ion-fab vertical="top" horizontal="start" slot="fixed">
     <ion-fab-button>
-      <ion-icon name="arrow-dropright"></ion-icon>
+      <ion-icon name="arrow-back-circle"></ion-icon>
     </ion-fab-button>
   </ion-fab>
 
   <!-- fab placed to the bottom start -->
   <ion-fab vertical="bottom" horizontal="start" slot="fixed">
     <ion-fab-button>
-      <ion-icon name="arrow-dropup"></ion-icon>
+      <ion-icon name="arrow-up-circle"></ion-icon>
     </ion-fab-button>
   </ion-fab>
 

diff --git a/core/src/components/fab/usage/javascript.md b/core/src/components/fab/usage/javascript.md
@@ -10,21 +10,21 @@
   <!-- fab placed to the bottom end -->
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
     <ion-fab-button>
-      <ion-icon name="arrow-dropleft"></ion-icon>
+      <ion-icon name="arrow-forward-circle"></ion-icon>
     </ion-fab-button>
   </ion-fab>
 
   <!-- fab placed to the top start -->
   <ion-fab vertical="top" horizontal="start" slot="fixed">
     <ion-fab-button>
-      <ion-icon name="arrow-dropright"></ion-icon>
+      <ion-icon name="arrow-back-circle"></ion-icon>
     </ion-fab-button>
   </ion-fab>
 
   <!-- fab placed to the bottom start -->
   <ion-fab vertical="bottom" horizontal="start" slot="fixed">
     <ion-fab-button>
-      <ion-icon name="arrow-dropup"></ion-icon>
+      <ion-icon name="arrow-up-circle"></ion-icon>
     </ion-fab-button>
   </ion-fab>