diff --git a/src/lib/snack-bar/simple-snack-bar.html b/src/lib/snack-bar/simple-snack-bar.html index caf229d516c6..52d14fb40b35 100644 --- a/src/lib/snack-bar/simple-snack-bar.html +++ b/src/lib/snack-bar/simple-snack-bar.html @@ -1,2 +1,2 @@ -{{message}} +{{message}} diff --git a/src/lib/snack-bar/simple-snack-bar.scss b/src/lib/snack-bar/simple-snack-bar.scss index 1610d7f64515..94a73c4c4880 100644 --- a/src/lib/snack-bar/simple-snack-bar.scss +++ b/src/lib/snack-bar/simple-snack-bar.scss @@ -2,6 +2,8 @@ @import '../core/style/button-common'; @import '../core/style/list-common'; +$mat-snack-bar-button-margin: 48px !default; + :host { display: flex; justify-content: space-between; @@ -13,20 +15,15 @@ } } -.mat-simple-snackbar-message { - @include mat-truncate-line; -} - .mat-simple-snackbar-action { @include mat-button-reset; background: none; - margin: -5px 0 0; - padding: 5px; text-transform: uppercase; color: inherit; - line-height: inherit; + line-height: 1; flex-shrink: 0; + margin-left: $mat-snack-bar-button-margin; font: { family: inherit; size: inherit; diff --git a/src/lib/snack-bar/snack-bar-container.scss b/src/lib/snack-bar/snack-bar-container.scss index 7b8748a805b4..3617296df813 100644 --- a/src/lib/snack-bar/snack-bar-container.scss +++ b/src/lib/snack-bar/snack-bar-container.scss @@ -2,7 +2,6 @@ @import '../core/a11y/a11y'; $mat-snack-bar-padding: 14px 24px !default; -$mat-snack-bar-height: 20px !default; $mat-snack-bar-min-width: 288px !default; $mat-snack-bar-max-width: 568px !default; @@ -13,10 +12,8 @@ $mat-snack-bar-max-width: 568px !default; border-radius: 2px; box-sizing: content-box; display: block; - height: $mat-snack-bar-height; max-width: $mat-snack-bar-max-width; min-width: $mat-snack-bar-min-width; - overflow: hidden; padding: $mat-snack-bar-padding; // Initial transformation is applied to start snack bar out of view. transform: translateY(100%); diff --git a/src/lib/snack-bar/snack-bar.spec.ts b/src/lib/snack-bar/snack-bar.spec.ts index 2eef079ec69a..4a6b4d670bde 100644 --- a/src/lib/snack-bar/snack-bar.spec.ts +++ b/src/lib/snack-bar/snack-bar.spec.ts @@ -70,9 +70,9 @@ describe('MdSnackBar', () => { let snackBarRef = snackBar.open('Snack time!', 'CHEW'); viewContainerFixture.detectChanges(); - let messageElement = overlayContainerElement.querySelector('.mat-simple-snackbar-message'); - expect(messageElement.textContent) - .toBe('Snack time!', 'Expected snack bar to show a message without a ViewContainerRef'); + let messageElement = overlayContainerElement.querySelector('snack-bar-container'); + expect(messageElement.textContent).toContain('Snack time!', + 'Expected snack bar to show a message without a ViewContainerRef'); snackBarRef.dismiss(); viewContainerFixture.detectChanges(); @@ -95,10 +95,9 @@ describe('MdSnackBar', () => { expect(snackBarRef.instance.snackBarRef) .toBe(snackBarRef, 'Expected the snack bar reference to be placed in the component instance'); - let messageElement = overlayContainerElement.querySelector('span.mat-simple-snackbar-message'); - expect(messageElement.tagName).toBe('SPAN', 'Expected snack bar message element to be '); + let messageElement = overlayContainerElement.querySelector('snack-bar-container'); expect(messageElement.textContent) - .toBe(simpleMessage, `Expected the snack bar message to be '${simpleMessage}''`); + .toContain(simpleMessage, `Expected the snack bar message to be '${simpleMessage}''`); let buttonElement = overlayContainerElement.querySelector('button.mat-simple-snackbar-action'); expect(buttonElement.tagName) @@ -120,10 +119,9 @@ describe('MdSnackBar', () => { expect(snackBarRef.instance.snackBarRef) .toBe(snackBarRef, 'Expected the snack bar reference to be placed in the component instance'); - let messageElement = overlayContainerElement.querySelector('span.mat-simple-snackbar-message'); - expect(messageElement.tagName).toBe('SPAN', 'Expected snack bar message element to be '); + let messageElement = overlayContainerElement.querySelector('snack-bar-container'); expect(messageElement.textContent) - .toBe(simpleMessage, `Expected the snack bar message to be '${simpleMessage}''`); + .toContain(simpleMessage, `Expected the snack bar message to be '${simpleMessage}''`); expect(overlayContainerElement.querySelector('button.mat-simple-snackbar-action')) .toBeNull('Expected the query selection for action label to be null'); });