fix: (Core) set is-disabled class to disabled button (#4499)

libs/core/src/lib/button/base-button.ts

@@ -1,4 +1,5 @@
 import { Directive, Input } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
 export type GlyphPosition = 'before' | 'after';
 
@@ -61,4 +62,26 @@ export class BaseButton {
      */
     @Input()
     fdMenu = false;
+
+    /**
+     * Native disabled attribute of button element
+     */
+    @Input()
+    get disabled(): boolean { return this._disabled; }
+
+    set disabled(value: boolean) { this._disabled = coerceBooleanProperty(value); }
+
+    /**
+     * Native aria-disabled attribute of button element
+     */
+    @Input('aria-disabled')
+    get ariaDisabled(): boolean { return this._ariaDisabled; }
+
+    set ariaDisabled(value: boolean) { this._ariaDisabled = coerceBooleanProperty(value); }
+
+    /** @hidden */
+    _disabled: boolean;
+
+    /** @hidden */
+    _ariaDisabled: boolean;
 }

libs/core/src/lib/button/button.component.spec.ts

@@ -1,8 +1,9 @@
-import { ButtonComponent } from './button.component';
 import { Component, DebugElement } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
+import { ButtonComponent } from './button.component';
+
 @Component({
     selector: 'fd-test-component',
     template: '<button fd-button label="Button"></button>'
@@ -33,7 +34,7 @@ describe('ButtonComponent', () => {
         expect(component).toBeTruthy();
     });
 
-   it('should add appropriate classes', () => {
+    it('should add appropriate classes', () => {
         componentInstance.compact = true;
         componentInstance.fdType = 'standard';
         componentInstance.fdMenu = true;
@@ -45,3 +46,56 @@ describe('ButtonComponent', () => {
         expect(cssClass).toContain('compact');
     });
 });
+
+@Component({
+    selector: 'fd-disabled-test-component',
+    template: '<button fd-button label="Button" disabled></button>'
+})
+export class DisabledTestComponent {}
+
+@Component({
+    selector: 'fd-aria-disabled-test-component',
+    template: '<button fd-button label="Button" aria-disabled="true"></button>'
+})
+export class AriaDisabledTestComponent {}
+
+describe('ButtonComponent – Disabled', () => {
+    let disabledFixture: ComponentFixture<DisabledTestComponent>,
+        ariaDisabledFixture: ComponentFixture<AriaDisabledTestComponent>,
+        debugElement: DebugElement,
+        element: HTMLElement;
+
+    let component, componentInstance: ButtonComponent;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [ButtonComponent, DisabledTestComponent, AriaDisabledTestComponent]
+        });
+    }));
+
+    it('should add is-disabled class to [disabled] button', () => {
+        disabledFixture = TestBed.createComponent(DisabledTestComponent);
+        debugElement = disabledFixture.debugElement;
+        element = debugElement.nativeElement;
+        disabledFixture.detectChanges();
+        component = debugElement.query(By.directive(ButtonComponent));
+        componentInstance = component.injector.get(ButtonComponent);
+        componentInstance.buildComponentCssClass();
+
+        const cssClass = componentInstance.buildComponentCssClass().join(' ');
+        expect(cssClass).toContain('is-disabled');
+    });
+
+    it('should add is-disabled class to [aria-disabled="true"] button', () => {
+        ariaDisabledFixture = TestBed.createComponent(AriaDisabledTestComponent);
+        debugElement = ariaDisabledFixture.debugElement;
+        element = debugElement.nativeElement;
+        ariaDisabledFixture.detectChanges();
+        component = debugElement.query(By.directive(ButtonComponent));
+        componentInstance = component.injector.get(ButtonComponent);
+        componentInstance.buildComponentCssClass();
+
+        const cssClass = componentInstance.buildComponentCssClass().join(' ');
+        expect(cssClass).toContain('is-disabled');
+    });
+});

libs/core/src/lib/button/button.component.ts

@@ -1,7 +1,9 @@
 import {
-    ChangeDetectionStrategy, ChangeDetectorRef,
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
     Component,
-    ElementRef, Input,
+    ElementRef,
+    Input,
     OnChanges,
     OnInit,
     ViewEncapsulation
@@ -29,12 +31,12 @@ import { BaseButton } from './base-button';
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: {
-        '[attr.type]': 'type'
+        '[attr.type]': 'type',
+        '[attr.disabled]': '_disabled || null'
     }
 })
 export class ButtonComponent extends BaseButton implements OnChanges, CssClassBuilder, OnInit {
-
-    /** The property allows user to pass additional css classes*/
+    /** The property allows user to pass additional css classes. */
     @Input()
     class = '';
 
@@ -68,7 +70,8 @@ export class ButtonComponent extends BaseButton implements OnChanges, CssClassBu
             'fd-button',
             this.fdType ? `fd-button--${this.fdType}` : '',
             this.compact ? 'fd-button--compact' : '',
-            this.fdMenu ? `fd-button--menu` : '',
+            this.fdMenu ? 'fd-button--menu' : '',
+            this._disabled || this._ariaDisabled ? 'is-disabled' : '',
             this.class
         ];
     }

libs/platform/src/lib/components/menu-button/menu-button.component.spec.ts

@@ -89,7 +89,7 @@ describe('Menu Button Disabled test and Type, size test', () => {
 
     it('button should be disabled', () => {
         const menubuttonElement = fixture.debugElement.query(By.css('button'));
-        expect(menubuttonElement.nativeElement.getAttribute('disabled')).toEqual('');
+        expect(menubuttonElement.nativeElement.hasAttribute('disabled')).toEqual(true);
     });
 
     it('button should be standard and contain Menu', () => {