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

Commit 85b33b5

Browse files
bwobrienbwobrien
authored
refactor(mdc-fab): Move Ripple to inner Element. (#4997)
BREAKING CHANGE: This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element. OLD ```html <button class="mdc-fab" aria-label="Favorite"> <span class="mdc-fab__icon material-icons">favorite</span> </button> ``` NEW ```html <button class="mdc-fab" aria-label="Favorite"> <div class="mdc-fab__ripple"></div> <span class="mdc-fab__icon material-icons">favorite</span> </button> ```
1 parent 2076873 commit 85b33b5

File tree

10 files changed

+60
-12
lines changed

10 files changed

+60
-12
lines changed

‎packages/mdc-fab/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ However, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any
5353

5454
```html
5555
<button class="mdc-fab" aria-label="Favorite">
56+
<div class="mdc-fab__ripple"></div>
5657
<span class="mdc-fab__icon material-icons">favorite</span>
5758
</button>
5859
```
@@ -85,6 +86,7 @@ const fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));
8586

8687
```html
8788
<button class="mdc-fab mdc-fab--extended">
89+
<div class="mdc-fab__ripple"></div>
8890
<span class="material-icons mdc-fab__icon">add</span>
8991
<span class="mdc-fab__label">Create</span>
9092
</button>
@@ -100,6 +102,7 @@ CSS Class | Description
100102
--- | ---
101103
`mdc-fab` | Mandatory, for the button element
102104
`mdc-fab__icon` | Mandatory, for the icon element
105+
`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.
103106
`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.
104107
`mdc-fab--mini` | Optional, modifies the FAB to a smaller size
105108
`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.

‎packages/mdc-fab/_mixins.scss

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@
3333
@import "@material/typography/mixins";
3434
@import "./variables";
3535

36+
$mdc-fab-ripple-target: ".mdc-fab__ripple";
37+
3638
@mixin mdc-fab-core-styles($query: mdc-feature-all()) {
3739
@include mdc-fab-without-ripple($query);
3840
@include mdc-fab-ripple($query);
@@ -78,14 +80,23 @@
7880
}
7981

8082
@mixin mdc-fab-ripple($query: mdc-feature-all()) {
83+
$feat-structure: mdc-feature-create-target($query, structure);
84+
8185
@include mdc-ripple-common($query);
8286

8387
// postcss-bem-linter: define fab
8488

8589
.mdc-fab {
86-
@include mdc-ripple-surface($query: $query);
87-
@include mdc-ripple-radius-bounded($query: $query);
88-
@include mdc-states(on-secondary, $query: $query);
90+
@include mdc-ripple-surface(
91+
$query: $query, $ripple-target: $mdc-fab-ripple-target);
92+
@include mdc-ripple-radius-bounded(
93+
$query: $query, $ripple-target: $mdc-fab-ripple-target);
94+
@include mdc-states(
95+
on-secondary, $query: $query, $ripple-target: $mdc-fab-ripple-target);
96+
97+
#{$mdc-fab-ripple-target} {
98+
@include mdc-ripple-target-common($query: $query);
99+
}
89100
}
90101

91102
// postcss-bem-linter: end
@@ -98,10 +109,16 @@
98109

99110
@if ($fill-tone == "dark") {
100111
@include mdc-fab-ink-color(text-primary-on-dark, $query: $query);
101-
@include mdc-states(text-primary-on-dark, $query: $query);
112+
@include mdc-states(
113+
text-primary-on-dark,
114+
$query: $query,
115+
$ripple-target: $mdc-button-ripple-target);
102116
} @else {
103117
@include mdc-fab-ink-color(text-primary-on-light, $query: $query);
104-
@include mdc-states(text-primary-on-light, $query: $query);
118+
@include mdc-states(
119+
text-primary-on-light,
120+
$query: $query,
121+
$ripple-target: $mdc-button-ripple-target);
105122
}
106123
}
107124

@@ -172,6 +189,10 @@
172189
@mixin mdc-fab-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
173190
&:not(.mdc-fab--extended) {
174191
@include mdc-shape-radius($radius, $rtl-reflexive, $query: $query);
192+
193+
#{$mdc-fab-ripple-target} {
194+
@include mdc-shape-radius($radius, $rtl-reflexive, $query: $query);
195+
}
175196
}
176197
}
177198

@@ -181,6 +202,14 @@
181202
$rtl-reflexive,
182203
$query: $query
183204
);
205+
206+
#{$mdc-fab-ripple-target} {
207+
@include mdc-shape-radius(
208+
mdc-shape-resolve-percentage-radius($mdc-fab-extended-height, $radius),
209+
$rtl-reflexive,
210+
$query: $query
211+
);
212+
}
184213
}
185214

