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

Fixes #8545
ionic-team · Nov 14, 2016 · 025c5cc · 025c5cc
1 parent d3ef28d
commit 025c5cc
Show file tree

Hide file tree

Showing 30 changed files with 148 additions and 186 deletions.
diff --git a/src/components/app/test/ion.spec.ts b/src/components/app/test/ion.spec.ts
@@ -7,42 +7,42 @@ 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');
     });
 
   });
 
   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
@@ -21,21 +21,19 @@ export class Badge extends Ion {
    */
   @Input()
   set color(val: string) {
-    this._setColor('badge', val);
+    this._setColor(val);
   }
 
   /**
    * @input {string} The mode to apply to this component.
    */
   @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
@@ -17,21 +17,19 @@ export class Card extends Ion {
    */
   @Input()
   set color(val: string) {
-    this._setColor('card', val);
+    this._setColor(val);
   }
 
   /**
    * @input {string} The mode to apply to this component.
    */
   @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,21 +48,19 @@ export class CardContent extends Ion {
    */
   @Input()
   set color(val: string) {
-    this._setColor('card-content', val);
+    this._setColor(val);
   }
 
   /**
    * @input {string} The mode to apply to this component.
    */
   @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,21 +79,19 @@ export class CardHeader extends Ion {
    */
   @Input()
   set color(val: string) {
-    this._setColor('card-header', val);
+    this._setColor(val);
   }
 
   /**
    * @input {string} The mode to apply to this component.
    */
   @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,21 +109,19 @@ export class CardTitle extends Ion {
    */
   @Input()
   set color(val: string) {
-    this._setColor('card-title', val);
+    this._setColor(val);
   }
 
   /**
    * @input {string} The mode to apply to this component.
    */
   @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
@@ -91,15 +91,15 @@ export class Checkbox extends Ion implements AfterContentInit, ControlValueAcces
    */
   @Input()
   set color(val: string) {
-    this._setColor('checkbox', val);
+    this._setColor(val);
   }
 
   /**
    * @input {string} The mode to apply to this component.
    */
   @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
@@ -100,21 +100,19 @@ export class Chip extends Ion {
    */
   @Input()
   set color(val: string) {
-    this._setColor('chip', val);
+    this._setColor(val);
   }
 
   /**
    * @input {string} The mode to apply to this component.
    */
   @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
@@ -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
@@ -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
@@ -63,32 +63,30 @@ 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);
   }
 
   /**
    * @input {string} The mode to apply to this component.
    */
   @Input()
   set mode(val: string) {
-    this._setMode('fab', val);
+    this._setMode(val);
   }
 
   constructor(
     config: Config,
     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
@@ -64,25 +64,23 @@ export class Icon extends Ion {
     return this._color;
   }
   set color(value: string) {
-    this._setColor('icon', value);
+    this._setColor(value);
   }
 
   /**
    * @input {string} The mode to apply to this component.
    */
   @Input()
   set mode(val: string) {
-    this._setMode('icon', val);
+    this._setMode(val);
   }
 
   constructor(
     config: Config,
     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
@@ -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);