feat(ripple): add way to globally disable ripples

* Currently ripples can be only disable component-wise. This isn't very elegant if users want to disable ripples for all components.
* This commit introduces a new `OpaqueToken`/ `InjectionToken` that can be used to globally disable all ripples.
* Makes the `tab-nav-bar` ripple directive more clean. Since Angular v2.3.0 (as we recently upgraded) the inherited metadata can be used.

For upcoming accessibility features (focus indicators) we don't want to allow developers to disable programmatic ripples.

Author: devversion

src/lib/core/ripple/index.ts

@@ -4,7 +4,7 @@ import {CompatibilityModule} from '../compatibility/compatibility';
 import {VIEWPORT_RULER_PROVIDER} from '../overlay/position/viewport-ruler';
 import {SCROLL_DISPATCHER_PROVIDER} from '../overlay/scroll/scroll-dispatcher';
 
-export {MdRipple} from './ripple';
+export {MdRipple, MD_RIPPLES_DISABLE} from './ripple';
 export {RippleRef} from './ripple-ref';
 export {RippleConfig} from './ripple-renderer';
 

src/lib/core/ripple/ripple.spec.ts

@@ -1,6 +1,6 @@
 import {TestBed, ComponentFixture, fakeAsync, tick, inject} from '@angular/core/testing';
 import {Component, ViewChild} from '@angular/core';
-import {MdRipple, MdRippleModule} from './index';
+import {MdRipple, MdRippleModule, MD_RIPPLES_DISABLE} from './index';
 import {ViewportRuler} from '../overlay/position/viewport-ruler';
 import {RIPPLE_FADE_OUT_DURATION, RIPPLE_FADE_IN_DURATION} from './ripple-renderer';
 import {dispatchMouseEvent} from '../testing/dispatch-events';
@@ -18,7 +18,7 @@ describe('MdRipple', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [MdRippleModule.forRoot()],
+      imports: [MdRippleModule],
       declarations: [
         BasicRippleContainer,
         RippleContainerWithInputBindings,
@@ -272,6 +272,50 @@ describe('MdRipple', () => {
 
   });
 
+  describe('with ripples disabled', () => {
+    let rippleDirective: MdRipple;
+
+    beforeEach(() => {
+      // Reset the previously configured testing module to be able to disable ripples globally.
+      // The testing module has been initialized in the root describe group for the ripples.
+      TestBed.resetTestingModule();
+      TestBed.configureTestingModule({
+        imports: [MdRippleModule],
+        declarations: [BasicRippleContainer],
+        providers: [{ provide: MD_RIPPLES_DISABLE, useValue: true }]
+      });
+    });
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(BasicRippleContainer);
+      fixture.detectChanges();
+
+      rippleTarget = fixture.nativeElement.querySelector('[mat-ripple]');
+      rippleDirective = fixture.componentInstance.ripple;
+    });
+
+    it('should not show any ripples on mousedown', () => {
+      dispatchMouseEvent(rippleTarget, 'mousedown');
+      dispatchMouseEvent(rippleTarget, 'mouseup');
+
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
+
+      dispatchMouseEvent(rippleTarget, 'mousedown');
+      dispatchMouseEvent(rippleTarget, 'mouseup');
+
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
+    });
+
+    it('should still allow manual ripples', () => {
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
+
+      rippleDirective.launch(0, 0);
+
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
+    });
+
+  });
+
   describe('configuring behavior', () => {
     let controller: RippleContainerWithInputBindings;
     let rippleComponent: MdRipple;

src/lib/core/ripple/ripple.ts

@@ -2,15 +2,20 @@ import {
   Directive,
   ElementRef,
   Input,
+  Inject,
   NgZone,
   OnChanges,
   SimpleChanges,
   OnDestroy,
+  OpaqueToken,
+  Optional,
 } from '@angular/core';
 import {RippleConfig, RippleRenderer} from './ripple-renderer';
 import {ViewportRuler} from '../overlay/position/viewport-ruler';
 import {RippleRef} from './ripple-ref';
 
+/** OpaqueToken that can be used to globally disable all ripples. Except programmatic ones. */
+export const MD_RIPPLES_DISABLE = new OpaqueToken('md-ripples-disable');
 
 @Directive({
   selector: '[md-ripple], [mat-ripple]',
@@ -65,7 +70,9 @@ export class MdRipple implements OnChanges, OnDestroy {
   /** Renderer for the ripple DOM manipulations. */
   private _rippleRenderer: RippleRenderer;
 
-  constructor(elementRef: ElementRef, ngZone: NgZone, ruler: ViewportRuler) {
+  constructor(elementRef: ElementRef, ngZone: NgZone, ruler: ViewportRuler,
+              @Optional() @Inject(MD_RIPPLES_DISABLE) private _forceDisableRipples: boolean) {
+
     this._rippleRenderer = new RippleRenderer(elementRef, ngZone, ruler);
   }
 
@@ -74,7 +81,7 @@ export class MdRipple implements OnChanges, OnDestroy {
       this._rippleRenderer.setTriggerElement(this.trigger);
     }
 
-    this._rippleRenderer.rippleDisabled = this.disabled;
+    this._rippleRenderer.rippleDisabled = this._forceDisableRipples || this.disabled;
     this._rippleRenderer.rippleConfig = this.rippleConfig;
   }
 

src/lib/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -5,11 +5,9 @@ import {
   ElementRef,
   ViewEncapsulation,
   Directive,
-  NgZone,
 } from '@angular/core';
 import {MdInkBar} from '../ink-bar';
 import {MdRipple} from '../../core/ripple/index';
-import {ViewportRuler} from '../../core/overlay/position/viewport-ruler';
 
 /**
  * Navigation component matching the styles of the tab group header.
@@ -81,9 +79,4 @@ export class MdTabLink {
     '[class.mat-tab-link]': 'true',
   },
 })
-export class MdTabLinkRipple extends MdRipple {
-  constructor(elementRef: ElementRef, ngZone: NgZone, ruler: ViewportRuler) {
-    super(elementRef, ngZone, ruler);
-  }
-
-}
+export class MdTabLinkRipple extends MdRipple {}