From f34d314ae21b75cc4dea21a5136a45598c6974b7 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Wed, 22 Apr 2015 16:04:42 -0500
Subject: [PATCH] tab bar icons

---
 src/components/tabs/extensions/ios.scss      |  6 ----
 src/components/tabs/extensions/material.scss |  5 ---
 src/components/tabs/tab.js                   |  1 +
 src/components/tabs/tabs.js                  | 35 +++++++++-----------
 src/components/tabs/tabs.scss                |  8 ++---
 src/components/tabs/test/basic/main.html     |  4 +--
 src/config/component.js                      |  2 +-
 7 files changed, 23 insertions(+), 38 deletions(-)

diff --git a/src/components/tabs/extensions/ios.scss b/src/components/tabs/extensions/ios.scss
index a74660b136..359db26ddc 100644
--- a/src/components/tabs/extensions/ios.scss
+++ b/src/components/tabs/extensions/ios.scss
@@ -2,8 +2,6 @@
 // iOS Toolbar
 // --------------------------------------------------
 
-$tab-bar-ios-min-height:               52px !default;
-
 $tab-bar-ios-item-padding:             3px 10px !default;
 $tab-bar-ios-item-font-size:           1.1rem !default;
 $tab-bar-ios-item-icon-size:           2.8rem !default;
