refactor(tabs): rename tab input/config options to be more clear/consistent

BREAKING CHANGES:

Tab input/config options have been renamed. The following options were
renamed:

- `tabbarHighlight` -> `tabsHighlight`
- `tabbarLayout` -> `tabsLayout`
- `tabSubPages` -> `tabsHideOnSubPages`
- `tabbarPlacement` -> `tabsPlacement`

The previous names have been deprecated. They will still work in the
current release but will be removed in the future so please update to
the new names.

references #7143

Author: brandyscarney

demos/config/index.ts

@@ -94,13 +94,13 @@ export class ApiDemoPage {
       this.config = {
         'backButtonIcon': 'ios-arrow-back',
         'iconMode': 'ios',
-        'tabbarPlacement': 'bottom'
+        'tabsPlacement': 'bottom'
       };
     } else {
       this.config = {
         'backButtonIcon': 'md-arrow-back',
         'iconMode': 'md',
-        'tabbarPlacement': 'top'
+        'tabsPlacement': 'top'
       };
     }
 

demos/config/main.html

@@ -31,7 +31,7 @@
 
     <ion-item>
       <ion-label>Tab Placement</ion-label>
-      <ion-select [(ngModel)]="config.tabbarPlacement">
+      <ion-select [(ngModel)]="config.tabsPlacement">
         <ion-option value="bottom">bottom</ion-option>
         <ion-option value="top">top</ion-option>
       </ion-select>
@@ -53,7 +53,7 @@
 ionicBootstrap(MyApp, [], {
   backButtonIcon: "{{initialConfig.backButtonIcon}}"
   iconMode: "{{initialConfig.iconMode}}"
-  tabbarPlacement: "{{initialConfig.tabbarPlacement}}"
+  tabsPlacement: "{{initialConfig.tabsPlacement}}"
 });</pre>
 
   <div padding>

demos/tabs/main.html

@@ -33,31 +33,31 @@
 
 
   <!-- Icons below text -->
-  <ion-tabs tabbarLayout="icon-bottom" selectedIndex="1" danger>
+  <ion-tabs tabsLayout="icon-bottom" selectedIndex="1" danger>
     <ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="47" 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>
 
 
   <!-- Icons right of text -->
-  <ion-tabs tabbarLayout="icon-right" selectedIndex="0" light>
+  <ion-tabs tabsLayout="icon-right" selectedIndex="0" light>
     <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" tabBadge="4" tabBadgeStyle="secondary"></ion-tab>
   </ion-tabs>
 
 
   <!-- Icons left of text -->
-  <ion-tabs tabbarLayout="icon-left" dark>
+  <ion-tabs tabsLayout="icon-left" dark>
     <ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="1" tabBadgeStyle="danger"></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 icons -->
-  <ion-tabs tabbarLayout="icon-hide">
+  <ion-tabs tabsLayout="icon-hide">
     <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
     <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root" tabBadge="61" tabBadgeStyle="dark"></ion-tab>
     <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>

src/components/app/structure.scss

@@ -176,7 +176,7 @@ ion-tabbar.show-tabbar {
   opacity: 1;
 }
 
