Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit 1f5fd1f

Browse files
abhiomkarabhiomkar
authored
feat(fab): Enable padding customization (#2959)
- This change enables users to customize Extended FAB icon & label padding using new mixins. - Updated the paddings as per updated design spec. - Updated styles to support text label followed by icon Extended FAB. - Added screenshot tests for mixins.
1 parent 153e737 commit 1f5fd1f

File tree

9 files changed

+183
-13
lines changed

9 files changed

+183
-13
lines changed

‎demos/fab.html

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -152,15 +152,36 @@
152152
<legend>Extended FAB</legend>
153153
<div class="demo-fabs">
154154
<figure class="demo-figure-fab-extended">
155-
<button class="mdc-fab mdc-fab--extended demo-fab-extended-fluid" aria-label="Favorite">
156-
<span class="material-icons mdc-fab__icon">shopping_cart</span>
157-
<span class="mdc-fab__label">Add to cart</span>
155+
<button class="mdc-fab mdc-fab--extended demo-fab-extended-fluid" aria-label="Create">
156+
<span class="material-icons mdc-fab__icon">add</span>
157+
<span class="mdc-fab__label">Create</span>
158158
</button>
159159
<figcaption>
160160
<div>Auto width extended FAB (Responsive)</div>
161161
</figcaption>
162162
</figure>
163163
</div>
164+
<div class="demo-fabs">
165+
<figure class="demo-figure-fab-extended">
166+
<button class="mdc-fab mdc-fab--extended demo-fab-extended-fluid" aria-label="Create">
167+
<span class="mdc-fab__label">Create</span>
168+
<span class="material-icons mdc-fab__icon">add</span>
169+
</button>
170+
<figcaption>
171+
<div>Auto width extended FAB (Text label followed by Icon)</div>
172+
</figcaption>
173+
</figure>
174+
</div>
175+
<div class="demo-fabs">
176+
<figure class="demo-figure-fab-extended">
177+
<button class="mdc-fab mdc-fab--extended demo-fab-extended-without-icon" aria-label="Create">
178+
<span class="mdc-fab__label">Create</span>
179+
</button>
180+
<figcaption>
181+
<div>Extended FAB (without Icon)</div>
182+
</figcaption>
183+
</figure>
184+
</div>
164185
</section>
165186

166187
<section>

‎packages/mdc-fab/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,8 @@ Mixin | Description
112112
`mdc-fab-container-color($color)` | Sets the container color to the given color
113113
`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.
114114
`mdc-fab-ink-color($color)` | Sets the ink color to the given color
115+
`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.
116+
`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.
115117

116118
The ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.
117119

‎packages/mdc-fab/_mixins.scss

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
@import "@material/ripple/variables";
2020
@import "@material/theme/functions";
2121
@import "@material/theme/mixins";
22+
@import "@material/rtl/mixins";
23+
@import "./variables";
2224

2325
@mixin mdc-fab-accessible($container-color) {
2426
$fill-tone: mdc-theme-tone($container-color);
@@ -54,6 +56,30 @@
5456
width: 100%;
5557
}
5658

59+
@mixin mdc-fab-extended-padding($icon-padding, $label-padding) {
60+
@include mdc-fab-extended-label-padding($label-padding);
61+
62+
// Offsets the outer label padding by deducting it from icon padding.
63+
.mdc-fab__icon {
64+
@include mdc-rtl-reflexive-property(
65+
margin,
66+
$icon-padding - $label-padding,
67+
$icon-padding);
68+
}
69+
70+
// For Extended FAB with text label followed by icon.
71+
.mdc-fab__label + .mdc-fab__icon {
72+
@include mdc-rtl-reflexive-property(
73+
margin,
74+
$icon-padding,
75+
$icon-padding - $label-padding);
76+
}
77+
}
78+
79+
@mixin mdc-fab-extended-label-padding($label-padding) {
80+
padding: 0 $label-padding;
81+
}
82+
5783
$mdc-fab-icon-enter-delay_: 90ms;
5884
$mdc-fab-icon-enter-duration_: 180ms;
5985
$mdc-fab-extended-height_: 48px;
@@ -129,11 +155,13 @@ $mdc-fab-extended-height_: 48px;
129155

130156
@mixin mdc-fab--extended_ {
131157
@include mdc-typography(button);
158+
@include mdc-fab-extended-padding(
159+
$mdc-fab-extended-icon-padding,
160+
$mdc-fab-extended-label-padding);
132161

133162
width: auto;
134163
max-width: 100%;
135164
height: $mdc-fab-extended-height_;
136-
padding: 0 20px 0 16px;
137165
border-radius: $mdc-fab-extended-height_ / 2;
138166
}
139167

@@ -145,7 +173,6 @@ $mdc-fab-extended-height_: 48px;
145173

146174
@mixin mdc-fab__label_ {
147175
justify-content: flex-start;
148-
padding-left: 8px;
149176
text-overflow: ellipsis;
150177
white-space: nowrap;
151178
overflow: hidden;

‎packages/mdc-fab/_variables.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
//
2+
// Copyright 2018 Google Inc. All Rights Reserved.
3+
//
4+
// Licensed under the Apache License, Version 2.0 (the "License");
5+
// you may not use this file except in compliance with the License.
6+
// You may obtain a copy of the License at
7+
//
8+
// http://www.apache.org/licenses/LICENSE-2.0
9+
//
10+
// Unless required by applicable law or agreed to in writing, software
11+
// distributed under the License is distributed on an "AS IS" BASIS,
12+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
// See the License for the specific language governing permissions and
14+
// limitations under the License.
15+
//
16+
17+
$mdc-fab-extended-icon-padding: 12px;
18+
$mdc-fab-extended-label-padding: 20px;

‎packages/mdc-fab/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"@material/animation": "^0.34.0",
1818
"@material/elevation": "^0.36.1",
1919
"@material/ripple": "^0.36.0",
20+
"@material/rtl": "^0.36.0",
2021
"@material/theme": "^0.35.0",
2122
"@material/typography": "^0.35.0"
2223
}

‎test/screenshot/golden.json

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -108,12 +108,12 @@
108108
}
109109
},
110110
"mdc-fab/classes/extended.html": {
111-
"publicUrl": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/08/15_24_10_920/e995ab9c/mdc-fab/classes/extended.html",
111+
"publicUrl": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/19/19_52_01_078/mdc-fab/classes/extended.html",
112112
"screenshots": {
113-
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/08/15_24_10_920/e995ab9c/mdc-fab/classes/extended.html.win10_chrome66x64.png",
114-
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/08/15_24_10_920/e995ab9c/mdc-fab/classes/extended.html.win10_edge17.png",
115-
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/08/15_24_10_920/e995ab9c/mdc-fab/classes/extended.html.win10_ff59x64.png",
116-
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/08/15_24_10_920/e995ab9c/mdc-fab/classes/extended.html.win10_ie11.png"
113+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/19/19_52_01_078/mdc-fab/classes/extended.html.win10_chrome66x64.png",
114+
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/19/19_52_01_078/mdc-fab/classes/extended.html.win10_edge17.png",
115+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/19/19_52_01_078/mdc-fab/classes/extended.html.win10_ff59x64.png",
116+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/19/19_52_01_078/mdc-fab/classes/extended.html.win10_ie11.png"
117117
}
118118
},
119119
"mdc-fab/classes/mini.html": {
@@ -125,6 +125,15 @@
125125
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/05/25/21_14_58_299/6b0f3e00/mdc-fab/classes/mini.html.win10_ie11.png"
126126
}
127127
},
128+
"mdc-fab/mixins/mdc-fab-extended-label-padding.html": {
129+
"publicUrl": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/22/19_14_56_425/mdc-fab/mixins/mdc-fab-extended-label-padding.html",
130+
"screenshots": {
131+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/22/19_14_56_425/mdc-fab/mixins/mdc-fab-extended-label-padding.html.win10_chrome66x64.png",
132+
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/22/19_14_56_425/mdc-fab/mixins/mdc-fab-extended-label-padding.html.win10_edge17.png",
133+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/22/19_14_56_425/mdc-fab/mixins/mdc-fab-extended-label-padding.html.win10_ff59x64.png",
134+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/22/19_14_56_425/mdc-fab/mixins/mdc-fab-extended-label-padding.html.win10_ie11.png"
135+
}
136+
},
128137
"mdc-icon-button/classes/baseline.html": {
129138
"publicUrl": "https://storage.googleapis.com/mdc-web-screenshot-tests/williamernest/2018/05/30/14_38_21_131/4dc98079/mdc-icon-button/classes/baseline.html",
130139
"screenshots": {

‎test/screenshot/mdc-fab/classes/extended.html

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,20 @@
2828
<main class="test-main test-main--fab">
2929
<div class="test-grid">
3030
<div class="test-cell test-cell--extended">
31-
<button class="mdc-fab mdc-fab--extended" aria-label="Add to cart">
32-
<span class="material-icons mdc-fab__icon">shopping_cart</span>
33-
<span class="mdc-fab__label">Add to cart</span>
31+
<button class="mdc-fab mdc-fab--extended" aria-label="Create">
32+
<span class="material-icons mdc-fab__icon">add</span>
33+
<span class="mdc-fab__label">Create</span>
34+
</button>
35+
</div>
36+
<div class="test-cell test-cell--extended">
37+
<button class="mdc-fab mdc-fab--extended" aria-label="Create">
38+
<span class="mdc-fab__label">Create</span>
39+
<span class="material-icons mdc-fab__icon">add</span>
40+
</button>
41+
</div>
42+
<div class="test-cell test-cell--extended">
43+
<button class="mdc-fab mdc-fab--extended" aria-label="Create">
44+
<span class="mdc-fab__label">Create</span>
3445
</button>
3546
</div>
3647
</div>

‎test/screenshot/mdc-fab/custom.scss

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
//
2+
// Copyright 2018 Google Inc. All Rights Reserved.
3+
//
4+
// Licensed under the Apache License, Version 2.0 (the "License");
5+
// you may not use this file except in compliance with the License.
6+
// You may obtain a copy of the License at
7+
//
8+
// http://www.apache.org/licenses/LICENSE-2.0
9+
//
10+
// Unless required by applicable law or agreed to in writing, software
11+
// distributed under the License is distributed on an "AS IS" BASIS,
12+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
// See the License for the specific language governing permissions and
14+
// limitations under the License.
15+
//
16+
17+
@import "../../../packages/mdc-fab/mixins";
18+
19+
.custom-fab-extended-padding-and-icon-size {
20+
@include mdc-fab-extended-padding(12px, 24px);
21+
@include mdc-fab-icon-size(32px);
22+
}
23+
24+
.custom-fab-extended-padding {
25+
@include mdc-fab-extended-padding(16px, 24px);
26+
}
27+
28+
.custom-fab-extended-label-padding {
29+
@include mdc-fab-extended-label-padding(24px);
30+
}

‎test/screenshot/mdc-fab/mixins/mdc-fab-extended-label-padding.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright 2018 Google Inc. All rights reserved.
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
https://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License
16+
-->
17+
<html lang="en">
18+
<head>
19+
<meta charset="utf-8">
20+
<title>Extended FAB (Floating Action Button) - MDC Web Screenshot Test</title>
21+
<meta name="viewport" content="width=device-width, initial-scale=1">
22+
<link rel="stylesheet" href="../../out/fixture.css">
23+
<link rel="stylesheet" href="../../out/mdc.fab.css">
24+
<link rel="stylesheet" href="../../out/mdc-fab/fixture.css">
25+
<link rel="stylesheet" href="../../out/mdc-fab/custom.css">
26+
</head>
27+
28+
<body class="test-body">
29+
<main class="test-main test-main--fab">
30+
<div class="test-grid">
31+
<div class="test-cell test-cell--extended">
32+
<button class="mdc-fab mdc-fab--extended custom-fab-extended-padding-and-icon-size" aria-label="Create">
33+
<span class="material-icons mdc-fab__icon">add</span>
34+
<span class="mdc-fab__label">Create</span>
35+
</button>
36+
</div>
37+
<div class="test-cell test-cell--extended">
38+
<button class="mdc-fab mdc-fab--extended custom-fab-extended-padding" aria-label="Create">
39+
<span class="mdc-fab__label">Create</span>
40+
<span class="material-icons mdc-fab__icon">add</span>
41+
</button>
42+
</div>
43+
<div class="test-cell test-cell--extended">
44+
<button class="mdc-fab mdc-fab--extended custom-fab-extended-label-padding" aria-label="Create">
45+
<span class="mdc-fab__label">Create</span>
46+
</button>
47+
</div>
48+
</div>
49+
</main>
50+
</body>
51+
</html>

0 commit comments

Comments
 (0)