refactor(tabs): remove tabbarIcons and add tabbarLayout which accepts different values

BREAKING CHANGES: `tabbarIcons` has been replaced with `tabbarLayout`
with the following values: `icon-top`, `icon-left`, `icon-right`,
`icon-bottom`, `icon-hide`, `title-hide`.

closes #5625

demos/tabs/main.html

@@ -28,7 +28,7 @@
 
 
   <!-- Icons below text -->
-  <ion-tabs tabbarIcons="bottom" no-navbar selectedIndex="1">
+  <ion-tabs tabbarLayout="icon-bottom" no-navbar selectedIndex="1">
     <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>
@@ -36,7 +36,7 @@
 
 
   <!-- Icons right of text -->
-  <ion-tabs tabbarIcons="right" no-navbar selectedIndex="0">
+  <ion-tabs tabbarLayout="icon-right" no-navbar selectedIndex="0">
     <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>
@@ -44,7 +44,7 @@
 
 
   <!-- Icons left of text -->
-  <ion-tabs tabbarIcons="left" no-navbar>
+  <ion-tabs tabbarLayout="icon-left" 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>
@@ -52,7 +52,7 @@
 
 
   <!-- No icons -->
-  <ion-tabs tabbarIcons="hide" no-navbar>
+  <ion-tabs tabbarLayout="icon-hide" 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>

ionic/components/tabs/tabs.ios.scss

@@ -59,8 +59,8 @@ ion-tabs[tabbarPlacement=top] tabbar {
   }
 }
 
