prototype(button): create prototype button based on MDC Web

src/dev-app/mdc-button/mdc-button-demo-module.ts

@@ -8,12 +8,14 @@
 
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material-experimental/mdc-button';
+import {MatIconModule} from '@angular/material/icon';
 import {RouterModule} from '@angular/router';
 import {MdcButtonDemo} from './mdc-button-demo';
 
 @NgModule({
   imports: [
     MatButtonModule,
+    MatIconModule,
     RouterModule.forChild([{path: '', component: MdcButtonDemo}]),
   ],
   declarations: [MdcButtonDemo],

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

@@ -1,2 +1,147 @@
-<!-- TODO: copy in demo template from existing mat-button demo. -->
-Not yet implemented.
+<div class="demo-button">
+  <h4 class="demo-section-header">Buttons</h4>
+  <section>
+    <button mat-button>normal</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>
+    <button mat-mini-fab>
+      <mat-icon>check</mat-icon>
+    </button>
+  </section>
+
+  <h4 class="demo-section-header">Anchors</h4>
+  <section>
+    <a href="//www.google.com" mat-button color="primary">SEARCH</a>
+    <a href="//www.google.com" mat-raised-button>SEARCH</a>
+    <a href="//www.google.com" mat-stroked-button color="primary">SEARCH</a>
+    <a href="//www.google.com" mat-flat-button>SEARCH</a>
+    <a href="//www.google.com" mat-fab>
+      <mat-icon>check</mat-icon>
+    </a>
+    <a href="//www.google.com" mat-mini-fab>
+      <mat-icon>check</mat-icon>
+    </a>
+  </section>
+
+  <h4 class="demo-section-header">Text Buttons [mat-button]</h4>
+  <section>
+    <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>
+
+  <h4 class="demo-section-header">Raised Buttons [mat-raised-button]</h4>
+  <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>
+
+  <h4 class="demo-section-header">Stroked Buttons [mat-stroked-button]</h4>
+  <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 disabled>disabled</button>
+  </section>
+
+  <h4 class="demo-section-header">Flat Buttons [mat-flat-button]</h4>
+  <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 disabled>disabled</button>
+  </section>
+
+  <h4 class="demo-section-header"> Icon Buttons [mat-icon-button]</h4>
+  <section>
+    <button mat-icon-button color="primary">
+      <mat-icon>cached</mat-icon>
+    </button>
+    <button mat-icon-button color="accent">
+      <mat-icon>backup</mat-icon>
+    </button>
+    <button mat-icon-button color="warn">
+      <mat-icon>trending_up</mat-icon>
+    </button>
+    <button mat-icon-button disabled>
+      <mat-icon>visibility</mat-icon>
+    </button>
+  </section>
+
+  <h4 class="demo-section-header">Fab Buttons [mat-fab]</h4>
+  <section>
+    <button mat-fab color="primary">
+      <mat-icon>delete</mat-icon>
+    </button>
+    <button mat-fab color="accent">
+      <mat-icon>bookmark</mat-icon>
+    </button>
+    <button mat-fab color="warn">
+      <mat-icon>home</mat-icon>
+    </button>
+    <button mat-fab disabled>
+      <mat-icon>favorite</mat-icon>
+    </button>
+  </section>
+
+  <h4 class="demo-section-header"> Mini Fab Buttons [mat-mini-fab]</h4>
+  <section>
+    <button mat-mini-fab color="primary">
+      <mat-icon>menu</mat-icon>
+    </button>
+    <button mat-mini-fab color="accent">
+      <mat-icon>plus_one</mat-icon>
+    </button>
+    <button mat-mini-fab color="warn">
+      <mat-icon>filter_list</mat-icon>
+    </button>
+    <button mat-mini-fab disabled>
+      <mat-icon>home</mat-icon>
+    </button>
+  </section>
+
+  <h4 class="demo-section-header">Interaction/State</h4>
+  <section class="demo-no-flex">
+    <div>
+      <p>isDisabled: {{isDisabled}}</p>
+      <p>Button 1 as been clicked {{clickCounter}} times</p>
+      <button mat-flat-button (click)="isDisabled=!isDisabled">
+        {{isDisabled ? 'Enable All' : 'Disable All'}}
+      </button>
+      <button mat-flat-button (click)="button1.focus()">Focus 1</button>
+      <button mat-flat-button (click)="button2.focus()">Focus 2</button>
+      <button mat-flat-button (click)="button3.focus()">Focus 3</button>
+      <button mat-flat-button (click)="button4.focus()">Focus 4</button>
+    </div>
+    <div>
+      <button mat-button #button1 [disabled]="isDisabled"
+              (click)="clickCounter=clickCounter+1">
+        Button 1
+      </button>
+      <button mat-button #button2 color="primary" [disabled]="isDisabled">
+        Button 2
+      </button>
+      <a href="//www.google.com" #button3 mat-button color="accent"
+         [disabled]="isDisabled">
+        Button 3
+      </a>
+      <button mat-raised-button #button4 color="primary"
+              [disabled]="isDisabled">
+        Button 4
+      </button>
+      <button mat-mini-fab [disabled]="isDisabled">
+        <mat-icon>check</mat-icon>
+      </button>
+      <button mat-icon-button color="accent" [disabled]="isDisabled">
+        <mat-icon>favorite</mat-icon>
+      </button>
+    </div>
+  </section>
+</div>

src/dev-app/mdc-button/mdc-button-demo.scss

@@ -1 +1,24 @@
-// TODO: copy in demo styles from existing mat-button demo.
+button,
+a {
+  margin: 8px;
+  text-transform: uppercase;
+}
+
+section {
+  display: flex;
+  align-items: center;
+  margin: 8px;
+}
+
+p {
+  padding: 5px 15px;
+}
+
+.demo-section-header {
+  font-weight: 500;
+  margin: 0;
+}
+
+.demo-no-flex {
+  display: block;
+}

src/dev-app/mdc-button/mdc-button-demo.ts

@@ -15,4 +15,7 @@ import {Component} from '@angular/core';
   styleUrls: ['mdc-button-demo.css'],
 })
 export class MdcButtonDemo {
+  isDisabled: boolean = false;
+  clickCounter: number = 0;
+  toggleDisable: boolean = false;
 }

