refactor(tabs): rename [tabTitle] -> [label]

angular/test/nav/src/app/lazy-load-tabs/tabs.html

@@ -2,15 +2,15 @@
 
   <ion-tabs>
 
-    <ion-tab tabTitle="Tab 1" tabIcon="home" href="/lazy-load-tabs/tabs/(tab1:mustang)">
+    <ion-tab label="Tab 1" icon="home" href="/lazy-load-tabs/tabs/(tab1:mustang)">
       <ion-router-outlet name="tab1"></ion-router-outlet>
     </ion-tab>
 
-    <ion-tab tabTitle="Tab 2" tabIcon="heart" href="/lazy-load-tabs/tabs/(tab2:camaro)">
+    <ion-tab label="Tab 2" icon="heart" href="/lazy-load-tabs/tabs/(tab2:camaro)">
       <ion-router-outlet name="tab2"></ion-router-outlet>
     </ion-tab>
 
-    <ion-tab tabTitle="Tab 3" tabIcon="star" href="/lazy-load-tabs/tabs/(tab3:charger)">
+    <ion-tab label="Tab 3" icon="star" href="/lazy-load-tabs/tabs/(tab3:charger)">
       <ion-router-outlet name="tab3"></ion-router-outlet>
     </ion-tab>
 

angular/test/nav/src/app/simple-tabs/tabs.html

@@ -2,15 +2,15 @@
 
   <ion-tabs>
 
-    <ion-tab tabTitle="Tab 1" tabIcon="home" href="/lazy-load-tabs/tabs/(tab1:mustang)">
+    <ion-tab label="Tab 1" icon="home" href="/lazy-load-tabs/tabs/(tab1:mustang)">
       <ion-router-outlet name="tab1"></ion-router-outlet>
     </ion-tab>
 
-    <ion-tab tabTitle="Tab 2" tabIcon="heart" href="/lazy-load-tabs/tabs/(tab2:camaro)">
+    <ion-tab label="Tab 2" icon="heart" href="/lazy-load-tabs/tabs/(tab2:camaro)">
       <ion-router-outlet name="tab2"></ion-router-outlet>
     </ion-tab>
 
-    <ion-tab tabTitle="Tab 3" tabIcon="star" href="/lazy-load-tabs/tabs/(tab3:charger)">
+    <ion-tab label="Tab 3" icon="star" href="/lazy-load-tabs/tabs/(tab3:charger)">
       <ion-router-outlet name="tab3"></ion-router-outlet>
     </ion-tab>
 

core/src/components.d.ts

@@ -609,7 +609,7 @@ declare global {
      */
     'mode': 'ios' | 'md';
     /**
-     * The text property is used to provide custom text for the back button while using the default look-and-feel
+     * The text property is used to provide custom text for the back button while using the default look-and-feel.
      */
     'text': string|undefined;
   }
@@ -637,7 +637,7 @@ declare global {
        */
       'mode'?: 'ios' | 'md';
       /**
-       * The text property is used to provide custom text for the back button while using the default look-and-feel
+       * The text property is used to provide custom text for the back button while using the default look-and-feel.
        */
       'text'?: string|undefined;
     }
