fix(button): applying different fix #5404

Author: rmkrmk

projects/igniteui-angular/src/lib/directives/button/button.directive.spec.ts

@@ -15,7 +15,7 @@ const FLAT_RAISED_OUTLINED_BUTTON_COSY = 'igx-button--cosy';
 const FAB_BUTTON_COMPACT = 'igx-button--fab-compact';
 const FAB_BUTTON_COSY = 'igx-button--fab-cosy';
 
-describe('IgxButton', () => {
+fdescribe('IgxButton', () => {
     configureTestSuite();
 
     const baseClass = 'igx-button';
@@ -124,6 +124,8 @@ describe('IgxButton', () => {
         fixture.detectChanges();
         const theButton = fixture.componentInstance.button;
         const theButtonNativeEl = theButton.nativeElement;
+        expect(theButtonNativeEl.classList.length).toEqual(1);
+        expect(theButtonNativeEl.classList).toContain(classes.flat);
 
         theButton.type = 'raised';
         fixture.detectChanges();

projects/igniteui-angular/src/lib/directives/button/button.directive.ts

@@ -17,31 +17,41 @@ import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions, Displa
     selector: '[igxButton]'
 })
 export class IgxButtonDirective extends DisplayDensityBase {
+
+    /**
+     *@hidden
+     */
+    private _type: string;
+
     /**
      *@hidden
      */
-    private _type = 'flat';
+    private _defaultType = 'flat';
+
     /**
      *@hidden
      */
-    private _cssClass = 'igx-button';
+    private _cssClassPrefix = 'igx-button';
+
     /**
      *@hidden
      */
     private _color: string;
+
     /**
      *@hidden
      */
     private _label: string;
+
     /**
      *@hidden
      */
     private _backgroundColor: string;
 
     constructor(public element: ElementRef, private _renderer: Renderer2,
         @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
-            super(_displayDensityOptions);
-        }
+        super(_displayDensityOptions);
+    }
 
     /**
      * Returns the underlying DOM element
@@ -66,21 +76,26 @@ export class IgxButtonDirective extends DisplayDensityBase {
      * ```
      * @memberof IgxButtonDirective
      */
-    @HostBinding('attr.role') public role = 'button';
+    @HostBinding('attr.role')
+    public role = 'button';
+
     /**
      * Sets the type of the button.
      * ```html
      * <button  igxButton= "icon"></button>
      * ```
      * @memberof IgxButtonDirective
      */
-    @Input('igxButton') set type(value: string) {
-        if (value && this._type !== value) {
-            this._renderer.removeClass(this.nativeElement, `${this._cssClass}--${this._type}`);
-            this._type = value;
-            this._renderer.addClass(this.nativeElement, `${this._cssClass}--${this._type}`);
+    @Input('igxButton')
+    set type(value: string) {
+        const newValue = value ? value : this._defaultType;
+        if (this._type !== newValue) {
+            this._renderer.removeClass(this.nativeElement, `${this._cssClassPrefix}--${this._type}`);
+            this._type = newValue;
+            this._renderer.addClass(this.nativeElement, `${this._cssClassPrefix}--${this._type}`);
         }
     }
+
     /**
      * Sets the button text color.
      * ```html
@@ -92,6 +107,7 @@ export class IgxButtonDirective extends DisplayDensityBase {
         this._color = value || this.nativeElement.style.color;
         this._renderer.setStyle(this.nativeElement, 'color', this._color);
     }
+
     /**
      * Sets the background color of the button.
      * ```html
@@ -103,6 +119,7 @@ export class IgxButtonDirective extends DisplayDensityBase {
         this._backgroundColor = value || this._backgroundColor;
         this._renderer.setStyle(this.nativeElement, 'background', this._backgroundColor);
     }
+
     /**
      * Sets the `aria-label` attribute.
      * ```html
@@ -114,6 +131,7 @@ export class IgxButtonDirective extends DisplayDensityBase {
         this._label = value || this._label;
         this._renderer.setAttribute(this.nativeElement, `aria-label`, this._label);
     }
+
     /**
      * Enables/disables the button.
      *  ```html
@@ -124,9 +142,9 @@ export class IgxButtonDirective extends DisplayDensityBase {
     @Input() set disabled(val) {
         val = !!val;
         if (val) {
-            this._renderer.addClass(this.nativeElement, `${this._cssClass}--disabled`);
+            this._renderer.addClass(this.nativeElement, `${this._cssClassPrefix}--disabled`);
         } else {
-            this._renderer.removeClass(this.nativeElement, `${this._cssClass}--disabled`);
+            this._renderer.removeClass(this.nativeElement, `${this._cssClassPrefix}--disabled`);
         }
     }