Skip to content

Commit 56a9fc3

Browse files
annieywannieyw
authored
fix(material-experimental/mdc-button): apply appropriate focus/actives styles to FAB (#22049)
1 parent 7161587 commit 56a9fc3

File tree

4 files changed

+27
-24
lines changed

4 files changed

+27
-24
lines changed

‎src/dev-app/mdc-button/mdc-button-demo.html‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,12 @@ <h4 class="demo-section-header">Buttons</h4>
1111
<button mat-mini-fab>
1212
<mat-icon>check</mat-icon>
1313
</button>
14+
<button mat-fab extended>Search</button>
15+
<button mat-fab extended>
16+
<mat-icon>check</mat-icon>
17+
Search
18+
<mat-icon iconPositionEnd>check</mat-icon>
19+
</button>
1420
</section>
1521
<section>
1622
<button mat-button disabled>normal</button>
@@ -23,6 +29,12 @@ <h4 class="demo-section-header">Buttons</h4>
2329
<button mat-mini-fab disabled>
2430
<mat-icon>check</mat-icon>
2531
</button>
32+
<button mat-fab extended disabled>Search</button>
33+
<button mat-fab extended disabled>
34+
<mat-icon>check</mat-icon>
35+
Search
36+
<mat-icon iconPositionEnd>check</mat-icon>
37+
</button>
2638
</section>
2739

2840
<h4 class="demo-section-header">Anchors</h4>
@@ -41,6 +53,7 @@ <h4 class="demo-section-header">Anchors</h4>
4153
<a href="//www.google.com" mat-fab extended>
4254
<mat-icon>check</mat-icon>
4355
Search
56+
<mat-icon iconPositionEnd>check</mat-icon>
4457
</a>
4558
</section>
4659
<section>
@@ -58,6 +71,7 @@ <h4 class="demo-section-header">Anchors</h4>
5871
<a href="//www.google.com" disabled mat-fab extended>
5972
<mat-icon>check</mat-icon>
6073
Search
74+
<mat-icon iconPositionEnd>check</mat-icon>
6175
</a>
6276
</section>
6377

@@ -155,23 +169,6 @@ <h4 class="demo-section-header">Fab Buttons [mat-fab]</h4>
155169
</button>
156170
</section>
157171

158-
<h4 class="demo-section-header">Extended Fab Buttons</h4>
159-
<section>
160-
<button mat-fab extended>Extended</button>
161-
<button mat-fab extended color="primary">Extended</button>
162-
<button mat-fab extended color="accent">Extended</button>
163-
<button mat-fab extended color="warn">Extended</button>
164-
<button mat-fab extended>
165-
<mat-icon>home</mat-icon>
166-
Extended
167-
</button>
168-
<button mat-fab extended>
169-
<mat-icon>home</mat-icon>
170-
Extended
171-
<mat-icon iconPositionEnd>favorite</mat-icon>
172-
</button>
173-
</section>
174-
175172
<h4 class="demo-section-header"> Mini Fab Buttons [mat-mini-fab]</h4>
176173
<section>
177174
<button mat-mini-fab>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
// ripple and state container so that they fill the button, match the border radius, and avoid
77
// pointer events.
88
@mixin mat-private-button-interactive() {
9-
.mdc-button__ripple::before, .mdc-button__ripple::after {
9+
.mdc-button__ripple::before, .mdc-button__ripple::after,
10+
.mdc-fab__ripple::before, .mdc-fab__ripple::after {
1011
content: '';
1112
pointer-events: none;
1213
position: absolute;
@@ -20,7 +21,7 @@
2021
}
2122

2223
// The ripple container should match the bounds of the entire button.
23-
.mat-mdc-button-ripple, .mdc-button__ripple {
24+
.mat-mdc-button-ripple, .mdc-button__ripple, .mdc-fab__ripple {
2425
@include layout-common.fill;
2526

2627
// Disable pointer events for the ripple container and state overlay because the container

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
// ::after for state interactions (hover, active, focus). Their API calls this their
1313
// "ripple target", but we do not use it as our ripple, just state color.
1414
$mat-button-state-target: '.mdc-button__ripple';
15+
$mat-fab-state-target: '.mdc-fab__ripple';
1516

1617
// Applies the disabled theme color to the text color.
1718
@mixin _mat-button-disabled-color() {
@@ -213,11 +214,11 @@ $mat-button-state-target: '.mdc-button__ripple';
213214
@include mdc-helpers.mat-using-mdc-theme($config) {
214215
.mat-mdc-fab, .mat-mdc-mini-fab {
215216
@include mdc-states(
216-
$query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
217+
$query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-fab-state-target);
217218

218219
&.mat-unthemed {
219220
@include mdc-states-base-color(mdc-helpers.$mdc-theme-on-surface,
220-
$query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
221+
$query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-fab-state-target);
221222
@include mdc-fab-container-color(mdc-helpers.$mdc-theme-surface,
222223
$query: mdc-helpers.$mat-theme-styles-query);
223224
@include mdc-fab-ink-color(mdc-helpers.$mdc-theme-on-surface,
@@ -226,23 +227,23 @@ $mat-button-state-target: '.mdc-button__ripple';
226227

227228
&.mat-primary {
228229
@include mdc-states-base-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query,
229-
$ripple-target: $mat-button-state-target);
230+
$ripple-target: $mat-fab-state-target);
230231
@include mdc-fab-container-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
231232
@include mdc-fab-ink-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query);
232233
@include _mat-button-ripple-ink-color(on-primary);
233234
}
234235

235236
&.mat-accent {
236237
@include mdc-states-base-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query,
237-
$ripple-target: $mat-button-state-target);
238+
$ripple-target: $mat-fab-state-target);
238239
@include mdc-fab-container-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
239240
@include mdc-fab-ink-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query);
240241
@include _mat-button-ripple-ink-color(on-secondary);
241242
}
242243

243244
&.mat-warn {
244245
@include mdc-states-base-color(on-error, $query: mdc-helpers.$mat-theme-styles-query,
245-
$ripple-target: $mat-button-state-target);
246+
$ripple-target: $mat-fab-state-target);
246247
@include mdc-fab-container-color(error, $query: mdc-helpers.$mat-theme-styles-query);
247248
@include mdc-fab-ink-color(on-error, $query: mdc-helpers.$mat-theme-styles-query);
248249
@include _mat-button-ripple-ink-color(on-error);

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,8 @@ export class MatFabAnchor extends MatAnchor {
147147
// The FAB by default has its color set to accent.
148148
color = 'accent' as ThemePalette;
149149

150+
_isFab = true;
151+
150152
private _extended: boolean;
151153
get extended(): boolean { return this._extended; }
152154
set extended(value: boolean) { this._extended = coerceBooleanProperty(value); }
@@ -180,6 +182,8 @@ export class MatMiniFabAnchor extends MatAnchor {
180182
// The FAB by default has its color set to accent.
181183
color = 'accent' as ThemePalette;
182184

185+
_isFab = true;
186+
183187
constructor(
184188
elementRef: ElementRef, platform: Platform, ngZone: NgZone,
185189
@Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {

0 commit comments

Comments
 (0)