diff --git a/src/demo-app/toolbar/toolbar-demo.html b/src/demo-app/toolbar/toolbar-demo.html index fa7f900c945d..db46064beaa0 100644 --- a/src/demo-app/toolbar/toolbar-demo.html +++ b/src/demo-app/toolbar/toolbar-demo.html @@ -1,40 +1,58 @@
-

- menu - Default Toolbar + + Default Toolbar - code + + +

- menu - Primary Toolbar + + Primary Toolbar - code + +

- menu - Accent Toolbar + + Accent Toolbar - code + + +

- + First Row Second Row diff --git a/src/demo-app/toolbar/toolbar-demo.scss b/src/demo-app/toolbar/toolbar-demo.scss index a433f45b5cb9..fa679ae89f1f 100644 --- a/src/demo-app/toolbar/toolbar-demo.scss +++ b/src/demo-app/toolbar/toolbar-demo.scss @@ -9,4 +9,7 @@ flex: 1 1 auto; } + button { + margin: 0 4px; + } } diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss index 661cb8015bec..149a4b6e96ed 100644 --- a/src/lib/button/_button-theme.scss +++ b/src/lib/button/_button-theme.scss @@ -76,7 +76,8 @@ $foreground: map-get($theme, foreground); .mat-button, .mat-icon-button { - background: transparent; + color: mat-color($foreground, text); + background-color: transparent; @include _mat-button-focus-color($theme); @include _mat-button-theme-color($theme, 'color'); diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss index 952889dd9a34..70b4e4009b83 100644 --- a/src/lib/button/button.scss +++ b/src/lib/button/button.scss @@ -52,7 +52,6 @@ // The text and icon should be vertical aligned inside a button .mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { - color: currentColor; .mat-button-wrapper > * { vertical-align: middle; } diff --git a/src/lib/button/button.spec.ts b/src/lib/button/button.spec.ts index 846f89563dbd..7b511eeb0818 100644 --- a/src/lib/button/button.spec.ts +++ b/src/lib/button/button.spec.ts @@ -2,7 +2,7 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; import {MatButtonModule, MatButton} from './index'; -import {MatRipple} from '@angular/material/core'; +import {MatRipple, ThemePalette} from '@angular/material/core'; describe('MatButton', () => { @@ -41,6 +41,29 @@ describe('MatButton', () => { expect(aDebugElement.nativeElement.classList).not.toContain('mat-accent'); }); + it('should mark buttons without a background color and theme as plain buttons', () => { + const fixture = TestBed.createComponent(TestApp); + const buttonDebugEl = fixture.debugElement.query(By.css('button')); + const anchorDebugEl = fixture.debugElement.query(By.css('a')); + const fabDebugEl = fixture.debugElement.query(By.css('[mat-fab]')); + + fixture.detectChanges(); + + // Buttons that have no background color and theme palette are considered as plain buttons. + expect(buttonDebugEl.nativeElement.classList).toContain('mat-plain-button'); + expect(anchorDebugEl.nativeElement.classList).toContain('mat-plain-button'); + expect(fabDebugEl.nativeElement.classList).not.toContain('mat-plain-button'); + + fixture.componentInstance.buttonColor = 'primary'; + fixture.detectChanges(); + + // Buttons that have no background color, but use an explicit theme palette, are not + // considered as plain buttons. + expect(buttonDebugEl.nativeElement.classList).not.toContain('mat-plain-button'); + expect(anchorDebugEl.nativeElement.classList).not.toContain('mat-plain-button'); + expect(fabDebugEl.nativeElement.classList).not.toContain('mat-plain-button'); + }); + it('should expose the ripple instance', () => { const fixture = TestBed.createComponent(TestApp); const button = fixture.debugElement.query(By.css('button')).componentInstance as MatButton; @@ -259,6 +282,7 @@ class TestApp { clickCount: number = 0; isDisabled: boolean = false; rippleDisabled: boolean = false; + buttonColor: ThemePalette; increment() { this.clickCount++; diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts index b68b417c3c97..d3bb04a5f3e5 100644 --- a/src/lib/button/button.ts +++ b/src/lib/button/button.ts @@ -103,6 +103,7 @@ export const _MatButtonMixinBase = mixinColor(mixinDisabled(mixinDisableRipple(M exportAs: 'matButton', host: { '[disabled]': 'disabled || null', + '[class.mat-plain-button]': '_isPlainButton()', }, templateUrl: 'button.html', styleUrls: ['button.css'], @@ -120,6 +121,9 @@ export class MatButton extends _MatButtonMixinBase /** Whether the button is icon button. */ _isIconButton: boolean = this._hasHostAttributes('mat-icon-button'); + /** Whether the button is a flat button. */ + _isFlatButton: boolean = this._hasHostAttributes('mat-button'); + /** Reference to the MatRipple instance of the button. */ @ViewChild(MatRipple) ripple: MatRipple; @@ -152,6 +156,14 @@ export class MatButton extends _MatButtonMixinBase return this.disableRipple || this.disabled; } + /** + * Whether the button is a plain button. Plain buttons are buttons without a background + * color and theme color set. + */ + _isPlainButton() { + return !this.color && (this._isIconButton || this._isFlatButton); + } + /** Gets whether the button has one of the given attributes. */ _hasHostAttributes(...attributes: string[]) { // If not on the browser, say that there are none of the attributes present. @@ -176,6 +188,7 @@ export class MatButton extends _MatButtonMixinBase '[attr.tabindex]': 'disabled ? -1 : 0', '[attr.disabled]': 'disabled || null', '[attr.aria-disabled]': 'disabled.toString()', + '[class.mat-plain-button]': '_isPlainButton()', '(click)': '_haltDisabledEvents($event)', }, inputs: ['disabled', 'disableRipple', 'color'], diff --git a/src/lib/toolbar/toolbar.scss b/src/lib/toolbar/toolbar.scss index e6b4cb21650b..f8958715a8f3 100644 --- a/src/lib/toolbar/toolbar.scss +++ b/src/lib/toolbar/toolbar.scss @@ -30,6 +30,12 @@ $mat-toolbar-row-padding: 16px !default; // Per Material specs a toolbar cannot have multiple lines inside of a single row. // Disable text wrapping inside of the toolbar. Developers are still able to overwrite it. white-space: nowrap; + + // Plain buttons (buttons without a background color and color palette) should inherit the color + // from the toolbar row, because otherwise the text will be unreadable on themed toolbars. + .mat-plain-button { + color: inherit; + } } .mat-toolbar-multiple-rows {