-[tabbarPlacement=top] > ion-tabbar {
+[tabsPlacement=top] > ion-tabbar {
   top: 0;
   bottom: auto;
 }

src/components/content/content.ts

@@ -68,7 +68,7 @@ export class Content extends Ion {
   private _headerHeight: number;
   private _footerHeight: number;
   private _tabbarHeight: number;
-  private _tabbarPlacement: string;
+  private _tabsPlacement: string;
   private _inputPolling: boolean = false;
   private _scroll: ScrollView;
   private _scLsn: Function;
@@ -492,7 +492,7 @@ export class Content extends Ion {
     this._paddingLeft = 0;
     this._headerHeight = 0;
     this._footerHeight = 0;
-    this._tabbarPlacement = null;
+    this._tabsPlacement = null;
 
     let ele: HTMLElement = this._elementRef.nativeElement;
     if (!ele) return;
@@ -530,9 +530,9 @@ export class Content extends Ion {
         tabbarEle = <HTMLElement>ele.firstElementChild;
         this._tabbarHeight = tabbarEle.clientHeight;
 
-        if (this._tabbarPlacement === null) {
+        if (this._tabsPlacement === null) {
           // this is the first tabbar found, remember it's position
-          this._tabbarPlacement = ele.getAttribute('tabbarplacement');
+          this._tabsPlacement = ele.getAttribute('tabsplacement');
         }
       }
 
@@ -558,7 +558,7 @@ export class Content extends Ion {
       // have come from the app's css, is different than the new padding value
 
       newVal = this._headerHeight + this._paddingTop;
-      if (this._tabbarPlacement === 'top') {
+      if (this._tabsPlacement === 'top') {
         newVal += this._tabbarHeight;
       }
       if (newVal !== this.contentTop) {
@@ -567,7 +567,7 @@ export class Content extends Ion {
       }
 
       newVal = this._footerHeight + this._paddingBottom;
-      if (this._tabbarPlacement === 'bottom') {
+      if (this._tabsPlacement === 'bottom') {
         newVal += this._tabbarHeight;
 
         if (newVal > 0 && this._footerEle) {
@@ -582,7 +582,7 @@ export class Content extends Ion {
     } else {
       // adjust the content with margins
       newVal = this._headerHeight;
-      if (this._tabbarPlacement === 'top') {
+      if (this._tabsPlacement === 'top') {
         newVal += this._tabbarHeight;
       }
       if (newVal !== this.contentTop) {
@@ -591,7 +591,7 @@ export class Content extends Ion {
       }
 
       newVal = this._footerHeight;
-      if (this._tabbarPlacement === 'bottom') {
+      if (this._tabsPlacement === 'bottom') {
         newVal += this._tabbarHeight;
       }
       if (newVal !== this.contentBottom) {
@@ -605,9 +605,9 @@ export class Content extends Ion {
     }
 
 
-    if (this._tabbarPlacement !== null && this._tabs) {
+    if (this._tabsPlacement !== null && this._tabs) {
       // set the position of the tabbar
-      if (this._tabbarPlacement === 'top') {
+      if (this._tabsPlacement === 'top') {
         this._tabs.setTabbarPosition(this._headerHeight, -1);
 
       } else {

src/components/tabs/tab-button.ts

@@ -37,12 +37,17 @@ export class TabButton extends Ion {
   constructor(config: Config, elementRef: ElementRef) {
     super(elementRef);
     this.disHover = (config.get('hoverCSS') === false);
-    this.layout = config.get('tabbarLayout');
+    this.layout = config.get('tabsLayout');
+
+    // TODO deprecated 07-07-2016 beta.11
+    if (config.get('tabbarLayout') !== undefined) {
+      this.layout = config.get('tabbarLayout');
+    }
   }
 
   ngOnInit() {
     this.tab.btn = this;
-    this.layout = this.tab.parent.tabbarLayout || this.layout;
+    this.layout = this.tab.parent.tabsLayout || this.layout;
 
     this.hasTitle = !!this.tab.tabTitle;
     this.hasIcon = !!this.tab.tabIcon && this.layout !== 'icon-hide';

src/components/tabs/tabs.ios.scss

@@ -22,7 +22,7 @@ ion-tabbar {
   background: $tabbar-ios-background;
 }
 
-ion-tabs[tabbarPlacement=top] ion-tabbar {
+ion-tabs[tabsPlacement=top] ion-tabbar {
   border-top: 0;
   border-bottom: 1px solid $toolbar-ios-border-color;
 }
@@ -65,8 +65,8 @@ ion-tabs[tabbarPlacement=top] ion-tabbar {
   }
 }
 
-[tabbarLayout=icon-right] .tab-button,
-[tabbarLayout=icon-left] .tab-button {
+[tabsLayout=icon-right] .tab-button,
+[tabsLayout=icon-left] .tab-button {
 
   .tab-button-text {
     font-size: 1.4rem;
@@ -81,7 +81,7 @@ ion-tabs[tabbarPlacement=top] ion-tabbar {
   }
 }
 
-[tabbarLayout=icon-hide] .tab-button,
+[tabsLayout=icon-hide] .tab-button,
 .tab-button.has-title-only {
   min-height: $tabbar-ios-height - 8;
 
@@ -93,7 +93,7 @@ ion-tabs[tabbarPlacement=top] ion-tabbar {
   }
 }
 
-[tabbarLayout=title-hide] .tab-button,
+[tabsLayout=title-hide] .tab-button,
 .tab-button.icon-only {
   min-height: $tabbar-ios-height - 8;
 }
@@ -104,7 +104,7 @@ ion-tabs[tabbarPlacement=top] ion-tabbar {
     border-top-width: $hairlines-width;
   }
 
-  &[tabbarPlacement="top"] ion-tabbar {
+  &[tabsPlacement="top"] ion-tabbar {
     border-bottom-width: $hairlines-width;
   }
 

src/components/tabs/tabs.md.scss

@@ -52,22 +52,22 @@ ion-tabbar {
   font-size: $tabbar-md-item-icon-size;
 }
 
-[tabbarLayout=icon-bottom] .tab-button {
+[tabsLayout=icon-bottom] .tab-button {
   padding-top: 8px;
   padding-bottom: 8px;
 }
 
-[tabbarLayout=icon-right] .tab-button,
-[tabbarLayout=icon-left] .tab-button {
+[tabsLayout=icon-right] .tab-button,
+[tabsLayout=icon-left] .tab-button {
   padding-bottom: 10px;
 
   ion-icon {
     min-width: 24px;
   }
 }
 
-[tabbarLayout=icon-hide] .tab-button,
-[tabbarLayout=title-hide] .tab-button,
+[tabsLayout=icon-hide] .tab-button,
+[tabsLayout=title-hide] .tab-button,
 .tab-button.icon-only,
 .tab-button.has-title-only {
   padding: 6px 10px;
@@ -91,7 +91,7 @@ tab-highlight {
   }
 }
 
-[tabbarPlacement=bottom] tab-highlight {
+[tabsPlacement=bottom] tab-highlight {
   top: 0;
 }
 

src/components/tabs/tabs.scss

@@ -75,13 +75,13 @@ tab-highlight {
   display: none;
 }
 
-[tabbarLayout=icon-bottom] .tab-button {
+[tabsLayout=icon-bottom] .tab-button {
   .tab-button-icon {
     order: 10;
   }
 }
 
-[tabbarLayout=icon-left] .tab-button {
+[tabsLayout=icon-left] .tab-button {
   flex-direction: row;
 
   .tab-button-icon {
@@ -91,7 +91,7 @@ tab-highlight {
   }
 }
 
-[tabbarLayout=icon-right] .tab-button {
+[tabsLayout=icon-right] .tab-button {
   flex-direction: row;
 
   .tab-button-icon {
@@ -103,11 +103,11 @@ tab-highlight {
   }
 }
 
-[tabbarLayout=icon-hide] .tab-button-icon {
+[tabsLayout=icon-hide] .tab-button-icon {
   display: none;
 }
 
-[tabbarLayout=title-hide] .tab-button-text {
+[tabsLayout=title-hide] .tab-button-text {
   display: none;
 }
 
@@ -132,8 +132,8 @@ tab-highlight {
   right: calc(50% - 30px);
 }
 
-[tabbarLayout=icon-bottom] .tab-badge,
-[tabbarLayout=icon-left] .tab-badge,
-[tabbarLayout=icon-right] .tab-badge {
+[tabsLayout=icon-bottom] .tab-badge,
+[tabsLayout=icon-left] .tab-badge,
+[tabsLayout=icon-right] .tab-badge {
   right: calc(50% - 50px);
 }