Merge pull request #5578 from IgniteUI/rkolev/fix-5404-8.1.x

Fix IgxButton has incorrect CSS class when setting new type - 8.1.x

Author: mpavlinov

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

@@ -17,6 +17,16 @@ const FAB_BUTTON_COSY = 'igx-button--fab-cosy';
 
 describe('IgxButton', () => {
     configureTestSuite();
+
+    const baseClass = 'igx-button';
+    const classes = {
+        flat: `${baseClass}--flat`,
+        raised: `${baseClass}--raised`,
+        outlined: `${baseClass}--outlined`,
+        fab: `${baseClass}--fab`,
+        icon: `${baseClass}--icon`
+    };
+
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             declarations: [
@@ -108,6 +118,40 @@ describe('IgxButton', () => {
         verifyDisplayDensity(fabButton, fabButtonDOM, 'fab', DisplayDensity.cosy);
         verifyDisplayDensity(iconButton, iconButtonDOM, 'icon', DisplayDensity.cosy);
     });
+
+    it('Should set the correct CSS class on the element using the "type" input', () => {
+        const fixture = TestBed.createComponent(InitButtonComponent);
+        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();
+        expect(theButtonNativeEl.classList.length).toEqual(1);
+        expect(theButtonNativeEl.classList).toContain(classes.raised);
+
+        theButton.type = 'outlined';
+        fixture.detectChanges();
+        expect(theButtonNativeEl.classList.length).toEqual(1);
+        expect(theButtonNativeEl.classList).toContain(classes.outlined);
+
+        theButton.type = 'fab';
+        fixture.detectChanges();
+        expect(theButtonNativeEl.classList.length).toEqual(1);
+        expect(theButtonNativeEl.classList).toContain(classes.fab);
+
+        theButton.type = 'icon';
+        fixture.detectChanges();
+        expect(theButtonNativeEl.classList.length).toEqual(1);
+        expect(theButtonNativeEl.classList).toContain(classes.icon);
+
+        theButton.type = 'flat';
+        fixture.detectChanges();
+        expect(theButtonNativeEl.classList.length).toEqual(1);
+        expect(theButtonNativeEl.classList).toContain(classes.flat);
+    });
 });
 
 @Component({
@@ -117,6 +161,8 @@ describe('IgxButton', () => {
     </span>`
 })
 class InitButtonComponent {
+    @ViewChild(IgxButtonDirective, { read: IgxButtonDirective, static: true })
+    button: IgxButtonDirective;
 }
 
 @Component({

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 = 'flat';
+    private _type: string;
+
     /**
      *@hidden
      */
-    private _cssClass = 'igx-button';
+    private _defaultType = 'flat';
+
+    /**
+     *@hidden
+     */
+    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,18 +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) {
-        this._type = value || this._type;
-        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
@@ -89,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
@@ -100,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
@@ -111,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
@@ -121,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`);
         }
     }