feat(button): create stroked and flat button variants

Author: josephperrott

src/demo-app/button/button-demo.html

@@ -2,6 +2,8 @@
   <section>
     <button mat-button>flat</button>
     <button mat-raised-button>raised</button>
+    <button mat-stroked-button>stroked</button>
+    <button mat-flat-button>flat</button>
     <button mat-fab>
       <mat-icon>check</mat-icon>
     </button>
@@ -18,6 +20,8 @@
   <section>
     <a href="http://www.google.com" mat-button color="primary">SEARCH</a>
     <a href="http://www.google.com" mat-raised-button>SEARCH</a>
+    <a href="http://www.google.com" mat-stroked-button>SEARCH</a>
+    <a href="http://www.google.com" mat-flat-button>SEARCH</a>
     <a href="http://www.google.com" mat-fab>
       <mat-icon>check</mat-icon>
     </a>
@@ -30,12 +34,28 @@
     <button mat-button color="primary">primary</button>
     <button mat-button color="accent">accent</button>
     <button mat-button color="warn">warn</button>
+    <button mat-button disabled>disabled</button>
   </section>
 
   <section>
     <button mat-raised-button color="primary">primary</button>
     <button mat-raised-button color="accent">accent</button>
     <button mat-raised-button color="warn">warn</button>
+    <button mat-raised-button disabled>disabled</button>
+  </section>
+
+  <section>
+    <button mat-stroked-button color="primary">primary</button>
+    <button mat-stroked-button color="accent">accent</button>
+    <button mat-stroked-button color="warn">warn</button>
+    <button mat-stroked-button color="primary" disabled>disabled</button>
+  </section>
+
+  <section>
+    <button mat-flat-button color="primary">primary</button>
+    <button mat-flat-button color="accent">accent</button>
+    <button mat-flat-button color="warn">warn</button>
+    <button mat-flat-button color="primary" disabled>disabled</button>
   </section>
 
   <section>

src/lib/button/_button-base.scss

@@ -62,14 +62,30 @@ $mat-mini-fab-padding: 8px !default;
   }
 }
 
-// Applies styles to buttons with backgrounds: raised, fab, and mini-fab
-%mat-raised-button {
+// Applies styles to buttons with stroke styling
+%mat-stroked-button {
   @extend %mat-button-base;
 
-  @include mat-overridable-elevation(2);
+  @include mat-overridable-elevation(0);
+
+  outline: 1px solid currentColor;
+}
+
+// Applies styles to buttons with flat styling
+%mat-flat-button {
+  @extend %mat-button-base;
+
+  @include mat-overridable-elevation(0);
 
   // Force hardware acceleration.
   transform: translate3d(0, 0, 0);
+}
+
+// Applies styles to buttons with backgrounds: raised, fab, and mini-fab
+%mat-raised-button {
+  @extend %mat-flat-button;
+
+  @include mat-overridable-elevation(2);
 
   // Animation.
   transition: background $swift-ease-out-duration $swift-ease-out-timing-function,

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,23 @@
     @include _mat-button-ripple-color($theme, default, 0.1);
   }
 
+  .mat-stroked-button {
+    color: rgba(0, 0, 0, 0.87);
+    @include _mat-button-theme-color($theme, 'outline-color');
+  }
+
+  .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 +124,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);

src/lib/button/button-module.ts

@@ -15,6 +15,8 @@ import {
   MatButton,
   MatMiniFab,
   MatButtonCssMatStyler,
+  MatFlatButtonCssMatStyler,
+  MatStrokedButtonCssMatStyler,
   MatFab,
   MatIconButtonCssMatStyler,
   MatRaisedButtonCssMatStyler
@@ -35,6 +37,8 @@ import {
     MatFab,
     MatCommonModule,
     MatButtonCssMatStyler,
+    MatFlatButtonCssMatStyler,
+    MatStrokedButtonCssMatStyler,
     MatRaisedButtonCssMatStyler,
     MatIconButtonCssMatStyler,
   ],
@@ -44,6 +48,8 @@ import {
     MatMiniFab,
     MatFab,
     MatButtonCssMatStyler,
+    MatFlatButtonCssMatStyler,
+    MatStrokedButtonCssMatStyler,
     MatRaisedButtonCssMatStyler,
     MatIconButtonCssMatStyler,
   ],

src/lib/button/button.scss

@@ -13,16 +13,25 @@
   }
 }
 
-// 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;
 }
 
 .mat-raised-button {
   @extend %mat-raised-button;
 }
 
+.mat-stroked-button {
+  @extend %mat-stroked-button;
+}
+
+.mat-flat-button {
+  @extend %mat-flat-button;
+}
+
 .mat-fab {
   @include mat-fab($mat-fab-size, $mat-fab-padding);
 }

src/lib/button/button.ts

@@ -56,6 +56,28 @@ export class MatButtonCssMatStyler {}
 })
 export class MatRaisedButtonCssMatStyler {}
 
+/**
+ * Directive whose purpose is to add the mat- CSS styling to this selector.
+ * @docs-private
+ */
+@Directive({
+  selector: 'button[mat-stroked-button], a[mat-stroked-button]',
+  host: {'class': 'mat-stroked-button'}
+})
+export class MatStrokedButtonCssMatStyler {}
+
+
+
+/**
+ * Directive whose purpose is to add the mat- CSS styling to this selector.
+ * @docs-private
+ */
+@Directive({
+  selector: 'button[mat-flat-button], a[mat-flat-button]',
+  host: {'class': 'mat-flat-button'}
+})
+export class MatFlatButtonCssMatStyler {}
+
 /**
  * Directive whose purpose is to add the mat- CSS styling to this selector.
  * @docs-private
@@ -114,7 +136,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',
@@ -177,7 +200,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',