From 0105a4ee47706d9b3aa8f22d0a75585a498731ec Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Wed, 28 Mar 2018 10:12:04 -0500
Subject: [PATCH] refactor(tab): rename tab properties

---
 core/src/components.d.ts                      |  60 +++++-----
 .../components/app/test/cordova/index.html    |   6 +-
 .../components/router/test/basic/index.html   |  16 +--
 .../components/router/test/preview/index.html |  19 +--
 core/src/components/tab-button/tab-button.tsx |  12 +-
 core/src/components/tab/readme.md             | 112 +++++++++---------
 core/src/components/tab/tab.tsx               |  10 +-
 .../src/components/tabs/test/basic/index.html |  10 +-
 core/src/components/tabs/test/nav/index.html  |   6 +-
 .../components/tabs/test/preview/index.html   |  10 +-
 .../components/tabs/test/scroll/index.html    |  30 ++---
 .../tabs/test/translucent/index.html          |  10 +-
 .../components/tabs/test/vanilla/index.html   |   4 +-
 13 files changed, 148 insertions(+), 157 deletions(-)

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 4df7052b6a..52acb4396c 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -5756,14 +5756,6 @@ 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.
@@ -5779,10 +5771,6 @@ 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 name of the tab.
      */
@@ -5797,13 +5785,25 @@ declare global {
      */
     'show': boolean;
     /**
-     * If true, hide the tabs on child pages.
+     * The badge for the tab.
      */
-    'tabsHideOnSubPages': boolean;
+    'tabBadge': string;
+    /**
+     * The badge color for the tab button.
+     */
+    'tabBadgeStyle': string;
+    /**
+     * The icon for the tab.
+     */
+    'tabIcon': string;
     /**
      * The title of the tab.
      */
-    'title': string;
+    'tabTitle': string;
+    /**
+     * If true, hide the tabs on child pages.
+     */
+    'tabsHideOnSubPages': boolean;
   }
   var HTMLIonTabElement: {
     prototype: HTMLIonTabElement;
@@ -5823,14 +5823,6 @@ 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.
@@ -5845,10 +5837,6 @@ 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 name of the tab.
        */
@@ -5866,13 +5854,25 @@ declare global {
        */
       'show'?: boolean;
       /**
-       * If true, hide the tabs on child pages.
+       * The badge for the tab.
        */
-      'tabsHideOnSubPages'?: boolean;
+      'tabBadge'?: string;
+      /**
+       * The badge color for the tab button.
+       */
+      'tabBadgeStyle'?: string;
+      /**
+       * The icon for the tab.
+       */
+      'tabIcon'?: string;
       /**
        * The title of the tab.
        */
-      'title'?: string;
+      'tabTitle'?: string;
+      /**
+       * If true, hide the tabs on child pages.
+       */
+      'tabsHideOnSubPages'?: boolean;
     }
   }
 }