@@ -5757,6 +5757,14 @@ declare global {
 declare global {
   interface HTMLIonTabElement extends HTMLStencilElement {
     'active': boolean;
+    /**
+     * The badge for the tab.
+     */
+    'badge': string;
+    /**
+     * The badge color for the tab button.
+     */
+    'badgeStyle': string;
     'btnId': string;
     /**
      * The component to display inside of the tab.
@@ -5772,6 +5780,14 @@ declare global {
      * The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
      */
     'href': string;
+    /**
+     * The icon for the tab.
+     */
+    'icon': string;
+    /**
+     * The title of the tab.
+     */
+    'label': string;
     /**
      * The name of the tab.
      */
@@ -5785,22 +5801,6 @@ declare global {
      * If true, the tab button is visible within the tabbar. Defaults to `true`.
      */
     'show': boolean;
-    /**
-     * The badge for the tab.
-     */
-    'tabBadge': string;
-    /**
-     * The badge color for the tab button.
-     */
-    'tabBadgeStyle': string;
-    /**
-     * The icon for the tab.
-     */
-    'tabIcon': string;
-    /**
-     * The title of the tab.
-     */
-    'tabTitle': string;
     /**
      * If true, hide the tabs on child pages.
      */
@@ -5824,6 +5824,14 @@ declare global {
   namespace JSXElements {
     export interface IonTabAttributes extends HTMLAttributes {
       'active'?: boolean;
+      /**
+       * The badge for the tab.
+       */
+      'badge'?: string;
+      /**
+       * The badge color for the tab button.
+       */
+      'badgeStyle'?: string;
       'btnId'?: string;
       /**
        * The component to display inside of the tab.
@@ -5838,6 +5846,14 @@ declare global {
        * The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
        */
       'href'?: string;
+      /**
+       * The icon for the tab.
+       */
+      'icon'?: string;
+      /**
+       * The title of the tab.
+       */
+      'label'?: string;
       /**
        * The name of the tab.
        */
@@ -5854,22 +5870,6 @@ declare global {
        * If true, the tab button is visible within the tabbar. Defaults to `true`.
        */
       'show'?: boolean;
-      /**
-       * The badge for the tab.
-       */
-      'tabBadge'?: string;
-      /**
-       * The badge color for the tab button.
-       */
-      'tabBadgeStyle'?: string;
-      /**
-       * The icon for the tab.
-       */
-      'tabIcon'?: string;
-      /**
-       * The title of the tab.
-       */
-      'tabTitle'?: string;
       /**
        * If true, hide the tabs on child pages.
        */

core/src/components/back-button/back-button.tsx

@@ -23,7 +23,7 @@ export class BackButton {
 
   /**
    * The text property is used to provide custom text for the back button while using the
-   * default look-and-feel
+   * default look-and-feel.
    */
   @Prop() text: string|undefined;
 
@@ -55,14 +55,14 @@ export class BackButton {
 
   render() {
     const backButtonIcon = this.icon || this.config.get('backButtonIcon', 'arrow-back');
-    const backButtonText = this.text != null ? this.text : this.config.get('backButtonText', this.mode === 'ios' ? 'Back' : '');
+    const backButtonText = this.text != null ? this.text : this.config.get('backButtonText', 'Back');
 
     return (
       <button
         class='back-button-inner'
         onClick={(ev) => this.onClick(ev)}>
         { backButtonIcon && <ion-icon name={backButtonIcon}/> }
-        { backButtonText && <span class='button-text'>{backButtonText}</span> }
+        { this.mode === 'ios' && backButtonText && <span class='button-text'>{backButtonText}</span> }
         { this.mode === 'md' && <ion-ripple-effect useTapClick={true} /> }
       </button>
     );

core/src/components/back-button/readme.md

@@ -71,7 +71,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
 
 
 The text property is used to provide custom text for the back button while using the
-default look-and-feel
+default look-and-feel.
 
 
 ## Attributes
@@ -100,7 +100,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
 
 
 The text property is used to provide custom text for the back button while using the
-default look-and-feel
+default look-and-feel.
 
 
 

core/src/components/tab-button/tab-button.tsx

@@ -51,11 +51,11 @@ export class TabButton {
   hostData() {
     const selected = this.selected;
     const tab = this.tab;
-    const hasTitle = !!tab.tabTitle;
+    const hasTitle = !!tab.label;
-    const hasIcon = !!tab.tabIcon;
+    const hasIcon = !!tab.icon;
     const hasTitleOnly = (hasTitle && !hasIcon);
     const hasIconOnly = (hasIcon && !hasTitle);
-    const hasBadge = !!tab.tabBadge;
+    const hasBadge = !!tab.badge;
     return {
       'role': 'tab',
       'id': tab.btnId,
@@ -84,9 +84,9 @@ export class TabButton {
         class='tab-cover'
         onKeyUp={this.onKeyUp.bind(this)}
         onBlur={this.onBlur.bind(this)}>
-        { tab.tabIcon && <ion-icon class='tab-button-icon' name={tab.tabIcon}></ion-icon> }
+        { tab.icon && <ion-icon class='tab-button-icon' name={tab.icon}></ion-icon> }
-        { tab.tabTitle && <span class='tab-button-text'>{tab.tabTitle}</span> }
+        { tab.label && <span class='tab-button-text'>{tab.label}</span> }
-        { tab.tabBadge && <ion-badge class='tab-badge' color={tab.tabBadgeStyle}>{tab.tabBadge}</ion-badge> }
+        { tab.badge && <ion-badge class='tab-badge' color={tab.badgeStyle}>{tab.badge}</ion-badge> }
         { this.mode === 'md' && <ion-ripple-effect useTapClick={true}/> }
       </a>
     ];

core/src/components/tab/readme.md

@@ -10,12 +10,12 @@ navigation controllers take a look at the [NavController API Docs](../../../navi
 See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs.
 
 To add a basic tab, you can use the following markup where the `root` property
-is the page you want to load for that tab, `tabTitle` is the optional text to
+is the page you want to load for that tab, `label` is the optional text to
-display on the tab, and `tabIcon` is the optional [icon](../../icon/Icon/).
+display on the tab, and `icon` is the optional [icon](../../icon/Icon/).
 
 ```html
 <ion-tabs>
- <ion-tab [root]="chatRoot" tabTitle="Chat" tabIcon="chat"></ion-tab>
+ <ion-tab [root]="chatRoot" label="Chat" icon="chat"></ion-tab>
 </ion-tabs>
 ```
 
@@ -27,7 +27,7 @@ the tabs.
 
 ```html
 <ion-tabs>
-  <ion-tab (ionSelect)="chat()" tabTitle="Show Modal"></ion-tab>
+  <ion-tab (ionSelect)="chat()" label="Show Modal"></ion-tab>
 </ion-tabs>pop
 ```
 
@@ -55,6 +55,20 @@ export class Tabs {
 boolean
 
 
+#### badge
+
+string
+
+The badge for the tab.
+
+
+#### badgeStyle
+
+string
+
+The badge color for the tab button.
+
+
 #### btnId
 
 string
@@ -86,6 +100,20 @@ string
 The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
 
 
+#### icon
+
+string
+
+The icon for the tab.
+
+
+#### label
+
+string
+
+The title of the tab.
+
+
 #### name
 
 string
@@ -107,34 +135,6 @@ boolean
 If true, the tab button is visible within the tabbar. Defaults to `true`.
 
 
-#### tabBadge
-
-string
-
-The badge for the tab.
-
-
-#### tabBadgeStyle
-
-string
-
-The badge color for the tab button.
-
-
-#### tabIcon
-
-string
-
-The icon for the tab.
-
-
-#### tabTitle
-
-string
-
-The title of the tab.
-
-
 #### tabsHideOnSubPages
 
 boolean
@@ -149,6 +149,20 @@ If true, hide the tabs on child pages.
 boolean
 
 
+#### badge
+
+string
+
+The badge for the tab.
+
+
+#### badge-style
+
+string
+
+The badge color for the tab button.
+
+
 #### btn-id
 
 string
@@ -180,6 +194,20 @@ string
 The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
 
 
+#### icon
+
+string
+
+The icon for the tab.
+
+
+#### label
+
+string
+
+The title of the tab.
+
+
 #### name
 
 string
@@ -201,34 +229,6 @@ boolean
 If true, the tab button is visible within the tabbar. Defaults to `true`.
 
 
-#### tab-badge
-
-string
-
-The badge for the tab.
-
-
-#### tab-badge-style
-
-string
-
-The badge color for the tab button.
-
-
-#### tab-icon
-
-string
-
-The icon for the tab.
-
-
-#### tab-title
-
-string
-
-The title of the tab.
-
-
 #### tabs-hide-on-sub-pages
 
 boolean

core/src/components/tab/tab.tsx

@@ -1,4 +1,4 @@
-import { Build, Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
+import { Build, Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
 import { FrameworkDelegate, attachComponent } from '../../utils/framework-delegate';
 import { ComponentRef } from '../..';
 
@@ -10,8 +10,6 @@ export class Tab {
   private loaded = false;
   @Element() el: HTMLIonTabElement;
 
-  @State() init = false;
-
   @Prop({ mutable: true }) active = false;
 
   @Prop() btnId: string;
@@ -20,7 +18,7 @@ export class Tab {
   /**
    * The title of the tab.
    */
-  @Prop() tabTitle: string;
+  @Prop() label: string;
 
   /**
    * The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
@@ -30,17 +28,17 @@ export class Tab {
   /**
    * The icon for the tab.
    */
-  @Prop() tabIcon: string;
+  @Prop() icon: string;
 
   /**
    * The badge for the tab.
    */
-  @Prop() tabBadge: string;
+  @Prop() badge: string;
 
   /**
    * The badge color for the tab button.
    */
-  @Prop() tabBadgeStyle = 'default';
+  @Prop() badgeStyle = 'default';
 
   /**
    * The component to display inside of the tab.