From 18b1fe9e6284d4872983b31abc9f1902c16936ff Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 9 Aug 2018 18:28:20 -0400
Subject: [PATCH 1/7] fix(tabs): fix the tabbar layout so it works with shadow
 DOM

references #14611
---
 .../components/tab-button/tab-button.ios.scss | 24 ------
 .../components/tab-button/tab-button.md.scss  | 33 --------
 .../src/components/tab-button/tab-button.scss | 76 ++++++++-----------
 core/src/components/tabbar/tabbar.ios.scss    | 25 ++++++
 core/src/components/tabbar/tabbar.scss        | 37 +++++++++
 .../components/tabs/test/colors/index.html    | 14 ++--
 6 files changed, 100 insertions(+), 109 deletions(-)

diff --git a/core/src/components/tab-button/tab-button.ios.scss b/core/src/components/tab-button/tab-button.ios.scss
index 9398d2ae2d2..016df36724f 100644
--- a/core/src/components/tab-button/tab-button.ios.scss
+++ b/core/src/components/tab-button/tab-button.ios.scss
@@ -39,27 +39,3 @@
 .tab-button-icon::before {
   vertical-align: top;
 }
-
-.layout-icon-end .tab-button-ios .tab-button-text,
-.layout-icon-start .tab-button-ios .tab-button-text,
-.layout-icon-hide .tab-button-ios .tab-button-text {
-  @include margin(2px, 0);
-
-  font-size: 14px;
-
-  line-height: 1.1;
-}
-
-.layout-icon-end .tab-button-ios ion-icon,
-.layout-icon-start .tab-button-ios ion-icon {
-  @include margin(2px, null, 1px, null);
-
-  min-width: 24px;
-  height: 26px;
-
-  font-size: 24px;
-}
-
-.layout-label-hide .tab-button-ios ion-icon {
-  @include margin(0);
-}
diff --git a/core/src/components/tab-button/tab-button.md.scss b/core/src/components/tab-button/tab-button.md.scss
index 1239de5bc1a..4265b48a88b 100644
--- a/core/src/components/tab-button/tab-button.md.scss
+++ b/core/src/components/tab-button/tab-button.md.scss
@@ -58,36 +58,3 @@
 :host(.tab-selected) .tab-button-icon {
   @include transform(translate3d($tab-button-md-icon-transform-x-active, $tab-button-md-icon-transform-y-active, $tab-button-md-icon-transform-z-active));
 }
