feat(tabs): allow disabling ripples (#4466)

Author: devversion

src/lib/tabs/tab-group.html

@@ -1,4 +1,6 @@
-<md-tab-header [selectedIndex]="selectedIndex" #tabHeader
+<md-tab-header #tabHeader
+               [selectedIndex]="selectedIndex"
+               [disableRipple]="disableRipple"
                (indexFocused)="_focusChanged($event)"
                (selectFocusedIndex)="selectedIndex = $event">
   <div class="mat-tab-label" role="tab" md-tab-label-wrapper md-ripple
@@ -9,6 +11,7 @@
        [attr.aria-selected]="selectedIndex == i"
        [class.mat-tab-label-active]="selectedIndex == i"
        [disabled]="tab.disabled"
+       [mdRippleDisabled]="disableRipple"
        (click)="tabHeader.focusIndex = selectedIndex = i">
 
     <!-- If there is a label template, use it. -->

src/lib/tabs/tab-group.spec.ts

@@ -9,6 +9,7 @@ import {Observable} from 'rxjs/Observable';
 import {MdTab} from './tab';
 import {ViewportRuler} from '../core/overlay/position/viewport-ruler';
 import {FakeViewportRuler} from '../core/overlay/position/fake-viewport-ruler';
+import {dispatchFakeEvent} from '../core/testing/dispatch-events';
 
 
 describe('MdTabGroup', () => {
@@ -139,6 +140,39 @@ describe('MdTabGroup', () => {
         fixture.detectChanges();
       }).not.toThrow();
     });
+
+    it('should show ripples for tab-group labels', () => {
+      fixture.detectChanges();
+
+      const testElement = fixture.nativeElement;
+      const tabLabel = fixture.debugElement.queryAll(By.css('.mat-tab-label'))[1];
+
+      expect(testElement.querySelectorAll('.mat-ripple-element').length)
+        .toBe(0, 'Expected no ripples to show up initially.');
+
+      dispatchFakeEvent(tabLabel.nativeElement, 'mousedown');
+      dispatchFakeEvent(tabLabel.nativeElement, 'mouseup');
+
+      expect(testElement.querySelectorAll('.mat-ripple-element').length)
+        .toBe(1, 'Expected one ripple to show up on label mousedown.');
+    });
+
+    it('should allow disabling ripples for tab-group labels', () => {
+      fixture.componentInstance.disableRipple = true;
+      fixture.detectChanges();
+
+      const testElement = fixture.nativeElement;
+      const tabLabel = fixture.debugElement.queryAll(By.css('.mat-tab-label'))[1];
+
+      expect(testElement.querySelectorAll('.mat-ripple-element').length)
+        .toBe(0, 'Expected no ripples to show up initially.');
+
+      dispatchFakeEvent(tabLabel.nativeElement, 'mousedown');
+      dispatchFakeEvent(tabLabel.nativeElement, 'mouseup');
+
+      expect(testElement.querySelectorAll('.mat-ripple-element').length)
+        .toBe(0, 'Expected no ripple to show up on label mousedown.');
+    });
   });
 
   describe('dynamic binding tabs', () => {
@@ -315,6 +349,7 @@ describe('nested MdTabGroup with enabled animations', () => {
     <md-tab-group class="tab-group"
         [(selectedIndex)]="selectedIndex"
         [headerPosition]="headerPosition"
+        [disableRipple]="disableRipple"
         (focusChange)="handleFocus($event)"
         (selectChange)="handleSelection($event)">
       <md-tab>
@@ -336,6 +371,7 @@ class SimpleTabsTestApp {
   selectedIndex: number = 1;
   focusEvent: any;
   selectEvent: any;
+  disableRipple: boolean = false;
   headerPosition: MdTabHeaderPosition = 'above';
   handleFocus(event: any) {
     this.focusEvent = event;

src/lib/tabs/tab-group.ts

@@ -68,6 +68,13 @@ export class MdTabGroup {
   get _dynamicHeightDeprecated(): boolean { return this._dynamicHeight; }
   set _dynamicHeightDeprecated(value: boolean) { this._dynamicHeight = value; }
 
+  /** Whether ripples for the tab-group should be disabled or not. */
+  @Input()
+  get disableRipple(): boolean { return this._disableRipple; }
+  set disableRipple(value) { this._disableRipple = coerceBooleanProperty(value); }
+  private _disableRipple: boolean = false;
+
+
   private _selectedIndex: number = null;
 
   /** The index of the active tab. */

src/lib/tabs/tab-header.html

@@ -1,6 +1,6 @@
 <div class="mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4"
      aria-hidden="true"
-     md-ripple [mdRippleDisabled]="_disableScrollBefore"
+     md-ripple [mdRippleDisabled]="_disableScrollBefore || disableRipple"
      [class.mat-tab-header-pagination-disabled]="_disableScrollBefore"
      (click)="_scrollHeader('before')">
   <div class="mat-tab-header-pagination-chevron"></div>
@@ -18,7 +18,7 @@
 
 <div class="mat-tab-header-pagination mat-tab-header-pagination-after mat-elevation-z4"
      aria-hidden="true"
-     md-ripple [mdRippleDisabled]="_disableScrollAfter"
+     md-ripple [mdRippleDisabled]="_disableScrollAfter || disableRipple"
      [class.mat-tab-header-pagination-disabled]="_disableScrollAfter"
      (click)="_scrollHeader('after')">
   <div class="mat-tab-header-pagination-chevron"></div>

src/lib/tabs/tab-header.spec.ts

@@ -13,6 +13,7 @@ import {ViewportRuler} from '../core/overlay/position/viewport-ruler';
 import {dispatchKeyboardEvent} from '../core/testing/dispatch-events';
 import {dispatchFakeEvent} from '../core/testing/dispatch-events';
 import {Subject} from 'rxjs/Subject';
+import {By} from '@angular/platform-browser';
 
 
 describe('MdTabHeader', () => {
@@ -168,6 +169,44 @@ describe('MdTabHeader', () => {
         fixture.detectChanges();
         expect(appComponent.mdTabHeader.scrollDistance).toBe(0);
       });
+
+      it('should show ripples for pagination buttons', () => {
+        appComponent.addTabsForScrolling();
+        fixture.detectChanges();
+
+        expect(appComponent.mdTabHeader._showPaginationControls).toBe(true);
+
+        const buttonAfter = fixture.debugElement.query(By.css('.mat-tab-header-pagination-after'));
+
+        expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
+          .toBe(0, 'Expected no ripple to show up initially.');
+
+        dispatchFakeEvent(buttonAfter.nativeElement, 'mousedown');
+        dispatchFakeEvent(buttonAfter.nativeElement, 'mouseup');
+
+        expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
+          .toBe(1, 'Expected one ripple to show up after mousedown');
+      });
+
+      it('should allow disabling ripples for pagination buttons', () => {
+        appComponent.addTabsForScrolling();
+        appComponent.disableRipple = true;
+        fixture.detectChanges();
+
+        expect(appComponent.mdTabHeader._showPaginationControls).toBe(true);
+
+        const buttonAfter = fixture.debugElement.query(By.css('.mat-tab-header-pagination-after'));
+
+        expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
+          .toBe(0, 'Expected no ripple to show up initially.');
+
+        dispatchFakeEvent(buttonAfter.nativeElement, 'mousedown');
+        dispatchFakeEvent(buttonAfter.nativeElement, 'mouseup');
+
+        expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
+          .toBe(0, 'Expected no ripple to show up after mousedown');
+      });
+
     });
 
     describe('rtl', () => {
@@ -238,7 +277,7 @@ interface Tab {
 @Component({
   template: `
   <div [dir]="dir">
-    <md-tab-header [selectedIndex]="selectedIndex"
+    <md-tab-header [selectedIndex]="selectedIndex" [disableRipple]="disableRipple"
                (indexFocused)="focusedIndex = $event"
                (selectFocusedIndex)="selectedIndex = $event">
       <div md-tab-label-wrapper style="min-width: 30px; width: 30px"
@@ -257,6 +296,7 @@ interface Tab {
   `]
 })
 class SimpleTabHeaderApp {
+  disableRipple: boolean = false;
   selectedIndex: number = 0;
   focusedIndex: number;
   disabledTabIndex = 1;

src/lib/tabs/tab-header.ts

@@ -14,7 +14,7 @@ import {
   OnDestroy,
   NgZone,
 } from '@angular/core';
-import {RIGHT_ARROW, LEFT_ARROW, ENTER, Dir, LayoutDirection} from '../core';
+import {RIGHT_ARROW, LEFT_ARROW, ENTER, Dir, LayoutDirection, coerceBooleanProperty} from '../core';
 import {MdTabLabelWrapper} from './tab-label-wrapper';
 import {MdInkBar} from './ink-bar';
 import {Subscription} from 'rxjs/Subscription';
@@ -108,6 +108,12 @@ export class MdTabHeader implements AfterContentChecked, AfterContentInit, OnDes
     this._focusIndex = value;
   }
 
+  /** Whether ripples for the tab-header labels should be disabled or not. */
+  @Input()
+  get disableRipple(): boolean { return this._disableRipple; }
+  set disableRipple(value) { this._disableRipple = coerceBooleanProperty(value); }
+  private _disableRipple: boolean = false;
+
   /** Event emitted when the option is selected. */
   @Output() selectFocusedIndex = new EventEmitter();