From b9fe75af839854cf45f79918130ed4215c774941 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Mon, 14 Nov 2016 13:06:43 -0800
Subject: [PATCH] feat(tabs): add ripples to the tab group and nav bar links
 (#1700)

---
 src/lib/tabs/tab-group.html               |  2 +-
 src/lib/tabs/tab-group.scss               |  1 +
 src/lib/tabs/tab-nav-bar/tab-nav-bar.scss |  4 +++-
 src/lib/tabs/tab-nav-bar/tab-nav-bar.ts   | 14 ++++++++++++++
 src/lib/tabs/tabs.ts                      | 10 +++++-----
 5 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/lib/tabs/tab-group.html b/src/lib/tabs/tab-group.html
index 370373d2207..3a86a570b73 100644
--- a/src/lib/tabs/tab-group.html
+++ b/src/lib/tabs/tab-group.html
@@ -1,6 +1,6 @@
 <div class="md-tab-header" role="tablist"
      (keydown)="handleKeydown($event)">
-  <div class="md-tab-label" role="tab" md-tab-label-wrapper
+  <div class="md-tab-label" role="tab" md-tab-label-wrapper md-ripple
        *ngFor="let tab of _tabs; let i = index"
        [id]="_getTabLabelId(i)"
        [tabIndex]="selectedIndex == i ? 0 : -1"
diff --git a/src/lib/tabs/tab-group.scss b/src/lib/tabs/tab-group.scss
index 42a140d0875..1b4dee349f5 100644
--- a/src/lib/tabs/tab-group.scss
+++ b/src/lib/tabs/tab-group.scss
@@ -16,6 +16,7 @@
 // Wraps each tab label
 .md-tab-label {
   @include tab-label;
+  position: relative;
 }
 
 @media ($md-xsmall) {
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss b/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss
index 01d5ee6155e..3d789c6bf3e 100644
--- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss
@@ -9,7 +9,9 @@
 // Wraps each link in the header
 [md-tab-link] {
   @include tab-label;
-  text-decoration: none;
+  text-decoration: none;  // Removes anchor underline styling
+  position: relative;
+  overflow: hidden;  // Keeps the ripple from extending outside the element bounds
 }
 
 @media ($md-xsmall) {
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
index cb4eef15710..1e7ab6f7e90 100644
--- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -1,5 +1,6 @@
 import {Component, Input, ViewChild, ElementRef, ViewEncapsulation, Directive} from '@angular/core';
 import {MdInkBar} from '../ink-bar';
+import {MdRipple} from '../../core/ripple/ripple';
 
 /**
  * Navigation component matching the styles of the tab group header.
@@ -41,3 +42,16 @@ export class MdTabLink {
 
   constructor(private _mdTabNavBar: MdTabNavBar, private _element: ElementRef) {}
 }
+
+/**
+ * Simple directive that extends the ripple and matches the selector of the MdTabLink. This
+ * adds the ripple behavior to nav bar labels.
+ */
+@Directive({
+  selector: '[md-tab-link]',
+})
+export class MdTabLinkRipple extends MdRipple {
+  constructor(private _element: ElementRef) {
+    super(_element);
+  }
+}
diff --git a/src/lib/tabs/tabs.ts b/src/lib/tabs/tabs.ts
index fa287c929de..628141b44ad 100644
--- a/src/lib/tabs/tabs.ts
+++ b/src/lib/tabs/tabs.ts
@@ -38,15 +38,15 @@ import {
 } from '../core';
 import {MdTabLabel} from './tab-label';
 import {MdTabLabelWrapper} from './tab-label-wrapper';
-import {MdTabNavBar, MdTabLink} from './tab-nav-bar/tab-nav-bar';
+import {MdTabNavBar, MdTabLink, MdTabLinkRipple} from './tab-nav-bar/tab-nav-bar';
 import {MdInkBar} from './ink-bar';
 import {Observable} from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
+import {MdRippleModule} from '../core/ripple/ripple';
 
 
 /** Used to generate unique ID's for each tab component */
 let nextId = 0;
-
 /** A simple change event emitted on focus or selection changes. */
 export class MdTabChangeEvent {
   index: number;
@@ -375,11 +375,11 @@ export class MdTabBody implements OnInit {
 }
 
 @NgModule({
-  imports: [CommonModule, PortalModule],
+  imports: [CommonModule, PortalModule, MdRippleModule],
   // Don't export MdInkBar or MdTabLabelWrapper, as they are internal implementation details.
-  exports: [MdTabGroup, MdTabLabel, MdTab, MdTabNavBar, MdTabLink],
+  exports: [MdTabGroup, MdTabLabel, MdTab, MdTabNavBar, MdTabLink, MdTabLinkRipple],
   declarations: [MdTabGroup, MdTabLabel, MdTab, MdInkBar, MdTabLabelWrapper,
-    MdTabNavBar, MdTabLink, MdTabBody],
+    MdTabNavBar, MdTabLink, MdTabBody, MdTabLinkRipple],
 })
 export class MdTabsModule {
   static forRoot(): ModuleWithProviders {