-
-
-// Material Design Tab with Icon or Title only
-// --------------------------------------------------
-
-// Tab layout: icon-end
-.layout-icon-end .tab-button-md.tab-selected .tab-button-icon {
-  @include transform(translate3d($tab-button-md-icon-right-transform-x-active, $tab-button-md-icon-right-transform-y-active, $tab-button-md-icon-right-transform-z-active));
-}
-
-// Tab layout: icon-bottom
-.layout-icon-bottom .tab-button-md.tab-selected .tab-button-icon {
-  @include transform(translate3d($tab-button-md-icon-bottom-transform-x-active, $tab-button-md-icon-bottom-transform-y-active, $tab-button-md-icon-bottom-transform-z-active));
-}
-
-// Tab layout: icon-start
-.layout-icon-start .tab-button-md.tab-selected .tab-button-icon {
-  @include transform(translate3d($tab-button-md-icon-left-transform-x-active, $tab-button-md-icon-left-transform-y-active, $tab-button-md-icon-left-transform-z-active));
-}
-
-.layout-icon-top .tab-button-md .has-icon .tab-button-text {
-  @include margin(null, null, -2px, null);
-}
-
-.layout-icon-bottom .tab-button-md .tab-button-text {
-  @include transform-origin(center, top);
-  @include margin(-2px, null, null, null);
-}
-
-.layout-icon-hide .tab-button-md,
-.layout-label-hide .tab-button-md {
-  justify-content: center;
-}
diff --git a/core/src/components/tab-button/tab-button.scss b/core/src/components/tab-button/tab-button.scss
index 77d46cf76ed..03ceca4eaa1 100644
--- a/core/src/components/tab-button/tab-button.scss
+++ b/core/src/components/tab-button/tab-button.scss
@@ -50,9 +50,9 @@ a {
 
   display: flex;
 
-  flex-direction: column;
+  flex-direction: var(--flex-direction, column);
   align-items: center;
-  justify-content: flex-start;
+  justify-content: var(--justify-content, flex-start);
 
   width: 100%;
   height: 100%;
@@ -79,10 +79,29 @@ a {
   opacity: .4;
 }
 
-.tab-button-text,
+.tab-button-text {
+  @include margin(var(--text-margin-top), null, var(--text-margin-bottom), null);
+
+  display: var(--text-display, none);
+
+  font-size: var(--text-font-size);
+
+  line-height: var(--text-line-height);
+}
+
 .tab-button-icon {
-  display: none;
+  @include margin(var(--icon-margin-top), null, var(--icon-margin-bottom), null);
+
+  display: var(--icon-display, none);
 
+  min-width: var(--icon-min-width);
+  height: var(--icon-height, 1em);
+
+  font-size: var(--icon-font-size);
+}
+
+.tab-button-text,
+.tab-button-icon {
   align-self: center;
 
   min-width: 26px;
@@ -96,9 +115,12 @@ a {
   box-sizing: border-box;
 }
 
-:host(.has-icon) .tab-button-icon,
+:host(.has-icon) .tab-button-icon {
+  --icon-display: block;
+}
+
 :host(.has-label) .tab-button-text {
-  display: block;
+  --text-display: block;
 }
 
 :host(.has-label-only) .tab-button-text {
@@ -107,7 +129,7 @@ a {
 
 :host(.has-icon-only) .tab-button-native,
 :host(.has-label-only) .tab-button-native {
-  justify-content: center;
+  --justify-content: center;
 }
 
 
@@ -116,7 +138,7 @@ a {
 
 .tab-badge {
   @include position(6%, 4%, null, null); // 4% fallback
-  @include position(null, calc(50% - 50px), null, null);
+  // @include position(null, var(--badge-end, #{calc(50% - 50px)}), null, null));
   @include padding(1px, 6px);
 
   box-sizing: border-box;
@@ -131,41 +153,5 @@ a {
 }
 
 :host(.has-icon) .tab-badge {
-  @include position(null, calc(50% - 30px), null, null);
-}
-
-
-
-// Tab Badges
-// --------------------------------------------------
-
-.layout-icon-start .tab-button {
-  flex-direction: row;
-}
-
-.layout-icon-end .tab-button {
-  flex-direction: row-reverse;
-}
-
-.layout-icon-bottom .tab-button {
-  flex-direction: column-reverse;
-}
-
-.layout-icon-start .tab-button,
-.layout-icon-end .tab-button,
-.layout-icon-hide .tab-button,
-.layout-label-hide .tab-button {
-  justify-content: center;
-}
-
-.layout-icon-hide .tab-button-icon,
-.layout-label-hide .tab-button-text {
-  display: none;
-}
-
-
-.layout-icon-bottom .tab-badge,
-.layout-icon-start .tab-badge,
-.layout-icon-end .tab-badge {
-  @include position(null, calc(50% - 50px), null, null);
+  --badge-end: #{calc(50% - 30px)};
 }
diff --git a/core/src/components/tabbar/tabbar.ios.scss b/core/src/components/tabbar/tabbar.ios.scss
index c1a4449f002..dc51d3b21a1 100644
--- a/core/src/components/tabbar/tabbar.ios.scss
+++ b/core/src/components/tabbar/tabbar.ios.scss
@@ -32,3 +32,28 @@
   backdrop-filter: $tabbar-ios-translucent-filter;
 }
 
+
+// iOS Tabbar Layout
+// --------------------------------------------------
+
+:host(.layout-icon-end) ion-tab-button,
+:host(.layout-icon-start) ion-tab-button,
+:host(.layout-icon-hide) ion-tab-button {
+  --text-margin-top: 2px;
+  --text-margin-bottom: 2px;
+  --text-font-size: 14px;
+  --text-line-height: 1.1;
+}
+
+:host(.layout-icon-end) ion-tab-button,
+:host(.layout-icon-start) ion-tab-button {
+  --icon-margin-top: 2px;
+  --icon-margin-bottom: 1px;
+  --icon-min-width: 24px;
+  --icon-height: 26px;
+  --icon-font-size: 24px;
+}
+
+:host(.layout-label-hide) ion-tab-button {
+  --icon-margin: 0;
+}
\ No newline at end of file
diff --git a/core/src/components/tabbar/tabbar.scss b/core/src/components/tabbar/tabbar.scss
index 820b6c93b8d..79b94a8f37e 100644
--- a/core/src/components/tabbar/tabbar.scss
+++ b/core/src/components/tabbar/tabbar.scss
@@ -72,3 +72,40 @@
 :host(.placement-bottom) .tabbar-highlight {
   top: 0;
 }
+
+
+// Tab Layout
+// --------------------------------------------------
+
+:host(.layout-icon-start) ion-tab-button {
+  --flex-direction: row;
+}
+
+:host(.layout-icon-end) ion-tab-button {
+  --flex-direction: row-reverse;
+}
+
+:host(.layout-icon-bottom) ion-tab-button {
+  --flex-direction: column-reverse;
+}
+
+:host(.layout-icon-start) ion-tab-button,
+:host(.layout-icon-end) ion-tab-button,
+:host(.layout-icon-hide) ion-tab-button,
+:host(.layout-label-hide) ion-tab-button {
+  --justify-content: center;
+}
+
+:host(.layout-icon-hide) ion-tab-button {
+  --icon-display: none;
+}
+
+:host(.layout-label-hide) ion-tab-button {
+  --text-display: none;
+}
+
+:host(.layout-icon-bottom) ion-tab-button,
+:host(.layout-icon-start) ion-tab-button,
+:host(.layout-icon-end) ion-tab-button {
+  --badge-end: calc(50% - 50px);
+}
diff --git a/core/src/components/tabs/test/colors/index.html b/core/src/components/tabs/test/colors/index.html
index 5597864c40a..cad4e4ef6fe 100644
--- a/core/src/components/tabs/test/colors/index.html
+++ b/core/src/components/tabs/test/colors/index.html
@@ -15,7 +15,7 @@
     <!-- Default -->
     <ion-tabs>
       <ion-tab label="Recents"></ion-tab>
-      <ion-tab label="Favorites"></ion-tab>
+      <ion-tab label="Favorites" badge="6"></ion-tab>
       <ion-tab label="Settings"></ion-tab>
     </ion-tabs>
 
@@ -31,7 +31,7 @@
     <!-- Icons on top of text -->
     <ion-tabs selected-index="2" color="secondary">
       <ion-tab label="Location" icon="navigate"></ion-tab>
-      <ion-tab label="Favorites" icon="star"></ion-tab>
+      <ion-tab label="Favorites" badge="6" icon="star"></ion-tab>
       <ion-tab label="Radio" icon="musical-notes"></ion-tab>
     </ion-tabs>
 
@@ -39,7 +39,7 @@
     <!-- Icons below text -->
     <ion-tabs tabbar-layout="icon-bottom" selected-index="1" color="dark">
       <ion-tab label="Recents" icon="call"></ion-tab>
-      <ion-tab label="Favorites" icon="heart"></ion-tab>
+      <ion-tab label="Favorites" badge="6" icon="heart"></ion-tab>
       <ion-tab label="Settings" icon="settings"></ion-tab>
     </ion-tabs>
 
@@ -47,7 +47,7 @@
     <!-- Icons right of text -->
     <ion-tabs tabbar-layout="icon-end" selected-index="0" color="danger">
       <ion-tab label="Recents" icon="call"></ion-tab>
-      <ion-tab label="Favorites" icon="heart"></ion-tab>
+      <ion-tab label="Favorites" badge="6" icon="heart"></ion-tab>
       <ion-tab label="Settings" icon="settings"></ion-tab>
     </ion-tabs>
 
@@ -55,7 +55,7 @@
     <!-- Icons left of text -->
     <ion-tabs tabbar-layout="icon-start" color="light">
       <ion-tab label="Recents" icon="call"></ion-tab>
-      <ion-tab label="Favorites" icon="heart"></ion-tab>
+      <ion-tab label="Favorites" badge="6" icon="heart"></ion-tab>
       <ion-tab label="Settings" icon="settings"></ion-tab>
     </ion-tabs>
 
@@ -63,7 +63,7 @@
     <!-- No icons -->
     <ion-tabs tabbar-layout="icon-hide" color="primary">
       <ion-tab label="Recents" icon="call"></ion-tab>
-      <ion-tab label="Favorites" icon="heart"></ion-tab>
+      <ion-tab label="Favorites" badge="6" icon="heart"></ion-tab>
       <ion-tab label="Settings" icon="settings"></ion-tab>
     </ion-tabs>
 
@@ -71,7 +71,7 @@
     <!-- No label -->
     <ion-tabs tabbar-layout="label-hide" color="secondary">
       <ion-tab label="Recents" icon="call"></ion-tab>
-      <ion-tab label="Favorites" icon="heart"></ion-tab>
+      <ion-tab label="Favorites" badge="6" icon="heart"></ion-tab>
       <ion-tab label="Settings" icon="settings"></ion-tab>
     </ion-tabs>
 

From 2fdabd3b1da500816a7a89c757480e79ac4c76b2 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 9 Aug 2018 18:47:20 -0400
Subject: [PATCH 2/7] fix(tabs): update tab transforms for MD mode

references #14611
---
 .../components/tab-button/tab-button.md.scss  |  8 +++--
 core/src/components/tabbar/tabbar.md.scss     | 31 ++++++++++++++++---
 .../src/components/tabbar/tabbar.md.vars.scss |  2 ++
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/core/src/components/tab-button/tab-button.md.scss b/core/src/components/tab-button/tab-button.md.scss
index 4265b48a88b..e20aa04e10f 100644
--- a/core/src/components/tab-button/tab-button.md.scss
+++ b/core/src/components/tab-button/tab-button.md.scss
@@ -31,11 +31,13 @@
 
   font-size: $tab-button-md-font-size;
 
+  transform: var(--text-transform);
+
   text-transform: $tab-button-md-text-capitalization;
 }
 
 :host(.tab-selected) .tab-button-text {
-  transform: $tab-button-md-text-transform-active;
+  --text-transform: #{$tab-button-md-text-transform-active};
 
   transition: $tab-button-md-text-transition;
 }
@@ -52,9 +54,11 @@
   transition: $tab-button-md-icon-transition;
 
   font-size: $tab-button-md-icon-size;
+
+  transform: var(--icon-transform);
 }
 
 // Tab layout: icon-top, icon-only, label-only
 :host(.tab-selected) .tab-button-icon {
-  @include transform(translate3d($tab-button-md-icon-transform-x-active, $tab-button-md-icon-transform-y-active, $tab-button-md-icon-transform-z-active));
+  --icon-transform: #{translate3d($tab-button-md-icon-transform-x-active, $tab-button-md-icon-transform-y-active, $tab-button-md-icon-transform-z-active)};
 }
diff --git a/core/src/components/tabbar/tabbar.md.scss b/core/src/components/tabbar/tabbar.md.scss
index 418268dd94a..506291ed290 100644
--- a/core/src/components/tabbar/tabbar.md.scss
+++ b/core/src/components/tabbar/tabbar.md.scss
@@ -13,9 +13,32 @@
   contain: strict;
 }
 
+// Material Design Tabbar Layout
+// --------------------------------------------------
 
-// TODO: REVIEW
-:host(.placement-top) .tab-button.tab-selected .tab-button-icon,
-:host(.placement-top) .tab-button.tab-selected .tab-button-text {
-  transform: inherit;
+:host(.layout-icon-top) ion-tab-button {
+  --text-margin-bottom: -2px;
 }
+
+:host(.layout-icon-bottom) ion-tab-button {
+  --text-margin-top: -2px;
+  --text-transform: transform-origin(center, top);
+}
+
+// // Tab layout: icon-end
+:host(.layout-icon-end) ion-tab-button {
+  --icon-transform: #{translate3d($tab-button-md-icon-right-transform-x-active, $tab-button-md-icon-right-transform-y-active, $tab-button-md-icon-right-transform-z-active)};
+}
+ // Tab layout: icon-bottom
+:host(.layout-icon-bottom) ion-tab-button {
+  --icon-transform: #{translate3d($tab-button-md-icon-bottom-transform-x-active, $tab-button-md-icon-bottom-transform-y-active, $tab-button-md-icon-bottom-transform-z-active)};
+}
+ // Tab layout: icon-start
+:host(.layout-icon-start) ion-tab-button {
+  --icon-transform: #{translate3d($tab-button-md-icon-left-transform-x-active, $tab-button-md-icon-left-transform-y-active, $tab-button-md-icon-left-transform-z-active)};
+}
+
+// .layout-icon-hide .tab-button-md,
+// .layout-label-hide .tab-button-md {
+//   justify-content: center;
+// }
\ No newline at end of file
diff --git a/core/src/components/tabbar/tabbar.md.vars.scss b/core/src/components/tabbar/tabbar.md.vars.scss
index a4aad296978..94b7b133508 100644
--- a/core/src/components/tabbar/tabbar.md.vars.scss
+++ b/core/src/components/tabbar/tabbar.md.vars.scss
@@ -1,5 +1,7 @@
 @import "../../themes/ionic.globals.md";
 
+@import "../tab-button/tab-button.md.vars";
+
 // Material Design Tabs
 // --------------------------------------------------
 

From 8b3559362637caded4680402245fb8825cd451e7 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 9 Aug 2018 18:49:29 -0400
Subject: [PATCH 3/7] style(sass): lint fixes

---
 core/src/components/content/content.scss          | 3 ++-
 core/src/components/tab-button/tab-button.md.scss | 8 ++++----
 core/src/components/tabbar/tabbar.md.vars.scss    | 1 -
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/core/src/components/content/content.scss b/core/src/components/content/content.scss
index 26fdc1240c2..4847b55d8ec 100644
--- a/core/src/components/content/content.scss
+++ b/core/src/components/content/content.scss
@@ -19,9 +19,10 @@
 
   flex: 1;
 
+  margin: 0 !important;
+
   /* stylelint-disable */
   padding: 0 !important;
-  margin: 0 !important;
   /* stylelint-enable */
 
   background-color: #{current-color(base)};
diff --git a/core/src/components/tab-button/tab-button.md.scss b/core/src/components/tab-button/tab-button.md.scss
index e20aa04e10f..87769f38e18 100644
--- a/core/src/components/tab-button/tab-button.md.scss
+++ b/core/src/components/tab-button/tab-button.md.scss
@@ -27,12 +27,12 @@
   @include margin($tab-button-md-text-margin-top, $tab-button-md-text-margin-end, $tab-button-md-text-margin-bottom, $tab-button-md-text-margin-start);
   @include transform-origin(center, bottom);
 
+  transform: var(--text-transform);
+
   transition: $tab-button-md-text-transition;
 
   font-size: $tab-button-md-font-size;
 
-  transform: var(--text-transform);
-
   text-transform: $tab-button-md-text-capitalization;
 }
 
@@ -51,11 +51,11 @@
   width: $tab-button-md-icon-size;
   height: $tab-button-md-icon-size;
 
+  transform: var(--icon-transform);
+
   transition: $tab-button-md-icon-transition;
 
   font-size: $tab-button-md-icon-size;
-
-  transform: var(--icon-transform);
 }
 
 // Tab layout: icon-top, icon-only, label-only
diff --git a/core/src/components/tabbar/tabbar.md.vars.scss b/core/src/components/tabbar/tabbar.md.vars.scss
index 94b7b133508..20056d42954 100644
--- a/core/src/components/tabbar/tabbar.md.vars.scss
+++ b/core/src/components/tabbar/tabbar.md.vars.scss
@@ -1,5 +1,4 @@
 @import "../../themes/ionic.globals.md";
-
 @import "../tab-button/tab-button.md.vars";
 
 // Material Design Tabs

From 00f2a9760e7622802e52002377495d761befe779 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 9 Aug 2018 19:07:11 -0400
Subject: [PATCH 4/7] fix(tabs): update badge position based on tabs layout

references #14611
---
 .../src/components/tab-button/tab-button.scss | 20 ++++++++-----------
 core/src/components/tabbar/tabbar.scss        |  9 +++++++--
 .../components/tabs/test/colors/index.html    |  6 +++---
 3 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/core/src/components/tab-button/tab-button.scss b/core/src/components/tab-button/tab-button.scss
index 03ceca4eaa1..5899646b055 100644
--- a/core/src/components/tab-button/tab-button.scss
+++ b/core/src/components/tab-button/tab-button.scss
@@ -82,7 +82,7 @@ a {
 .tab-button-text {
   @include margin(var(--text-margin-top), null, var(--text-margin-bottom), null);
 
-  display: var(--text-display, none);
+  display: var(--text-display, block);
 
   font-size: var(--text-font-size);
 
@@ -92,7 +92,7 @@ a {
 .tab-button-icon {
   @include margin(var(--icon-margin-top), null, var(--icon-margin-bottom), null);
 
-  display: var(--icon-display, none);
+  display: var(--icon-display, block);
 
   min-width: var(--icon-min-width);
   height: var(--icon-height, 1em);
@@ -115,14 +115,6 @@ a {
   box-sizing: border-box;
 }
 
-:host(.has-icon) .tab-button-icon {
-  --icon-display: block;
-}
-
-:host(.has-label) .tab-button-text {
-  --text-display: block;
-}
-
 :host(.has-label-only) .tab-button-text {
   white-space: normal;
 }
@@ -138,7 +130,7 @@ a {
 
 .tab-badge {
   @include position(6%, 4%, null, null); // 4% fallback
-  // @include position(null, var(--badge-end, #{calc(50% - 50px)}), null, null));
+  @include position(null, var(--badge-end, calc(50% - 30px)), null, null);
   @include padding(1px, 6px);
 
   box-sizing: border-box;
@@ -152,6 +144,10 @@ a {
   line-height: 16px;
 }
 
-:host(.has-icon) .tab-badge {
+:host(.has-label-only) .tab-badge {
+  --badge-end: #{calc(50% - 50px)};
+}
+
+:host(.has-icon-only) .tab-badge {
   --badge-end: #{calc(50% - 30px)};
 }
diff --git a/core/src/components/tabbar/tabbar.scss b/core/src/components/tabbar/tabbar.scss
index 79b94a8f37e..32fe3e969dc 100644
--- a/core/src/components/tabbar/tabbar.scss
+++ b/core/src/components/tabbar/tabbar.scss
@@ -104,8 +104,13 @@
   --text-display: none;
 }
 
-:host(.layout-icon-bottom) ion-tab-button,
+:host(.layout-icon-top) ion-tab-button,
+:host(.layout-icon-bottom) ion-tab-button {
+  --badge-end: #{calc(50% - 30px)};
+}
+
+:host(.layout-icon-hide) ion-tab-button,
 :host(.layout-icon-start) ion-tab-button,
 :host(.layout-icon-end) ion-tab-button {
-  --badge-end: calc(50% - 50px);
+  --badge-end: #{calc(50% - 50px)};
 }
diff --git a/core/src/components/tabs/test/colors/index.html b/core/src/components/tabs/test/colors/index.html
index cad4e4ef6fe..104ecccd299 100644
--- a/core/src/components/tabs/test/colors/index.html
+++ b/core/src/components/tabs/test/colors/index.html
@@ -55,7 +55,7 @@
     <!-- Icons left of text -->
     <ion-tabs tabbar-layout="icon-start" color="light">
       <ion-tab label="Recents" icon="call"></ion-tab>
-      <ion-tab label="Favorites" badge="6" icon="heart"></ion-tab>
+      <ion-tab label="Favorites" badge="6" badge-color="danger" icon="heart"></ion-tab>
       <ion-tab label="Settings" icon="settings"></ion-tab>
     </ion-tabs>
 
@@ -63,7 +63,7 @@
     <!-- No icons -->
     <ion-tabs tabbar-layout="icon-hide" color="primary">
       <ion-tab label="Recents" icon="call"></ion-tab>
-      <ion-tab label="Favorites" badge="6" icon="heart"></ion-tab>
+      <ion-tab label="Favorites" badge="6" badge-color="danger" icon="heart"></ion-tab>
       <ion-tab label="Settings" icon="settings"></ion-tab>
     </ion-tabs>
 
@@ -71,7 +71,7 @@
     <!-- No label -->
     <ion-tabs tabbar-layout="label-hide" color="secondary">
       <ion-tab label="Recents" icon="call"></ion-tab>
-      <ion-tab label="Favorites" badge="6" icon="heart"></ion-tab>
+      <ion-tab label="Favorites" badge="6" badge-color="danger" icon="heart"></ion-tab>
       <ion-tab label="Settings" icon="settings"></ion-tab>
     </ion-tabs>
 

From dbbff763ccd8c36fdf76f71eb29a94061b307f9b Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Fri, 10 Aug 2018 10:28:27 -0400
Subject: [PATCH 5/7] fix(tabs): rename --text vars to --label

---
 core/src/components/tab-button/tab-button.md.scss | 4 ++--
 core/src/components/tab-button/tab-button.scss    | 8 ++++----
 core/src/components/tabbar/tabbar.ios.scss        | 8 ++++----
 core/src/components/tabbar/tabbar.md.scss         | 6 +++---
 core/src/components/tabbar/tabbar.scss            | 2 +-
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/core/src/components/tab-button/tab-button.md.scss b/core/src/components/tab-button/tab-button.md.scss
index 87769f38e18..25613f9cafc 100644
--- a/core/src/components/tab-button/tab-button.md.scss
+++ b/core/src/components/tab-button/tab-button.md.scss
@@ -27,7 +27,7 @@
   @include margin($tab-button-md-text-margin-top, $tab-button-md-text-margin-end, $tab-button-md-text-margin-bottom, $tab-button-md-text-margin-start);
   @include transform-origin(center, bottom);
 
-  transform: var(--text-transform);
+  transform: var(--label-transform);
 
   transition: $tab-button-md-text-transition;
 
@@ -37,7 +37,7 @@
 }
 
 :host(.tab-selected) .tab-button-text {
-  --text-transform: #{$tab-button-md-text-transform-active};
+  --label-transform: #{$tab-button-md-text-transform-active};
 
   transition: $tab-button-md-text-transition;
 }
diff --git a/core/src/components/tab-button/tab-button.scss b/core/src/components/tab-button/tab-button.scss
index 5899646b055..e5286d1c49d 100644
--- a/core/src/components/tab-button/tab-button.scss
+++ b/core/src/components/tab-button/tab-button.scss
@@ -80,13 +80,13 @@ a {
 }
 
 .tab-button-text {
-  @include margin(var(--text-margin-top), null, var(--text-margin-bottom), null);
+  @include margin(var(--label-margin-top), null, var(--label-margin-bottom), null);
 
-  display: var(--text-display, block);
+  display: var(--label-display, block);
 
-  font-size: var(--text-font-size);
+  font-size: var(--label-font-size);
 
-  line-height: var(--text-line-height);
+  line-height: var(--label-line-height);
 }
 
 .tab-button-icon {
diff --git a/core/src/components/tabbar/tabbar.ios.scss b/core/src/components/tabbar/tabbar.ios.scss
index dc51d3b21a1..ba14ebc2ac6 100644
--- a/core/src/components/tabbar/tabbar.ios.scss
+++ b/core/src/components/tabbar/tabbar.ios.scss
@@ -39,10 +39,10 @@
 :host(.layout-icon-end) ion-tab-button,
 :host(.layout-icon-start) ion-tab-button,
 :host(.layout-icon-hide) ion-tab-button {
-  --text-margin-top: 2px;
-  --text-margin-bottom: 2px;
-  --text-font-size: 14px;
-  --text-line-height: 1.1;
+  --label-margin-top: 2px;
+  --label-margin-bottom: 2px;
+  --label-font-size: 14px;
+  --label-line-height: 1.1;
 }
 
 :host(.layout-icon-end) ion-tab-button,
diff --git a/core/src/components/tabbar/tabbar.md.scss b/core/src/components/tabbar/tabbar.md.scss
index 506291ed290..9532fa36db6 100644
--- a/core/src/components/tabbar/tabbar.md.scss
+++ b/core/src/components/tabbar/tabbar.md.scss
@@ -17,12 +17,12 @@
 // --------------------------------------------------
 
 :host(.layout-icon-top) ion-tab-button {
-  --text-margin-bottom: -2px;
+  --label-margin-bottom: -2px;
 }
 
 :host(.layout-icon-bottom) ion-tab-button {
-  --text-margin-top: -2px;
-  --text-transform: transform-origin(center, top);
+  --label-margin-top: -2px;
+  --label-transform: transform-origin(center, top);
 }
 
 // // Tab layout: icon-end
diff --git a/core/src/components/tabbar/tabbar.scss b/core/src/components/tabbar/tabbar.scss
index 32fe3e969dc..e7034b9108e 100644
--- a/core/src/components/tabbar/tabbar.scss
+++ b/core/src/components/tabbar/tabbar.scss
@@ -101,7 +101,7 @@
 }
 
 :host(.layout-label-hide) ion-tab-button {
-  --text-display: none;
+  --label-display: none;
 }
 
 :host(.layout-icon-top) ion-tab-button,

From 4e557791ad0b3d3ecbaad7682361b03294d26908 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Fri, 10 Aug 2018 10:29:44 -0400
Subject: [PATCH 6/7] style(sass): fix lint errors

---
 core/src/components/content/content.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/core/src/components/content/content.scss b/core/src/components/content/content.scss
index 4847b55d8ec..26fdc1240c2 100644
--- a/core/src/components/content/content.scss
+++ b/core/src/components/content/content.scss
@@ -19,10 +19,9 @@
 
   flex: 1;
 
-  margin: 0 !important;
-
   /* stylelint-disable */
   padding: 0 !important;
+  margin: 0 !important;
   /* stylelint-enable */
 
   background-color: #{current-color(base)};

From 943475ec29b99bd76a5a692d59d5d17b022e94a9 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Fri, 10 Aug 2018 16:12:09 -0400
Subject: [PATCH 7/7] fix(tabs): fix the transforms for icon/text and change
 icon size

references #14611
---
 .../components/tab-button/tab-button.md.scss  |  5 +-
 .../tab-button/tab-button.md.vars.scss        | 46 +++++--------------
 .../src/components/tab-button/tab-button.scss |  4 ++
 core/src/components/tab-button/tab-button.tsx |  2 +-
 core/src/components/tabbar/tabbar.md.scss     | 21 +++------
 .../components/tabs/test/colors/index.html    |  2 +-
 6 files changed, 24 insertions(+), 56 deletions(-)

diff --git a/core/src/components/tab-button/tab-button.md.scss b/core/src/components/tab-button/tab-button.md.scss
index 25613f9cafc..7b8defb11a5 100644
--- a/core/src/components/tab-button/tab-button.md.scss
+++ b/core/src/components/tab-button/tab-button.md.scss
@@ -8,6 +8,7 @@
   --color: #{$tab-button-md-text-color};
   --color-selected: #{$tabbar-md-text-color-active};
   --background-focused: #{$tabbar-md-background-color-focused};
+  --icon-transform-selected: #{$tab-button-md-icon-transform-active};
 
   max-width: 168px;
 
@@ -58,7 +59,3 @@
   font-size: $tab-button-md-icon-size;
 }
 
-// Tab layout: icon-top, icon-only, label-only
-:host(.tab-selected) .tab-button-icon {
-  --icon-transform: #{translate3d($tab-button-md-icon-transform-x-active, $tab-button-md-icon-transform-y-active, $tab-button-md-icon-transform-z-active)};
-}
diff --git a/core/src/components/tab-button/tab-button.md.vars.scss b/core/src/components/tab-button/tab-button.md.vars.scss
index d3cd9d29380..d1c7da97110 100644
--- a/core/src/components/tab-button/tab-button.md.vars.scss
+++ b/core/src/components/tab-button/tab-button.md.vars.scss
@@ -55,49 +55,25 @@ $tab-button-md-text-capitalization:             none !default;
 $tab-button-md-text-transform-active:           scale3d($tab-button-md-font-size-active / $tab-button-md-font-size, $tab-button-md-font-size-active / $tab-button-md-font-size, 1) !default;
 
 /// @prop - Text transition for the tab button text
-$tab-button-md-text-transition:                 transform .3s ease-in-out !default;
+$tab-button-md-text-transition:                 transform .1s ease-in-out !default;
 
-/// @prop - Transform x for the active tab button icon when the layout is icon-top, icon-only, or label-only
-$tab-button-md-icon-transform-x-active:         0 !default;
+/// @prop - Transform for the active tab button icon when the layout is icon-top, icon-only, or label-only
+$tab-button-md-icon-transform-active:           translate3d(0, -2px, 0) !default;
 
-/// @prop - Transform y for the active tab button icon when the layout is icon-top, icon-only, or label-only
-$tab-button-md-icon-transform-y-active:         -2px !default;
+/// @prop - Transform for the active tab button icon when the layout is icon-right
+$tab-button-md-icon-right-transform-active:     translate3d(6px, 0, 0) !default;
 
-/// @prop - Transform z for the active tab button icon when the layout is icon-top, icon-only, or label-only
-$tab-button-md-icon-transform-z-active:         0 !default;
+/// @prop - Transform for the active tab button icon when the layout is icon-bottom
+$tab-button-md-icon-bottom-transform-active:    translate3d(0, 2px, 0) !default;
 
-/// @prop - Transform x for the active tab button icon when the layout is icon-right
-$tab-button-md-icon-right-transform-x-active:   2px !default;
-
-/// @prop - Transform y for the active tab button icon when the layout is icon-right
-$tab-button-md-icon-right-transform-y-active:   0 !default;
-
-/// @prop - Transform z for the active tab button icon when the layout is icon-right
-$tab-button-md-icon-right-transform-z-active:   0 !default;
-
-/// @prop - Transform x for the active tab button icon when the layout is icon-bottom
-$tab-button-md-icon-bottom-transform-x-active:  0 !default;
-
-/// @prop - Transform y for the active tab button icon when the layout is icon-bottom
-$tab-button-md-icon-bottom-transform-y-active:  2px !default;
-
-/// @prop - Transform z for the active tab button icon when the layout is icon-bottom
-$tab-button-md-icon-bottom-transform-z-active:  0 !default;
-
-/// @prop - Transform x for the active tab button icon when the layout is icon-left
-$tab-button-md-icon-left-transform-x-active:    -2px !default;
-
-/// @prop - Transform y for the active tab button icon when the layout is icon-left
-$tab-button-md-icon-left-transform-y-active:    0 !default;
-
-/// @prop - Transform z for the active tab button icon when the layout is icon-left
-$tab-button-md-icon-left-transform-z-active:    0 !default;
+/// @prop - Transform for the active tab button icon when the layout is icon-left
+$tab-button-md-icon-left-transform-active:      translate3d(-6px, 0, 0) !default;
 
 /// @prop - Text transition for the tab button icon
-$tab-button-md-icon-transition:                 transform .3s ease-in-out !default;
+$tab-button-md-icon-transition:                 transform .1s ease-in-out !default;
 
 /// @prop - Size of the tab button icon
-$tab-button-md-icon-size:                       24px !default;
+$tab-button-md-icon-size:                       22px !default;
 
 /// @prop - Opacity of the inactive tab button
 $tab-button-md-opacity:                         .7 !default;
diff --git a/core/src/components/tab-button/tab-button.scss b/core/src/components/tab-button/tab-button.scss
index e5286d1c49d..c5ca8075da3 100644
--- a/core/src/components/tab-button/tab-button.scss
+++ b/core/src/components/tab-button/tab-button.scss
@@ -151,3 +151,7 @@ a {
 :host(.has-icon-only) .tab-badge {
   --badge-end: #{calc(50% - 30px)};
 }
+
+:host(.tab-selected) .tab-button-icon {
+  transform: var(--icon-transform-selected);
+}
\ No newline at end of file
diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx
index 990b5a88477..3ec53b0cd09 100644
--- a/core/src/components/tab-button/tab-button.tsx
+++ b/core/src/components/tab-button/tab-button.tsx
@@ -75,7 +75,7 @@ export class TabButton {
         { icon && <ion-icon class="tab-button-icon" icon={icon} lazy={false}></ion-icon> }
         { label && <span class="tab-button-text">{label}</span> }
         { badge && <ion-badge class="tab-badge" color={badgeColor}>{badge}</ion-badge> }
-        { mode === 'md' && <ion-ripple-effect tapClick={true}/> }
+        { mode === 'md' && <ion-ripple-effect tapClick={true}></ion-ripple-effect> }
       </a>
     ];
   }
diff --git a/core/src/components/tabbar/tabbar.md.scss b/core/src/components/tabbar/tabbar.md.scss
index 9532fa36db6..c8117cc7fbd 100644
--- a/core/src/components/tabbar/tabbar.md.scss
+++ b/core/src/components/tabbar/tabbar.md.scss
@@ -20,25 +20,16 @@
   --label-margin-bottom: -2px;
 }
 
+:host(.layout-icon-end) ion-tab-button {
+  --icon-transform-selected: #{$tab-button-md-icon-right-transform-active};
+}
+
 :host(.layout-icon-bottom) ion-tab-button {
   --label-margin-top: -2px;
   --label-transform: transform-origin(center, top);
+  --icon-transform-selected: #{$tab-button-md-icon-bottom-transform-active};
 }
 
-// // Tab layout: icon-end
-:host(.layout-icon-end) ion-tab-button {
-  --icon-transform: #{translate3d($tab-button-md-icon-right-transform-x-active, $tab-button-md-icon-right-transform-y-active, $tab-button-md-icon-right-transform-z-active)};
-}
- // Tab layout: icon-bottom
-:host(.layout-icon-bottom) ion-tab-button {
-  --icon-transform: #{translate3d($tab-button-md-icon-bottom-transform-x-active, $tab-button-md-icon-bottom-transform-y-active, $tab-button-md-icon-bottom-transform-z-active)};
-}
- // Tab layout: icon-start
 :host(.layout-icon-start) ion-tab-button {
-  --icon-transform: #{translate3d($tab-button-md-icon-left-transform-x-active, $tab-button-md-icon-left-transform-y-active, $tab-button-md-icon-left-transform-z-active)};
+  --icon-transform-selected: #{$tab-button-md-icon-left-transform-active};
 }
-
-// .layout-icon-hide .tab-button-md,
-// .layout-label-hide .tab-button-md {
-//   justify-content: center;
-// }
\ No newline at end of file
diff --git a/core/src/components/tabs/test/colors/index.html b/core/src/components/tabs/test/colors/index.html
index 104ecccd299..357e54e1b5e 100644
--- a/core/src/components/tabs/test/colors/index.html
+++ b/core/src/components/tabs/test/colors/index.html
@@ -31,7 +31,7 @@
     <!-- Icons on top of text -->
     <ion-tabs selected-index="2" color="secondary">
       <ion-tab label="Location" icon="navigate"></ion-tab>
-      <ion-tab label="Favorites" badge="6" icon="star"></ion-tab>
+      <ion-tab label="Favorites" badge="6" icon="heart"></ion-tab>
       <ion-tab label="Radio" icon="musical-notes"></ion-tab>
     </ion-tabs>