186215
$mdc-fab-icon-enter-delay_: 90ms;
@@ -209,7 +238,6 @@ $mdc-fab-icon-enter-duration_: 180ms;
209238
user-select: none;
210239
-moz-appearance: none;
211240
-webkit-appearance: none;
212-
overflow: hidden;
213241
}
214242

215243
@include mdc-feature-targets($feat-animation) {

‎test/screenshot/golden.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -624,9 +624,9 @@
624624
}
625625
},
626626
"spec/mdc-fab/classes/extended.html": {
627-
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-fab/classes/extended.html?utm_source=golden_json",
627+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/obrien/2019/08/20/19_24_06_111/spec/mdc-fab/classes/extended.html?utm_source=golden_json",
628628
"screenshots": {
629-
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-fab/classes/extended.html.windows_chrome_74.png",
629+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/obrien/2019/08/20/19_24_06_111/spec/mdc-fab/classes/extended.html.windows_chrome_76.png",
630630
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-fab/classes/extended.html.windows_firefox_65.png",
631631
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-fab/classes/extended.html.windows_ie_11.png"
632632
}
@@ -640,17 +640,17 @@
640640
}
641641
},
642642
"spec/mdc-fab/mixins/extended-padding.html": {
643-
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-fab/mixins/extended-padding.html?utm_source=golden_json",
643+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/obrien/2019/08/20/19_24_06_111/spec/mdc-fab/mixins/extended-padding.html?utm_source=golden_json",
644644
"screenshots": {
645-
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-fab/mixins/extended-padding.html.windows_chrome_74.png",
645+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/obrien/2019/08/20/19_24_06_111/spec/mdc-fab/mixins/extended-padding.html.windows_chrome_76.png",
646646
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-fab/mixins/extended-padding.html.windows_firefox_65.png",
647647
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-fab/mixins/extended-padding.html.windows_ie_11.png"
648648
}
649649
},
650650
"spec/mdc-fab/mixins/extended-shape-radius.html": {
651-
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-fab/mixins/extended-shape-radius.html?utm_source=golden_json",
651+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/obrien/2019/08/20/19_24_06_111/spec/mdc-fab/mixins/extended-shape-radius.html?utm_source=golden_json",
652652
"screenshots": {
653-
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-fab/mixins/extended-shape-radius.html.windows_chrome_74.png",
653+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/obrien/2019/08/20/19_24_06_111/spec/mdc-fab/mixins/extended-shape-radius.html.windows_chrome_76.png",
654654
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-fab/mixins/extended-shape-radius.html.windows_firefox_65.png",
655655
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/13/20_59_35_867/spec/mdc-fab/mixins/extended-shape-radius.html.windows_ie_11.png"
656656
}

‎test/screenshot/spec/mdc-fab/classes/baseline.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,13 @@
4444
<div class="test-layout">
4545
<div class="test-cell test-cell--fab">
4646
<button class="mdc-fab" aria-label="Favorite">
47+
<div class="mdc-fab__ripple"></div>
4748
<span class="mdc-fab__icon material-icons">favorite_border</span>
4849
</button>
4950
</div>
5051
<div class="test-cell test-cell--fab">
5152
<button class="mdc-fab" aria-label="Favorite">
53+
<div class="mdc-fab__ripple"></div>
5254
<svg xmlns="http://www.w3.org/2000/svg" class="mdc-fab__icon" viewBox="0 0 24 24" fill="#000000">
5355
<path fill="none" d="M0 0h24v24H0z"/>
5456
<path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,18 +44,21 @@
4444
<div class="test-layout">
4545
<div class="test-cell test-cell--fab-extended">
4646
<button class="mdc-fab mdc-fab--extended" aria-label="Create">
47+
<div class="mdc-fab__ripple"></div>
4748
<span class="material-icons mdc-fab__icon">add</span>
4849
<span class="mdc-fab__label">Create</span>
4950
</button>
5051
</div>
5152
<div class="test-cell test-cell--fab-extended">
5253
<button class="mdc-fab mdc-fab--extended" aria-label="Create">
54+
<div class="mdc-fab__ripple"></div>
5355
<span class="mdc-fab__label">Create</span>
5456
<span class="material-icons mdc-fab__icon">add</span>
5557
</button>
5658
</div>
5759
<div class="test-cell test-cell--fab-extended">
5860
<button class="mdc-fab mdc-fab--extended" aria-label="Create">
61+
<div class="mdc-fab__ripple"></div>
5962
<span class="mdc-fab__label">Create</span>
6063
</button>
6164
</div>

‎test/screenshot/spec/mdc-fab/classes/mini.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,13 @@
4444
<div class="test-layout">
4545
<div class="test-cell test-cell--fab">
4646
<button class="mdc-fab mdc-fab--mini" aria-label="Favorite">
47+
<div class="mdc-fab__ripple"></div>
4748
<span class="mdc-fab__icon material-icons">favorite_border</span>
4849
</button>
4950
</div>
5051
<div class="test-cell test-cell--fab">
5152
<button class="mdc-fab mdc-fab--mini" aria-label="Favorite">
53+
<div class="mdc-fab__ripple"></div>
5254
<svg xmlns="http://www.w3.org/2000/svg" class="mdc-fab__icon" viewBox="0 0 24 24" fill="#000000">
5355
<path fill="none" d="M0 0h24v24H0z"/>
5456
<path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,18 +44,21 @@
4444
<div class="test-layout">
4545
<div class="test-cell test-cell--fab-extended">
4646
<button class="mdc-fab mdc-fab--extended custom-fab--extended-padding-and-icon-size" aria-label="Create">
47+
<div class="mdc-fab__ripple"></div>
4748
<span class="material-icons mdc-fab__icon">add</span>
4849
<span class="mdc-fab__label">Create</span>
4950
</button>
5051
</div>
5152
<div class="test-cell test-cell--fab-extended">
5253
<button class="mdc-fab mdc-fab--extended custom-fab--extended-padding" aria-label="Create">
54+
<div class="mdc-fab__ripple"></div>
5355
<span class="mdc-fab__label">Create</span>
5456
<span class="material-icons mdc-fab__icon">add</span>
5557
</button>
5658
</div>
5759
<div class="test-cell test-cell--fab-extended">
5860
<button class="mdc-fab mdc-fab--extended custom-fab--extended-label-padding" aria-label="Create">
61+
<div class="mdc-fab__ripple"></div>
5962
<span class="mdc-fab__label">Create</span>
6063
</button>
6164
</div>

‎test/screenshot/spec/mdc-fab/mixins/extended-shape-radius.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,18 +44,21 @@
4444
<div class="test-layout">
4545
<div class="test-cell test-cell--fab-extended">
4646
<button class="mdc-fab mdc-fab--extended custom-fab-extended-shape-radius" aria-label="Create">
47+
<div class="mdc-fab__ripple"></div>
4748
<span class="material-icons mdc-fab__icon">add</span>
4849
<span class="mdc-fab__label">Create</span>
4950
</button>
5051
</div>
5152
<div class="test-cell test-cell--fab-extended">
5253
<button class="mdc-fab mdc-fab--extended custom-fab-extended-shape-radius" aria-label="Create">
54+
<div class="mdc-fab__ripple"></div>
5355
<span class="mdc-fab__label">Create</span>
5456
<span class="material-icons mdc-fab__icon">add</span>
5557
</button>
5658
</div>
5759
<div class="test-cell test-cell--fab-extended">
5860
<button class="mdc-fab mdc-fab--extended custom-fab-extended-shape-radius" aria-label="Create">
61+
<div class="mdc-fab__ripple"></div>
5962
<span class="mdc-fab__label">Create</span>
6063
</button>
6164
</div>

‎test/screenshot/spec/mdc-fab/mixins/shape-radius.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,13 @@
4444
<div class="test-layout">
4545
<div class="test-cell test-cell--fab">
4646
<button class="mdc-fab custom-fab-shape-radius" aria-label="Favorite">
47+
<div class="mdc-fab__ripple"></div>
4748
<span class="mdc-fab__icon material-icons">favorite_border</span>
4849
</button>
4950
</div>
5051
<div class="test-cell test-cell--fab">
5152
<button class="mdc-fab custom-fab-shape-radius" aria-label="Favorite">
53+
<div class="mdc-fab__ripple"></div>
5254
<svg xmlns="http://www.w3.org/2000/svg" class="mdc-fab__icon" viewBox="0 0 24 24" fill="#000000">
5355
<path fill="none" d="M0 0h24v24H0z"/>
5456
<path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>

‎test/screenshot/spec/mdc-shape/variables/override.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,14 @@
4343
<div class="test-layout">
4444
<div class="test-cell test-cell--fab">
4545
<button class="mdc-fab" aria-label="Favorite">
46+
<div class="mdc-fab__ripple"></div>
4647
<span class="mdc-fab__icon material-icons">favorite_border</span>
4748
</button>
4849
</div>
4950

5051
<div class="test-cell test-cell--fab">
5152
<button class="mdc-fab mdc-fab--extended" aria-label="Create">
53+
<div class="mdc-fab__ripple"></div>
5254
<span class="material-icons mdc-fab__icon">add</span>
5355
<span class="mdc-fab__label">Create</span>
5456
</button>

0 commit comments

Comments
 (0)