feat(option): support for disableRipple binding (#5915)

Author: devversion

src/lib/core/option/option.html

@@ -6,5 +6,7 @@
 </span>
 
 <ng-content></ng-content>
-<div class="mat-option-ripple" *ngIf="!disabled" md-ripple [mdRippleTrigger]="_getHostElement()">
+<div class="mat-option-ripple" md-ripple
+     [mdRippleTrigger]="_getHostElement()"
+     [mdRippleDisabled]="disabled || disableRipple">
 </div>

src/lib/core/option/option.spec.ts

@@ -0,0 +1,81 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {Component, DebugElement} from '@angular/core';
+import {By} from '@angular/platform-browser';
+import {dispatchFakeEvent} from '@angular/cdk/testing';
+import {MdOption, MdOptionModule} from './index';
+
+describe('MdOption component', () => {
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MdOptionModule],
+      declarations: [OptionWithDisableRipple]
+    }).compileComponents();
+  }));
+
+  describe('ripples', () => {
+    let fixture: ComponentFixture<OptionWithDisableRipple>;
+    let optionDebugElement: DebugElement;
+    let optionNativeElement: HTMLElement;
+    let optionInstance: MdOption;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(OptionWithDisableRipple);
+      fixture.detectChanges();
+
+      optionDebugElement = fixture.debugElement.query(By.directive(MdOption));
+      optionNativeElement = optionDebugElement.nativeElement;
+      optionInstance = optionDebugElement.componentInstance;
+    });
+
+    it('should show ripples by default', () => {
+      expect(optionInstance.disableRipple).toBe(false, 'Expected ripples to be enabled by default');
+      expect(optionNativeElement.querySelectorAll('.mat-ripple-element').length)
+        .toBe(0, 'Expected no ripples to show up initially');
+
+      dispatchFakeEvent(optionNativeElement, 'mousedown');
+      dispatchFakeEvent(optionNativeElement, 'mouseup');
+
+      expect(optionNativeElement.querySelectorAll('.mat-ripple-element').length)
+        .toBe(1, 'Expected one ripple to show up after a fake click.');
+    });
+
+    it('should not show ripples if the option is disabled', () => {
+      expect(optionNativeElement.querySelectorAll('.mat-ripple-element').length)
+        .toBe(0, 'Expected no ripples to show up initially');
+
+      fixture.componentInstance.disabled = true;
+      fixture.detectChanges();
+
+      dispatchFakeEvent(optionNativeElement, 'mousedown');
+      dispatchFakeEvent(optionNativeElement, 'mouseup');
+
+      expect(optionNativeElement.querySelectorAll('.mat-ripple-element').length)
+        .toBe(0, 'Expected no ripples to show up after click on a disabled option.');
+    });
+
+    it('should not show ripples if the ripples are disabled using disableRipple', () => {
+      expect(optionNativeElement.querySelectorAll('.mat-ripple-element').length)
+        .toBe(0, 'Expected no ripples to show up initially');
+
+      fixture.componentInstance.disableRipple = true;
+      fixture.detectChanges();
+
+      dispatchFakeEvent(optionNativeElement, 'mousedown');
+      dispatchFakeEvent(optionNativeElement, 'mouseup');
+
+      expect(optionNativeElement.querySelectorAll('.mat-ripple-element').length)
+        .toBe(0, 'Expected no ripples to show up after click when ripples are disabled.');
+    });
+
+  });
+
+});
+
+@Component({
+  template: `<md-option [disableRipple]="disableRipple" [disabled]="disabled"></md-option>`
+})
+export class OptionWithDisableRipple {
+  disableRipple: boolean;
+  disabled: boolean;
+}

src/lib/core/option/option.ts

@@ -22,6 +22,7 @@ import {ENTER, SPACE} from '../keyboard/keycodes';
 import {coerceBooleanProperty} from '@angular/cdk';
 import {MATERIAL_COMPATIBILITY_MODE} from '../../core/compatibility/compatibility';
 import {MdOptgroup} from './optgroup';
+import {CanDisableRipple, mixinDisableRipple} from '../common-behaviors/disable-ripple';
 
 /**
  * Option IDs need to be unique across components, so this counter exists outside of
@@ -34,13 +35,19 @@ export class MdOptionSelectionChange {
   constructor(public source: MdOption, public isUserInput = false) { }
 }
 
+// Boilerplate for applying mixins to MdOption.
+/** @docs-private */
+export class MdOptionBase {}
+export const _MdOptionMixinBase = mixinDisableRipple(MdOptionBase);
+
 
 /**
  * Single option inside of a `<md-select>` element.
  */
 @Component({
   moduleId: module.id,
   selector: 'md-option, mat-option',
+  inputs: ['disableRipple'],
   host: {
     'role': 'option',
     '[attr.tabindex]': '_getTabIndex()',
@@ -59,7 +66,7 @@ export class MdOptionSelectionChange {
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MdOption {
+export class MdOption extends _MdOptionMixinBase implements CanDisableRipple {
   private _selected: boolean = false;
   private _active: boolean = false;
   private _multiple: boolean = false;
@@ -99,7 +106,10 @@ export class MdOption {
     private _element: ElementRef,
     private _changeDetectorRef: ChangeDetectorRef,
     @Optional() public readonly group: MdOptgroup,
-    @Optional() @Inject(MATERIAL_COMPATIBILITY_MODE) public _isCompatibilityMode: boolean) {}
+    @Optional() @Inject(MATERIAL_COMPATIBILITY_MODE) public _isCompatibilityMode: boolean
+  ) {
+    super();
+  }
 
   /**
    * Whether or not the option is currently active and ready to be selected.