Skip to content

Commit b0adc58

Browse files
committed
fix(material-experimental/mdc-snack-bar): use MDC-based button
Switches the MDC-based snack bar to use the MDC-based button. In general we should be using the MDC versions of components together, when possible.
1 parent 71b7b15 commit b0adc58

File tree

5 files changed

+16
-5
lines changed

5 files changed

+16
-5
lines changed

src/material-experimental/mdc-snack-bar/BUILD.bazel

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ ng_module(
2222
module_name = "@angular/material-experimental/mdc-snack-bar",
2323
deps = [
2424
"//src:dev_mode_types",
25+
"//src/material-experimental/mdc-button",
2526
"//src/material-experimental/mdc-core",
2627
"//src/material/snack-bar",
2728
"@npm//@angular/core",
@@ -76,7 +77,10 @@ ng_test_library(
7677

7778
ng_web_test_suite(
7879
name = "unit_tests",
79-
static_files = ["@npm//:node_modules/@material/snackbar/dist/mdc.snackbar.js"],
80+
static_files = [
81+
"@npm//:node_modules/@material/snackbar/dist/mdc.snackbar.js",
82+
"@npm//:node_modules/@material/ripple/dist/mdc.ripple.js",
83+
],
8084
deps = [
8185
":unit_test_sources",
8286
"//src/material-experimental:mdc_require_config.js",

src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,12 @@
2828
@include mdc-snackbar-core-styles($query: $mat-theme-styles-query);
2929
}
3030

31+
// Usually this color is provided by the `mdc-snackbar-core-styles` mixin, but our styles
32+
// to handle unthemed buttons have a higher specificity so we have to re-provide it here.
33+
.mat-mdc-snack-bar-container .mat-mdc-snack-bar-action.mdc-snackbar__action {
34+
color: $mdc-snackbar-action-ink-color;
35+
}
36+
3137
$mdc-snackbar-fill-color: $orig-mdc-snackbar-fill-color !global;
3238
$mdc-snackbar-label-ink-color: $orig-mdc-snackbar-label-ink-color !global;
3339
$mdc-snackbar-dismiss-ink-color: $orig-mdc-snackbar-dismiss-ink-color !global;

src/material-experimental/mdc-snack-bar/module.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {OverlayModule} from '@angular/cdk/overlay';
1010
import {PortalModule} from '@angular/cdk/portal';
1111
import {CommonModule} from '@angular/common';
1212
import {NgModule} from '@angular/core';
13-
import {MatButtonModule} from '@angular/material/button';
13+
import {MatButtonModule} from '@angular/material-experimental/mdc-button';
1414
import {MatCommonModule} from '@angular/material-experimental/mdc-core';
1515

1616
import {MatSimpleSnackBar} from './simple-snack-bar';

src/material-experimental/mdc-snack-bar/snack-bar.spec.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ describe('MatSnackBar', () => {
201201
expect(messageElement.textContent)
202202
.toContain(simpleMessage, `Expected the snack bar message to be '${simpleMessage}'`);
203203

204-
let buttonElement = overlayContainerElement.querySelector('button.mat-button')!;
204+
let buttonElement = overlayContainerElement.querySelector('button.mat-mdc-button')!;
205205
expect(buttonElement.tagName)
206206
.toBe('BUTTON', 'Expected snack bar action label to be a <button>');
207207
expect((buttonElement.textContent || '').trim())
@@ -224,7 +224,7 @@ describe('MatSnackBar', () => {
224224
let messageElement = overlayContainerElement.querySelector('mat-mdc-snack-bar-container')!;
225225
expect(messageElement.textContent)
226226
.toContain(simpleMessage, `Expected the snack bar message to be '${simpleMessage}'`);
227-
expect(overlayContainerElement.querySelector('button.mat-button'))
227+
expect(overlayContainerElement.querySelector('button.mat-mdc-button'))
228228
.toBeNull('Expected the query selection for action label to be null');
229229
});
230230

@@ -363,7 +363,7 @@ describe('MatSnackBar', () => {
363363
snackBarRef.onAction().subscribe({complete: actionCompleteSpy});
364364

365365
let actionButton =
366-
overlayContainerElement.querySelector('button.mat-button') as HTMLButtonElement;
366+
overlayContainerElement.querySelector('button.mat-mdc-button') as HTMLButtonElement;
367367
actionButton.click();
368368
viewContainerFixture.detectChanges();
369369
flush();

src/material-experimental/mdc-snack-bar/testing/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ ng_web_test_suite(
3434
name = "unit_tests",
3535
static_files = [
3636
"@npm//:node_modules/@material/snackbar/dist/mdc.snackbar.js",
37+
"@npm//:node_modules/@material/ripple/dist/mdc.ripple.js",
3738
],
3839
deps = [
3940
":unit_tests_lib",

0 commit comments

Comments
 (0)