Use mat-button in simple snack bar. (#7506)

Author: josephperrott

src/lib/snack-bar/BUILD.bazel

@@ -12,6 +12,7 @@ ng_module(
     "simple_snack_bar_css",
   ],
   deps = [
+    "//src/lib/button",
     "//src/lib/core",
     "//src/cdk/a11y",
     "//src/cdk/layout",

src/lib/snack-bar/simple-snack-bar.html

@@ -1,6 +1,5 @@
 {{data.message}}
 
-<button
-  class="mat-simple-snackbar-action"
-  *ngIf="hasAction"
-  (click)="action()">{{data.action}}</button>
+<div class="mat-simple-snackbar-action"  *ngIf="hasAction">
+  <button mat-button (click)="action()">{{data.action}}</button>
+</div>

src/lib/snack-bar/simple-snack-bar.scss

@@ -2,24 +2,36 @@
 @import '../core/style/button-common';
 @import '../core/style/list-common';
 
-$mat-snack-bar-button-margin: 48px !default;
+$mat-snack-bar-button-horizontal-margin: 8px !default;
+$mat-snack-bar-button-height: 36px !default;
+$mat-snack-bar-line-height: 20px !default;
+// Button vertical margin is used to ensure that a button height of 36px, when the containing
+// space falls below 36px.
+$mat-snack-bar-button-vertical-margin:
+  -(($mat-snack-bar-button-height - $mat-snack-bar-line-height) / 2);
 
 .mat-simple-snackbar {
   display: flex;
   justify-content: space-between;
-  line-height: 20px;
+  line-height: $mat-snack-bar-line-height;
   opacity: 1;
 }
 
 .mat-simple-snackbar-action {
-  @include mat-button-reset;
-
-  background: none;
+  display: flex;
+  flex-direction: column;
   flex-shrink: 0;
-  margin-left: $mat-snack-bar-button-margin;
+  justify-content: space-around;
+  margin: $mat-snack-bar-button-vertical-margin 0
+          $mat-snack-bar-button-vertical-margin $mat-snack-bar-button-horizontal-margin;
+
+  button {
+    flex: 1;
+    max-height: $mat-snack-bar-button-height;
+  }
 
   [dir='rtl'] & {
-    margin-right: $mat-snack-bar-button-margin;
     margin-left: 0;
+    margin-right: $mat-snack-bar-button-horizontal-margin;
   }
 }

src/lib/snack-bar/snack-bar-module.ts

@@ -11,6 +11,7 @@ import {PortalModule} from '@angular/cdk/portal';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCommonModule} from '@angular/material/core';
+import {MatButtonModule} from '@angular/material/button';
 import {SimpleSnackBar} from './simple-snack-bar';
 import {MatSnackBar} from './snack-bar';
 import {MatSnackBarContainer} from './snack-bar-container';
@@ -21,6 +22,7 @@ import {MatSnackBarContainer} from './snack-bar-container';
     OverlayModule,
     PortalModule,
     CommonModule,
+    MatButtonModule,
     MatCommonModule,
   ],
   exports: [MatSnackBarContainer, MatCommonModule],

src/lib/snack-bar/snack-bar.spec.ts

@@ -107,7 +107,7 @@ describe('MatSnackBar', () => {
     expect(messageElement.textContent)
         .toContain(simpleMessage, `Expected the snack bar message to be '${simpleMessage}'`);
 
-    let buttonElement = overlayContainerElement.querySelector('button.mat-simple-snackbar-action')!;
+    let buttonElement = overlayContainerElement.querySelector('button.mat-button')!;
     expect(buttonElement.tagName)
         .toBe('BUTTON', 'Expected snack bar action label to be a <button>');
     expect(buttonElement.textContent)
@@ -129,7 +129,7 @@ describe('MatSnackBar', () => {
     let messageElement = overlayContainerElement.querySelector('snack-bar-container')!;
     expect(messageElement.textContent)
         .toContain(simpleMessage, `Expected the snack bar message to be '${simpleMessage}'`);
-    expect(overlayContainerElement.querySelector('button.mat-simple-snackbar-action'))
+    expect(overlayContainerElement.querySelector('button.mat-button'))
         .toBeNull('Expected the query selection for action label to be null');
   });
 
@@ -285,8 +285,8 @@ describe('MatSnackBar', () => {
       snackBarRef.afterDismissed().subscribe(undefined, undefined, dismissCompleteSpy);
       snackBarRef.onAction().subscribe(undefined, undefined, actionCompleteSpy);
 
-      const actionButton =
-        overlayContainerElement.querySelector('.mat-simple-snackbar-action') as HTMLButtonElement;
+      let actionButton =
+        overlayContainerElement.querySelector('button.mat-button') as HTMLButtonElement;
       actionButton.click();
       viewContainerFixture.detectChanges();
       tick();