From 7288958a0b14b4b3c715298f1ba2b74af0c3928a Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Wed, 2 Nov 2016 15:12:59 -0700
Subject: [PATCH] nav bar link extends ripple to get auto-ripple

---
 src/demo-app/tabs/tabs-demo.html          | 2 +-
 src/lib/tabs/tab-nav-bar/tab-nav-bar.scss | 3 ++-
 src/lib/tabs/tab-nav-bar/tab-nav-bar.ts   | 7 +++++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/demo-app/tabs/tabs-demo.html b/src/demo-app/tabs/tabs-demo.html
index 02801301c453..99d73d9ec327 100644
--- a/src/demo-app/tabs/tabs-demo.html
+++ b/src/demo-app/tabs/tabs-demo.html
@@ -2,7 +2,7 @@ <h1>Tab Nav Bar</h1>
 
 <div class="demo-nav-bar">
   <nav md-tab-nav-bar aria-label="weather navigation links">
-    <a md-tab-link md-ripple
+    <a md-tab-link
        *ngFor="let tabLink of tabLinks; let i = index"
        [routerLink]="tabLink.link"
        [active]="activeLinkIndex === i"
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 01d5ee6155e1..d179b4ca1f00 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,8 @@
 // Wraps each link in the header
 [md-tab-link] {
   @include tab-label;
-  text-decoration: none;
+  text-decoration: none;  // Removes anchor underline styling
+  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 cb4eef157100..62dec7a0fa05 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.
@@ -24,7 +25,7 @@ export class MdTabNavBar {
 @Directive({
   selector: '[md-tab-link]',
 })
-export class MdTabLink {
+export class MdTabLink extends MdRipple {
   private _isActive: boolean = false;
 
   @Input()
@@ -39,5 +40,7 @@ export class MdTabLink {
     }
   }
 
-  constructor(private _mdTabNavBar: MdTabNavBar, private _element: ElementRef) {}
+  constructor(private _mdTabNavBar: MdTabNavBar, private _element: ElementRef) {
+    super(_element);
+  }
 }