fix(tabs): don't add the has-icon class to a tab button if the layout…

… is icon-hide fixes #5658
ionic-team · Mar 4, 2016 · 6b93bc1 · 6b93bc1
1 parent 7ee0b52
commit 6b93bc1
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/ionic/components/tabs/tab-button.ts b/ionic/components/tabs/tab-button.ts
@@ -29,19 +29,23 @@ export class TabButton extends Ion {
   private hasTitleOnly: boolean;
   private hasIconOnly: boolean;
   private hasBadge: boolean;
+  private _layout: string;
 
   @Input() tab: Tab;
   @Output() select: EventEmitter<Tab> = new EventEmitter();
 
   constructor(config: Config, elementRef: ElementRef) {
     super(elementRef);
     this.disHover = (config.get('hoverCSS') === false);
+    this._layout = config.get('tabbarLayout');
   }
 
   ngOnInit() {
     this.tab.btn = this;
+    this._layout = this.tab.parent.tabbarLayout || this._layout;
+
     this.hasTitle = !!this.tab.tabTitle;
-    this.hasIcon = !!this.tab.tabIcon;
+    this.hasIcon = !!this.tab.tabIcon && this._layout != 'icon-hide';
     this.hasTitleOnly = (this.hasTitle && !this.hasIcon);
     this.hasIconOnly = (this.hasIcon && !this.hasTitle);
     this.hasBadge = !!this.tab.tabBadge;

diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss
@@ -159,7 +159,6 @@ tab-highlight {
   right: calc(50% - 30px);
 }
 
-[tabbarLayout=icon-hide] .tab-badge,
 [tabbarLayout=icon-bottom] .tab-badge,
 [tabbarLayout=icon-left] .tab-badge,
 [tabbarLayout=icon-right] .tab-badge {

diff --git a/ionic/components/tabs/test/badges/main.html b/ionic/components/tabs/test/badges/main.html
@@ -32,7 +32,7 @@
 
 
 <!-- Icons right of text -->
-<ion-tabs tabbarLayout="icon-right" no-navbar>
+<ion-tabs tabbarLayout="icon-right" primary no-navbar>
   <ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings" tabBadge="1030" tabBadgeStyle="light"></ion-tab>
@@ -45,6 +45,21 @@
   <ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
 </ion-tabs>
 
+<!-- No icons -->
+<ion-tabs no-navbar tabbarLayout="icon-hide">
+  <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root" tabBadge="4"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
+</ion-tabs>
+
+
+<!-- No title -->
+<ion-tabs tabbarLayout="title-hide" secondary no-navbar>
+  <ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="7" tabBadgeStyle="light"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
+</ion-tabs>
+
 <!-- Dynamic Badge -->
 <ion-tabs tabbarLayout="icon-left" no-navbar>
   <ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>

diff --git a/ionic/components/tabs/test/tab-bar-scenarios/main.html b/ionic/components/tabs/test/tab-bar-scenarios/main.html
@@ -56,7 +56,7 @@
 
 
 <!-- No title -->
-<ion-tabs tabbarLayout="title-hide" no-navbar secondary>
+<ion-tabs tabbarLayout="title-hide" secondary no-navbar>
   <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>