chore(tabbar): rename tab-bar to tabbar

demos/component-docs/app.scss

@@ -216,30 +216,30 @@ ion-card .advanced-weather-tabs {
   background: transparent;
 }
 
-ion-card .advanced-weather-tabs tab-bar {
+ion-card .advanced-weather-tabs tabbar {
   background: transparent;
   border-top: none;
 }
-body.ios ion-card .advanced-weather-tabs tab-bar {
+body.ios ion-card .advanced-weather-tabs tabbar {
   height: 88px;
 }
-body.md ion-card .advanced-weather-tabs tab-bar {
+body.md ion-card .advanced-weather-tabs tabbar {
   height: 100px;
 }
-ion-card .advanced-weather-tabs tab-bar a {
+ion-card .advanced-weather-tabs tabbar a {
   height: 100%;
   border-top: 2px solid transparent !important;
   border-bottom: 0px !important;
 }
-ion-card .advanced-weather-tabs tab-bar a icon.tab-button-icon {
+ion-card .advanced-weather-tabs tabbar a icon.tab-button-icon {
   color: #fff;
   font-size: 2.8em;
 }
-ion-card .advanced-weather-tabs tab-bar a span.tab-button-text {
+ion-card .advanced-weather-tabs tabbar a span.tab-button-text {
   color: #fff;
   font-size: 13px;
 }
-body.md ion-card .advanced-weather-tabs tab-bar a span.tab-button-text {
+body.md ion-card .advanced-weather-tabs tabbar a span.tab-button-text {
   text-transform: uppercase;
 }
 body.md .cards-bg tab-highlight {

demos/component-docs/cards/cards-advanced-weather.html

@@ -18,7 +18,7 @@
     <span>23&deg;</span>
   </p>
 
-  <ion-tabs light class="advanced-weather-tabs" no-navbar tab-bar-placement="bottom">
+  <ion-tabs light class="advanced-weather-tabs" no-navbar tabbar-placement="bottom">
     <ion-tab light tab-title="Sun" tab-icon="sunny"></ion-tab>
     <ion-tab tab-title="Mon" tab-icon="snow"></ion-tab>
     <ion-tab tab-title="Tue" tab-icon="cloudy"></ion-tab>
@@ -38,7 +38,7 @@
     <span>78&deg;</span>
   </p>
 
-  <ion-tabs light class="advanced-weather-tabs" no-navbar tab-bar-placement="bottom">
+  <ion-tabs light class="advanced-weather-tabs" no-navbar tabbar-placement="bottom">
     <ion-tab light tab-title="Tue" tab-icon="sunny"></ion-tab>
     <ion-tab tab-title="Wed" tab-icon="partly-sunny"></ion-tab>
     <ion-tab tab-title="Thr" tab-icon="cloudy"></ion-tab>
@@ -58,7 +58,7 @@
     <span>41&deg;</span>
   </p>
 
-  <ion-tabs light class="advanced-weather-tabs" no-navbar tab-bar-placement="bottom">
+  <ion-tabs light class="advanced-weather-tabs" no-navbar tabbar-placement="bottom">
     <ion-tab light tab-title="Sun" tab-icon="thunderstorm"></ion-tab>
     <ion-tab tab-title="Mon" tab-icon="rainy"></ion-tab>
     <ion-tab tab-title="Tue" tab-icon="rainy"></ion-tab>

demos/yerk/main.html

@@ -7,7 +7,7 @@
   .md .navbar-title {
     color: #FDFEFE;
   }
-  #tabs tab-bar:before {
+  #tabs tabbar:before {
     position: absolute;
     top: 0;
     right: auto;

ionic/components/app/structure.scss

@@ -28,9 +28,9 @@ $z-index-item-options:           1;
 $flex-order-toolbar-top:         -10;
 $flex-order-toolbar-bottom:      10;
 
-$flex-order-tab-bar-navbar:      -30;
-$flex-order-tab-bar-top:         -20;
-$flex-order-tab-bar-bottom:      20;
+$flex-order-tabbar-navbar:      -30;
+$flex-order-tabbar-top:         -20;
+$flex-order-tabbar-bottom:      20;
 
 
 
@@ -138,7 +138,7 @@ scroll-content {
   will-change: scroll-position;
 }
 
-ion-tab-bar {
+ion-tabbar {
   display: block;
   position: absolute;
   top: 0;

ionic/components/tabs/modes/ios.scss

@@ -2,48 +2,48 @@
 // iOS Tabs
 // --------------------------------------------------
 
-$tab-bar-ios-item-padding:             0px 10px !default;
-$tab-bar-ios-item-font-size:           10px !default;
-$tab-bar-ios-item-icon-size:           32px !default;
-$tab-bar-ios-height:                   49px !default;
+$tabbar-ios-item-padding:             0px 10px !default;
+$tabbar-ios-item-font-size:           10px !default;
+$tabbar-ios-item-icon-size:           32px !default;
+$tabbar-ios-height:                   49px !default;
 
 
-tab-bar {
+tabbar {
   border-top: 1px solid $toolbar-ios-border-color;
 }
 
-ion-tabs[tab-bar-placement=top] tab-bar {
+ion-tabs[tabbar-placement=top] tabbar {
   border-top: none;
   border-bottom: 1px solid $toolbar-ios-border-color;
 }
 
 .tab-button {
-  padding: $tab-bar-ios-item-padding;
-  min-height: $tab-bar-ios-height;
+  padding: $tabbar-ios-item-padding;
+  min-height: $tabbar-ios-height;
 }
 
 .tab-button-text {
   margin-bottom: 0;
-  min-height: $tab-bar-ios-item-font-size + 1;
-  font-size: $tab-bar-ios-item-font-size;
+  min-height: $tabbar-ios-item-font-size + 1;
+  font-size: $tabbar-ios-item-font-size;
 }
 
 .has-title-only .tab-button-text {
-  font-size: $tab-bar-ios-item-font-size + 2;
+  font-size: $tabbar-ios-item-font-size + 2;
 }
 
 .tab-button-icon {
-  font-size: $tab-bar-ios-item-icon-size;
-  height: $tab-bar-ios-item-icon-size;
-  min-width: $tab-bar-ios-item-icon-size + 5;
+  font-size: $tabbar-ios-item-icon-size;
+  height: $tabbar-ios-item-icon-size;
+  min-width: $tabbar-ios-item-icon-size + 5;
 
   &:before {
     vertical-align: top;
   }
 }
 
-[tab-bar-icons=right] .tab-button,
-[tab-bar-icons=left] .tab-button {
+[tabbar-icons=right] .tab-button,
+[tabbar-icons=left] .tab-button {
 
   .tab-button-text {
     font-size: 1.4rem;
@@ -59,13 +59,13 @@ ion-tabs[tab-bar-placement=top] tab-bar {
   }
 }
 
-[tab-bar-icons=hide] .tab-button-text {
+[tabbar-icons=hide] .tab-button-text {
   font-size: 1.4rem;
   line-height: 1.1;
 }
 
 .tab-button.has-title-only {
-  min-height: $tab-bar-ios-height - 8;
+  min-height: $tabbar-ios-height - 8;
 
   .tab-button-text {
     font-size: 1.4rem;
@@ -74,16 +74,16 @@ ion-tabs[tab-bar-placement=top] tab-bar {
 }
 
 .tab-button.icon-only {
-  min-height: $tab-bar-ios-height - 8;
+  min-height: $tabbar-ios-height - 8;
 }
 
 &.hairlines ion-tabs {
 
-  tab-bar {
+  tabbar {
     border-top-width: 0.55px;
   }
 
-  &[tab-bar-placement="top"] tab-bar {
+  &[tabbar-placement="top"] tabbar {
     border-bottom-width: 0.55px;
   }
 

ionic/components/tabs/modes/md.scss

@@ -2,18 +2,18 @@
 // Material Design Tabs
 // --------------------------------------------------
 
-$tab-bar-md-item-padding:             12px 10px 5px 10px !default;
-$tab-bar-md-item-font-size:           1.4rem !default;
-$tab-bar-md-item-font-weight:         500 !default;
-$tab-bar-md-item-icon-size:           2.4rem !default;
-$tab-bar-md-item-height:              4.8rem !default;
+$tabbar-md-item-padding:             12px 10px 5px 10px !default;
+$tabbar-md-item-font-size:           1.4rem !default;
+$tabbar-md-item-font-weight:         500 !default;
+$tabbar-md-item-icon-size:           2.4rem !default;
+$tabbar-md-item-height:              4.8rem !default;
 
 
 .tab-button {
-  padding: $tab-bar-md-item-padding;
-  min-height: $tab-bar-md-item-height;
-  font-size: $tab-bar-md-item-font-size;
-  font-weight: $tab-bar-md-item-font-weight;
+  padding: $tabbar-md-item-padding;
+  min-height: $tabbar-md-item-height;
+  font-size: $tabbar-md-item-font-size;
+  font-weight: $tabbar-md-item-font-weight;
 
   box-shadow: none;
   border-radius: 0;
@@ -27,17 +27,17 @@ $tab-bar-md-item-height:              4.8rem !default;
 }
 
 .tab-button-icon {
-  font-size: $tab-bar-md-item-icon-size;
-  min-width: $tab-bar-md-item-icon-size + 5;
+  font-size: $tabbar-md-item-icon-size;
+  min-width: $tabbar-md-item-icon-size + 5;
 }
 
-[tab-bar-icons=bottom] .tab-button {
+[tabbar-icons=bottom] .tab-button {
   padding-top: 8px;
   padding-bottom: 8px;
 }
 
-[tab-bar-icons=right] .tab-button,
-[tab-bar-icons=left] .tab-button {
+[tabbar-icons=right] .tab-button,
+[tabbar-icons=left] .tab-button {
   padding-bottom: 10px;
 
   icon {
@@ -65,6 +65,6 @@ tab-highlight {
   }
 }
 
-[tab-bar-placement=bottom] tab-highlight {
+[tabbar-placement=bottom] tab-highlight {
   top: 0;
 }

ionic/components/tabs/tabs.scss

@@ -2,7 +2,7 @@
 // Tabs
 // --------------------------------------------------
 
-$tab-bar-background-color:        $toolbar-background-color !default;
+$tabbar-background-color:        $toolbar-background-color !default;
 
 $tab-button-text-color:           $toolbar-text-color !default;
 $tab-button-active-color:         $toolbar-active-color !default;
@@ -43,24 +43,24 @@ ion-tab {
 }
 
 ion-tabs > ion-navbar-section {
-  order: $flex-order-tab-bar-navbar;
+  order: $flex-order-tabbar-navbar;
 }
 
-ion-tab-bar-section {
+ion-tabbar-section {
   position: relative;
-  order: $flex-order-tab-bar-bottom;
+  order: $flex-order-tabbar-bottom;
 }
 
-[tab-bar-placement=top] ion-tab-bar-section {
-  order: $flex-order-tab-bar-top;
+[tabbar-placement=top] ion-tabbar-section {
+  order: $flex-order-tabbar-top;
 }
 
-tab-bar {
+tabbar {
   position: relative;
   display: flex;
   justify-content: center;
   overflow: hidden;
-  background: $tab-bar-background-color;
+  background: $tabbar-background-color;
 }
 
 .tab-button {
@@ -129,13 +129,13 @@ tab-highlight {
   display: none;
 }
 
-[tab-bar-icons=bottom] .tab-button {
+[tabbar-icons=bottom] .tab-button {
   .tab-button-icon {
     order: 10;
   }
 }
 
-[tab-bar-icons=left] .tab-button {
+[tabbar-icons=left] .tab-button {
   flex-direction: row;
 
   .tab-button-icon {
@@ -144,7 +144,7 @@ tab-highlight {
   }
 }
 
-[tab-bar-icons=right] .tab-button {
+[tabbar-icons=right] .tab-button {
   flex-direction: row;
 
   .tab-button-icon {
@@ -154,6 +154,6 @@ tab-highlight {
   }
 }
 
-[tab-bar-icons=hide] .tab-button-icon {
+[tabbar-icons=hide] .tab-button-icon {
   display: none;
 }

ionic/components/tabs/tabs.ts

@@ -22,18 +22,18 @@ import {Icon} from '../icon/icon';
  * [properties you set on each Tab](../Tab/#tab_properties).
  *
  * To override the platform specific TabBar placement, use the
- * `tab-bar-placement` property:
+ * `tabbar-placement` property:
  *
  * ```ts
- * <ion-tabs tab-bar-placement="top">
+ * <ion-tabs tabbar-placement="top">
  *   <ion-tab [root]="tabRoot"></ion-tab>
  * </ion-tabs>
  * ```
  *
- * To change the location of the icons in the TabBar, use the `tab-bar-icons`
+ * To change the location of the icons in the TabBar, use the `tabbar-icons`
  * property:
  * ```ts
- * <ion-tabs tab-bar-icons="bottom">
+ * <ion-tabs tabbar-icons="bottom">
  *   <ion-tab [root]="tabRoot"></ion-tab>
  * </ion-tabs>
  * ```
@@ -61,23 +61,23 @@ import {Icon} from '../icon/icon';
 @ConfigComponent({
   selector: 'ion-tabs',
   defaultInputs: {
-    'tabBarPlacement': 'bottom',
-    'tabBarIcons': 'top',
+    'tabbarPlacement': 'bottom',
+    'tabbarIcons': 'top',
     'preloadTabs': true
   },
   template:
     '<ion-navbar-section>' +
       '<template navbar-anchor></template>' +
     '</ion-navbar-section>' +
-    '<ion-tab-bar-section>' +
-      '<tab-bar role="tablist">' +
+    '<ion-tabbar-section>' +
+      '<tabbar role="tablist">' +
         '<a *ng-for="#t of tabs" [tab]="t" class="tab-button" role="tab">' +
           '<icon [name]="t.tabIcon" [is-active]="t.isSelected" class="tab-button-icon"></icon>' +
           '<span class="tab-button-text">{{t.tabTitle}}</span>' +
         '</a>' +
         '<tab-highlight></tab-highlight>' +
-      '</tab-bar>' +
-    '</ion-tab-bar-section>' +
+      '</tabbar>' +
+    '</ion-tabbar-section>' +
     '<ion-content-section>' +
       '<ng-content></ng-content>' +
     '</ion-content-section>',

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

@@ -24,7 +24,7 @@
 
 
 <!-- Icons below text -->
-<ion-tabs tab-bar-icons="bottom" no-navbar>
+<ion-tabs tabbar-icons="bottom" no-navbar>
   <ion-tab tab-title="Recents" tab-icon="call"></ion-tab>
   <ion-tab tab-title="Favorites" tab-icon="heart"></ion-tab>
   <ion-tab tab-title="Settings" tab-icon="settings"></ion-tab>
@@ -32,7 +32,7 @@
 
 
 <!-- Icons right of text -->
-<ion-tabs tab-bar-icons="right" no-navbar>
+<ion-tabs tabbar-icons="right" no-navbar>
   <ion-tab tab-title="Recents" tab-icon="call"></ion-tab>
   <ion-tab tab-title="Favorites" tab-icon="heart"></ion-tab>
   <ion-tab tab-title="Settings" tab-icon="settings"></ion-tab>
@@ -40,14 +40,14 @@
 
 
 <!-- Icons left of text -->
-<ion-tabs tab-bar-icons="left" no-navbar>
+<ion-tabs tabbar-icons="left" no-navbar>
   <ion-tab tab-title="Recents" tab-icon="call"></ion-tab>
   <ion-tab tab-title="Favorites" tab-icon="heart"></ion-tab>
   <ion-tab tab-title="Settings" tab-icon="settings"></ion-tab>
 </ion-tabs>
 
 <!-- No icons -->
-<ion-tabs tab-bar-icons="hide" no-navbar>
+<ion-tabs tabbar-icons="hide" no-navbar>
   <ion-tab tab-title="Recents" tab-icon="call"></ion-tab>
   <ion-tab tab-title="Favorites" tab-icon="heart"></ion-tab>
   <ion-tab tab-title="Settings" tab-icon="settings"></ion-tab>

ionic/config/config.ts

@@ -43,7 +43,7 @@ export class Config {
  *     iconMode: 'ios',
  *     modalEnter: 'modal-slide-in',
  *     modalLeave: 'modal-slide-out',
- *     tabBarPlacement: 'bottom',
+ *     tabbarPlacement: 'bottom',
  *     viewTransition: 'ios',
  *   }
  * })

ionic/config/modes.ts

@@ -18,7 +18,7 @@ Config.setModeConfig('ios', {
   modalEnter: 'modal-slide-in',
   modalLeave: 'modal-slide-out',
 
-  tabBarPlacement: 'bottom',
+  tabbarPlacement: 'bottom',
   viewTransition: 'ios',
 
   popupPopIn: 'popup-pop-in',
@@ -42,7 +42,7 @@ Config.setModeConfig('md', {
   modalEnter: 'modal-md-slide-in',
   modalLeave: 'modal-md-slide-out',
 
-  tabBarPlacement: 'top',
+  tabbarPlacement: 'top',
   viewTransition: 'md',
 
   popupPopIn: 'popup-md-pop-in',

ionic/config/test/config.spec.ts

@@ -39,7 +39,7 @@ export function run() {
     config.setPlatform(platform);
 
     expect(config.get('mode')).toEqual('md');
-    expect(config.get('tabBarPlacement')).toEqual('top');
+    expect(config.get('tabbarPlacement')).toEqual('top');
   });
 
   it('should override mode settings from platforms setting', () => {
@@ -54,7 +54,7 @@ export function run() {
     config.setPlatform(platform);
 
     expect(config.get('mode')).toEqual('md');
-    expect(config.get('tabBarPlacement')).toEqual('top');
+    expect(config.get('tabbarPlacement')).toEqual('top');
   });
 
   it('should get boolean value from querystring', () => {
@@ -165,27 +165,27 @@ export function run() {
 
   it('should override ios mode config with user platform setting', () => {
     let config = new Config({
-      tabBarPlacement: 'hide',
+      tabbarPlacement: 'hide',
       platforms: {
         ios: {
-          tabBarPlacement: 'top'
+          tabbarPlacement: 'top'
         }
       }
     });
     let platform = new Platform(['ios']);
     config.setPlatform(platform);
 
-    expect(config.get('tabBarPlacement')).toEqual('top');
+    expect(config.get('tabbarPlacement')).toEqual('top');
   });
 
   it('should override ios mode config with user setting', () => {
     let config = new Config({
-      tabBarPlacement: 'top'
+      tabbarPlacement: 'top'
     });
     let platform = new Platform(['ios']);
     config.setPlatform(platform);
 
-    expect(config.get('tabBarPlacement')).toEqual('top');
+    expect(config.get('tabbarPlacement')).toEqual('top');
   });
 
   it('should get setting from md mode', () => {
@@ -193,7 +193,7 @@ export function run() {
     let platform = new Platform(['android']);
     config.setPlatform(platform);
 
-    expect(config.get('tabBarPlacement')).toEqual('top');
+    expect(config.get('tabbarPlacement')).toEqual('top');
   });
 
   it('should get setting from ios mode', () => {
@@ -201,7 +201,7 @@ export function run() {
     let platform = new Platform(['ios']);
     config.setPlatform(platform);
 
-    expect(config.get('tabBarPlacement')).toEqual('bottom');
+    expect(config.get('tabbarPlacement')).toEqual('bottom');
   });
 
   it('should set/get platform setting from set()', () => {
@@ -209,10 +209,10 @@ export function run() {
     let platform = new Platform(['ios']);
     config.setPlatform(platform);
 
-    config.set('tabBarPlacement', 'bottom');
-    config.set('ios', 'tabBarPlacement', 'top');
+    config.set('tabbarPlacement', 'bottom');
+    config.set('ios', 'tabbarPlacement', 'top');
 
-    expect(config.get('tabBarPlacement')).toEqual('top');
+    expect(config.get('tabbarPlacement')).toEqual('top');
   });
 
   it('should set/get setting from set()', () => {
@@ -220,9 +220,9 @@ export function run() {
     let platform = new Platform(['ios']);
     config.setPlatform(platform);
 
-    config.set('tabBarPlacement', 'top');
+    config.set('tabbarPlacement', 'top');
 
-    expect(config.get('tabBarPlacement')).toEqual('top');
+    expect(config.get('tabbarPlacement')).toEqual('top');
   });
 
   it('should set ios platform settings from settings()', () => {

scripts/snapshot/ionic.snapshot.js

@@ -54,8 +54,9 @@ var IonicSnapshot = function(options) {
         };
       });
     });
-    process.on('exit', function() {
-      if (!self.shouldUpload) return;
+
+    process.on('exit', function(code) {
+      if (!self.shouldUpload || code === 1) return;
 
       if (self.highestMismatch > 1) {
         log(colors.red('Highest Mismatch: ' + self.highestMismatch + '%'));
@@ -127,34 +128,45 @@ var IonicSnapshot = function(options) {
               { form: self.testData },
               function (error, response, body) {
                 try {
-                  var rspData = JSON.parse(body);
-                  self.highestMismatch = Math.max(self.highestMismatch, rspData.Mismatch);
+                  if (error) {
+                    log(specIdString, colors.red('error posting screenshot:'), error);
+                    process.exit(1);
 
-                  var mismatch = Math.round(rspData.Mismatch * 100) / 100;
+                  } else if (response.statusCode >= 400) {
+                    log(specIdString, colors.red('error posting screenshot:'), response.statusCode, body);
+                    process.exit(1);
 
-                  if (rspData.Mismatch > 1) {
-                    log(specIdString, colors.red('Mismatch: ' + mismatch + '%'), colors.gray(spec.getFullName()));
-                  } else if (rspData.Mismatch > 0) {
-                    log(specIdString, colors.yellow('Mismatch: ' + mismatch + '%'), colors.gray(spec.getFullName()));
                   } else {
-                    log(specIdString, colors.green('Mismatch: ' + mismatch + '%'), colors.gray(spec.getFullName()));
-                  }
+                    var rspData = JSON.parse(body);
+                    self.highestMismatch = Math.max(self.highestMismatch, rspData.Mismatch);
 
-                  var resultKey = (((rspData.Mismatch * 1000) + 1000000) + '').split('.')[0] + '-' + spec.id;
-                  self.results[resultKey] = {
-                    index: spec.id,
-                    name: spec.getFullName(),
-                    mismatch: mismatch,
-                    compareUrl: rspData.CompareUrl,
-                    screenshotUrl: rspData.ScreenshotUrl,
-                  };
+                    var mismatch = Math.round(rspData.Mismatch * 100) / 100;
 
-                  if (rspData.IsMismatch) {
-                    self.mismatches.push(resultKey);
+                    if (rspData.Mismatch > 1) {
+                      log(specIdString, colors.red('Mismatch: ' + mismatch + '%'), colors.gray(spec.getFullName()));
+                    } else if (rspData.Mismatch > 0) {
+                      log(specIdString, colors.yellow('Mismatch: ' + mismatch + '%'), colors.gray(spec.getFullName()));
+                    } else {
+                      log(specIdString, colors.green('Mismatch: ' + mismatch + '%'), colors.gray(spec.getFullName()));
+                    }
+
+                    var resultKey = (((rspData.Mismatch * 1000) + 1000000) + '').split('.')[0] + '-' + spec.id;
+                    self.results[resultKey] = {
+                      index: spec.id,
+                      name: spec.getFullName(),
+                      mismatch: mismatch,
+                      compareUrl: rspData.CompareUrl,
+                      screenshotUrl: rspData.ScreenshotUrl,
+                    };
+
+                    if (rspData.IsMismatch) {
+                      self.mismatches.push(resultKey);
+                    }
                   }
 
                 } catch(e) {
-                  log(specIdString, colors.red('reportSpecResults', 'error posting screenshot:'), e);
+                  log(specIdString, colors.red('error parsing screenshot response:'), e);
+                  process.exit(1);
                 }
                 requestDeferred.resolve();
               }