diff --git a/src/material-experimental/mdc-snack-bar/BUILD.bazel b/src/material-experimental/mdc-snack-bar/BUILD.bazel index bdf80ba2c8b7..927be99e3511 100644 --- a/src/material-experimental/mdc-snack-bar/BUILD.bazel +++ b/src/material-experimental/mdc-snack-bar/BUILD.bazel @@ -22,6 +22,7 @@ ng_module( module_name = "@angular/material-experimental/mdc-snack-bar", deps = [ "//src:dev_mode_types", + "//src/material-experimental/mdc-button", "//src/material-experimental/mdc-core", "//src/material/snack-bar", "@npm//@angular/core", @@ -77,7 +78,10 @@ ng_test_library( ng_web_test_suite( name = "unit_tests", - static_files = ["@npm//:node_modules/@material/snackbar/dist/mdc.snackbar.js"], + static_files = [ + "@npm//:node_modules/@material/snackbar/dist/mdc.snackbar.js", + "@npm//:node_modules/@material/ripple/dist/mdc.ripple.js", + ], deps = [ ":unit_test_sources", "//src/material-experimental:mdc_require_config.js", diff --git a/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss b/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss index f2904b37b9c3..37b7ff1c5ae5 100644 --- a/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss +++ b/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss @@ -36,10 +36,16 @@ $mdc-snackbar-label-ink-color: $orig-mdc-snackbar-label-ink-color !global; $mdc-snackbar-dismiss-ink-color: $orig-mdc-snackbar-dismiss-ink-color !global; - .mat-mdc-simple-snack-bar .mdc-snackbar__action { + // The extra level of nesting here is to increase the specificity. + .mat-mdc-simple-snack-bar .mat-mdc-snack-bar-actions .mdc-snackbar__action { $is-dark-theme: map.get($config, is-dark); $accent: map.get($config, accent); color: if($is-dark-theme, inherit, theming.color($accent, text)); + + .mat-ripple-element { + background-color: currentColor; + opacity: 0.1; + } } } diff --git a/src/material-experimental/mdc-snack-bar/module.ts b/src/material-experimental/mdc-snack-bar/module.ts index 70de7103aa51..8c1a8d6b0706 100644 --- a/src/material-experimental/mdc-snack-bar/module.ts +++ b/src/material-experimental/mdc-snack-bar/module.ts @@ -10,7 +10,7 @@ import {OverlayModule} from '@angular/cdk/overlay'; import {PortalModule} from '@angular/cdk/portal'; import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {MatButtonModule} from '@angular/material/button'; +import {MatButtonModule} from '@angular/material-experimental/mdc-button'; import {MatCommonModule} from '@angular/material-experimental/mdc-core'; import {MatSimpleSnackBar} from './simple-snack-bar'; diff --git a/src/material-experimental/mdc-snack-bar/snack-bar.spec.ts b/src/material-experimental/mdc-snack-bar/snack-bar.spec.ts index e485934eeeee..16a7e708a467 100644 --- a/src/material-experimental/mdc-snack-bar/snack-bar.spec.ts +++ b/src/material-experimental/mdc-snack-bar/snack-bar.spec.ts @@ -226,7 +226,7 @@ describe('MatSnackBar', () => { expect(messageElement.textContent) .toContain(simpleMessage, `Expected the snack bar message to be '${simpleMessage}'`); - let buttonElement = overlayContainerElement.querySelector('button.mat-button')!; + let buttonElement = overlayContainerElement.querySelector('button.mat-mdc-button')!; expect(buttonElement.tagName) .toBe('BUTTON', 'Expected snack bar action label to be a