fix(components): add a mode agnostic css class (#9133)

Fixes #8545

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._setMode('md');
-      ion._setColor('icon', 'primary');
+      ion._setColor('primary');
-      expect(className(ion)).toEqual('icon-md icon-md-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._setMode('md');
-      ion._setColor('icon', 'primary');
+      ion._setColor('primary');
-      ion._setColor('icon', null);
+      ion._setColor(null);
-      expect(className(ion)).toEqual('icon-md');
+      expect(className(ion)).toEqual('icon icon-md');
     });
 
     it('should update color when it has already been set', () => {
-      ion._setMode('icon', 'md');
+      ion._setMode('md');
-      ion._setColor('icon', 'primary');
+      ion._setColor('primary');
-      ion._setColor('icon', 'secondary');
+      ion._setColor('secondary');
-      expect(className(ion)).toEqual('icon-md icon-md-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._setMode('ios');
-      ion._setColor('icon', 'primary');
+      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) {

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);
+    super(config, elementRef, renderer, 'badge');
-
-    this.mode = config.get('mode');
   }
 
 }

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);
+    super(config, elementRef, renderer, 'card');
-
-    this.mode = config.get('mode');
   }
 
 }
@@ -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);
+    super(config, elementRef, renderer, 'card-content');
-
-    this.mode = config.get('mode');
   }
 
 }
@@ -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);
+    super(config, elementRef, renderer, 'card-header');
-
-    this.mode = config.get('mode');
   }
 
 }
@@ -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);
+    super(config, elementRef, renderer, 'card-title');
-
-    this.mode = config.get('mode');
   }
 
 }

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);
+    super(config, elementRef, renderer, 'checkbox');
-
-    this.mode = config.get('mode');
 
     _form.register(this);
 

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);
+    super(config, elementRef, renderer, 'chip');
-
-    this.mode = config.get('mode');
   }
 
 }

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);
+    super(config, elementRef, renderer, 'content');
-
-    this._setMode('content', config.get('mode'));
 
     this._sbPadding = config.getBoolean('statusbarPadding', false);
 

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) {

src/components/fab/fab.ts

@@ -70,7 +70,7 @@ export class FabButton extends Ion  {
    */
   @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);
+    super(config, elementRef, renderer, 'fab');
-    this.setElementClass('fab', true); // set role
-    this.mode = config.get('mode');
   }
 
 
@@ -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);

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);
+    super(config, elementRef, renderer, 'icon');
-
-    this.mode = config.get('mode');
     this._iconMode = config.get('iconMode');
   }
 

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);

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);
   }
 
   /**

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;

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) {
+  _updateColor(newColor: string, componentName?: string) {
-    colorClass = colorClass || 'item'; // item-radio
+    componentName = componentName || 'item'; // item-radio
-    this._setColor(colorClass, newColor);
+    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);
+    super(config, elementRef, renderer, 'item-divider');
-
-    this.mode = config.get('mode');
   }
 
 }

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);
+    super(config, elementRef, renderer, 'label');
-
-    this.mode = config.get('mode');
     this.type = (isFloating === '' ? 'floating' : (isStacked === '' ? 'stacked' : (isFixed === '' ? 'fixed' : (isInset === '' ? 'inset' : null))));
   }
 

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);
+    super(config, elementRef, renderer, 'list-header');
-
-    this.mode = config.get('mode');
   }
 
   get id(): string {

src/components/list/list.ts

@@ -55,9 +55,7 @@ export class List extends Ion {
     renderer: Renderer,
     public _gestureCtrl: GestureController
   ) {
-    super(config, elementRef, renderer);
+    super(config, elementRef, renderer, 'list');
-
-    this.mode = config.get('mode');
   }
 
   /**
@@ -65,7 +63,7 @@ export class List extends Ion {
    */
   @Input()
   set mode(val: string) {
-    this._setMode('list', val);
+    this._setMode(val);
   }
 
   /**

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');

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);
+    super(config, elementRef, renderer, 'radio');
-
-    this.mode = config.get('mode');
     _form.register(this);
 
     if (_group) {

src/components/range/range.ts

@@ -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);
+    super(config, elementRef, renderer, 'range');
-
-    this.mode = config.get('mode');
     _form.register(this);
 
     if (_item) {

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);
+    super(config, elementRef, renderer, 'searchbar');
-
-    this.mode = config.get('mode');
 
     // If the user passed a ngControl we need to set the valueAccessor
     if (ngControl) {

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);
+    super(config, elementRef, renderer, 'segment');
-
-    this.mode = config.get('mode');
 
     if (ngControl) {
       ngControl.valueAccessor = this;

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);
+    super(config, elementRef, renderer, 'select');
-
-    this.mode = config.get('mode');
 
     _form.register(this);
 

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);

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);
+    super(config, elementRef, renderer, 'spinner');
-
-    this.mode = config.get('mode');
   }
 
   /**

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');

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);
+    super(config, elementRef, renderer, 'toggle');
-
-    this.mode = config.get('mode');
     _form.register(this);
 
     if (_item) {

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);
+    super(config, elementRef, renderer, 'bar-buttons');
-
-    this._setMode('bar-buttons', config.get('mode'));
     this.inToolbar = !!(toolbar || navbar);
   }
 

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);
+    super(config, elementRef, renderer, 'title');
-    this._setMode('title', this._mode = config.get('mode'));
 
     toolbar && toolbar._setTitle(this);
     navbar && navbar._setTitle(this);

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);
+    super(config, elementRef, renderer, 'header');
-    this._setMode('header', config.get('mode'));
     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);
+    super(config, elementRef, renderer, 'footer');
-    this._setMode('footer', config.get('mode'));
     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');
   }
 

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);
+    super(config, elementRef, renderer, 'text');
-
-    this.mode = config.get('mode');
 
     // TODO: Deprecated: all selectors besides `[ion-text]` rc.3
     // Remove all other selectors and the `ionText` attribute