Skip to content

Commit eef57f6

Browse files
crisbetojelbourn
authored andcommitted
fix(snack-bar): allow multi-line text (#3626)
* Wraps multi-line text, instead of truncating it, inside of snack bars. **Note:** While the spec only mentions multi-line text on mobile, this seems to be a better approach than cutting it off at ~500px. We can revisit this if we start using media queries. * Aligns the snack bar button margin to the spec. * Simplifies some of the CSS to remove the need for a hardcoded height and negative margins. Fixes #1951.
1 parent edf01c0 commit eef57f6

File tree

4 files changed

+12
-20
lines changed

4 files changed

+12
-20
lines changed
+1-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
<span class="mat-simple-snackbar-message">{{message}}</span>
1+
{{message}}
22
<button class="mat-simple-snackbar-action" *ngIf="hasAction" (click)="dismiss()">{{action}}</button>

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

+4-7
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
@import '../core/style/button-common';
33
@import '../core/style/list-common';
44

5+
$mat-snack-bar-button-margin: 48px !default;
6+
57
:host {
68
display: flex;
79
justify-content: space-between;
@@ -13,20 +15,15 @@
1315
}
1416
}
1517

16-
.mat-simple-snackbar-message {
17-
@include mat-truncate-line;
18-
}
19-
2018
.mat-simple-snackbar-action {
2119
@include mat-button-reset;
2220

2321
background: none;
24-
margin: -5px 0 0;
25-
padding: 5px;
2622
text-transform: uppercase;
2723
color: inherit;
28-
line-height: inherit;
24+
line-height: 1;
2925
flex-shrink: 0;
26+
margin-left: $mat-snack-bar-button-margin;
3027
font: {
3128
family: inherit;
3229
size: inherit;

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

-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
@import '../core/a11y/a11y';
33

44
$mat-snack-bar-padding: 14px 24px !default;
5-
$mat-snack-bar-height: 20px !default;
65
$mat-snack-bar-min-width: 288px !default;
76
$mat-snack-bar-max-width: 568px !default;
87

@@ -13,10 +12,8 @@ $mat-snack-bar-max-width: 568px !default;
1312
border-radius: 2px;
1413
box-sizing: content-box;
1514
display: block;
16-
height: $mat-snack-bar-height;
1715
max-width: $mat-snack-bar-max-width;
1816
min-width: $mat-snack-bar-min-width;
19-
overflow: hidden;
2017
padding: $mat-snack-bar-padding;
2118
// Initial transformation is applied to start snack bar out of view.
2219
transform: translateY(100%);

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

+7-9
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,9 @@ describe('MdSnackBar', () => {
7070
let snackBarRef = snackBar.open('Snack time!', 'CHEW');
7171
viewContainerFixture.detectChanges();
7272

73-
let messageElement = overlayContainerElement.querySelector('.mat-simple-snackbar-message');
74-
expect(messageElement.textContent)
75-
.toBe('Snack time!', 'Expected snack bar to show a message without a ViewContainerRef');
73+
let messageElement = overlayContainerElement.querySelector('snack-bar-container');
74+
expect(messageElement.textContent).toContain('Snack time!',
75+
'Expected snack bar to show a message without a ViewContainerRef');
7676

7777
snackBarRef.dismiss();
7878
viewContainerFixture.detectChanges();
@@ -95,10 +95,9 @@ describe('MdSnackBar', () => {
9595
expect(snackBarRef.instance.snackBarRef)
9696
.toBe(snackBarRef, 'Expected the snack bar reference to be placed in the component instance');
9797

98-
let messageElement = overlayContainerElement.querySelector('span.mat-simple-snackbar-message');
99-
expect(messageElement.tagName).toBe('SPAN', 'Expected snack bar message element to be <span>');
98+
let messageElement = overlayContainerElement.querySelector('snack-bar-container');
10099
expect(messageElement.textContent)
101-
.toBe(simpleMessage, `Expected the snack bar message to be '${simpleMessage}''`);
100+
.toContain(simpleMessage, `Expected the snack bar message to be '${simpleMessage}''`);
102101

103102
let buttonElement = overlayContainerElement.querySelector('button.mat-simple-snackbar-action');
104103
expect(buttonElement.tagName)
@@ -120,10 +119,9 @@ describe('MdSnackBar', () => {
120119
expect(snackBarRef.instance.snackBarRef)
121120
.toBe(snackBarRef, 'Expected the snack bar reference to be placed in the component instance');
122121

123-
let messageElement = overlayContainerElement.querySelector('span.mat-simple-snackbar-message');
124-
expect(messageElement.tagName).toBe('SPAN', 'Expected snack bar message element to be <span>');
122+
let messageElement = overlayContainerElement.querySelector('snack-bar-container');
125123
expect(messageElement.textContent)
126-
.toBe(simpleMessage, `Expected the snack bar message to be '${simpleMessage}''`);
124+
.toContain(simpleMessage, `Expected the snack bar message to be '${simpleMessage}''`);
127125
expect(overlayContainerElement.querySelector('button.mat-simple-snackbar-action'))
128126
.toBeNull('Expected the query selection for action label to be null');
129127
});

0 commit comments

Comments
 (0)