From b65268365ffbf7e12f8ae50c14903ea57c70d26c Mon Sep 17 00:00:00 2001 From: Joey Perrott Date: Thu, 1 Feb 2018 11:25:15 -0800 Subject: [PATCH] feat(button): create stroked and flat button variants (#9365) --- src/demo-app/button/button-demo.html | 158 ++++++++++++++------------- src/demo-app/button/button-demo.scss | 10 +- src/lib/button/_button-base.scss | 6 + src/lib/button/_button-theme.scss | 17 ++- src/lib/button/button-module.ts | 15 --- src/lib/button/button.scss | 21 +++- src/lib/button/button.ts | 81 +++++--------- 7 files changed, 156 insertions(+), 152 deletions(-) diff --git a/src/demo-app/button/button-demo.html b/src/demo-app/button/button-demo.html index bb08ba2f87b..2e260122533 100644 --- a/src/demo-app/button/button-demo.html +++ b/src/demo-app/button/button-demo.html @@ -1,113 +1,115 @@
+

Buttons

- + + - - Link - check - - - Link - check
+

Anchors

- SEARCH - SEARCH - - check - - - check - + SEARCH + SEARCH + SEARCH + SEARCH + check + check
+

Text Buttons [mat-button]

+
+

Raised Buttons [mat-raised-button]

+
+

Stroked Buttons [mat-stroked-button]

- - - + + + +
+

Flat Buttons [mat-flat-button]

- - - - - + + + +
+

Icon Buttons [mat-icon-button]

+ + + + +
+ +

Fab Buttons [mat-fab]

+
+ + + + +
+ +

Mini Fab Buttons [mat-mini-fab]

+
+ + + + +
+ +

Interaction/State

+
-

isDisabled: {{isDisabled}}, clickCounter: {{clickCounter}}

- + + + + +
+
+ + + + Button 3 + + + + - - - -
- - - off - - - - -
-
- SEARCH - -
-
- SEARCH - -
-
- - - - -
-
- - - - -
-
- -
diff --git a/src/demo-app/button/button-demo.scss b/src/demo-app/button/button-demo.scss index 2a39d15c12a..b003afb712f 100644 --- a/src/demo-app/button/button-demo.scss +++ b/src/demo-app/button/button-demo.scss @@ -14,5 +14,13 @@ p { padding: 5px 15px; } -} + .section-header { + font-weight: 500; + margin: 0; + } + + .no-flex { + display: block; + } +} diff --git a/src/lib/button/_button-base.scss b/src/lib/button/_button-base.scss index e3606174d34..ed4d2d6f40c 100644 --- a/src/lib/button/_button-base.scss +++ b/src/lib/button/_button-base.scss @@ -12,6 +12,12 @@ $mat-button-border-radius: 2px !default; $mat-button-focus-transition: opacity 200ms $swift-ease-in-out-timing-function, background-color 200ms $swift-ease-in-out-timing-function !default; +// Stroked Button standards +$mat-stroked-button-line-height: $mat-button-line-height - 2; +// Stroked button padding is 1px less horizontally than default/flat/raised +// button's padding. +$mat-stroked-button-padding: 0 15px; + // Icon Button standards $mat-icon-button-size: 40px !default; $mat-icon-button-border-radius: 50% !default; diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss index 661cb8015be..c3d961da123 100644 --- a/src/lib/button/_button-theme.scss +++ b/src/lib/button/_button-theme.scss @@ -75,7 +75,7 @@ $background: map-get($theme, background); $foreground: map-get($theme, foreground); - .mat-button, .mat-icon-button { + .mat-button, .mat-icon-button, .mat-stroked-button { background: transparent; @include _mat-button-focus-color($theme); @@ -99,6 +99,18 @@ @include _mat-button-ripple-color($theme, default, 0.1); } + .mat-flat-button { + // Default properties when not using any [color] value. + color: mat-color($foreground, text); + + background-color: mat-color($background, raised-button); + @include _mat-button-theme-color($theme, 'color', default-contrast); + @include _mat-button-theme-color($theme, 'background-color'); + + // Add ripple effect with contrast color to buttons that don't have a focus overlay. + @include _mat-button-ripple-color($theme, default-contrast); + } + // Add ripple effect with default color to the icon button. Ripple color needs to be stronger // since the icon button doesn't have a focus overlay. .mat-icon-button { @@ -107,7 +119,8 @@ } @mixin mat-button-typography($config) { - .mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab { + .mat-button, .mat-raised-button, .mat-icon-button, .mat-stroked-button, .mat-flat-button, + .mat-fab, .mat-mini-fab { font: { family: mat-font-family($config, button); size: mat-font-size($config, button); diff --git a/src/lib/button/button-module.ts b/src/lib/button/button-module.ts index 308d8472bf1..6c4715500b0 100644 --- a/src/lib/button/button-module.ts +++ b/src/lib/button/button-module.ts @@ -13,11 +13,6 @@ import {A11yModule} from '@angular/cdk/a11y'; import { MatAnchor, MatButton, - MatMiniFab, - MatButtonCssMatStyler, - MatFab, - MatIconButtonCssMatStyler, - MatRaisedButtonCssMatStyler } from './button'; @@ -31,21 +26,11 @@ import { exports: [ MatButton, MatAnchor, - MatMiniFab, - MatFab, MatCommonModule, - MatButtonCssMatStyler, - MatRaisedButtonCssMatStyler, - MatIconButtonCssMatStyler, ], declarations: [ MatButton, MatAnchor, - MatMiniFab, - MatFab, - MatButtonCssMatStyler, - MatRaisedButtonCssMatStyler, - MatIconButtonCssMatStyler, ], }) export class MatButtonModule {} diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss index 952889dd9a3..0f39d8791ba 100644 --- a/src/lib/button/button.scss +++ b/src/lib/button/button.scss @@ -13,9 +13,10 @@ } } -// Only flat buttons (not raised, FABs or icon buttons) have a hover style. +// Only flat and stroked buttons (not raised, FABs or icon buttons) have a hover style. // Use the same visual treatment for hover as for focus. -.mat-button:hover .mat-button-focus-overlay { +.mat-button:hover .mat-button-focus-overlay, +.mat-stroked-button:hover .mat-button-focus-overlay { opacity: 1; } @@ -23,6 +24,22 @@ @extend %mat-raised-button; } +.mat-stroked-button { + @extend %mat-button-base; + + @include mat-overridable-elevation(0); + + border: 1px solid currentColor; + padding: $mat-stroked-button-padding; + line-height: $mat-stroked-button-line-height; +} + +.mat-flat-button { + @extend %mat-button-base; + + @include mat-overridable-elevation(0); +} + .mat-fab { @include mat-fab($mat-fab-size, $mat-fab-padding); } diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts index b68b417c3c9..feb8840dbba 100644 --- a/src/lib/button/button.ts +++ b/src/lib/button/button.ts @@ -11,7 +11,6 @@ import {Platform} from '@angular/cdk/platform'; import { ChangeDetectionStrategy, Component, - Directive, ElementRef, OnDestroy, ViewChild, @@ -27,63 +26,25 @@ import { mixinDisableRipple } from '@angular/material/core'; - -// TODO(kara): Convert attribute selectors to classes when attr maps become available - /** Default color palette for round buttons (mat-fab and mat-mini-fab) */ const DEFAULT_ROUND_BUTTON_COLOR = 'accent'; +/** Default color palette for flat buttons (mat-flat-button) */ +const DEFAULT_FLAT_BUTTON_COLOR = 'primary'; /** - * Directive whose purpose is to add the mat- CSS styling to this selector. - * @docs-private + * List of classes to add to MatButton instances based on host attributes to + * style as different variants. */ -@Directive({ - selector: 'button[mat-button], a[mat-button]', - host: {'class': 'mat-button'} -}) -export class MatButtonCssMatStyler {} - -/** - * Directive whose purpose is to add the mat- CSS styling to this selector. - * @docs-private - */ -@Directive({ - selector: 'button[mat-raised-button], a[mat-raised-button]', - host: {'class': 'mat-raised-button'} -}) -export class MatRaisedButtonCssMatStyler {} - -/** - * Directive whose purpose is to add the mat- CSS styling to this selector. - * @docs-private - */ -@Directive({ - selector: 'button[mat-icon-button], a[mat-icon-button]', - host: {'class': 'mat-icon-button'} -}) -export class MatIconButtonCssMatStyler {} - -/** - * Directive whose purpose is to add the mat- CSS styling to this selector. - * @docs-private - */ -@Directive({ - selector: 'button[mat-fab], a[mat-fab]', - host: {'class': 'mat-fab'} -}) -export class MatFab {} - -/** - * Directive whose purpose is to add the mat- CSS styling to this selector. - * @docs-private - */ -@Directive({ - selector: 'button[mat-mini-fab], a[mat-mini-fab]', - host: {'class': 'mat-mini-fab'} -}) -export class MatMiniFab {} - +const BUTTON_HOST_ATTRIBUTES = [ + 'mat-button', + 'mat-flat-button', + 'mat-icon-button', + 'mat-raised-button', + 'mat-stroked-button', + 'mat-mini-fab', + 'mat-fab', +]; // Boilerplate for applying mixins to MatButton. /** @docs-private */ @@ -99,7 +60,8 @@ export const _MatButtonMixinBase = mixinColor(mixinDisabled(mixinDisableRipple(M @Component({ moduleId: module.id, selector: `button[mat-button], button[mat-raised-button], button[mat-icon-button], - button[mat-fab], button[mat-mini-fab]`, + button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], + button[mat-flat-button]`, exportAs: 'matButton', host: { '[disabled]': 'disabled || null', @@ -128,10 +90,20 @@ export class MatButton extends _MatButtonMixinBase private _focusMonitor: FocusMonitor) { super(elementRef); + // For each of the variant selectors that is prevent in the button's host + // attributes, add the correct corresponding class. + for (const attr of BUTTON_HOST_ATTRIBUTES) { + if (this._hasHostAttributes(attr)) { + (elementRef.nativeElement as HTMLElement).classList.add(attr); + } + } + this._focusMonitor.monitor(this._elementRef.nativeElement, true); if (this._isRoundButton) { this.color = DEFAULT_ROUND_BUTTON_COLOR; + } else if (this._hasHostAttributes('mat-flat-button')) { + this.color = DEFAULT_FLAT_BUTTON_COLOR; } } @@ -170,7 +142,8 @@ export class MatButton extends _MatButtonMixinBase */ @Component({ moduleId: module.id, - selector: `a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]`, + selector: `a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], + a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]`, exportAs: 'matButton, matAnchor', host: { '[attr.tabindex]': 'disabled ? -1 : 0',