src/dev-app/theme.scss

@@ -15,6 +15,8 @@
 // **Be sure that you only ever include this mixin once!**
 @include mat-core();
 @include mat-button-typography-mdc(mat-typography-config());
+@include mat-icon-button-typography-mdc(mat-typography-config());
+@include mat-fab-typography-mdc(mat-typography-config());
 @include mat-card-typography-mdc(mat-typography-config());
 @include mat-checkbox-typography-mdc(mat-typography-config());
 @include mat-menu-typography-mdc(mat-typography-config());
@@ -23,25 +25,26 @@
 
 // Define the default theme (same as the example above).
 $candy-app-primary: mat-palette($mat-indigo);
-$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
-$candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);
+$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
+$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
 
 // Include the default theme styles.
 @include angular-material-theme($candy-app-theme);
 @include mat-button-theme-mdc($candy-app-theme);
+@include mat-icon-button-theme-mdc($candy-app-theme);
+@include mat-fab-theme-mdc($candy-app-theme);
 @include mat-card-theme-mdc($candy-app-theme);
 @include mat-checkbox-theme-mdc($candy-app-theme);
 @include mat-menu-theme-mdc($candy-app-theme);
 @include mat-radio-theme-mdc($candy-app-theme);
 @include mat-slide-toggle-theme-mdc($candy-app-theme);
 @include mat-edit-theme($candy-app-theme);
 @include mat-edit-typography(mat-typography-config());
-
 // Define an alternate dark theme.
 $dark-primary: mat-palette($mat-blue-grey);
-$dark-accent:  mat-palette($mat-amber, A200, A100, A400);
-$dark-warn:    mat-palette($mat-deep-orange);
-$dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
+$dark-accent: mat-palette($mat-amber, A200, A100, A400);
+$dark-warn: mat-palette($mat-deep-orange);
+$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
 
 // Include the alternative theme styles inside of a block with a CSS class. You can make this
 // CSS class whatever you want. In this example, any component inside of an element with