@@ -11,10 +9,6 @@ $tab-bar-ios-item-icon-size:           2.8rem !default;
 
 .tabs-ios {
 
-  .tab-bar-container {
-    min-height: $tab-bar-ios-min-height;
-  }
-
   .tab-bar-item {
     padding: $tab-bar-ios-item-padding;
   }
diff --git a/src/components/tabs/extensions/material.scss b/src/components/tabs/extensions/material.scss
index 7b76da9ed2..02b1c7907e 100644
--- a/src/components/tabs/extensions/material.scss
+++ b/src/components/tabs/extensions/material.scss
@@ -2,7 +2,6 @@
 // Material Design Toolbar
 // --------------------------------------------------
 
-$tab-bar-material-min-height:                10px !default;
 $tab-bar-material-item-padding:              4px 10px !default;
 $tab-bar-material-active-border-width:       3px !default;
 $tab-bar-material-active-border-color:       red !default;
@@ -12,10 +11,6 @@ $tab-bar-material-text-font-weight:          500 !default;
 
 .tabs-md {
 
-  .tab-bar-container {
-    min-height: $tab-bar-material-min-height;
-  }
-
   .tab-bar-item {
     padding: $tab-bar-material-item-padding;
     text-transform: $tab-bar-material-text-transform;
diff --git a/src/components/tabs/tab.js b/src/components/tabs/tab.js
index af97e7bdf9..0166f10569 100644
--- a/src/components/tabs/tab.js
+++ b/src/components/tabs/tab.js
@@ -17,6 +17,7 @@ import {IonicComponent} from 'ionic2/config/component'
   selector: 'ion-tab',
   bind: {
     title: 'tab-title',
+    icon: 'tab-icon',
     initial: 'initial'
   }
 })
diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js
index 80f037a46f..d16a094469 100644
--- a/src/components/tabs/tabs.js
+++ b/src/components/tabs/tabs.js
@@ -5,8 +5,7 @@ import {IonicComponent} from 'ionic2/config/component'
   selector: 'ion-tabs',
   bind: {
     tabBarPlacement: 'tab-bar-placement',
-    tabBarIcons: 'tab-bar-icons',
-    tabBarText: 'tab-bar-text'
+    tabBarIcons: 'tab-bar-icons'
   }
 })
 @Template({
@@ -16,22 +15,18 @@ import {IonicComponent} from 'ionic2/config/component'
       <!-- TOOLBARS FOR EACH VIEW SHOULD HAVE THE SAME CONTEXT AS ITS VIEW -->
     </header>
 
-    <nav class="tab-bar-container"
-         role="tablist"
+    <nav class="tab-bar-container" role="tablist"
          [attr.aria-activedescendant]="'tab-item-' + selectedTab.tabId">
       <div class="tab-bar">
-        <button *for="#tab of tabs"
+        <button *for="#t of tabs"
           role="tab"
           class="tab-bar-item"
-          [attr.id]="'tab-item-' + tab.tabId"
-          [attr.aria-controls]="'tab-content-' + tab.tabId"
-          [attr.aria-selected]="tab.isSelected"
-          (^click)="onClickTabItem($event, tab)">
-            <icon class="tab-bar-item-icon ion-home"
-              [hidden]="tabBarIcons=='none'"
-              [class.tab-bar-icon-bottom]="tabBarIcons=='bottom'"
-              [class.tab-bar-icon-top]="tabBarIcons=='top'"></icon>
-            <span class="tab-bar-item-text" [hidden]="tabBarText=='none'">{{tab.title}}</span>
+          [attr.id]="'tab-item-' + t.tabId"
+          [attr.aria-controls]="'tab-content-' + t.tabId"
+          [attr.aria-selected]="t.isSelected"
+          (^click)="onClickTabItem($event, t)">
+            <icon class="tab-bar-item-icon ion-home" [hidden]="!t.icon"></icon>
+            <span class="tab-bar-item-text" [hidden]="!t.title">{{t.title}}</span>
         </button>
       </div>
     </nav>
@@ -50,6 +45,9 @@ export class Tabs  {
 
     this.config = Tabs.config.invoke(this)
     this.tabs = []
+    setTimeout(() => {
+      console.log(this)
+    },500)
   }
 
   addTab(tab) {
@@ -80,20 +78,19 @@ export class Tabs  {
 
 new IonicComponent(Tabs, {
   bind: {
-    'tab-bar-placement': {
+    tabBarPlacement: {
       defaults: {
         ios: 'bottom',
         android: 'top',
         core: 'bottom'
       }
     },
-    'tab-bar-icons': {
+    tabBarIcons: {
       defaults: {
         ios: 'top',
-        android: 'none',
+        android: 'top',
         core: 'top'
       }
-    },
-    tabBarText: {}
+    }
   }
 })
diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
index 24dc4cd7a1..c4b9369eef 100644
--- a/src/components/tabs/tabs.scss
+++ b/src/components/tabs/tabs.scss
@@ -2,7 +2,6 @@
 // Tabs
 // --------------------------------------------------
 
-$tab-bar-min-height:               10px !default;
 $tab-bar-background-color:         #f7f7f8 !default;
 
 $tab-bar-item-padding:             10px !default;
@@ -27,7 +26,6 @@ $tab-bar-item-max-width:           160px !default;
 .tab-bar-container {
   @include flex-justify-content(center);
   position: relative;
-  min-height: $tab-bar-min-height;
   background: $tab-bar-background-color;
 }
 
@@ -59,13 +57,13 @@ $tab-bar-item-max-width:           160px !default;
   background: none;
 }
 
-.tab-bar-icon-bottom .tab-bar-item {
+[tab-bar-icons="bottom"] > .tab-bar-container .tab-bar-item {
   .tab-bar-item-icon {
     @include flex-order(10);
   }
 }
 
-.tab-bar-icon-left .tab-bar-item {
+[tab-bar-icons="left"] > .tab-bar-container .tab-bar-item {
   @include flex-direction(row);
 
   .tab-bar-item-icon {
@@ -74,7 +72,7 @@ $tab-bar-item-max-width:           160px !default;
   }
 }
 
-.tab-bar-icon-right .tab-bar-item {
+[tab-bar-icons="right"] > .tab-bar-container .tab-bar-item {
   @include flex-direction(row);
 
   .tab-bar-item-icon {
diff --git a/src/components/tabs/test/basic/main.html b/src/components/tabs/test/basic/main.html
index 12d69d2cf3..15797ddc0a 100644
--- a/src/components/tabs/test/basic/main.html
+++ b/src/components/tabs/test/basic/main.html
@@ -1,7 +1,7 @@
 
 <ion-tabs>
 
-  <ion-tab tab-title="Tab 1">
+  <ion-tab tab-title="Tab 1" tab-icon="ion-home">
     <ion-view nav-title="Tab 1">
       <ion-content class="padding">
         Tab 1 Content
@@ -9,7 +9,7 @@
     </ion-view>
   </ion-tab>
 
-  <ion-tab tab-title="Tab 2">
+  <ion-tab tab-title="Tab 2" tab-icon="ion-star">
     <ion-view nav-title="Tab 2">
       <ion-content class="padding">
         Tab 2 Content
diff --git a/src/config/component.js b/src/config/component.js
index 0bbe5c0984..88572083a2 100644
--- a/src/config/component.js
+++ b/src/config/component.js
@@ -66,7 +66,7 @@ export class IonicComponent {
       let defaultValue = binding._defaultValue
       if (!instance[binding.property] && defaultValue) {
         instance[binding.property] = defaultValue
-        instance.domElement.setAttribute(attrName, defaultValue)
+        instance.domElement.setAttribute(util.pascalCaseToDashCase(attrName), defaultValue)
       }
     }