From 34f8576b959d41896502e4f7b0c4240156e001eb Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Wed, 19 Feb 2020 11:32:45 -0500
Subject: [PATCH] fix(tab-bar): update ios icon and label design to match
 native (#20548)

---
 .../components/tab-bar/test/spec/index.html   | 30 +++++++++++++++++++
 .../components/tab-button/tab-button.ios.scss | 26 +++++++++-------
 core/src/themes/ionic.theme.default.ios.scss  |  2 +-
 3 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/core/src/components/tab-bar/test/spec/index.html b/core/src/components/tab-bar/test/spec/index.html
index ad058b2793..2f06112a48 100644
--- a/core/src/components/tab-bar/test/spec/index.html
+++ b/core/src/components/tab-bar/test/spec/index.html
@@ -30,6 +30,36 @@
 
   </ion-tab-bar>
 
+  <!-- Default -->
+  <ion-tab-bar selected-tab="2">
+
+    <ion-tab-button tab="1">
+      <ion-label>Favorites</ion-label>
+      <ion-icon name="star"></ion-icon>
+    </ion-tab-button>
+
+    <ion-tab-button tab="2">
+      <ion-label>Recents</ion-label>
+      <ion-icon name="time"></ion-icon>
+    </ion-tab-button>
+
+    <ion-tab-button tab="3">
+      <ion-label>Contacts</ion-label>
+      <ion-icon name="person-circle-outline"></ion-icon>
+    </ion-tab-button>
+
+    <ion-tab-button tab="4">
+      <ion-label>Keypad</ion-label>
+      <ion-icon name="apps"></ion-icon>
+    </ion-tab-button>
+
+    <ion-tab-button tab="5">
+      <ion-label>Voicemail</ion-label>
+      <ion-icon name="recording-outline"></ion-icon>
+    </ion-tab-button>
+
+  </ion-tab-bar>
+
   <!-- Badges -->
   <ion-tab-bar selected-tab="1">
     <ion-tab-button tab="1">
diff --git a/core/src/components/tab-button/tab-button.ios.scss b/core/src/components/tab-button/tab-button.ios.scss
index 851c1d976f..12591597dd 100644
--- a/core/src/components/tab-button/tab-button.ios.scss
+++ b/core/src/components/tab-button/tab-button.ios.scss
@@ -12,15 +12,6 @@
   font-size: $tab-button-ios-font-size;
 }
 
-:host(.tab-has-label-only) ::slotted(ion-label) {
-  @include margin(2px, 0);
-
-  font-size: $tab-button-ios-font-size + 2;
-  font-size: 14px;
-
-  line-height: 1.1;
-}
-
 
 // iOS Tab Button: Badge
 // --------------------------------------------------
@@ -41,7 +32,7 @@
 // --------------------------------------------------
 
 ::slotted(ion-icon) {
-  @include margin(4px, null, null, null);
+  @include margin(2px, null, 2px, null);
 
   font-size: $tab-button-ios-icon-size;
 }
@@ -58,6 +49,21 @@
   @include margin(0, null, 1px, null);
 
   min-height: $tab-button-ios-font-size + 1;
+
+  font-weight: 500;
+}
+
+
+// iOS Tab Button Label Only
+// --------------------------------------------------
+
+:host(.tab-has-label-only) ::slotted(ion-label) {
+  @include margin(2px, 0);
+
+  font-size: $tab-button-ios-font-size + 2;
+  font-size: 14px;
+
+  line-height: 1.1;
 }
 
 
diff --git a/core/src/themes/ionic.theme.default.ios.scss b/core/src/themes/ionic.theme.default.ios.scss
index fa5b3f701b..54b0dde362 100644
--- a/core/src/themes/ionic.theme.default.ios.scss
+++ b/core/src/themes/ionic.theme.default.ios.scss
@@ -16,7 +16,7 @@ $overlay-ios-background-color:              var(--ion-overlay-background-color,
 $tabbar-ios-background:                     var(--ion-tab-bar-background, $background-color) !default;
 $tabbar-ios-background-focused:             var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default;
 $tabbar-ios-border-color:                   var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default;
-$tabbar-ios-color:                          var(--ion-tab-bar-color, $text-color-step-550) !default;
+$tabbar-ios-color:                          var(--ion-tab-bar-color, $text-color-step-600) !default;
 $tabbar-ios-color-selected:                 var(--ion-tab-bar-color-selected, ion-color(primary, base)) !default;
 
 // iOS Toolbar