fix(tab-bar): update ios icon and label design to match native (#20548)

ionic-team · Feb 19, 2020 · 34f8576 · 34f8576
1 parent 59fa340
commit 34f8576
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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