feat(checkbox): Add disableRipple (#1996)

closes #1995
trimox · Sep 9, 2019 · 1036a14 · 1036a14
1 parent a460a67
commit 1036a14
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 9 deletions.
diff --git a/demos/src/app/components/checkbox-demo/api.html b/demos/src/app/components/checkbox-demo/api.html
@@ -51,6 +51,10 @@ <h4 mdcSubtitle2>Properties</h4>
         <td>disabled: boolean</td>
         <td>Disables the component.</td>
       </tr>
+      <tr>
+        <td>disableRipple: boolean</td>
+        <td>Whether ripple ink is disabled.</td>
+      </tr>
       <tr>
         <td>indeterminateToChecked: boolean</td>
         <td>Whether the checkbox should go to checked state or unchecked when toggled from indeterminate state.</td>

diff --git a/demos/src/app/components/checkbox-demo/examples.html b/demos/src/app/components/checkbox-demo/examples.html
@@ -46,6 +46,7 @@
     <button mdc-button (click)="formField.alignEnd = !formField.alignEnd">RTL: {{formField.alignEnd ? 'On'
       : 'Off'}}</button>
     <button mdc-button (click)="cb.disabled = !cb.disabled">Disabled: {{cb.disabled ? 'On' : 'Off'}}</button>
+    <button mdc-button (click)="cb.disableRipple = !cb.disableRipple">Ripple: {{!cb.disableRipple ? 'On' : 'Off'}}</button>
   </div>
   <mdc-form-field #formField>
     <mdc-checkbox #cb indeterminateToChecked (change)="onChange($event)"></mdc-checkbox>

diff --git a/packages/checkbox/checkbox.ts b/packages/checkbox/checkbox.ts
@@ -178,6 +178,16 @@ export class MdcCheckbox extends MDCComponent<MDCCheckboxFoundation> implements
   }
   private _indeterminateToChecked: boolean = true;
 
+  /** Whether the ripple ink is disabled. */
+  @Input()
+  get disableRipple(): boolean {
+    return this._disableRipple;
+  }
+  set disableRipple(value: boolean) {
+    this._disableRipple = coerceBooleanProperty(value);
+  }
+  private _disableRipple: boolean = false;
+
   @Input() tabIndex: number = 0;
   @Input('aria-label') ariaLabel: string = '';
   @Input('aria-labelledby') ariaLabelledby: string | null = null;
@@ -322,7 +332,8 @@ export class MdcCheckbox extends MDCComponent<MDCCheckboxFoundation> implements
     const adapter: MDCRippleAdapter = {
       ...MdcRipple.createAdapter(this),
       isSurfaceActive: () => matches(this._inputElement.nativeElement, ':active'),
-      isUnbounded: () => true
+      isUnbounded: () => true,
+      isSurfaceDisabled: () => this._disableRipple
     };
     return new MdcRipple(this.elementRef, new MDCRippleFoundation(adapter));
   }

diff --git a/test/checkbox/checkbox.test.ts b/test/checkbox/checkbox.test.ts
@@ -1,11 +1,11 @@
-import { Component, DebugElement } from '@angular/core';
-import { ComponentFixture, fakeAsync, flushMicrotasks, TestBed } from '@angular/core/testing';
-import { FormsModule, NgModel, ReactiveFormsModule } from '@angular/forms';
-import { By } from '@angular/platform-browser';
+import {Component, DebugElement} from '@angular/core';
+import {ComponentFixture, fakeAsync, flushMicrotasks, TestBed} from '@angular/core/testing';
+import {FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
+import {By} from '@angular/platform-browser';
 
-import { dispatchFakeEvent, dispatchMouseEvent } from '../testing/dispatch-events';
+import {dispatchFakeEvent, dispatchMouseEvent} from '../testing/dispatch-events';
 
-import { MdcCheckbox, MdcCheckboxModule } from '@angular-mdc/web';
+import {MdcCheckbox, MdcCheckboxModule} from '@angular-mdc/web';
 
 describe('MdcCheckbox', () => {
   let fixture: ComponentFixture<any>;
@@ -194,6 +194,16 @@ describe('MdcCheckbox', () => {
       expect(checkboxInstance.indeterminate).toBe(true);
     });
 
+    it('expect disableRipple to be false', () => {
+      expect(testComponent.disableRipple).toBe(false);
+    });
+
+    it('expect disableRipple to be true', () => {
+      testComponent.disableRipple = true;
+      fixture.detectChanges();
+      expect(checkboxInstance.disableRipple).toBe(true);
+    });
+
     describe('with provided aria-label', () => {
       let checkboxDebugElement: DebugElement;
       let checkboxNativeElement: HTMLElement;
@@ -326,6 +336,7 @@ describe('MdcCheckbox', () => {
       [checked]="checkboxValue"
       [indeterminateToChecked]="indeterminateToChecked"
       [indeterminate]="indeterminate"
+      [disableRipple]="disableRipple"
       [disabled]="isDisabled">
     </mdc-checkbox>
   `,
@@ -336,19 +347,20 @@ class SingleCheckbox {
   indeterminate: boolean;
   checkboxValue: boolean = false;
   indeterminateToChecked: boolean = true;
+  disableRipple: boolean = false;
 }
 
 /** Simple test component with an aria-label set. */
 @Component({
   template: `<mdc-checkbox aria-labelledby="some-id"></mdc-checkbox>`
 })
-class CheckboxWithAriaLabelledby { }
+class CheckboxWithAriaLabelledby {}
 
 /** Simple test component with an aria-label set. */
 @Component({
   template: `<mdc-checkbox aria-label="Super effective"></mdc-checkbox>`
 })
-class CheckboxWithAriaLabel { }
+class CheckboxWithAriaLabel {}
 
 /** Simple test component with tabIndex */
 @Component({