From f9f893abf97b07465545972415d64206640d6ae4 Mon Sep 17 00:00:00 2001
From: Topher Fangio <fangiotophia@gmail.com>
Date: Fri, 12 Feb 2016 12:47:54 -0600
Subject: [PATCH] fix(FAB): Re-add line-height to fix ui-sref issues.

The `line-height` property of the FAB buttons was removed to fix
an issue with the tooltip demo. This had unintended consequences
on FABs that used `ui-sref` which made them `<a>` tags instead of
`<button>` tags.

The tooltip demo issue was caused by the parent `<md-content>`
applying it's padding to all of it's children.

Revert the line-height change and fix demos by wrapping child
content in a new `<div>` which accepts the extra padding.

Fixes #7087. Closes #7145
---
 src/components/button/button.scss             |   2 +
 .../tooltip/demoBasicUsage/index.html         | 112 +++++++++---------
 .../tooltip/demoBasicUsage/style.css          |   6 -
 3 files changed, 59 insertions(+), 61 deletions(-)

diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index d91322e49ee..fd7c7b653be 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -114,6 +114,8 @@ button.md-button::-moz-focus-inner {
 
     z-index: $z-index-fab;
 
+    line-height: $button-fab-line-height;
+
     min-width: 0;
     width: $button-fab-width;
     height: $button-fab-height;
diff --git a/src/components/tooltip/demoBasicUsage/index.html b/src/components/tooltip/demoBasicUsage/index.html
index 4db09ab5e20..5dadc8941fc 100644
--- a/src/components/tooltip/demoBasicUsage/index.html
+++ b/src/components/tooltip/demoBasicUsage/index.html
@@ -13,71 +13,73 @@ <h2 class="md-toolbar-tools">
     </h2>
   </md-toolbar>
   <md-content layout-padding style="margin-left: 20px; margin-right: 20px">
+    <div>
 
-    <p>
-      The tooltip is visible when the button is hovered, focused, or touched.
-    </p>
-
-    <md-button class="md-fab md-fab-top-left left" aria-label="Insert Drive">
-      <md-icon md-svg-src="img/icons/ic_insert_drive_file_24px.svg" style="width: 24px; height: 24px;"></md-icon>
-      <md-tooltip md-visible="demo.showTooltip" md-direction="{{demo.tipDirection}}">
-        Insert Drive
-      </md-tooltip>
-    </md-button>
-    <md-button class="md-fab md-fab-top-right right" aria-label="Photos">
-      <md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
-      <md-tooltip>
-        Photos
-      </md-tooltip>
-    </md-button>
-
-
-    <div style="margin-top: 150px;">
       <p>
-        Additionally, the Tooltip's <code>md-visible</code> attribute can use data-binding to
-        programmatically show/hide itself. Toggle the checkbox below...
+        The tooltip is visible when the button is hovered, focused, or touched.
       </p>
-      <div style="padding-left: 37px">
-        <md-checkbox ng-model="demo.showTooltip" style="padding-left:30px;">
-          Insert Drive
-        </md-checkbox>
-      </div>
-    </div>
 
-    <div style="margin-top: 20px;margin-bottom: -5px">
-      <p>
-        Additionally, the Tooltip's <code>md-delay</code> attribute can use to delay the
-        show animation. The default values is 0 mSecs...
-      </p>
-      <div style="padding-left: 37px">
-        <md-input-container>
-          <label>Tooltip Delay (for Photos)</label>
-          <input ng-model="demo.delayTooltip">
-        </md-input-container>
+      <md-button class="md-fab" aria-label="Insert Drive">
+        <md-icon md-svg-src="img/icons/ic_insert_drive_file_24px.svg"></md-icon>
+        <md-tooltip md-visible="demo.showTooltip" md-direction="{{demo.tipDirection}}">
+          Insert Drive
+        </md-tooltip>
+      </md-button>
+      <md-button class="md-fab md-fab-top-right right" aria-label="Photos">
+        <md-tooltip>
+          Photos
+        </md-tooltip>
+        <md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
+      </md-button>
 
-        <md-button class="md-fab demo-tip" aria-label="Photos with Tooltip Delay">
-          <md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
-          <md-tooltip md-delay="demo.delayTooltip" c>
-            Photos with Tooltip Delay {{demo.delayTooltip}} msecs
-          </md-tooltip>
-        </md-button>
 
+      <div style="margin-top: 40px;margin-bottom: -5px">
+        <p><code>md-direction</code> attribute can used to dynamically change the direction of the tooltip.<br/>
+        Note: the direction default value is 'bottom'. </p>
+        <div style="padding-left: 30px">
+        <md-radio-group ng-model="demo.tipDirection" >
+           <md-radio-button value="left"> Left </md-radio-button>
+           <md-radio-button value="top">Top</md-radio-button>
+           <md-radio-button value="bottom"  class="md-primary">Bottom</md-radio-button>
+           <md-radio-button value="right">Right</md-radio-button>
+         </md-radio-group>
+        </div>
       </div>
-    </div>
 
-    <div style="margin-top: 20px;margin-bottom: -5px">
-      <p><code>md-direction</code> attribute can used to dynamically change the direction of the tooltip.<br/>
-      Note: the direction default value is 'bottom'. </p>
-      <div style="padding-left: 30px">
-      <md-radio-group ng-model="demo.tipDirection" >
-         <md-radio-button value="left"> Left </md-radio-button>
-         <md-radio-button value="top">Top</md-radio-button>
-         <md-radio-button value="bottom"  class="md-primary">Bottom</md-radio-button>
-         <md-radio-button value="right">Right</md-radio-button>
-       </md-radio-group>
+
+      <div style="margin-top: 20px;">
+        <p>
+          Additionally, the Tooltip's <code>md-visible</code> attribute can use data-binding to
+          programmatically show/hide itself. Toggle the checkbox below...
+        </p>
+        <div style="padding-left: 37px">
+          <md-checkbox ng-model="demo.showTooltip" style="padding-left:30px;">
+            Insert Drive
+          </md-checkbox>
+        </div>
       </div>
-    </div>
 
+      <div style="margin-top: 20px;margin-bottom: -5px">
+        <p>
+          Additionally, the Tooltip's <code>md-delay</code> attribute can use to delay the
+          show animation. The default values is 0 mSecs...
+        </p>
+        <div style="padding-left: 37px">
+          <md-input-container>
+            <label>Tooltip Delay (for Photos)</label>
+            <input ng-model="demo.delayTooltip">
+          </md-input-container>
+
+          <md-button class="md-fab" aria-label="Photos with Tooltip Delay" style="margin-top: -24px;">
+            <md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px; "></md-icon>
+            <md-tooltip md-delay="demo.delayTooltip">
+              Photos with Tooltip Delay {{demo.delayTooltip}} msecs
+            </md-tooltip>
+          </md-button>
 
+        </div>
+      </div>
+
+    </div>
   </md-content>
 </div>
diff --git a/src/components/tooltip/demoBasicUsage/style.css b/src/components/tooltip/demoBasicUsage/style.css
index a615ae7ae3a..8a09b402961 100644
--- a/src/components/tooltip/demoBasicUsage/style.css
+++ b/src/components/tooltip/demoBasicUsage/style.css
@@ -17,9 +17,3 @@ md-toolbar .md-toolbar-tools .md-button:hover {
   top:70px !important;
   right:56px !important;
 }
-
-
-.demo-tip {
-  margin-top: -24px;
-    margin-left: 20px;
-}