Skip to content

Commit 070d0a5

Browse files
andrewseguinmmalerba
andrewseguin
authored and
mmalerba
committed
fix(material-experimental/mdc): use state container for button interaction (#17284)
(cherry picked from commit ae682d8)
1 parent 4380179 commit 070d0a5

File tree

6 files changed

+52
-31
lines changed

6 files changed

+52
-31
lines changed

‎src/material-experimental/mdc-button/_button-base.scss

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
@import '../../material/core/style/layout-common';
22

3-
// Adds a `before` pseudo element that acts as an overlay indicator for interaction states
4-
// such as focus, hover, and active.
3+
// Adds styles necessary to provide stateful interactions with the button. This includes providing
4+
// content for the state container's ::before and ::after so that they can be given a background
5+
// color and opacity for states like hover, active, and focus. Additionally, adds styles to the
6+
// ripple and state container so that they fill the button, match the border radius, and avoid
7+
// pointer events.
58
@mixin _mat-button-interactive() {
6-
&::before, &::after {
9+
.mat-mdc-button-state::before, .mat-mdc-button-state::after {
710
content: '';
811
pointer-events: none;
912
position: absolute;
@@ -15,21 +18,17 @@
1518
border-radius: inherit;
1619
@content;
1720
}
18-
}
1921

20-
// The ripple container should match the bounds of the entire button.
21-
// Increase specificity for the ripple container because ripple styles are part of
22-
// the `mat-core` mixin and can potentially overwrite the absolute position of the container.
23-
@mixin _mat-button-ripple-position() {
24-
.mat-mdc-button-ripple {
22+
// The ripple container should match the bounds of the entire button.
23+
.mat-mdc-button-ripple, .mat-mdc-button-state {
2524
@include mat-fill;
2625

27-
// Disable pointer events for the ripple container and focus overlay because the container
26+
// Disable pointer events for the ripple container and state overlay because the container
2827
// will overlay the user content and we don't want to disable mouse events on the user content.
2928
// Pointer events can be safely disabled because the ripple trigger element is the host element.
3029
pointer-events: none;
3130

32-
// Inherit the border radius from the parent so that focus overlay and ripples don't exceed the
31+
// Inherit the border radius from the parent so that state overlay and ripples don't exceed the
3332
// parent button boundaries. Note that an inherited border radius does not work properly if
3433
// the actual button element does have a border because it causes the inner content to be
3534
// smaller. We have special logic for stroked buttons to handle this scenario.

‎src/material-experimental/mdc-button/_mdc-button.scss

Lines changed: 40 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@
66
@import '../../material/core/ripple/ripple';
77
@import '../mdc-helpers/mdc-helpers';
88

9+
// Selector for the element that has a background color and opacity applied to its ::before and
10+
// ::after for state interactions (hover, active, focus). Their API calls this their
11+
// "ripple target", but we do not use it as our ripple, just state color.
12+
$mat-button-state-target: '.mat-mdc-button-state';
13+
914
// Applies the disabled theme color to the text color.
1015
@mixin _mat-button-disabled-color() {
1116
@include mdc-theme-prop(color,
@@ -49,7 +54,8 @@
4954
// Add state interactions for hover, focus, press, active. Colors are changed based on
5055
// the mixin mdc-states-base-color
5156
.mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-unelevated-button, .mat-mdc-outlined-button {
52-
@include mdc-states($query: $mat-theme-styles-query);
57+
@include mdc-states(
58+
$query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
5359
}
5460

5561
.mat-mdc-button, .mat-mdc-outlined-button {
@@ -59,19 +65,22 @@
5965

6066
&.mat-primary {
6167
@include mdc-button-ink-color(primary, $query: $mat-theme-styles-query);
62-
@include mdc-states-base-color(primary, $query: $mat-theme-styles-query);
68+
@include mdc-states-base-color(
69+
primary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
6370
@include _mat-button-ripple-ink-color(primary);
6471
}
6572

6673
&.mat-accent {
6774
@include mdc-button-ink-color(secondary, $query: $mat-theme-styles-query);
68-
@include mdc-states-base-color(secondary, $query: $mat-theme-styles-query);
75+
@include mdc-states-base-color(
76+
secondary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
6977
@include _mat-button-ripple-ink-color(secondary);
7078
}
7179

7280
&.mat-warn {
7381
@include mdc-button-ink-color(error, $query: $mat-theme-styles-query);
74-
@include mdc-states-base-color(error, $query: $mat-theme-styles-query);
82+
@include mdc-states-base-color(
83+
error, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
7584
@include _mat-button-ripple-ink-color(error);
7685
}
7786
}
@@ -82,27 +91,32 @@
8291
@include mdc-button-container-fill-color(
8392
$mdc-theme-surface, $query: $mat-theme-styles-query);
8493
@include mdc-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
85-
@include mdc-states-base-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
94+
@include mdc-states-base-color(
95+
$mdc-theme-on-surface, $query: $mat-theme-styles-query,
96+
$ripple-target: $mat-button-state-target);
8697
}
8798

8899
&.mat-primary {
89100
@include mdc-button-container-fill-color(primary, $query: $mat-theme-styles-query);
90101
@include mdc-button-ink-color(on-primary, $query: $mat-theme-styles-query);
91-
@include mdc-states-base-color(on-primary, $query: $mat-theme-styles-query);
102+
@include mdc-states-base-color(
103+
on-primary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
92104
@include _mat-button-ripple-ink-color(on-primary);
93105
}
94106

95107
&.mat-accent {
96108
@include mdc-button-container-fill-color(secondary, $query: $mat-theme-styles-query);
97109
@include mdc-button-ink-color(on-secondary, $query: $mat-theme-styles-query);
98-
@include mdc-states-base-color(on-secondary, $query: $mat-theme-styles-query);
110+
@include mdc-states-base-color(
111+
on-secondary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
99112
@include _mat-button-ripple-ink-color(on-secondary);
100113
}
101114

102115
&.mat-warn {
103116
@include mdc-button-container-fill-color(error, $query: $mat-theme-styles-query);
104117
@include mdc-button-ink-color(on-error, $query: $mat-theme-styles-query);
105-
@include mdc-states-base-color(on-error, $query: $mat-theme-styles-query);
118+
@include mdc-states-base-color(
119+
on-error, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
106120
@include _mat-button-ripple-ink-color(on-error);
107121
}
108122

@@ -162,27 +176,32 @@
162176
@include mdc-states($query: $mat-theme-styles-query);
163177

164178
&.mat-unthemed {
165-
@include mdc-states-base-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
179+
@include mdc-states-base-color(
180+
$mdc-theme-on-surface, $query: $mat-theme-styles-query,
181+
$ripple-target: $mat-button-state-target);
166182
@include mdc-fab-container-color($mdc-theme-surface, $query: $mat-theme-styles-query);
167183
@include mdc-fab-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
168184
}
169185

170186
&.mat-primary {
171-
@include mdc-states-base-color(on-primary, $query: $mat-theme-styles-query);
187+
@include mdc-states-base-color(
188+
on-primary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
172189
@include mdc-fab-container-color(primary, $query: $mat-theme-styles-query);
173190
@include mdc-fab-ink-color(on-primary, $query: $mat-theme-styles-query);
174191
@include _mat-button-ripple-ink-color(on-primary);
175192
}
176193

177194
&.mat-accent {
178-
@include mdc-states-base-color(on-secondary, $query: $mat-theme-styles-query);
195+
@include mdc-states-base-color(
196+
on-secondary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
179197
@include mdc-fab-container-color(secondary, $query: $mat-theme-styles-query);
180198
@include mdc-fab-ink-color(on-secondary, $query: $mat-theme-styles-query);
181199
@include _mat-button-ripple-ink-color(on-secondary);
182200
}
183201

184202
&.mat-warn {
185-
@include mdc-states-base-color(on-error, $query: $mat-theme-styles-query);
203+
@include mdc-states-base-color(
204+
on-error, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
186205
@include mdc-fab-container-color(error, $query: $mat-theme-styles-query);
187206
@include mdc-fab-ink-color(on-error, $query: $mat-theme-styles-query);
188207
@include _mat-button-ripple-ink-color(on-error);
@@ -211,24 +230,29 @@
211230
@include mdc-states($query: $mat-theme-styles-query);
212231

213232
&.mat-unthemed {
214-
@include mdc-states-base-color($mdc-theme-surface, $query: $mat-theme-styles-query);
233+
@include mdc-states-base-color(
234+
$mdc-theme-surface, $query: $mat-theme-styles-query,
235+
$ripple-target: $mat-button-state-target);
215236
@include mdc-icon-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
216237
}
217238

218239
&.mat-primary {
219-
@include mdc-states-base-color(primary, $query: $mat-theme-styles-query);
240+
@include mdc-states-base-color(
241+
primary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
220242
@include mdc-icon-button-ink-color(primary, $query: $mat-theme-styles-query);
221243
@include _mat-button-ripple-ink-color(primary);
222244
}
223245

224246
&.mat-accent {
225-
@include mdc-states-base-color(secondary, $query: $mat-theme-styles-query);
247+
@include mdc-states-base-color(
248+
secondary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
226249
@include mdc-icon-button-ink-color(secondary, $query: $mat-theme-styles-query);
227250
@include _mat-button-ripple-ink-color(secondary);
228251
}
229252

230253
&.mat-warn {
231-
@include mdc-states-base-color(error, $query: $mat-theme-styles-query);
254+
@include mdc-states-base-color(
255+
error, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
232256
@include mdc-icon-button-ink-color(error, $query: $mat-theme-styles-query);
233257
@include _mat-button-ripple-ink-color(error);
234258
}

‎src/material-experimental/mdc-button/button.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
<span class="mat-mdc-button-state"></span>
2+
13
<ng-content select=".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd])">
24
</ng-content>
35

‎src/material-experimental/mdc-button/button.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,6 @@
2020

2121
@include _mat-button-interactive();
2222
@include _mat-button-disabled();
23-
@include _mat-button-ripple-position();
24-
2523
}
2624

2725
// Since the stroked button has has an actual border that reduces the available space for

‎src/material-experimental/mdc-button/fab.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
.mat-mdc-fab, .mat-mdc-mini-fab {
1010
@include _mat-button-interactive();
1111
@include _mat-button-disabled();
12-
@include _mat-button-ripple-position();
1312
}
1413

1514
.mat-mdc-fab, .mat-mdc-mini-fab {

‎src/material-experimental/mdc-button/icon-button.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,4 @@
1313
border-radius: 50%;
1414

1515
@include _mat-button-disabled();
16-
@include _mat-button-ripple-position();
1716
}

0 commit comments

Comments
 (0)