Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit f9f893a

Browse files
topherfangioThomasBurleson
topherfangio
authored and
ThomasBurleson
committed
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
1 parent af40e25 commit f9f893a

File tree

3 files changed

+59
-61
lines changed

3 files changed

+59
-61
lines changed

‎src/components/button/button.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,8 @@ button.md-button::-moz-focus-inner {
114114

115115
z-index: $z-index-fab;
116116

117+
line-height: $button-fab-line-height;
118+
117119
min-width: 0;
118120
width: $button-fab-width;
119121
height: $button-fab-height;

‎src/components/tooltip/demoBasicUsage/index.html

Lines changed: 57 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -13,71 +13,73 @@ <h2 class="md-toolbar-tools">
1313
</h2>
1414
</md-toolbar>
1515
<md-content layout-padding style="margin-left: 20px; margin-right: 20px">
16+
<div>
1617

17-
<p>
18-
The tooltip is visible when the button is hovered, focused, or touched.
19-
</p>
20-
21-
<md-button class="md-fab md-fab-top-left left" aria-label="Insert Drive">
22-
<md-icon md-svg-src="img/icons/ic_insert_drive_file_24px.svg" style="width: 24px; height: 24px;"></md-icon>
23-
<md-tooltip md-visible="demo.showTooltip" md-direction="{{demo.tipDirection}}">
24-
Insert Drive
25-
</md-tooltip>
26-
</md-button>
27-
<md-button class="md-fab md-fab-top-right right" aria-label="Photos">
28-
<md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
29-
<md-tooltip>
30-
Photos
31-
</md-tooltip>
32-
</md-button>
33-
34-
35-
<div style="margin-top: 150px;">
3618
<p>
37-
Additionally, the Tooltip's <code>md-visible</code> attribute can use data-binding to
38-
programmatically show/hide itself. Toggle the checkbox below...
19+
The tooltip is visible when the button is hovered, focused, or touched.
3920
</p>
40-
<div style="padding-left: 37px">
41-
<md-checkbox ng-model="demo.showTooltip" style="padding-left:30px;">
42-
Insert Drive
43-
</md-checkbox>
44-
</div>
45-
</div>
4621

47-
<div style="margin-top: 20px;margin-bottom: -5px">
48-
<p>
49-
Additionally, the Tooltip's <code>md-delay</code> attribute can use to delay the
50-
show animation. The default values is 0 mSecs...
51-
</p>
52-
<div style="padding-left: 37px">
53-
<md-input-container>
54-
<label>Tooltip Delay (for Photos)</label>
55-
<input ng-model="demo.delayTooltip">
56-
</md-input-container>
22+
<md-button class="md-fab" aria-label="Insert Drive">
23+
<md-icon md-svg-src="img/icons/ic_insert_drive_file_24px.svg"></md-icon>
24+
<md-tooltip md-visible="demo.showTooltip" md-direction="{{demo.tipDirection}}">
25+
Insert Drive
26+
</md-tooltip>
27+
</md-button>
28+
<md-button class="md-fab md-fab-top-right right" aria-label="Photos">
29+
<md-tooltip>
30+
Photos
31+
</md-tooltip>
32+
<md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
33+
</md-button>
5734

58-
<md-button class="md-fab demo-tip" aria-label="Photos with Tooltip Delay">
59-
<md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
60-
<md-tooltip md-delay="demo.delayTooltip" c>
61-
Photos with Tooltip Delay {{demo.delayTooltip}} msecs
62-
</md-tooltip>
63-
</md-button>
6435

36+
<div style="margin-top: 40px;margin-bottom: -5px">
37+
<p><code>md-direction</code> attribute can used to dynamically change the direction of the tooltip.<br/>
38+
Note: the direction default value is 'bottom'. </p>
39+
<div style="padding-left: 30px">
40+
<md-radio-group ng-model="demo.tipDirection" >
41+
<md-radio-button value="left"> Left </md-radio-button>
42+
<md-radio-button value="top">Top</md-radio-button>
43+
<md-radio-button value="bottom" class="md-primary">Bottom</md-radio-button>
44+
<md-radio-button value="right">Right</md-radio-button>
45+
</md-radio-group>
46+
</div>
6547
</div>
66-
</div>
6748

68-
<div style="margin-top: 20px;margin-bottom: -5px">
69-
<p><code>md-direction</code> attribute can used to dynamically change the direction of the tooltip.<br/>
70-
Note: the direction default value is 'bottom'. </p>
71-
<div style="padding-left: 30px">
72-
<md-radio-group ng-model="demo.tipDirection" >
73-
<md-radio-button value="left"> Left </md-radio-button>
74-
<md-radio-button value="top">Top</md-radio-button>
75-
<md-radio-button value="bottom" class="md-primary">Bottom</md-radio-button>
76-
<md-radio-button value="right">Right</md-radio-button>
77-
</md-radio-group>
49+
50+
<div style="margin-top: 20px;">
51+
<p>
52+
Additionally, the Tooltip's <code>md-visible</code> attribute can use data-binding to
53+
programmatically show/hide itself. Toggle the checkbox below...
54+
</p>
55+
<div style="padding-left: 37px">
56+
<md-checkbox ng-model="demo.showTooltip" style="padding-left:30px;">
57+
Insert Drive
58+
</md-checkbox>
59+
</div>
7860
</div>
79-
</div>
8061

62+
<div style="margin-top: 20px;margin-bottom: -5px">
63+
<p>
64+
Additionally, the Tooltip's <code>md-delay</code> attribute can use to delay the
65+
show animation. The default values is 0 mSecs...
66+
</p>
67+
<div style="padding-left: 37px">
68+
<md-input-container>
69+
<label>Tooltip Delay (for Photos)</label>
70+
<input ng-model="demo.delayTooltip">
71+
</md-input-container>
72+
73+
<md-button class="md-fab" aria-label="Photos with Tooltip Delay" style="margin-top: -24px;">
74+
<md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px; "></md-icon>
75+
<md-tooltip md-delay="demo.delayTooltip">
76+
Photos with Tooltip Delay {{demo.delayTooltip}} msecs
77+
</md-tooltip>
78+
</md-button>
8179

80+
</div>
81+
</div>
82+
83+
</div>
8284
</md-content>
8385
</div>

‎src/components/tooltip/demoBasicUsage/style.css

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,3 @@ md-toolbar .md-toolbar-tools .md-button:hover {
1717
top:70px !important;
1818
right:56px !important;
1919
}
20-
21-
22-
.demo-tip {
23-
margin-top: -24px;
24-
margin-left: 20px;
25-
}

0 commit comments

Comments
 (0)