From eb9ed179dad1b8ff8b0017225d29ebd43d2ec3d6 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 12 Jul 2018 10:28:12 -0400
Subject: [PATCH] fix(tab-button): add a class to hide the tab when show is
 false

---
 core/src/components/tab-button/tab-button.scss |  7 ++++++-
 core/src/components/tab-button/tab-button.tsx  |  2 +-
 core/src/components/tabs/test/basic/index.html | 15 ++++++++++-----
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/core/src/components/tab-button/tab-button.scss b/core/src/components/tab-button/tab-button.scss
index d267330e4df..727e6d53b19 100644
--- a/core/src/components/tab-button/tab-button.scss
+++ b/core/src/components/tab-button/tab-button.scss
@@ -1,9 +1,10 @@
 @import "../../themes/ionic.globals";
 
 :host {
+  @include border-radius(0);
   @include margin(0);
+
   text-align: center;
-  @include border-radius(0);
 
   box-sizing: border-box;
 
@@ -42,6 +43,10 @@
   color: var(--color-selected);
 }
 
+:host(.tab-hidden) {
+  display: none;
+}
+
 a {
   text-decoration: none;
 }
diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx
index 3531ad225b3..378e950d8ae 100644
--- a/core/src/components/tab-button/tab-button.tsx
+++ b/core/src/components/tab-button/tab-button.tsx
@@ -74,9 +74,9 @@ export class TabButton {
       'role': 'tab',
       'id': tab.btnId,
       'aria-selected': selected,
-      'hidden': !tab.show,
       class: {
         ...createColorClasses(this.color),
+        'tab-hidden': !tab.show,
         'tab-selected': selected,
         'has-label': hasLabel,
         'has-icon': hasIcon,
diff --git a/core/src/components/tabs/test/basic/index.html b/core/src/components/tabs/test/basic/index.html
index d2a7178a071..d3ef8e4af5a 100644
--- a/core/src/components/tabs/test/basic/index.html
+++ b/core/src/components/tabs/test/basic/index.html
@@ -14,7 +14,6 @@
   <ion-app>
     <ion-tabs>
       <ion-tab label="Plain List" icon="star">
-
         <ion-header>
           <ion-toolbar>
             <ion-title>Tab One</ion-title>
@@ -23,11 +22,9 @@
         <ion-content padding>
           Tab One
         </ion-content>
-
       </ion-tab>
 
       <ion-tab label="Schedule" icon="globe">
-
         <ion-header>
           <ion-toolbar>
             <ion-title>Tab Two</ion-title>
@@ -36,11 +33,9 @@
         <ion-content padding>
           Tab Two
         </ion-content>
-
       </ion-tab>
 
       <ion-tab label="Stopwatch" icon="logo-facebook">
-
         <ion-header>
           <ion-toolbar>
             <ion-title>Tab Three</ion-title>
@@ -49,7 +44,17 @@
         <ion-content padding>
           Tab Three
         </ion-content>
+      </ion-tab>
 
+      <ion-tab id="hiddenTab" label="Hidden" icon="alert" show="false">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Hidden Tab</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content padding>
+          Hidden Tab
+        </ion-content>
       </ion-tab>
 
       <ion-tab disabled label="Messages" icon="chatboxes" component="page-one">