-[tabbarIcons=right] .tab-button,
+[tabbarLayout=icon-right] .tab-button,
-[tabbarIcons=left] .tab-button {
+[tabbarLayout=icon-left] .tab-button {
 
   .tab-button-text {
     font-size: 1.4rem;
@@ -76,11 +76,7 @@ ion-tabs[tabbarPlacement=top] tabbar {
   }
 }
 
-[tabbarIcons=hide] .tab-button-text {
+[tabbarLayout=icon-hide] .tab-button,
-  font-size: 1.4rem;
-  line-height: 1.1;
-}
-
 .tab-button.has-title-only {
   min-height: $tabbar-ios-height - 8;
 
@@ -90,6 +86,7 @@ ion-tabs[tabbarPlacement=top] tabbar {
   }
 }
 
+[tabbarLayout=title-hide] .tab-button,
 .tab-button.icon-only {
   min-height: $tabbar-ios-height - 8;
 }

ionic/components/tabs/tabs.md.scss

@@ -49,13 +49,13 @@ tabbar {
   min-width: $tabbar-md-item-icon-size + 5;
 }
 
-[tabbarIcons=bottom] .tab-button {
+[tabbarLayout=icon-bottom] .tab-button {
   padding-top: 8px;
   padding-bottom: 8px;
 }
 
-[tabbarIcons=right] .tab-button,
+[tabbarLayout=icon-right] .tab-button,
-[tabbarIcons=left] .tab-button {
+[tabbarLayout=icon-left] .tab-button {
   padding-bottom: 10px;
 
   ion-icon {
@@ -63,6 +63,8 @@ tabbar {
   }
 }
 
+[tabbarLayout=icon-hide] .tab-button,
+[tabbarLayout=title-hide] .tab-button,
 .tab-button.icon-only,
 .tab-button.has-title-only {
   padding: 6px 10px 6px 10px;

ionic/components/tabs/tabs.scss

@@ -108,13 +108,13 @@ tab-highlight {
   display: none;
 }
 
-[tabbarIcons=bottom] .tab-button {
+[tabbarLayout=icon-bottom] .tab-button {
   .tab-button-icon {
     order: 10;
   }
 }
 
-[tabbarIcons=left] .tab-button {
+[tabbarLayout=icon-left] .tab-button {
   flex-direction: row;
 
   .tab-button-icon {
@@ -123,7 +123,7 @@ tab-highlight {
   }
 }
 
-[tabbarIcons=right] .tab-button {
+[tabbarLayout=icon-right] .tab-button {
   flex-direction: row;
 
   .tab-button-icon {
@@ -133,7 +133,11 @@ tab-highlight {
   }
 }
 
-[tabbarIcons=hide] .tab-button-icon {
+[tabbarLayout=icon-hide] .tab-button-icon {
+  display: none;
+}
+
+[tabbarLayout=title-hide] .tab-button-text {
   display: none;
 }
 
@@ -155,8 +159,8 @@ tab-highlight {
   right: calc(50% - 30px);
 }
 
-[tabbarIcons=bottom] .tab-badge,
+[tabbarLayout=icon-bottom] .tab-badge,
-[tabbarIcons=left] .tab-badge,
+[tabbarLayout=icon-left] .tab-badge,
-[tabbarIcons=right] .tab-badge {
+[tabbarLayout=icon-right] .tab-badge {
   right: calc(50% - 50px);
 }

ionic/components/tabs/tabs.ts

@@ -90,27 +90,32 @@ export class Tabs extends Ion {
   subPages: boolean;
 
   /**
-   * @input {number} The default selected tab index when first loaded. If a selected index wasn't provided then it'll use `0`, the first tab.
+   * @input {number} The default selected tab index when first loaded. If a selected index isn't provided then it will use `0`, the first tab.
    */
   @Input() selectedIndex: any;
 
   /**
-   * @input {boolean} Sets whether to preload all the tabs, true or false
+   * @input {boolean} Set whether to preload all the tabs: `true`, `false`.
    */
   @Input() preloadTabs: any;
 
   /**
-   * @input {string} set the position of the tabbar's icons: top, bottom, left, right, hide
+   * @input {string} Deprecated, use `tabbarLayout` instead. Set the position of the tabbar's icons: `top`, `bottom`, `left`, `right`, `hide`.
    */
   @Input() tabbarIcons: string;
 
   /**
-   * @input {string} Set position of the tabbar, top or bottom
+   * @input {string} Set the tabbar layout: `icon-top`, `icon-left`, `icon-right`, `icon-bottom`, `icon-hide`, `title-hide`.
+   */
+  @Input() tabbarLayout: string;
+
+  /**
+   * @input {string} Set position of the tabbar: `top`, `bottom`.
    */
   @Input() tabbarPlacement: string;
 
   /**
-   * @input {any} expression you want to evaluate when the tabs change
+   * @input {any} Expression to evaluate when the tab changes.
    */
   @Output() change: EventEmitter<Tab> = new EventEmitter();
 
@@ -162,8 +167,13 @@ export class Tabs extends Ion {
    */
   ngAfterViewInit() {
     this._setConfig('tabbarPlacement', 'bottom');
+    this._setConfig('tabbarLayout', 'icon-top');
     this._setConfig('tabbarIcons', 'top');
 
+    if (this.tabbarIcons) {
+      console.warn("DEPRECATION WARNING: 'tabbarIcons' is no longer supported and will be removed in next major release. Use 'tabbarLayout' instead. Available values: 'icon-top', 'icon-left', 'icon-right', 'icon-bottom', 'icon-hide', 'title-hide'.");
+    }
+
     if (this._useHighlight) {
       this._platform.onResize(() => {
         this._highlight.select(this.getSelected());
@@ -201,7 +211,7 @@ export class Tabs extends Ion {
   private _setConfig(attrKey, fallback) {
     var val = this[attrKey];
     if (isUndefined(val)) {
-      val = this._config.get(attrKey);
+      val = this._config.get(attrKey, fallback);
     }
     this._renderer.setElementAttribute(this._elementRef.nativeElement, attrKey, val);
   }

ionic/components/tabs/test/badges/main.html

@@ -24,7 +24,7 @@
 
 
 <!-- Icons below text -->
-<ion-tabs tabbarIcons="bottom" no-navbar>
+<ion-tabs tabbarLayout="icon-bottom" no-navbar>
   <ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="heart" tabBadge="577" tabBadgeStyle="dark"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
@@ -32,21 +32,21 @@
 
 
 <!-- Icons right of text -->
-<ion-tabs tabbarIcons="right" no-navbar>
+<ion-tabs tabbarLayout="icon-right" 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>
 </ion-tabs>
 
 <!-- Icons left of text -->
-<ion-tabs tabbarIcons="left" no-navbar>
+<ion-tabs tabbarLayout="icon-left" no-navbar>
   <ion-tab tabTitle="Recents" tabIcon="call" tabBadge="32" tabBadgeStyle="danger"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
 </ion-tabs>
 
 <!-- Dynamic Badge -->
-<ion-tabs tabbarIcons="left" no-navbar>
+<ion-tabs tabbarLayout="icon-left" 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]="myBadge" tabBadgeStyle="primary"></ion-tab>

ionic/components/tabs/test/tab-bar-scenarios/main.html

@@ -24,7 +24,7 @@
 
 
 <!-- Icons below text -->
-<ion-tabs tabbarIcons="bottom" no-navbar selectedIndex="1">
+<ion-tabs tabbarLayout="icon-bottom" no-navbar selectedIndex="1">
   <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>
@@ -32,7 +32,7 @@
 
 
 <!-- Icons right of text -->
-<ion-tabs tabbarIcons="right" no-navbar selectedIndex="0">
+<ion-tabs tabbarLayout="icon-right" no-navbar selectedIndex="0">
   <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>
@@ -40,7 +40,7 @@
 
 
 <!-- Icons left of text -->
-<ion-tabs tabbarIcons="left" no-navbar>
+<ion-tabs tabbarLayout="icon-left" 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>
@@ -48,7 +48,15 @@
 
 
 <!-- No icons -->
-<ion-tabs tabbarIcons="hide" no-navbar>
+<ion-tabs tabbarLayout="icon-hide" 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>
+</ion-tabs>
+
+
+<!-- No title -->
+<ion-tabs tabbarLayout="title-hide" no-navbar secondary>
   <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>
@@ -61,11 +69,3 @@
   <ion-tab tabTitle="Indiana Jones and the Temple of Doom" [root]="root"></ion-tab>
   <ion-tab tabTitle="Indiana Jones and the Last Crusade" [root]="root"></ion-tab>
 </ion-tabs>
-
-
-<!-- primary color tabbar -->
-<ion-tabs no-navbar primary>
-  <ion-tab tabIcon="call" [root]="root"></ion-tab>
-  <ion-tab tabIcon="heart" [root]="root"></ion-tab>
-  <ion-tab tabIcon="settings" [root]="root"></ion-tab>
-</ion-tabs>

ionic/config/config.ts

@@ -101,6 +101,7 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
  * | pageTransitionDelay        | 16                     | 120                       |
  * | tabbarPlacement            | bottom                 | top                       |
  * | tabbarHighlight            |                        | top                       |
+ * | tabbarLayout               |                        |                           |
  * | tabSubPages                |                        | true                      |
  *
 **/