diff --git a/core/src/components/app/test/cordova/index.html b/core/src/components/app/test/cordova/index.html
index 939b3a3729..8ec66a750c 100644
--- a/core/src/components/app/test/cordova/index.html
+++ b/core/src/components/app/test/cordova/index.html
@@ -208,15 +208,15 @@ class TabsPage extends HTMLElement {
   async connectedCallback() {
     this.innerHTML = `
 <ion-tabs>
-  <ion-tab title='Page 1' icon='chatboxes' class='tab-one'>
+  <ion-tab tab-title='Page 1' tab-icon='chatboxes' class='tab-one'>
     <ion-nav class="tab-one-nav"></ion-nav>
   </ion-tab>
 
-  <ion-tab title='Page 2' icon='map' class='tab-two'>
+  <ion-tab tab-title='Page 2' tab-icon='map' class='tab-two'>
     <ion-nav class="tab-two-nav"></ion-nav>
   </ion-tab>
 
-  <ion-tab title='Page 3' icon='person' class='tab-three'>
+  <ion-tab tab-title='Page 3' tab-icon='person' class='tab-three'>
     <ion-nav class="tab-three-nav"></ion-nav>
   </ion-tab>
 </ion-tabs>
diff --git a/core/src/components/router/test/basic/index.html b/core/src/components/router/test/basic/index.html
index 08a894e74a..78c6c31ddb 100644
--- a/core/src/components/router/test/basic/index.html
+++ b/core/src/components/router/test/basic/index.html
@@ -104,21 +104,21 @@
         this.innerHTML = `
         <ion-tabs>
 <ion-tab component="tab-one"
-  title="Plain List"
-  icon="star"></ion-tab>
+  tab-title="Plain List"
+  tab-icon="star"></ion-tab>
 
 <ion-tab component="tab-two"
-  title="Schedule"
-  icon="globe"></ion-tab>
+  tab-title="Schedule"
+  tab-icon="globe"></ion-tab>
 
 <ion-tab name="tab3"
-  title="Stopwatch"
-  icon="logo-facebook"
+  tab-title="Stopwatch"
+  tab-icon="logo-facebook"
   component="tab-three"></ion-tab>
 
 <ion-tab name="tab4"
-  title="Messages"
-  icon="chatboxes"
+  tab-title="Messages"
+  tab-icon="chatboxes"
   name="tab-four">
   inline tab 4
 </ion-tab>
diff --git a/core/src/components/router/test/preview/index.html b/core/src/components/router/test/preview/index.html
index 1210cebb8a..d7bea15a01 100644
--- a/core/src/components/router/test/preview/index.html
+++ b/core/src/components/router/test/preview/index.html
@@ -121,25 +121,16 @@
 
     <ion-tabs>
 
-      <ion-tab component="tab-one"
-        title="Plain List"
-        icon="star"></ion-tab>
+      <ion-tab component="tab-one" tab-title="Plain List" tab-icon="star"></ion-tab>
 
-      <ion-tab component="tab-two"
-        title="Schedule"
-        icon="globe"></ion-tab>
+      <ion-tab component="tab-two" tab-title="Schedule" tab-icon="globe"></ion-tab>
 
-      <ion-tab name="tab3"
-        title="Stopwatch"
-        icon="logo-facebook"
-        component="tab-three"></ion-tab>
+      <ion-tab component="tab-three" name="tab3" tab-title="Stopwatch" tab-icon="logo-facebook"></ion-tab>
 
-      <ion-tab name="tab4"
-        title="Messages"
-        icon="chatboxes"
-        name="tab-four">
+      <ion-tab name="tab4" tab-title="Messages" tab-icon="chatboxes"name="tab-four">
         inline tab 4
       </ion-tab>
+
     </ion-tabs>
 
   </ion-app>
diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx
index da0defb070..e4d3e3fdf2 100644
--- a/core/src/components/tab-button/tab-button.tsx
+++ b/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.title;
-    const hasIcon = !!tab.icon;
+    const hasTitle = !!tab.tabTitle;
+    const hasIcon = !!tab.tabIcon;
     const hasTitleOnly = (hasTitle && !hasIcon);
     const hasIconOnly = (hasIcon && !hasTitle);
-    const hasBadge = !!tab.badge;
+    const hasBadge = !!tab.tabBadge;
     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.icon && <ion-icon class='tab-button-icon' name={tab.icon}></ion-icon> }
-        { tab.title && <span class='tab-button-text'>{tab.title}</span> }
-        { tab.badge && <ion-badge class='tab-badge' color={tab.badgeStyle}>{tab.badge}</ion-badge> }
+        { tab.tabIcon && <ion-icon class='tab-button-icon' name={tab.tabIcon}></ion-icon> }
+        { tab.tabTitle && <span class='tab-button-text'>{tab.tabTitle}</span> }
+        { tab.tabBadge && <ion-badge class='tab-badge' color={tab.tabBadgeStyle}>{tab.tabBadge}</ion-badge> }
         { this.mode === 'md' && <ion-ripple-effect useTapClick={true}/> }
       </a>
     ];