@@ -50,6 +53,8 @@ $dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
 .demo-unicorn-dark-theme {
   @include angular-material-theme($dark-theme);
   @include mat-button-theme-mdc($dark-theme);
+  @include mat-icon-button-theme-mdc($dark-theme);
+  @include mat-fab-theme-mdc($dark-theme);
   @include mat-card-theme-mdc($dark-theme);
   @include mat-checkbox-theme-mdc($dark-theme);
   @include mat-menu-theme-mdc($dark-theme);

src/e2e-app/theme.scss

@@ -14,6 +14,8 @@
 // **Be sure that you only ever include this mixin once!**
 @include mat-core();
 @include mat-button-typography-mdc(mat-typography-config());
+@include mat-icon-button-typography-mdc(mat-typography-config());
+@include mat-fab-typography-mdc(mat-typography-config());
 @include mat-card-typography-mdc(mat-typography-config());
 @include mat-checkbox-typography-mdc(mat-typography-config());
 @include mat-menu-typography-mdc(mat-typography-config());
@@ -22,12 +24,14 @@
 
 // Define the default theme (same as the example above).
 $candy-app-primary: mat-palette($mat-indigo);
-$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
-$candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);
+$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
+$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
 
 // Include the default theme styles.
 @include angular-material-theme($candy-app-theme);
 @include mat-button-theme-mdc($candy-app-theme);
+@include mat-icon-button-theme-mdc($candy-app-theme);
+@include mat-fab-theme-mdc($candy-app-theme);
 @include mat-card-theme-mdc($candy-app-theme);
 @include mat-checkbox-theme-mdc($candy-app-theme);
 @include mat-menu-theme-mdc($candy-app-theme);

src/material-experimental/mdc-button/BUILD.bazel

@@ -1,29 +1,65 @@
-package(default_visibility=["//visibility:public"])
+package(default_visibility = ["//visibility:public"])
 
-load("@io_bazel_rules_sass//:defs.bzl", "sass_library", "sass_binary")
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
 load("//tools:defaults.bzl", "ng_module")
 load("//:packages.bzl", "CDK_TARGETS", "MATERIAL_TARGETS")
 
 ng_module(
-  name = "mdc-button",
-  srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
-  module_name = "@angular/material-experimental/mdc-button",
-  assets = [":button_scss"] + glob(["**/*.html"]),
-  deps = [
-    "@npm//material-components-web",
-  ] + CDK_TARGETS + MATERIAL_TARGETS,
+    name = "mdc-button",
+    srcs = glob(["**/*.ts"], exclude = ["**/*.spec.ts"]),
+    module_name = "@angular/material-experimental/mdc-button",
+    assets = [":button_scss", ":fab_scss", ":icon-button_scss"] + glob(["**/*.html"]),
+    deps = [
+        "@npm//@angular/animations",
+        "@npm//material-components-web",
+    ] + CDK_TARGETS + MATERIAL_TARGETS,
 )
 
 sass_library(
-  name = "button_scss_lib",
-  srcs = glob(["**/_*.scss"]),
-  deps = [
-    "//src/material/core:core_scss_lib",
-    "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
-  ],
+    name = "button_scss_lib",
+    srcs = glob(["**/_*.scss"]),
+    deps = [
+        "//src/material/core:core_scss_lib",
+        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+    ],
 )
 
 sass_binary(
-  name = "button_scss",
-  src = "button.scss",
+    name = "button_scss",
+    src = "button.scss",
+    include_paths = [
+        "external/npm/node_modules",
+    ],
+    deps = [
+        ":button_scss_lib",
+        "//src/material/core:all_themes",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+    ],
+)
+
+sass_binary(
+    name = "fab_scss",
+    src = "fab.scss",
+    include_paths = [
+        "external/npm/node_modules",
+    ],
+    deps = [
+        ":fab_scss_lib",
+        "//src/material/core:all_themes",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+    ],
+)
+
+sass_binary(
+    name = "icon-button_scss",
+    src = "icon-button.scss",
+    include_paths = [
+        "external/npm/node_modules",
+    ],
+    deps = [
+        ":icon-button_scss_lib",
+        "//src/material/core:all_themes",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+    ],
 )

src/material-experimental/mdc-button/README.md

@@ -1 +1,15 @@
-This is a placeholder for the MDC-based implementation of button.
+### Open Issues
+
+- Disabled FAB does not look disabled
+- Anchor button does not look disabled
+- No focused state
+- Icon buttons are not colored by theme
+
+### TODO
+- Write README - looks like lot of overlap with checkbox README. Create common readme for setup
+- Move tests over (both unit and e2e)
+- JSDoc comments on all classes, consts
+- Consider supporting button[mat-outlined-button]
+- Add to universal app
+- Should each button type have a unique top level class? e.g. mdc-mat-icon-button
+- Consider if we want to add a "appearance/type" input to button, similar to form field (outline/stroked, flat, raised)