Skip to content

Commit 9328f7e

Browse files
committed
Use mat-button in simple snack bar.
1 parent 877eb85 commit 9328f7e

File tree

5 files changed

+30
-15
lines changed

5 files changed

+30
-15
lines changed

src/lib/snack-bar/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ ng_module(
1212
"simple_snack_bar_css",
1313
],
1414
deps = [
15+
"//src/lib/button",
1516
"//src/lib/core",
1617
"//src/cdk/a11y",
1718
"//src/cdk/layout",
Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{{data.message}}
22

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

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

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,36 @@
22
@import '../core/style/button-common';
33
@import '../core/style/list-common';
44

5-
$mat-snack-bar-button-margin: 48px !default;
5+
$mat-snack-bar-button-horizontal-margin: 8px !default;
6+
$mat-snack-bar-button-height: 36px !default;
7+
$mat-snack-bar-line-height: 20px !default;
8+
// Button vertical margin is used to ensure that a button height of 36px, when the containing
9+
// space falls below 36px.
10+
$mat-snack-bar-button-vertical-margin:
11+
-(($mat-snack-bar-button-height - $mat-snack-bar-line-height) / 2);
612

713
.mat-simple-snackbar {
814
display: flex;
915
justify-content: space-between;
10-
line-height: 20px;
16+
line-height: $mat-snack-bar-line-height;
1117
opacity: 1;
1218
}
1319

1420
.mat-simple-snackbar-action {
15-
@include mat-button-reset;
16-
17-
background: none;
21+
display: flex;
22+
flex-direction: column;
1823
flex-shrink: 0;
19-
margin-left: $mat-snack-bar-button-margin;
24+
justify-content: space-around;
25+
margin: $mat-snack-bar-button-vertical-margin 0
26+
$mat-snack-bar-button-vertical-margin $mat-snack-bar-button-horizontal-margin;
27+
28+
button {
29+
flex: 1;
30+
max-height: $mat-snack-bar-button-height;
31+
}
2032

2133
[dir='rtl'] & {
22-
margin-right: $mat-snack-bar-button-margin;
2334
margin-left: 0;
35+
margin-right: $mat-snack-bar-button-horizontal-margin;
2436
}
2537
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {PortalModule} from '@angular/cdk/portal';
1313
import {LIVE_ANNOUNCER_PROVIDER} from '@angular/cdk/a11y';
1414
import {LayoutModule} from '@angular/cdk/layout';
1515
import {MatCommonModule} from '@angular/material/core';
16+
import {MatButtonModule} from '@angular/material/button';
1617
import {MatSnackBar, MAT_SNACK_BAR_DEFAULT_OPTIONS} from './snack-bar';
1718
import {MatSnackBarContainer} from './snack-bar-container';
1819
import {MatSnackBarConfig} from './snack-bar-config';
@@ -29,6 +30,7 @@ export function MAT_SNACK_BAR_DEFAULT_OPTIONS_PROVIDER_FACTORY() {
2930
OverlayModule,
3031
PortalModule,
3132
CommonModule,
33+
MatButtonModule,
3234
MatCommonModule,
3335
LayoutModule,
3436
],

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

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

110-
let buttonElement = overlayContainerElement.querySelector('button.mat-simple-snackbar-action')!;
110+
let buttonElement = overlayContainerElement.querySelector('button.mat-button')!;
111111
expect(buttonElement.tagName)
112112
.toBe('BUTTON', 'Expected snack bar action label to be a <button>');
113113
expect(buttonElement.textContent)
@@ -129,7 +129,7 @@ describe('MatSnackBar', () => {
129129
let messageElement = overlayContainerElement.querySelector('snack-bar-container')!;
130130
expect(messageElement.textContent)
131131
.toContain(simpleMessage, `Expected the snack bar message to be '${simpleMessage}'`);
132-
expect(overlayContainerElement.querySelector('button.mat-simple-snackbar-action'))
132+
expect(overlayContainerElement.querySelector('button.mat-button'))
133133
.toBeNull('Expected the query selection for action label to be null');
134134
});
135135

@@ -285,8 +285,8 @@ describe('MatSnackBar', () => {
285285
snackBarRef.afterDismissed().subscribe(undefined, undefined, dismissCompleteSpy);
286286
snackBarRef.onAction().subscribe(undefined, undefined, actionCompleteSpy);
287287

288-
const actionButton =
289-
overlayContainerElement.querySelector('.mat-simple-snackbar-action') as HTMLButtonElement;
288+
let actionButton =
289+
overlayContainerElement.querySelector('button.mat-button') as HTMLButtonElement;
290290
actionButton.click();
291291
viewContainerFixture.detectChanges();
292292
tick();

0 commit comments

Comments
 (0)