Skip to content

fix(material-experimental/mdc-button): apply appropriate focus/actives styles to FAB #22049

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 2, 2021
Merged

fix(material-experimental/mdc-button): apply appropriate focus/actives styles to FAB #22049

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 14 additions & 17 deletions src/dev-app/mdc-button/mdc-button-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,12 @@ <h4 class="demo-section-header">Buttons</h4>
<button mat-mini-fab>
<mat-icon>check</mat-icon>
</button>
<button mat-fab extended>Search</button>
<button mat-fab extended>
<mat-icon>check</mat-icon>
Search
<mat-icon iconPositionEnd>check</mat-icon>
</button>
</section>
<section>
<button mat-button disabled>normal</button>
Expand All @@ -23,6 +29,12 @@ <h4 class="demo-section-header">Buttons</h4>
<button mat-mini-fab disabled>
<mat-icon>check</mat-icon>
</button>
<button mat-fab extended disabled>Search</button>
<button mat-fab extended disabled>
<mat-icon>check</mat-icon>
Search
<mat-icon iconPositionEnd>check</mat-icon>
</button>
</section>

<h4 class="demo-section-header">Anchors</h4>
Expand All @@ -41,6 +53,7 @@ <h4 class="demo-section-header">Anchors</h4>
<a href="//www.google.com" mat-fab extended>
<mat-icon>check</mat-icon>
Search
<mat-icon iconPositionEnd>check</mat-icon>
</a>
</section>
<section>
Expand All @@ -58,6 +71,7 @@ <h4 class="demo-section-header">Anchors</h4>
<a href="//www.google.com" disabled mat-fab extended>
<mat-icon>check</mat-icon>
Search
<mat-icon iconPositionEnd>check</mat-icon>
</a>
</section>

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

<h4 class="demo-section-header">Extended Fab Buttons</h4>
<section>
<button mat-fab extended>Extended</button>
<button mat-fab extended color="primary">Extended</button>
<button mat-fab extended color="accent">Extended</button>
<button mat-fab extended color="warn">Extended</button>
<button mat-fab extended>
<mat-icon>home</mat-icon>
Extended
</button>
<button mat-fab extended>
<mat-icon>home</mat-icon>
Extended
<mat-icon iconPositionEnd>favorite</mat-icon>
</button>
</section>

<h4 class="demo-section-header"> Mini Fab Buttons [mat-mini-fab]</h4>
<section>
<button mat-mini-fab>
Expand Down
5 changes: 3 additions & 2 deletions src/material-experimental/mdc-button/_button-base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
// ripple and state container so that they fill the button, match the border radius, and avoid
// pointer events.
@mixin mat-private-button-interactive() {
.mdc-button__ripple::before, .mdc-button__ripple::after {
.mdc-button__ripple::before, .mdc-button__ripple::after,
.mdc-fab__ripple::before, .mdc-fab__ripple::after {
content: '';
pointer-events: none;
position: absolute;
Expand All @@ -20,7 +21,7 @@
}

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

// Disable pointer events for the ripple container and state overlay because the container
Expand Down
11 changes: 6 additions & 5 deletions src/material-experimental/mdc-button/_button-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
// ::after for state interactions (hover, active, focus). Their API calls this their
// "ripple target", but we do not use it as our ripple, just state color.
$mat-button-state-target: '.mdc-button__ripple';
$mat-fab-state-target: '.mdc-fab__ripple';

// Applies the disabled theme color to the text color.
@mixin _mat-button-disabled-color() {
Expand Down Expand Up @@ -213,11 +214,11 @@ $mat-button-state-target: '.mdc-button__ripple';
@include mdc-helpers.mat-using-mdc-theme($config) {
.mat-mdc-fab, .mat-mdc-mini-fab {
@include mdc-states(
$query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
$query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-fab-state-target);

&.mat-unthemed {
@include mdc-states-base-color(mdc-helpers.$mdc-theme-on-surface,
$query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
$query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-fab-state-target);
@include mdc-fab-container-color(mdc-helpers.$mdc-theme-surface,
$query: mdc-helpers.$mat-theme-styles-query);
@include mdc-fab-ink-color(mdc-helpers.$mdc-theme-on-surface,
Expand All @@ -226,23 +227,23 @@ $mat-button-state-target: '.mdc-button__ripple';

&.mat-primary {
@include mdc-states-base-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query,
$ripple-target: $mat-button-state-target);
$ripple-target: $mat-fab-state-target);
@include mdc-fab-container-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
@include mdc-fab-ink-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query);
@include _mat-button-ripple-ink-color(on-primary);
}

&.mat-accent {
@include mdc-states-base-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query,
$ripple-target: $mat-button-state-target);
$ripple-target: $mat-fab-state-target);
@include mdc-fab-container-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
@include mdc-fab-ink-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query);
@include _mat-button-ripple-ink-color(on-secondary);
}

&.mat-warn {
@include mdc-states-base-color(on-error, $query: mdc-helpers.$mat-theme-styles-query,
$ripple-target: $mat-button-state-target);
$ripple-target: $mat-fab-state-target);
@include mdc-fab-container-color(error, $query: mdc-helpers.$mat-theme-styles-query);
@include mdc-fab-ink-color(on-error, $query: mdc-helpers.$mat-theme-styles-query);
@include _mat-button-ripple-ink-color(on-error);
Expand Down
4 changes: 4 additions & 0 deletions src/material-experimental/mdc-button/fab.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,8 @@ export class MatFabAnchor extends MatAnchor {
// The FAB by default has its color set to accent.
color = 'accent' as ThemePalette;

_isFab = true;

private _extended: boolean;
get extended(): boolean { return this._extended; }
set extended(value: boolean) { this._extended = coerceBooleanProperty(value); }
Expand Down Expand Up @@ -180,6 +182,8 @@ export class MatMiniFabAnchor extends MatAnchor {
// The FAB by default has its color set to accent.
color = 'accent' as ThemePalette;

_isFab = true;

constructor(
elementRef: ElementRef, platform: Platform, ngZone: NgZone,
@Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
Expand Down