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.

Author: crisbeto

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",

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

@@ -28,6 +28,12 @@
     @include mdc-snackbar-core-styles($query: $mat-theme-styles-query);
   }
 
+  // Usually this color is provided by the `mdc-snackbar-core-styles` mixin, but our styles
+  // to handle unthemed buttons have a higher specificity so we have to re-provide it here.
+  .mat-mdc-snack-bar-container .mat-mdc-snack-bar-action.mdc-snackbar__action {
+    color: $mdc-snackbar-action-ink-color;
+  }
+
   $mdc-snackbar-fill-color: $orig-mdc-snackbar-fill-color !global;
   $mdc-snackbar-label-ink-color: $orig-mdc-snackbar-label-ink-color !global;
   $mdc-snackbar-dismiss-ink-color: $orig-mdc-snackbar-dismiss-ink-color !global;

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';