From c4df18376c4e9f39200ecde6f9a2df414218bd17 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Fri, 26 Feb 2021 18:34:19 +0100
Subject: [PATCH] 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.

Fixes #22024
---
 src/material-experimental/mdc-snack-bar/BUILD.bazel       | 6 +++++-
 .../mdc-snack-bar/_snack-bar-theme.scss                   | 8 +++++++-
 src/material-experimental/mdc-snack-bar/module.ts         | 2 +-
 src/material-experimental/mdc-snack-bar/snack-bar.spec.ts | 6 +++---
 .../mdc-snack-bar/testing/BUILD.bazel                     | 1 +
 5 files changed, 17 insertions(+), 6 deletions(-)

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 <button>');
     expect((buttonElement.textContent || '').trim())
@@ -249,7 +249,7 @@ describe('MatSnackBar', () => {
     let messageElement = overlayContainerElement.querySelector('mat-mdc-snack-bar-container')!;
     expect(messageElement.textContent)
         .toContain(simpleMessage, `Expected the snack bar message to be '${simpleMessage}'`);
-    expect(overlayContainerElement.querySelector('button.mat-button'))
+    expect(overlayContainerElement.querySelector('button.mat-mdc-button'))
         .toBeNull('Expected the query selection for action label to be null');
   });
 
@@ -388,7 +388,7 @@ describe('MatSnackBar', () => {
         snackBarRef.onAction().subscribe({complete: actionCompleteSpy});
 
         let actionButton =
-            overlayContainerElement.querySelector('button.mat-button') as HTMLButtonElement;
+            overlayContainerElement.querySelector('button.mat-mdc-button') as HTMLButtonElement;
         actionButton.click();
         viewContainerFixture.detectChanges();
         flush();
diff --git a/src/material-experimental/mdc-snack-bar/testing/BUILD.bazel b/src/material-experimental/mdc-snack-bar/testing/BUILD.bazel
index 9904be14da77..087b35ff364c 100644
--- a/src/material-experimental/mdc-snack-bar/testing/BUILD.bazel
+++ b/src/material-experimental/mdc-snack-bar/testing/BUILD.bazel
@@ -34,6 +34,7 @@ ng_web_test_suite(
     name = "unit_tests",
     static_files = [
         "@npm//:node_modules/@material/snackbar/dist/mdc.snackbar.js",
+        "@npm//:node_modules/@material/ripple/dist/mdc.ripple.js",
     ],
     deps = [
         ":unit_tests_lib",