From ceb472bab6cec77463db360339412914fd6841fd Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 21 Feb 2017 21:50:48 +0100
Subject: [PATCH] fix(button): square ripple in compatibility mode (#3167)

* Fixes the ripple not being clipped in compatibility mode. The issue was due to the check not including the `mat-` selectors.
* Reduces the amount of DOM manipulation done by the button.

Fixes #3164.
---
 src/lib/button/button.html |  2 +-
 src/lib/button/button.ts   | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/lib/button/button.html b/src/lib/button/button.html
index d13ade40bef4..d29f2dc600a4 100644
--- a/src/lib/button/button.html
+++ b/src/lib/button/button.html
@@ -1,6 +1,6 @@
 <span class="mat-button-wrapper"><ng-content></ng-content></span>
 <div md-ripple *ngIf="!_isRippleDisabled()" class="mat-button-ripple"
-    [class.mat-button-ripple-round]="_isRoundButton()"
+    [class.mat-button-ripple-round]="_isRoundButton"
     [mdRippleTrigger]="_getHostElement()"></div>
 <!-- the touchstart handler prevents the overlay from capturing the initial tap on touch devices -->
 <div class="mat-button-focus-overlay" (touchstart)="$event.preventDefault()"></div>
diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts
index 29a12d1d3173..029e152a12dc 100644
--- a/src/lib/button/button.ts
+++ b/src/lib/button/button.ts
@@ -106,6 +106,12 @@ export class MdButton {
   /** Whether a mousedown has occurred on this element in the last 100ms. */
   _isMouseDown: boolean = false;
 
+  /** Whether the button is round. */
+  _isRoundButton: boolean = ['icon-button', 'fab', 'mini-fab'].some(suffix => {
+    let el = this._getHostElement();
+    return el.hasAttribute('md-' + suffix) || el.hasAttribute('mat-' + suffix);
+  });
+
   /** Whether the ripple effect on click should be disabled. */
   private _disableRipple: boolean = false;
   private _disabled: boolean = null;
@@ -165,13 +171,6 @@ export class MdButton {
     return this._elementRef.nativeElement;
   }
 
-  _isRoundButton() {
-    const el = this._getHostElement();
-    return el.hasAttribute('md-icon-button') ||
-        el.hasAttribute('md-fab') ||
-        el.hasAttribute('md-mini-fab');
-  }
-
   _isRippleDisabled() {
     return this.disableRipple || this.disabled;
   }