refactor(cssClass): update/cleanup css class usage

demos/yerk/main.html

@@ -1,10 +1,10 @@
 <ion-nav [root]="root"></ion-nav>
 
 <style>
-  .md .nav .navbar-container {
+  .md .navbar-container {
     background-color: #2FD9BB !important;
   }
-  .md .nav .navbar-title {
+  .md .navbar-title {
     color: #FDFEFE;
   }
   #tabs tab-bar:before {

ionic/components/button/button.ts

@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Renderer} from 'angular2/angular2';
+import {Directive, ElementRef, Renderer, Attribute} from 'angular2/angular2';
 
 import {IonicConfig} from '../../config/config';
 
@@ -14,7 +14,8 @@ export class Button {
   constructor(
     config: IonicConfig,
     elementRef: ElementRef,
-    renderer: Renderer
+    renderer: Renderer,
+    @Attribute('type') type: string
   ) {
     let element = elementRef.nativeElement;
 
@@ -22,10 +23,8 @@ export class Button {
       element.classList.add('disable-hover');
     }
 
-    // TODO this isn't working in the popup
+    if (type) {
-    if (element.hasAttribute('type')) {
+      renderer.setElementAttribute(elementRef, type, '');
-      let type = element.getAttribute("type");
-      renderer.setElementAttribute(elementRef, type, "");
     }
 
     if (element.hasAttribute('ion-item')) {

ionic/components/checkbox/checkbox.ts

@@ -1,4 +1,4 @@
-import {Component, View, Directive, Optional, NgControl} from 'angular2/angular2';
+import {Component, View, Directive, Optional, NgControl, ElementRef, Renderer} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicForm} from '../form/form';
@@ -24,7 +24,6 @@ import {IonicForm} from '../form/form';
     'id'
   ],
   host: {
-    'class': 'item',
     'role': 'checkbox',
     'tappable': 'true',
     '[attr.tab-index]': 'tabIndex',
@@ -47,8 +46,11 @@ export class Checkbox {
 
   constructor(
     form: IonicForm,
-    @Optional() ngControl: NgControl
+    @Optional() ngControl: NgControl,
+    elementRef: ElementRef,
+    renderer: Renderer
   ) {
+    renderer.setElementClass(elementRef, 'item', true);
     this.form = form;
     form.register(this);
 

ionic/components/item/item-sliding.ts

@@ -1,4 +1,4 @@
-import {Component, Directive, View, ElementRef, NgIf, Host, Optional} from 'angular2/angular2';
+import {Component, Directive, View, ElementRef, NgIf, Host, Optional, Renderer} from 'angular2/angular2';
 
 import {Gesture} from 'ionic/gestures/gesture';
 import {DragGesture} from 'ionic/gestures/drag-gesture';
@@ -30,10 +30,7 @@ import {CSS, raf} from 'ionic/util/dom';
  */
 @Component({
   selector: 'ion-item-sliding,[ion-item-sliding]',
-  host: {
+  inputs: [
-    'class': 'item'
-  },
-  properties: [
     'sliding'
   ]
 })
@@ -53,7 +50,9 @@ export class ItemSliding {
    * TODO
    * @param {ElementRef} elementRef  A reference to the component's DOM element.
    */
-  constructor(elementRef: ElementRef, @Optional() @Host() list: List) {
+  constructor(elementRef: ElementRef, renderer: Renderer, @Optional() @Host() list: List) {
+    renderer.setElementClass(elementRef, 'item', true);
+
     this._isOpen = false;
     this._isSlideActive = false;
     this._isTransitioning = false;

ionic/components/item/modes/md.scss

@@ -149,7 +149,7 @@ $item-md-sliding-transition:         transform 250ms ease-in-out !default;
   }
 
   icon[item-left] + ion-item-content,
-  icon[item-left] + .text-input {
+  icon[item-left] + [text-input] {
     margin-left: $item-md-padding-left + ($item-md-padding-left / 2);
   }
 

ionic/components/list/list.ts

@@ -1,4 +1,4 @@
-import {Directive, ElementRef} from 'angular2/angular2';
+import {Directive, ElementRef, Renderer} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
@@ -22,10 +22,7 @@ import * as util from 'ionic/util';
     'items',
     'virtual',
     'content'
-  ],
+  ]
-  host: {
-    'class': 'list'
-  }
 })
 export class List extends Ion {
   /**
@@ -33,8 +30,9 @@ export class List extends Ion {
    * @param {ElementRef} elementRef  TODO
    * @param {IonicConfig} config  TODO
    */
-  constructor(elementRef: ElementRef, config: IonicConfig) {
+  constructor(elementRef: ElementRef, config: IonicConfig, renderer: Renderer) {
     super(elementRef, config);
+    renderer.setElementClass(elementRef, 'list', true);
     this.ele = elementRef.nativeElement;
   }
   /**

ionic/components/nav-bar/modes/ios.scss

@@ -5,6 +5,6 @@
 $navbar-ios-height:                        4.4rem !default;
 
 
-.nav .navbar-container {
+.navbar-container {
   min-height: $navbar-ios-height;
 }

ionic/components/nav-bar/modes/md.scss

@@ -5,23 +5,19 @@
 $navbar-md-height:                  5.6rem !default;
 
 
-.nav {
+.navbar-container {
-
-  .navbar-container {
   min-height: $navbar-md-height;
-  }
+}
 
-  .back-button {
+.toolbar .back-button {
   margin: 0 0 0 12px;
   box-shadow: none;
-  }
+}
 
-  .back-button-icon {
+.toolbar .back-button-icon {
   margin: 0;
   min-width: 44px;
   font-size: 2.4rem;
   font-weight: normal;
   text-align: left;
-  }
-
 }

ionic/components/nav-bar/nav-bar.ts

@@ -1,4 +1,4 @@
-import {Component, Directive, View, Optional, ElementRef, TemplateRef, forwardRef, Inject} from 'angular2/angular2';
+import {Component, Directive, View, Optional, ElementRef, Renderer, TemplateRef, forwardRef, Inject} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {Icon} from '../icon/icon';
@@ -50,10 +50,7 @@ class BackButtonText extends Ion {
 
 
 @Component({
-  selector: 'ion-navbar',
+  selector: 'ion-navbar'
-  host: {
-    'class': 'toolbar'
-  }
 })
 @View({
   template:
@@ -77,9 +74,11 @@ export class Navbar extends ToolbarBase {
     app: IonicApp,
     @Optional() viewCtrl: ViewController,
     elementRef: ElementRef,
-    config: IonicConfig
+    config: IonicConfig,
+    renderer: Renderer
   ) {
     super(elementRef, config);
+    renderer.setElementClass(elementRef, 'toolbar', true);
 
     this.app = app;
     viewCtrl && viewCtrl.navbarView(this);

ionic/components/nav/nav.ts

@@ -405,13 +405,10 @@ class ContentAnchor {
  * @private
  */
 @Component({
-  selector: 'ion-pane',
+  selector: 'ion-pane'
-  host: {
-    'class': 'nav'
-  }
 })
 @View({
-  template: '' +
+  template:
     '<section class="navbar-container">' +
       '<template navbar-anchor></template>' +
     '</section>' +

ionic/components/radio/radio.ts

@@ -1,4 +1,4 @@
-import {Component, Directive, ElementRef, Host, Optional, NgControl, Query, QueryList, View} from 'angular2/angular2';
+import {Component, Directive, ElementRef, Renderer, Host, Optional, NgControl, Query, QueryList, View} from 'angular2/angular2';
 
 import {IonicConfig} from '../../config/config';
 import {Ion} from '../ion';
@@ -45,7 +45,6 @@ import {ListHeader} from '../list/list';
 @Directive({
   selector: 'ion-radio-group',
   host: {
-    'class': 'list',
     'role': 'radiogroup',
     '[attr.aria-activedescendant]': 'activeId',
     '[attr.aria-describedby]': 'describedById'
@@ -64,10 +63,13 @@ export class RadioGroup extends Ion {
   constructor(
     elementRef: ElementRef,
     config: IonicConfig,
+    renderer: Renderer,
     @Optional() ngControl: NgControl,
     @Query(ListHeader) private headerQuery: QueryList<ListHeader>
   ) {
     super(elementRef, config);
+    renderer.setElementClass(elementRef, 'list', true);
+
     this.id = ++radioGroupIds;
     this.radioIds = -1;
     this.onChange = (_) => {};
@@ -170,7 +172,6 @@ export class RadioGroup extends Ion {
     'id'
   ],
   host: {
-    'class': 'item',
     'role': 'radio',
     'tappable': 'true',
     '[attr.id]': 'id',
@@ -200,9 +201,12 @@ export class RadioButton extends Ion {
   constructor(
     @Host() @Optional() group: RadioGroup,
     elementRef: ElementRef,
-    config: IonicConfig
+    config: IonicConfig,
+    renderer: Renderer
   ) {
-    super(elementRef, config)
+    super(elementRef, config);
+    renderer.setElementClass(elementRef, 'item', true);
+
     this.group = group;
     this.tabIndex = 0;
   }

ionic/components/search-bar/modes/ios.scss

@@ -23,7 +23,7 @@ $search-bar-ios-input-close-icon-svg:     "<svg xmlns='http://www.w3.org/2000/sv
 $search-bar-ios-input-close-icon-size:    17px !default;
 
 
-.search-bar {
+ion-search-bar {
   padding: $search-bar-ios-padding;
   background: $search-bar-ios-background-color;
   border-bottom: 1px solid $search-bar-ios-border-color;
@@ -95,6 +95,6 @@ $search-bar-ios-input-close-icon-size:    17px !default;
   padding-right: 0;
 }
 
-&.hairlines .search-bar {
+&.hairlines ion-search-bar {
   border-bottom-width: 0.55px;
 }

ionic/components/search-bar/modes/md.scss

@@ -21,7 +21,7 @@ $search-bar-md-input-close-icon-svg:     "<svg xmlns='http://www.w3.org/2000/svg
 $search-bar-md-input-close-icon-size:    22px !default;
 
 
-.search-bar {
+ion-search-bar {
   padding: $search-bar-md-padding;
   background: $search-bar-md-background-color;
 }

ionic/components/search-bar/search-bar.scss

@@ -3,7 +3,7 @@
 // --------------------------------------------------
 
 
-.search-bar {
+ion-search-bar {
   position: relative;
   display: flex;
   align-items: center;

ionic/components/switch/switch.ts

@@ -3,6 +3,7 @@ import {
   View,
   Directive,
   ElementRef,
+  Renderer,
   Host,
   Optional,
   NgControl,
@@ -84,7 +85,6 @@ class MediaSwitch {
     'id'
   ],
   host: {
-    'class': 'item',
     'role': 'checkbox',
     'tappable': 'true',
     '[attr.tab-index]': 'tabIndex',
@@ -119,11 +119,14 @@ export class Switch {
     form: IonicForm,
     elementRef: ElementRef,
     config: IonicConfig,
+    renderer: Renderer,
     @Optional() private ngControl: NgControl
   ) {
     this.form = form;
     form.register(this);
 
+    renderer.setElementClass(elementRef, 'item', true);
+
     this.lastTouch = 0;
     this.mode = config.get('mode');
 

ionic/components/tabs/tabs.ts

@@ -68,7 +68,7 @@ import * as dom from 'ionic/util/dom';
   }
 })
 @View({
-  template: '' +
+  template:
     '<section class="navbar-container">' +
       '<template navbar-anchor></template>' +
     '</section>' +

ionic/components/text-input/label.scss

@@ -32,7 +32,7 @@ ion-input[floating-label] {
     max-width: 100%;
   }
 
-  .text-input {
+  [text-input] {
     align-self: stretch;
     width: auto;
   }

ionic/components/text-input/label.ts

@@ -14,7 +14,6 @@ import {pointerCoord, hasPointerMoved} from '../../util/dom';
   ],
   host: {
     '[attr.id]': 'id',
-    'class': 'input-label',
     '(touchstart)': 'pointerStart($event)',
     '(touchend)': 'pointerEnd($event)',
     '(mousedown)': 'pointerStart($event)',

ionic/components/text-input/modes/ios.scss

@@ -8,12 +8,12 @@ $input-label-ios-color:         #7f7f7f !default;
 .list,
 ion-card {
 
-  .text-input {
+  [text-input] {
     margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2);
     padding: 0;
   }
 
-  ion-input[inset] .text-input {
+  ion-input[inset] [text-input] {
     margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) $item-ios-padding-left;
     padding: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2);
   }
@@ -28,8 +28,8 @@ ion-card {
     margin-bottom: 4px;
   }
 
-  [stacked-label] .text-input,
+  [stacked-label] [text-input],
-  [floating-label] .text-input {
+  [floating-label] [text-input] {
     margin-top: 8px;
     margin-bottom: 8px;
   }

ionic/components/text-input/modes/md.scss

@@ -9,7 +9,7 @@ $input-label-md-color:            #999 !default;
 .list,
 ion-card {
 
-  .text-input {
+  [text-input] {
     margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
     padding: 0;
   }
@@ -19,7 +19,7 @@ ion-card {
     left: 0;
   }
 
-  ion-input[inset] .text-input {
+  ion-input[inset] [text-input] {
     margin: ($item-md-padding-top / 2) $item-md-padding-right ($item-md-padding-bottom / 2) $item-md-padding-left;
     padding: ($item-md-padding-top / 2) ($item-md-padding-right / 2) ($item-md-padding-bottom / 2) ($item-md-padding-left / 2);
   }
@@ -48,8 +48,8 @@ ion-card {
     color: $text-input-highlight-color;
   }
 
-  [stacked-label] .text-input,
+  [stacked-label] [text-input],
-  [floating-label] .text-input {
+  [floating-label] [text-input] {
     margin-bottom: 8px;
     margin-top: 8px;
   }

ionic/components/text-input/text-input.scss

@@ -24,13 +24,13 @@ ion-input.item {
   }
 }
 
-ion-input .text-input {
+ion-input [text-input] {
   flex: 1;
   background-color: $text-input-background-color;
   pointer-events: none;
 }
 
-ion-input.has-focus .text-input {
+ion-input.has-focus [text-input] {
   pointer-events: auto;
 }
 

ionic/components/text-input/text-input.ts

@@ -1,4 +1,4 @@
-import {Directive, View, Host, Optional, ElementRef, Attribute, Query, QueryList, NgZone} from 'angular2/angular2';
+import {Directive, View, Host, Optional, ElementRef, Renderer, Attribute, Query, QueryList, NgZone} from 'angular2/angular2';
 
 import {IonicConfig} from '../../config/config';
 import {IonicForm} from '../form/form';
@@ -21,8 +21,7 @@ import {IonicPlatform} from '../../platform/platform';
     '(touchend)': 'pointerEnd($event)',
     '(mouseup)': 'pointerEnd($event)',
     '[class.has-focus]': 'hasFocus',
-    '[class.has-value]': 'hasValue',
+    '[class.has-value]': 'hasValue'
-    'class': 'item'
   }
 })
 export class TextInput {
@@ -40,11 +39,14 @@ export class TextInput {
     form: IonicForm,
     elementRef: ElementRef,
     config: IonicConfig,
+    renderer: Renderer,
     app: IonicApp,
     zone: NgZone,
     platform: IonicPlatform,
     @Optional() @Host() scrollView: Content
   ) {
+    renderer.setElementClass(elementRef, 'item', true);
+
     this.form = form;
     form.register(this);
 
@@ -72,7 +74,8 @@ export class TextInput {
    */
   onInit() {
     if (this.input && this.label) {
-      this.input.labelledBy = this.label.id = (this.label.id || 'label-' + this.inputId);
+      this.label.id = (this.label.id || 'label-' + this.inputId)
+      this.input.labelledBy(this.label.id);
     }
 
     let self = this;
@@ -384,9 +387,7 @@ export class TextInput {
     'tabIndex'
   ],
   host: {
-    '[tabIndex]': 'tabIndex',
+    '[tabIndex]': 'tabIndex'
-    '[attr.aria-labelledby]': 'labelledBy',
-    'class': 'text-input'
   }
 })
 export class TextInputElement {
@@ -395,6 +396,7 @@ export class TextInputElement {
     form: IonicForm,
     @Attribute('type') type: string,
     elementRef: ElementRef,
+    renderer: Renderer,
     @Optional() textInputWrapper: TextInput
   ) {
     this.form = form;
@@ -402,6 +404,9 @@ export class TextInputElement {
     this.elementRef = elementRef;
     this.tabIndex = 0;
 
+    this.renderer = renderer;
+    renderer.setElementAttribute(this.elementRef, 'text-input', '');
+
     if (textInputWrapper) {
       // it's within ionic's ion-input, let ion-input handle what's up
       textInputWrapper.registerInput(this);
@@ -412,6 +417,10 @@ export class TextInputElement {
     }
   }
 
+  labelledBy(val) {
+    this.renderer.setElementAttribute(this.elementRef, 'aria-labelledby', val);
+  }
+
   initFocus() {
     this.elementRef.nativeElement.focus();
   }

ionic/components/toolbar/toolbar.ts

@@ -1,4 +1,4 @@
-import {Component, Directive, View, Host, ElementRef, Optional, forwardRef, Inject} from 'angular2/angular2';
+import {Component, Directive, View, Host, ElementRef, Renderer, Optional, forwardRef, Inject} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
@@ -56,10 +56,7 @@ export class ToolbarBase extends Ion  {
  * TODO
  */
 @Component({
-  selector: 'ion-toolbar',
+  selector: 'ion-toolbar'
-  host: {
-    'class': 'toolbar'
-  }
 })
 @View({
   template:
@@ -74,9 +71,11 @@ export class ToolbarBase extends Ion  {
 export class Toolbar extends ToolbarBase {
   constructor(
     elementRef: ElementRef,
-    config: IonicConfig
+    config: IonicConfig,
+    renderer: Renderer
   ) {
     super(elementRef, config);
+    renderer.setElementClass(elementRef, 'toolbar', true);
   }
 
 }

ionic/config/decorators.ts

@@ -114,9 +114,6 @@ function appendConfig(cls, config) {
 
   cls.delegates = config.delegates;
 
-  let componentId = (config.selector && config.selector.replace('ion-', ''));
-  config.host['class'] = ((config.host['class'] || '') + ' ' + componentId).trim();
-
   return config;
 }
 

scripts/snapshot/snapshot.config.js

@@ -11,7 +11,7 @@ exports.config = {
   specs: 'dist/e2e/**/*e2e.js',
   //specs: 'dist/e2e/tabs/**/*e2e.js',
 
-  sleepBetweenSpecs: 1400,
+  sleepBetweenSpecs: 1000,
 
   platformDefauls: {
     browser: 'chrome',