From 025c5cc6462fae7d9997f2f0a5a232cb27017fed Mon Sep 17 00:00:00 2001
From: Alan <alan.agius4@gmail.com>
Date: Mon, 14 Nov 2016 13:50:01 -0500
Subject: [PATCH] fix(components): add a mode agnostic css class (#9133)

Fixes #8545
---
 src/components/app/test/ion.spec.ts     | 32 ++++++++++-----------
 src/components/badge/badge.ts           |  8 ++----
 src/components/card/card.ts             | 32 ++++++++-------------
 src/components/checkbox/checkbox.ts     | 12 ++++----
 src/components/chip/chip.ts             |  8 ++----
 src/components/content/content.ts       |  4 +--
 src/components/datetime/datetime.ts     | 11 ++++---
 src/components/fab/fab.ts               | 12 ++++----
 src/components/icon/icon.ts             |  8 ++----
 src/components/input/input-base.ts      |  2 +-
 src/components/input/input.ts           |  4 +--
 src/components/ion.ts                   | 38 ++++++++++++++++++-------
 src/components/item/item.ts             | 23 +++++++--------
 src/components/label/label.ts           |  8 ++----
 src/components/list/list-header.ts      |  8 ++----
 src/components/list/list.ts             |  6 ++--
 src/components/navbar/navbar.ts         |  6 ++--
 src/components/radio/radio-button.ts    |  8 ++----
 src/components/range/range.ts           | 12 ++++----
 src/components/searchbar/searchbar.ts   |  8 ++----
 src/components/segment/segment.ts       |  8 ++----
 src/components/select/select.ts         |  6 ++--
 src/components/slides/slides.ts         |  2 +-
 src/components/spinner/spinner.ts       | 24 +++++++---------
 src/components/tabs/tabs.ts             |  7 ++---
 src/components/toggle/toggle.ts         |  8 ++----
 src/components/toolbar/toolbar-item.ts  |  4 +--
 src/components/toolbar/toolbar-title.ts |  3 +-
 src/components/toolbar/toolbar.ts       | 14 ++++-----
 src/components/typography/typography.ts |  8 ++----
 30 files changed, 148 insertions(+), 186 deletions(-)

diff --git a/src/components/app/test/ion.spec.ts b/src/components/app/test/ion.spec.ts
index c608870a1be..737ccdcb7ab 100644
--- a/src/components/app/test/ion.spec.ts
+++ b/src/components/app/test/ion.spec.ts
@@ -7,34 +7,34 @@ describe('Ion', () => {
   describe('color', () => {
 
     it('should set color when it hasnt been set yet', () => {
-      ion._setMode('icon', 'md');
-      ion._setColor('icon', 'primary');
-      expect(className(ion)).toEqual('icon-md icon-md-primary');
+      ion._setMode('md');
+      ion._setColor('primary');
+      expect(className(ion)).toEqual('icon icon-md icon-md-primary');
     });
 
     it('should remove color when it has already been set', () => {
-      ion._setMode('icon', 'md');
-      ion._setColor('icon', 'primary');
-      ion._setColor('icon', null);
-      expect(className(ion)).toEqual('icon-md');
+      ion._setMode('md');
+      ion._setColor('primary');
+      ion._setColor(null);
+      expect(className(ion)).toEqual('icon icon-md');
     });
 
     it('should update color when it has already been set', () => {
-      ion._setMode('icon', 'md');
-      ion._setColor('icon', 'primary');
-      ion._setColor('icon', 'secondary');
-      expect(className(ion)).toEqual('icon-md icon-md-secondary');
+      ion._setMode('md');
+      ion._setColor('primary');
+      ion._setColor('secondary');
+      expect(className(ion)).toEqual('icon icon-md icon-md-secondary');
     });
 
     it('should not setElementClass if its the same value', () => {
-      ion._setMode('icon', 'ios');
-      ion._setColor('icon', 'primary');
+      ion._setMode('ios');
+      ion._setColor('primary');
       spyOn(ion, 'setElementClass');
 
       expect(ion.setElementClass).not.toHaveBeenCalled();
-      ion._setColor('icon', 'primary');
+      ion._setColor('primary');
 
-      expect(className(ion)).toEqual('icon-ios icon-ios-primary');
+      expect(className(ion)).toEqual('icon icon-ios icon-ios-primary');
     });
 
   });
@@ -42,7 +42,7 @@ describe('Ion', () => {
   var ion: Ion;
 
   beforeEach(() => {
-    ion = new Ion(mockConfig(), mockElementRef(), mockRenderer());
+    ion = new Ion(mockConfig(), mockElementRef(), mockRenderer(), 'icon');
   });
 
   function className(ion: Ion) {
diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
index d46e1f9a796..4b3118e5aa7 100644
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@@ -21,7 +21,7 @@ export class Badge extends Ion {
    */
   @Input()
   set color(val: string) {
-    this._setColor('badge', val);
+    this._setColor(val);
   }
 
   /**
@@ -29,13 +29,11 @@ export class Badge extends Ion {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('badge', val);
+    this._setMode(val);
   }
 
   constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
-    super(config, elementRef, renderer);
-
-    this.mode = config.get('mode');
+    super(config, elementRef, renderer, 'badge');
   }
 
 }
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
index a2e63a18c09..6dfd5b1c0d1 100644
--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@@ -17,7 +17,7 @@ export class Card extends Ion {
    */
   @Input()
   set color(val: string) {
-    this._setColor('card', val);
+    this._setColor(val);
   }
 
   /**
@@ -25,13 +25,11 @@ export class Card extends Ion {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('card', val);
+    this._setMode(val);
   }
 
   constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
-    super(config, elementRef, renderer);
-
-    this.mode = config.get('mode');
+    super(config, elementRef, renderer, 'card');
   }
 
 }
@@ -50,7 +48,7 @@ export class CardContent extends Ion {
    */
   @Input()
   set color(val: string) {
-    this._setColor('card-content', val);
+    this._setColor(val);
   }
 
   /**
@@ -58,13 +56,11 @@ export class CardContent extends Ion {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('card-content', val);
+    this._setMode(val);
   }
 
   constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
-    super(config, elementRef, renderer);
-
-    this.mode = config.get('mode');
+    super(config, elementRef, renderer, 'card-content');
   }
 
 }
@@ -83,7 +79,7 @@ export class CardHeader extends Ion {
    */
   @Input()
   set color(val: string) {
-    this._setColor('card-header', val);
+    this._setColor(val);
   }
 
   /**
@@ -91,13 +87,11 @@ export class CardHeader extends Ion {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('card-header', val);
+    this._setMode(val);
   }
 
   constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
-    super(config, elementRef, renderer);
-
-    this.mode = config.get('mode');
+    super(config, elementRef, renderer, 'card-header');
   }
 
 }
@@ -115,7 +109,7 @@ export class CardTitle extends Ion {
    */
   @Input()
   set color(val: string) {
-    this._setColor('card-title', val);
+    this._setColor(val);
   }
 
   /**
@@ -123,13 +117,11 @@ export class CardTitle extends Ion {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('card-title', val);
+    this._setMode(val);
   }
 
   constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
-    super(config, elementRef, renderer);
-
-    this.mode = config.get('mode');
+    super(config, elementRef, renderer, 'card-title');
   }
 
 }
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index de45d026ccd..a90d529a08a 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -91,7 +91,7 @@ export class Checkbox extends Ion implements AfterContentInit, ControlValueAcces
    */
   @Input()
   set color(val: string) {
-    this._setColor('checkbox', val);
+    this._setColor(val);
   }
 
   /**
@@ -99,7 +99,7 @@ export class Checkbox extends Ion implements AfterContentInit, ControlValueAcces
    */
   @Input()
   set mode(val: string) {
-    this._setMode('checkbox', val);
+    this._setMode(val);
   }
 
   /**
@@ -114,9 +114,7 @@ export class Checkbox extends Ion implements AfterContentInit, ControlValueAcces
     elementRef: ElementRef,
     renderer: Renderer
   ) {
-    super(config, elementRef, renderer);
-
-    this.mode = config.get('mode');
+    super(config, elementRef, renderer, 'checkbox');
 
     _form.register(this);
 
@@ -168,7 +166,7 @@ export class Checkbox extends Ion implements AfterContentInit, ControlValueAcces
    * @private
    */
   writeValue(val: any) {
-    this._setChecked( isTrueProperty(val) );
+    this._setChecked(isTrueProperty(val));
   }
 
   /**
@@ -215,7 +213,7 @@ export class Checkbox extends Ion implements AfterContentInit, ControlValueAcces
   /**
    * @private
    */
-  onTouched() {}
+  onTouched() { }
 
   /**
    * @private
diff --git a/src/components/chip/chip.ts b/src/components/chip/chip.ts
index 40128b16c19..cb660a993b3 100644
--- a/src/components/chip/chip.ts
+++ b/src/components/chip/chip.ts
@@ -100,7 +100,7 @@ export class Chip extends Ion {
    */
   @Input()
   set color(val: string) {
-    this._setColor('chip', val);
+    this._setColor(val);
   }
 
   /**
@@ -108,13 +108,11 @@ export class Chip extends Ion {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('chip', val);
+    this._setMode(val);
   }
 
   constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
-    super(config, elementRef, renderer);
-
-    this.mode = config.get('mode');
+    super(config, elementRef, renderer, 'chip');
   }
 
 }
diff --git a/src/components/content/content.ts b/src/components/content/content.ts
index ded7a37c6e3..9cdd445f2bf 100644
--- a/src/components/content/content.ts
+++ b/src/components/content/content.ts
@@ -165,9 +165,7 @@ export class Content extends Ion {
     @Optional() viewCtrl: ViewController,
     @Optional() public _tabs: Tabs
   ) {
-    super(config, elementRef, renderer);
-
-    this._setMode('content', config.get('mode'));
+    super(config, elementRef, renderer, 'content');
 
     this._sbPadding = config.getBoolean('statusbarPadding', false);
 
diff --git a/src/components/datetime/datetime.ts b/src/components/datetime/datetime.ts
index 2bbdd27d70d..ca5a8832881 100644
--- a/src/components/datetime/datetime.ts
+++ b/src/components/datetime/datetime.ts
@@ -412,7 +412,7 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
    */
   @Input()
   set mode(val: string) {
-    this._setMode('datetime', val);
+    this._setMode(val);
   }
 
   /**
@@ -433,9 +433,8 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
     @Optional() private _item: Item,
     @Optional() private _pickerCtrl: PickerController
   ) {
-    super(config, elementRef, renderer);
+    super(config, elementRef, renderer, 'datetime');
 
-    this.mode = config.get('mode');
     _form.register(this);
 
     if (_item) {
@@ -632,7 +631,7 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
         // loop through each month and see if it
         // is within the min/max date range
         monthOpt.disabled = (dateSortValue(selectedYear, monthOpt.value, 31) < minCompareVal ||
-                             dateSortValue(selectedYear, monthOpt.value, 1) > maxCompareVal);
+          dateSortValue(selectedYear, monthOpt.value, 1) > maxCompareVal);
       }
     }
 
@@ -648,8 +647,8 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
           var compareVal = dateSortValue(selectedYear, selectedMonth, dayOpt.value);
 
           dayOpt.disabled = (compareVal < minCompareVal ||
-                             compareVal > maxCompareVal ||
-                             numDaysInMonth <= i);
+            compareVal > maxCompareVal ||
+            numDaysInMonth <= i);
         }
 
       } else {
diff --git a/src/components/fab/fab.ts b/src/components/fab/fab.ts
index f48aa70631d..88c6fba5b4c 100755
--- a/src/components/fab/fab.ts
+++ b/src/components/fab/fab.ts
@@ -63,14 +63,14 @@ import { nativeTimeout } from '../../util/dom';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class FabButton extends Ion  {
+export class FabButton extends Ion {
 
   /**
    * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
    */
   @Input()
   set color(val: string) {
-    this._setColor('fab', val);
+    this._setColor(val);
   }
 
   /**
@@ -78,7 +78,7 @@ export class FabButton extends Ion  {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('fab', val);
+    this._setMode(val);
   }
 
   constructor(
@@ -86,9 +86,7 @@ export class FabButton extends Ion  {
     elementRef: ElementRef,
     renderer: Renderer,
   ) {
-    super(config, elementRef, renderer);
-    this.setElementClass('fab', true); // set role
-    this.mode = config.get('mode');
+    super(config, elementRef, renderer, 'fab');
   }
 
 
@@ -324,7 +322,7 @@ export class FabContainer {
       return;
     }
     let lists = this._fabLists.toArray();
-    for (let list of lists) {
+    for (let list of lists) {
       list.setVisible(isActive);
     }
     this._mainButton.setActiveClose(isActive);
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 463c96d4486..d8651ef80d5 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -64,7 +64,7 @@ export class Icon extends Ion {
     return this._color;
   }
   set color(value: string) {
-    this._setColor('icon', value);
+    this._setColor(value);
   }
 
   /**
@@ -72,7 +72,7 @@ export class Icon extends Ion {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('icon', val);
+    this._setMode(val);
   }
 
   constructor(
@@ -80,9 +80,7 @@ export class Icon extends Ion {
     elementRef: ElementRef,
     renderer: Renderer
   ) {
-    super(config, elementRef, renderer);
-
-    this.mode = config.get('mode');
+    super(config, elementRef, renderer, 'icon');
     this._iconMode = config.get('iconMode');
   }
 
diff --git a/src/components/input/input-base.ts b/src/components/input/input-base.ts
index 8cc039bd558..f9c80914527 100644
--- a/src/components/input/input-base.ts
+++ b/src/components/input/input-base.ts
@@ -46,7 +46,7 @@ export class InputBase extends Ion {
     nav: NavController,
     ngControl: NgControl
   ) {
-    super(config, elementRef, renderer);
+    super(config, elementRef, renderer, 'input');
 
     this._nav = <NavControllerBase>nav;
     this._useAssist = config.getBoolean('scrollAssist', false);
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 24870711b1a..95ace7a45cd 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -157,7 +157,7 @@ export class TextInput extends InputBase {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('input', val);
+    this._setMode(val);
   }
 
   /**
@@ -336,7 +336,7 @@ export class TextArea extends InputBase {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('input', val);
+    this._setMode(val);
   }
 
   /**
diff --git a/src/components/ion.ts b/src/components/ion.ts
index 227e03d6314..f5c3598ddad 100644
--- a/src/components/ion.ts
+++ b/src/components/ion.ts
@@ -26,10 +26,19 @@ export class Ion {
   /** @private */
   _mode: string;
 
-  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
+  /** @private */
+  _componentName: string;
+
+  constructor(config: Config, elementRef: ElementRef, renderer: Renderer, componentName?: string) {
     this._config = config;
     this._elementRef = elementRef;
     this._renderer = renderer;
+    this._componentName = componentName;
+
+    if (componentName) {
+      this._setComponentName();
+      this._setMode(config.get('mode'));
+    }
   }
 
   /** @private */
@@ -48,32 +57,41 @@ export class Ion {
   }
 
   /** @private */
-  _setColor(componentName: string, newColor: string) {
+  _setColor(newColor: string, componentName?: string) {
+    if (componentName) {
+      // This is needed for the item-radio
+      this._componentName = componentName;
+    }
     if (this._color) {
-      this.setElementClass(`${componentName}-${this._mode}-${this._color}`, false);
+      this.setElementClass(`${this._componentName}-${this._mode}-${this._color}`, false);
     }
     if (newColor) {
-      this.setElementClass(`${componentName}-${this._mode}-${newColor}`, true);
+      this.setElementClass(`${this._componentName}-${this._mode}-${newColor}`, true);
       this._color = newColor;
     }
   }
 
   /** @private */
-  _setMode(componentName: string, newMode: string) {
+  _setMode(newMode: string) {
     if (this._mode) {
-      this.setElementClass(`${componentName}-${this._mode}`, false);
+      this.setElementClass(`${this._componentName}-${this._mode}`, false);
     }
     if (newMode) {
-      this.setElementClass(`${componentName}-${newMode}`, true);
+      this.setElementClass(`${this._componentName}-${newMode}`, true);
 
       // Remove the color class associated with the previous mode,
       // change the mode, then add the new color class
-      this._setColor(componentName, null);
+      this._setColor(null);
       this._mode = newMode;
-      this._setColor(componentName, this._color);
+      this._setColor(this._color);
     }
   }
 
+  /** @private */
+  _setComponentName() {
+    this.setElementClass(this._componentName, true);
+  }
+
   /** @private */
   getElementRef(): ElementRef {
     return this._elementRef;
@@ -85,7 +103,7 @@ export class Ion {
   }
 
   /** @private */
-  getDimensions(): { width: number, height: number, left: number, top: number} {
+  getDimensions(): { width: number, height: number, left: number, top: number } {
     return getDimensions(this.getNativeElement(), this._getId());
   }
 
diff --git a/src/components/item/item.ts b/src/components/item/item.ts
index 2f19b441515..cc86c54ce9e 100644
--- a/src/components/item/item.ts
+++ b/src/components/item/item.ts
@@ -324,7 +324,7 @@ export class Item extends Ion {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('item', val);
+    this._setMode(val);
   }
 
   constructor(
@@ -334,11 +334,10 @@ export class Item extends Ion {
     renderer: Renderer,
     @Optional() reorder: ItemReorder
   ) {
-    super(config, elementRef, renderer);
+    super(config, elementRef, renderer, 'item');
 
     this._setName(elementRef);
     this._shouldHaveReorder = !!reorder;
-    this.mode = config.get('mode');
     this.id = form.nextId().toString();
   }
 
@@ -367,9 +366,9 @@ export class Item extends Ion {
   /**
    * @private
    */
-  _updateColor(newColor: string, colorClass?: string) {
-    colorClass = colorClass || 'item'; // item-radio
-    this._setColor(colorClass, newColor);
+  _updateColor(newColor: string, componentName?: string) {
+    componentName = componentName || 'item'; // item-radio
+    this._setColor(newColor, componentName);
   }
 
   /**
@@ -454,7 +453,7 @@ export class ItemDivider extends Ion {
    */
   @Input()
   set color(val: string) {
-    this._setColor('item-divider', val);
+    this._setColor(val);
   }
 
   /**
@@ -462,13 +461,11 @@ export class ItemDivider extends Ion {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('item-divider', val);
+    this._setMode(val);
   }
 
   constructor(form: Form, config: Config, elementRef: ElementRef, renderer: Renderer) {
-    super(config, elementRef, renderer);
-
-    this.mode = config.get('mode');
+    super(config, elementRef, renderer, 'item-divider');
   }
 
 }
@@ -482,7 +479,7 @@ export class ItemDivider extends Ion {
     'class': 'item-block'
   }
 })
-export class ItemContent {}
+export class ItemContent { }
 
 
 /**
@@ -491,4 +488,4 @@ export class ItemContent {}
 @Directive({
   selector: 'ion-item-group'
 })
-export class ItemGroup {}
+export class ItemGroup { }
diff --git a/src/components/label/label.ts b/src/components/label/label.ts
index 023f37166eb..955a12f0602 100644
--- a/src/components/label/label.ts
+++ b/src/components/label/label.ts
@@ -65,7 +65,7 @@ export class Label extends Ion {
    */
   @Input()
   set color(val: string) {
-    this._setColor('label', val);
+    this._setColor(val);
   }
 
   /**
@@ -73,7 +73,7 @@ export class Label extends Ion {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('label', val);
+    this._setMode(val);
   }
 
   /**
@@ -90,9 +90,7 @@ export class Label extends Ion {
     @Attribute('fixed') isFixed: string,
     @Attribute('inset') isInset: string
   ) {
-    super(config, elementRef, renderer);
-
-    this.mode = config.get('mode');
+    super(config, elementRef, renderer, 'label');
     this.type = (isFloating === '' ? 'floating' : (isStacked === '' ? 'stacked' : (isFixed === '' ? 'fixed' : (isInset === '' ? 'inset' : null))));
   }
 
diff --git a/src/components/list/list-header.ts b/src/components/list/list-header.ts
index 4226ab657d7..8cab6b47357 100644
--- a/src/components/list/list-header.ts
+++ b/src/components/list/list-header.ts
@@ -16,7 +16,7 @@ export class ListHeader extends Ion {
    */
   @Input()
   set color(val: string) {
-    this._setColor('list-header', val);
+    this._setColor(val);
   }
 
   /**
@@ -24,13 +24,11 @@ export class ListHeader extends Ion {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('list-header', val);
+    this._setMode(val);
   }
 
   constructor(config: Config, renderer: Renderer, elementRef: ElementRef, @Attribute('id') private _id: string) {
-    super(config, elementRef, renderer);
-
-    this.mode = config.get('mode');
+    super(config, elementRef, renderer, 'list-header');
   }
 
   get id(): string {
diff --git a/src/components/list/list.ts b/src/components/list/list.ts
index e819078d4f4..6d8d1fc7963 100644
--- a/src/components/list/list.ts
+++ b/src/components/list/list.ts
@@ -55,9 +55,7 @@ export class List extends Ion {
     renderer: Renderer,
     public _gestureCtrl: GestureController
   ) {
-    super(config, elementRef, renderer);
-
-    this.mode = config.get('mode');
+    super(config, elementRef, renderer, 'list');
   }
 
   /**
@@ -65,7 +63,7 @@ export class List extends Ion {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('list', val);
+    this._setMode(val);
   }
 
   /**
diff --git a/src/components/navbar/navbar.ts b/src/components/navbar/navbar.ts
index 1040d9b077d..1fa21661b8b 100644
--- a/src/components/navbar/navbar.ts
+++ b/src/components/navbar/navbar.ts
@@ -93,7 +93,7 @@ export class Navbar extends ToolbarBase {
    */
   @Input()
   set color(val: string) {
-    this._setColor('toolbar', val);
+    this._setColor(val);
   }
 
   /**
@@ -101,7 +101,7 @@ export class Navbar extends ToolbarBase {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('toolbar', val);
+    this._setMode(val);
   }
 
   /**
@@ -125,8 +125,6 @@ export class Navbar extends ToolbarBase {
   ) {
     super(config, elementRef, renderer);
 
-    this.mode = config.get('mode');
-
     viewCtrl && viewCtrl._setNavbar(this);
 
     this._bbIcon = config.get('backButtonIcon');
diff --git a/src/components/radio/radio-button.ts b/src/components/radio/radio-button.ts
index 1c60cee47cb..efd8edf12f0 100644
--- a/src/components/radio/radio-button.ts
+++ b/src/components/radio/radio-button.ts
@@ -95,7 +95,7 @@ export class RadioButton extends Ion implements OnDestroy, OnInit {
    */
   @Input()
   set color(val: string) {
-    this._setColor('radio', val);
+    this._setColor(val);
 
     if (this._item) {
       this._item._updateColor(val, 'item-radio');
@@ -107,7 +107,7 @@ export class RadioButton extends Ion implements OnDestroy, OnInit {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('radio', val);
+    this._setMode(val);
   }
 
   /**
@@ -123,9 +123,7 @@ export class RadioButton extends Ion implements OnDestroy, OnInit {
     @Optional() private _item: Item,
     @Optional() private _group: RadioGroup
   ) {
-    super(config, elementRef, renderer);
-
-    this.mode = config.get('mode');
+    super(config, elementRef, renderer, 'radio');
     _form.register(this);
 
     if (_group) {
diff --git a/src/components/range/range.ts b/src/components/range/range.ts
index 0b013ec3a61..6f1af1a3d99 100644
--- a/src/components/range/range.ts
+++ b/src/components/range/range.ts
@@ -45,7 +45,7 @@ export class RangeKnob implements OnInit {
 
   @Input() upper: boolean;
 
-  constructor(@Inject(forwardRef(() => Range)) public range: Range) {}
+  constructor( @Inject(forwardRef(() => Range)) public range: Range) { }
 
   get ratio(): number {
     return this._ratio;
@@ -229,7 +229,7 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
    */
   @Input()
   set color(val: string) {
-    this._setColor('range', val);
+    this._setColor(val);
   }
 
   /**
@@ -237,7 +237,7 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
    */
   @Input()
   set mode(val: string) {
-    this._setMode('range', val);
+    this._setMode(val);
   }
 
   @ViewChild('bar') public _bar: ElementRef;
@@ -350,9 +350,7 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
     elementRef: ElementRef,
     renderer: Renderer
   ) {
-    super(config, elementRef, renderer);
-
-    this.mode = config.get('mode');
+    super(config, elementRef, renderer, 'range');
     _form.register(this);
 
     if (_item) {
@@ -700,7 +698,7 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
   /**
    * @private
    */
-  onTouched() {}
+  onTouched() { }
 
   /**
    * @private
diff --git a/src/components/searchbar/searchbar.ts b/src/components/searchbar/searchbar.ts
index bb738144f56..7d3240a4ed2 100644
--- a/src/components/searchbar/searchbar.ts
+++ b/src/components/searchbar/searchbar.ts
@@ -68,7 +68,7 @@ export class Searchbar extends Ion {
    */
   @Input()
   set color(val: string) {
-    this._setColor('searchbar', val);
+    this._setColor( val);
   }
 
   /**
@@ -76,7 +76,7 @@ export class Searchbar extends Ion {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('searchbar', val);
+    this._setMode( val);
   }
 
   /**
@@ -175,9 +175,7 @@ export class Searchbar extends Ion {
     renderer: Renderer,
     @Optional() ngControl: NgControl
   ) {
-    super(config, elementRef, renderer);
-
-    this.mode = config.get('mode');
+    super(config, elementRef, renderer, 'searchbar');
 
     // If the user passed a ngControl we need to set the valueAccessor
     if (ngControl) {
diff --git a/src/components/segment/segment.ts b/src/components/segment/segment.ts
index ee46a1c146d..9c034dbb51e 100644
--- a/src/components/segment/segment.ts
+++ b/src/components/segment/segment.ts
@@ -191,7 +191,7 @@ export class Segment extends Ion {
    */
   @Input()
   set color(val: string) {
-    this._setColor('segment', val);
+    this._setColor(val);
   }
 
   /**
@@ -199,7 +199,7 @@ export class Segment extends Ion {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('segment', val);
+    this._setMode( val);
   }
 
   /**
@@ -219,9 +219,7 @@ export class Segment extends Ion {
     renderer: Renderer,
     @Optional() ngControl: NgControl
   ) {
-    super(config, elementRef, renderer);
-
-    this.mode = config.get('mode');
+    super(config, elementRef, renderer, 'segment');
 
     if (ngControl) {
       ngControl.valueAccessor = this;
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 9b0587076d2..8f78919fb87 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -195,7 +195,7 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
    */
   @Input()
   set mode(val: string) {
-    this._setMode('select', val);
+    this._setMode(val);
   }
 
   /**
@@ -217,9 +217,7 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
     @Optional() public _item: Item,
     @Optional() private _nav: NavController
   ) {
-    super(config, elementRef, renderer);
-
-    this.mode = config.get('mode');
+    super(config, elementRef, renderer, 'select');
 
     _form.register(this);
 
diff --git a/src/components/slides/slides.ts b/src/components/slides/slides.ts
index 978de4c69d4..fa1a334a5f3 100644
--- a/src/components/slides/slides.ts
+++ b/src/components/slides/slides.ts
@@ -324,7 +324,7 @@ export class Slides extends Ion {
 
 
   constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
-    super(config, elementRef, renderer);
+    super(config, elementRef, renderer, 'slides');
     this.rapidUpdate = debounce(() => {
       this.update();
     }, 10);
diff --git a/src/components/spinner/spinner.ts b/src/components/spinner/spinner.ts
index 9a52900c3f0..cfa373e8552 100644
--- a/src/components/spinner/spinner.ts
+++ b/src/components/spinner/spinner.ts
@@ -127,7 +127,7 @@ export class Spinner extends Ion {
     return this._color;
   }
   set color(value: string) {
-    this._setColor('spinner', value);
+    this._setColor(value);
   }
 
   /**
@@ -135,7 +135,7 @@ export class Spinner extends Ion {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('spinner', val);
+    this._setMode(val);
   }
 
   /**
@@ -170,9 +170,7 @@ export class Spinner extends Ion {
   @Input() paused: boolean = false;
 
   constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
-    super(config, elementRef, renderer);
-
-    this.mode = config.get('mode');
+    super(config, elementRef, renderer, 'spinner');
   }
 
   /**
@@ -199,12 +197,12 @@ export class Spinner extends Ion {
 
         if (spinner.lines) {
           for (var i = 0, l = spinner.lines; i < l; i++) {
-            this._l.push( this._loadEle(spinner, i, l) );
+            this._l.push(this._loadEle(spinner, i, l));
           }
 
         } else if (spinner.circles) {
           for (var i = 0, l = spinner.circles; i < l; i++) {
-            this._c.push( this._loadEle(spinner, i, l) );
+            this._c.push(this._loadEle(spinner, i, l));
           }
         }
 
@@ -227,7 +225,7 @@ const SPINNERS: any = {
   ios: {
     dur: 1000,
     lines: 12,
-    fn: function(dur: number, index: number, total: number) {
+    fn: function (dur: number, index: number, total: number) {
       return {
         y1: 17,
         y2: 29,
@@ -242,7 +240,7 @@ const SPINNERS: any = {
   'ios-small': {
     dur: 1000,
     lines: 12,
-    fn: function(dur: number, index: number, total: number) {
+    fn: function (dur: number, index: number, total: number) {
       return {
         y1: 12,
         y2: 20,
@@ -257,7 +255,7 @@ const SPINNERS: any = {
   bubbles: {
     dur: 1000,
     circles: 9,
-    fn: function(dur: number, index: number, total: number) {
+    fn: function (dur: number, index: number, total: number) {
       return {
         r: 5,
         style: {
@@ -272,7 +270,7 @@ const SPINNERS: any = {
   circles: {
     dur: 1000,
     circles: 8,
-    fn: function(dur: number, index: number, total: number) {
+    fn: function (dur: number, index: number, total: number) {
       return {
         r: 5,
         style: {
@@ -287,7 +285,7 @@ const SPINNERS: any = {
   crescent: {
     dur: 750,
     circles: 1,
-    fn: function(dur: number) {
+    fn: function (dur: number) {
       return {
         r: 26,
         style: {}
@@ -298,7 +296,7 @@ const SPINNERS: any = {
   dots: {
     dur: 750,
     circles: 3,
-    fn: function(dur: number, index: number, total: number) {
+    fn: function (dur: number, index: number, total: number) {
       return {
         r: 6,
         style: {
diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts
index 4f0022f4b63..f0d8724b31c 100644
--- a/src/components/tabs/tabs.ts
+++ b/src/components/tabs/tabs.ts
@@ -184,7 +184,7 @@ export class Tabs extends Ion implements AfterViewInit {
    */
   @Input()
   set color(value: string) {
-    this._setColor('tabs', value);
+    this._setColor( value);
   }
 
   /**
@@ -192,7 +192,7 @@ export class Tabs extends Ion implements AfterViewInit {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('tabs', val);
+    this._setMode( val);
   }
 
   /**
@@ -250,9 +250,8 @@ export class Tabs extends Ion implements AfterViewInit {
     renderer: Renderer,
     private _linker: DeepLinker
   ) {
-    super(config, elementRef, renderer);
+    super(config, elementRef, renderer, 'tabs');
 
-    this.mode = config.get('mode');
     this.parent = <NavControllerBase>parent;
     this.id = 't' + (++tabIds);
     this._sbPadding = config.getBoolean('statusbarPadding');
diff --git a/src/components/toggle/toggle.ts b/src/components/toggle/toggle.ts
index 4de2131113d..a3f98d5da95 100644
--- a/src/components/toggle/toggle.ts
+++ b/src/components/toggle/toggle.ts
@@ -104,7 +104,7 @@ export class Toggle extends Ion implements AfterContentInit, ControlValueAccesso
    */
   @Input()
   set color(val: string) {
-    this._setColor('toggle', val);
+    this._setColor(val);
   }
 
   /**
@@ -112,7 +112,7 @@ export class Toggle extends Ion implements AfterContentInit, ControlValueAccesso
    */
   @Input()
   set mode(val: string) {
-    this._setMode('toggle', val);
+    this._setMode(val);
   }
 
   /**
@@ -128,9 +128,7 @@ export class Toggle extends Ion implements AfterContentInit, ControlValueAccesso
     public _haptic: Haptic,
     @Optional() public _item: Item
   ) {
-    super(config, elementRef, renderer);
-
-    this.mode = config.get('mode');
+    super(config, elementRef, renderer, 'toggle');
     _form.register(this);
 
     if (_item) {
diff --git a/src/components/toolbar/toolbar-item.ts b/src/components/toolbar/toolbar-item.ts
index bd9d8ddea14..dbeee734625 100644
--- a/src/components/toolbar/toolbar-item.ts
+++ b/src/components/toolbar/toolbar-item.ts
@@ -23,9 +23,7 @@ export class ToolbarItem extends Ion {
     @Optional() toolbar: Toolbar,
     @Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar
   ) {
-    super(config, elementRef, renderer);
-
-    this._setMode('bar-buttons', config.get('mode'));
+    super(config, elementRef, renderer, 'bar-buttons');
     this.inToolbar = !!(toolbar || navbar);
   }
 
diff --git a/src/components/toolbar/toolbar-title.ts b/src/components/toolbar/toolbar-title.ts
index e52286fd3f9..65fbda3b95e 100644
--- a/src/components/toolbar/toolbar-title.ts
+++ b/src/components/toolbar/toolbar-title.ts
@@ -58,8 +58,7 @@ export class ToolbarTitle extends Ion {
     @Optional() toolbar: Toolbar,
     @Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar
   ) {
-    super(config, elementRef, renderer);
-    this._setMode('title', this._mode = config.get('mode'));
+    super(config, elementRef, renderer, 'title');
 
     toolbar && toolbar._setTitle(this);
     navbar && navbar._setTitle(this);
diff --git a/src/components/toolbar/toolbar.ts b/src/components/toolbar/toolbar.ts
index a418af4fd58..599c06680f2 100644
--- a/src/components/toolbar/toolbar.ts
+++ b/src/components/toolbar/toolbar.ts
@@ -39,8 +39,7 @@ import { ViewController } from '../../navigation/view-controller';
 export class Header extends Ion {
 
   constructor(config: Config, elementRef: ElementRef, renderer: Renderer, @Optional() viewCtrl: ViewController) {
-    super(config, elementRef, renderer);
-    this._setMode('header', config.get('mode'));
+    super(config, elementRef, renderer, 'header');
     viewCtrl && viewCtrl._setHeader(this);
   }
 
@@ -75,8 +74,7 @@ export class Header extends Ion {
 export class Footer extends Ion {
 
   constructor(config: Config, elementRef: ElementRef, renderer: Renderer, @Optional() viewCtrl: ViewController) {
-    super(config, elementRef, renderer);
-    this._setMode('footer', config.get('mode'));
+    super(config, elementRef, renderer, 'footer');
     viewCtrl && viewCtrl._setFooter(this);
   }
 
@@ -90,7 +88,7 @@ export class ToolbarBase extends Ion {
   private _title: ToolbarTitle;
 
   constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
-    super(config, elementRef, renderer);
+    super(config, elementRef, renderer, 'toolbar');
   }
 
   /**
@@ -269,7 +267,7 @@ export class Toolbar extends ToolbarBase {
    */
   @Input()
   set color(val: string) {
-    this._setColor('toolbar', val);
+    this._setColor(val);
   }
 
   /**
@@ -277,7 +275,7 @@ export class Toolbar extends ToolbarBase {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('toolbar', val);
+    this._setMode( val);
   }
 
   constructor(
@@ -287,8 +285,6 @@ export class Toolbar extends ToolbarBase {
     renderer: Renderer
   ) {
     super(config, elementRef, renderer);
-
-    this.mode = config.get('mode');
     this._sbPadding = config.getBoolean('statusbarPadding');
   }
 
diff --git a/src/components/typography/typography.ts b/src/components/typography/typography.ts
index bace39dc084..8c7bcf66e30 100644
--- a/src/components/typography/typography.ts
+++ b/src/components/typography/typography.ts
@@ -56,7 +56,7 @@ export class Typography extends Ion {
    */
   @Input()
   set color(val: string) {
-    this._setColor('text', val);
+    this._setColor(val);
   }
 
   /**
@@ -64,13 +64,11 @@ export class Typography extends Ion {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('text', val);
+    this._setMode(val);
   }
 
   constructor(config: Config, elementRef: ElementRef, renderer: Renderer, @Attribute('ion-text') ionText: string) {
-    super(config, elementRef, renderer);
-
-    this.mode = config.get('mode');
+    super(config, elementRef, renderer, 'text');
 
     // TODO: Deprecated: all selectors besides `[ion-text]` rc.3
     // Remove all other selectors and the `ionText` attribute