diff --git a/core/src/components/tab/readme.md b/core/src/components/tab/readme.md
index 80f23ff84d..437258d7ee 100644
--- a/core/src/components/tab/readme.md
+++ b/core/src/components/tab/readme.md
@@ -55,20 +55,6 @@ export class Tabs {
 boolean
 
 
-#### badge
-
-string
-
-The badge for the tab.
-
-
-#### badgeStyle
-
-string
-
-The badge color for the tab button.
-
-
 #### btnId
 
 string
@@ -100,13 +86,6 @@ 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.
-
-
 #### name
 
 string
@@ -128,6 +107,34 @@ 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
@@ -135,13 +142,6 @@ boolean
 If true, hide the tabs on child pages.
 
 
-#### title
-
-string
-
-The title of the tab.
-
-
 ## Attributes
 
 #### active
@@ -149,20 +149,6 @@ The title of the tab.
 boolean
 
 
-#### badge
-
-string
-
-The badge for the tab.
-
-
-#### badge-style
-
-string
-
-The badge color for the tab button.
-
-
 #### btn-id
 
 string
@@ -194,13 +180,6 @@ 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.
-
-
 #### name
 
 string
@@ -222,6 +201,34 @@ 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
@@ -229,13 +236,6 @@ boolean
 If true, hide the tabs on child pages.
 
 
-#### title
-
-string
-
-The title of the tab.
-
-
 ## Events
 
 #### ionSelect
diff --git a/core/src/components/tab/tab.tsx b/core/src/components/tab/tab.tsx
index 8c940a9f82..5d07c63066 100644
--- a/core/src/components/tab/tab.tsx
+++ b/core/src/components/tab/tab.tsx
@@ -19,7 +19,7 @@ export class Tab {
   /**
    * The title of the tab.
    */
-  @Prop() title: string;
+  @Prop() tabTitle: string;
 
   /**
    * The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
@@ -29,17 +29,17 @@ export class Tab {
   /**
    * The icon for the tab.
    */
-  @Prop() icon: string;
+  @Prop() tabIcon: string;
 
   /**
    * The badge for the tab.
    */
-  @Prop() badge: string;
+  @Prop() tabBadge: string;
 
   /**
    * The badge color for the tab button.
    */
-  @Prop() badgeStyle = 'default';
+  @Prop() tabBadgeStyle = 'default';
 
   /**
    * The component to display inside of the tab.
@@ -87,7 +87,7 @@ export class Tab {
   componentWillLoad() {
     if (Build.isDev) {
       if (this.component && this.el.childElementCount > 0) {
-        console.error('You can not use a lazy-loaded component in a tab and inlineed content at the same time.' +
+        console.error('You can not use a lazy-loaded component in a tab and inlined content at the same time.' +
       `- Remove the component attribute in: <ion-tab component="${this.component}">` +
       ` or` +
       `- Remove the embeded content inside the ion-tab: <ion-tab></ion-tab>`);
diff --git a/core/src/components/tabs/test/basic/index.html b/core/src/components/tabs/test/basic/index.html
index aac43fef91..eccb1c669e 100644
--- a/core/src/components/tabs/test/basic/index.html
+++ b/core/src/components/tabs/test/basic/index.html
@@ -10,7 +10,7 @@
 
   <ion-app>
     <ion-tabs>
-      <ion-tab title="Plain List" icon="star" path="">
+      <ion-tab tab-title="Plain List" tab-icon="star" path="">
 
         <ion-header>
           <ion-toolbar>
@@ -23,7 +23,7 @@
 
       </ion-tab>
 
-      <ion-tab title="Schedule" icon="globe" path="tab2">
+      <ion-tab tab-title="Schedule" tab-icon="globe" path="tab2">
 
         <ion-header>
           <ion-toolbar>
@@ -36,7 +36,7 @@
 
       </ion-tab>
 
-      <ion-tab title="Stopwatch" icon="logo-facebook" path="tab3">
+      <ion-tab tab-title="Stopwatch" tab-icon="logo-facebook" path="tab3">
 
         <ion-header>
           <ion-toolbar>
@@ -50,8 +50,8 @@
       </ion-tab>
 
       <ion-tab disabled
-        title="Messages"
-        icon="chatboxes"
+        tab-title="Messages"
+        tab-icon="chatboxes"
         component="page-one"
         path="tab4">
       </ion-tab>
diff --git a/core/src/components/tabs/test/nav/index.html b/core/src/components/tabs/test/nav/index.html
index c99a2401c5..5d1f4ea93c 100644
--- a/core/src/components/tabs/test/nav/index.html
+++ b/core/src/components/tabs/test/nav/index.html
@@ -250,15 +250,15 @@
 
   <ion-app useRouter='false'>
     <ion-tabs>
-      <ion-tab title="Plain List" icon="star" path="">
+      <ion-tab tab-title="Plain List" tab-icon="star" path="">
         <ion-nav root="page-one"></ion-nav>
       </ion-tab>
 
-      <ion-tab title="Schedule" icon="globe" path="tab2">
+      <ion-tab tab-title="Schedule" tab-icon="globe" path="tab2">
         <ion-nav root="page-four"></ion-nav>
       </ion-tab>
 
-      <ion-tab title="Stopwatch" icon="logo-facebook" path="tab3">
+      <ion-tab tab-title="Stopwatch" tab-icon="logo-facebook" path="tab3">
         <ion-nav root="page-seven"></ion-nav>
       </ion-tab>
     </ion-tabs>
diff --git a/core/src/components/tabs/test/preview/index.html b/core/src/components/tabs/test/preview/index.html
index af2923ad54..ebd8a7baec 100644
--- a/core/src/components/tabs/test/preview/index.html
+++ b/core/src/components/tabs/test/preview/index.html
@@ -10,7 +10,7 @@
 
   <ion-app>
     <ion-tabs>
-      <ion-tab title="Plain List" icon="star" path="">
+      <ion-tab tab-title="Plain List" tab-icon="star" path="">
 
         <ion-header>
           <ion-toolbar>
@@ -23,7 +23,7 @@
 
       </ion-tab>
 
-      <ion-tab title="Schedule" icon="globe" path="tab2">
+      <ion-tab tab-title="Schedule" tab-icon="globe" path="tab2">
 
         <ion-header>
           <ion-toolbar>
@@ -36,7 +36,7 @@
 
       </ion-tab>
 
-      <ion-tab title="Stopwatch" icon="logo-facebook" path="tab3">
+      <ion-tab tab-title="Stopwatch" tab-icon="logo-facebook" path="tab3">
 
         <ion-header>
           <ion-toolbar>
@@ -50,8 +50,8 @@
       </ion-tab>
 
       <ion-tab disabled
-        title="Messages"
-        icon="chatboxes"
+        tab-title="Messages"
+        tab-icon="chatboxes"
         component="page-one"
         path="tab4">
       </ion-tab>
diff --git a/core/src/components/tabs/test/scroll/index.html b/core/src/components/tabs/test/scroll/index.html
index 1124712708..ffb8445e9a 100644
--- a/core/src/components/tabs/test/scroll/index.html
+++ b/core/src/components/tabs/test/scroll/index.html
@@ -11,21 +11,21 @@
 
   <ion-app>
     <ion-tabs scrollable="true" tabbar-placement="top" tabbar-highlight="true">
-      <ion-tab title="Plain List" icon="star"></ion-tab>
-      <ion-tab title="Schedule Long Text" icon="globe"></ion-tab>
-      <ion-tab title="Stopwatch" icon="logo-facebook"></ion-tab>
-      <ion-tab title="Messages" icon="chatboxes"></ion-tab>
-      <ion-tab title="Messages 2" icon="chatboxes"></ion-tab>
-      <ion-tab title="Messages 3" icon="chatboxes"></ion-tab>
-      <ion-tab title="Messages 4" icon="chatboxes"></ion-tab>
-      <ion-tab title="Messages 5" icon="chatboxes"></ion-tab>
-      <ion-tab title="Messages 6" icon="chatboxes"></ion-tab>
-      <ion-tab title="Messages 7" icon="chatboxes"></ion-tab>
-      <ion-tab title="Messages 8" icon="chatboxes"></ion-tab>
-      <ion-tab title="Messages 9" icon="chatboxes"></ion-tab>
-      <ion-tab title="Messages 10" icon="chatboxes"></ion-tab>
-      <ion-tab title="Messages 11" icon="chatboxes"></ion-tab>
-      <ion-tab title="Messages 12" icon="chatboxes"></ion-tab>
+      <ion-tab tab-title="Plain List" tab-icon="star"></ion-tab>
+      <ion-tab tab-title="Schedule Long Text" tab-icon="globe"></ion-tab>
+      <ion-tab tab-title="Stopwatch" tab-icon="logo-facebook"></ion-tab>
+      <ion-tab tab-title="Messages" tab-icon="chatboxes"></ion-tab>
+      <ion-tab tab-title="Messages 2" tab-icon="chatboxes"></ion-tab>
+      <ion-tab tab-title="Messages 3" tab-icon="chatboxes"></ion-tab>
+      <ion-tab tab-title="Messages 4" tab-icon="chatboxes"></ion-tab>
+      <ion-tab tab-title="Messages 5" tab-icon="chatboxes"></ion-tab>
+      <ion-tab tab-title="Messages 6" tab-icon="chatboxes"></ion-tab>
+      <ion-tab tab-title="Messages 7" tab-icon="chatboxes"></ion-tab>
+      <ion-tab tab-title="Messages 8" tab-icon="chatboxes"></ion-tab>
+      <ion-tab tab-title="Messages 9" tab-icon="chatboxes"></ion-tab>
+      <ion-tab tab-title="Messages 10" tab-icon="chatboxes"></ion-tab>
+      <ion-tab tab-title="Messages 11" tab-icon="chatboxes"></ion-tab>
+      <ion-tab tab-title="Messages 12" tab-icon="chatboxes"></ion-tab>
     </ion-tabs>
 
     <ion-nav-controller></ion-nav-controller>
diff --git a/core/src/components/tabs/test/translucent/index.html b/core/src/components/tabs/test/translucent/index.html
index 8953ce37bc..8ce9b6a5c3 100644
--- a/core/src/components/tabs/test/translucent/index.html
+++ b/core/src/components/tabs/test/translucent/index.html
@@ -13,25 +13,25 @@
 
   <ion-app>
     <ion-tabs color="primary" translucent>
-      <ion-tab title="Today" icon="calendar" path="" root="translucent-page-tab">
+      <ion-tab tab-title="Today" tab-icon="calendar" path="" root="translucent-page-tab">
         <ion-route path="" component="translucent-page-tab"></ion-route>
       </ion-tab>
 
-      <ion-tab title="Games" icon="planet" root="page-two">
+      <ion-tab tab-title="Games" tab-icon="planet" root="page-two">
         <ion-route path="" component="page-two"></ion-route>
         <ion-route path="path/to/page/three" component="page-three"></ion-route>
       </ion-tab>
 
-      <ion-tab title="Apps" icon="logo-buffer" root="page-three">
+      <ion-tab tab-title="Apps" tab-icon="logo-buffer" root="page-three">
           <ion-route path="/" component="page-three"></ion-route>
       </ion-tab>
 
-      <ion-tab title="Updates" icon="download" badge="7" badge-style="danger" root="translucent-page-tab">
+      <ion-tab tab-title="Updates" tab-icon="download" badge="7" badge-style="danger" root="translucent-page-tab">
           <ion-route component="page-one"></ion-route>
           <ion-route path="paginaaaa-two" component="page-two"></ion-route>
       </ion-tab>
 
-      <ion-tab title="Search" icon="search">
+      <ion-tab tab-title="Search" tab-icon="search">
         <ion-route path="" component="translucent-page-tab"></ion-route>
       </ion-tab>
     </ion-tabs>
diff --git a/core/src/components/tabs/test/vanilla/index.html b/core/src/components/tabs/test/vanilla/index.html
index b5192a3e8d..5d00bd9829 100644
--- a/core/src/components/tabs/test/vanilla/index.html
+++ b/core/src/components/tabs/test/vanilla/index.html
@@ -11,11 +11,11 @@
 </head>
 <body>
   <ion-tabs>
-    <ion-tab title="Tab One" icon="star" path="">
+    <ion-tab tab-title="Tab One" tab-icon="star" path="">
       <div class="div-one" slot="not-initialized">Div One</div>
     </ion-tab>
 
-    <ion-tab title="Tab Two" icon="globe" path="tab2">
+    <ion-tab tab-title="Tab Two" tab-icon="globe" path="tab2">
       <div class="div-two" slot="not-initialized">Div Two</div>
     </ion-tab>
   </ion-tabs>