feat(material-experimental/button): support unthemed version (#16986)

andrewseguin · web-flow · commit 7b12a8127221 · 2019-09-05T15:35:45.000-07:00
diff --git a/src/dev-app/button/button-demo.html b/src/dev-app/button/button-demo.html
@@ -11,16 +11,17 @@ <h4 class="demo-section-header">Buttons</h4>
 
   <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-button>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-stroked-button>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>unthemed</button>
     <button mat-button color="primary">primary</button>
     <button mat-button color="accent">accent</button>
     <button mat-button color="warn">warn</button>
@@ -29,6 +30,7 @@ <h4 class="demo-section-header">Text Buttons [mat-button]</h4>
 
   <h4 class="demo-section-header">Raised Buttons [mat-raised-button]</h4>
   <section>
+    <button mat-raised-button>unthemed</button>
     <button mat-raised-button color="primary">primary</button>
     <button mat-raised-button color="accent">accent</button>
     <button mat-raised-button color="warn">warn</button>
@@ -37,6 +39,7 @@ <h4 class="demo-section-header">Raised Buttons [mat-raised-button]</h4>
 
   <h4 class="demo-section-header">Stroked Buttons [mat-stroked-button]</h4>
   <section>
+    <button mat-stroked-button>unthemed</button>
     <button mat-stroked-button color="primary">primary</button>
     <button mat-stroked-button color="accent">accent</button>
     <button mat-stroked-button color="warn">warn</button>
@@ -45,6 +48,7 @@ <h4 class="demo-section-header">Stroked Buttons [mat-stroked-button]</h4>
 
   <h4 class="demo-section-header">Flat Buttons [mat-flat-button]</h4>
   <section>
+    <button mat-flat-button>unthemed</button>
     <button mat-flat-button color="primary">primary</button>
     <button mat-flat-button color="accent">accent</button>
     <button mat-flat-button color="warn">warn</button>
@@ -53,6 +57,7 @@ <h4 class="demo-section-header">Flat Buttons [mat-flat-button]</h4>
 
   <h4 class="demo-section-header"> Icon Buttons [mat-icon-button]</h4>
   <section>
+    <button mat-icon-button><mat-icon>cached</mat-icon></button>
     <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>
@@ -61,6 +66,7 @@ <h4 class="demo-section-header"> Icon Buttons [mat-icon-button]</h4>
 
   <h4 class="demo-section-header">Fab Buttons [mat-fab]</h4>
   <section>
+    <button mat-fab><mat-icon>delete</mat-icon></button>
     <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>
@@ -69,6 +75,7 @@ <h4 class="demo-section-header">Fab Buttons [mat-fab]</h4>
 
   <h4 class="demo-section-header"> Mini Fab Buttons [mat-mini-fab]</h4>
   <section>
+    <button mat-mini-fab><mat-icon>menu</mat-icon></button>
     <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>
diff --git a/src/dev-app/mdc-button/mdc-button-demo.html b/src/dev-app/mdc-button/mdc-button-demo.html
@@ -27,9 +27,9 @@ <h4 class="demo-section-header">Buttons</h4>
 
   <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-button>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-stroked-button>SEARCH</a>
     <a href="//www.google.com" mat-flat-button>SEARCH</a>
     <a href="//www.google.com" mat-fab>
       <mat-icon>check</mat-icon>
@@ -53,6 +53,7 @@ <h4 class="demo-section-header">Anchors</h4>
 
   <h4 class="demo-section-header">Text Buttons [mat-button]</h4>
   <section>
+    <button mat-button>unthemed</button>
     <button mat-button color="primary">primary</button>
     <button mat-button color="accent">accent</button>
     <button mat-button color="warn">warn</button>
@@ -61,6 +62,7 @@ <h4 class="demo-section-header">Text Buttons [mat-button]</h4>
 
   <h4 class="demo-section-header">Raised Buttons [mat-raised-button]</h4>
   <section>
+    <button mat-raised-button>unthemed</button>
     <button mat-raised-button color="primary">primary</button>
     <button mat-raised-button color="accent">accent</button>
     <button mat-raised-button color="warn">warn</button>
@@ -69,6 +71,7 @@ <h4 class="demo-section-header">Raised Buttons [mat-raised-button]</h4>
 
   <h4 class="demo-section-header">Stroked Buttons [mat-stroked-button]</h4>
   <section>
+    <button mat-stroked-button>unthemed</button>
     <button mat-stroked-button color="primary">primary</button>
     <button mat-stroked-button color="accent">accent</button>
     <button mat-stroked-button color="warn">warn</button>
@@ -77,6 +80,7 @@ <h4 class="demo-section-header">Stroked Buttons [mat-stroked-button]</h4>
 
   <h4 class="demo-section-header">Flat Buttons [mat-flat-button]</h4>
   <section>
+    <button mat-flat-button>unthemed</button>
     <button mat-flat-button color="primary">primary</button>
     <button mat-flat-button color="accent">accent</button>
     <button mat-flat-button color="warn">warn</button>
@@ -85,6 +89,9 @@ <h4 class="demo-section-header">Flat Buttons [mat-flat-button]</h4>
 
   <h4 class="demo-section-header"> Icon Buttons [mat-icon-button]</h4>
   <section>
+    <button mat-icon-button>
+      <mat-icon>cached</mat-icon>
+    </button>
     <button mat-icon-button color="primary">
       <mat-icon>cached</mat-icon>
     </button>
@@ -101,6 +108,9 @@ <h4 class="demo-section-header"> Icon Buttons [mat-icon-button]</h4>
 
   <h4 class="demo-section-header">Fab Buttons [mat-fab]</h4>
   <section>
+    <button mat-fab>
+      <mat-icon>delete</mat-icon>
+    </button>
     <button mat-fab color="primary">
       <mat-icon>delete</mat-icon>
     </button>
@@ -117,6 +127,9 @@ <h4 class="demo-section-header">Fab Buttons [mat-fab]</h4>
 
   <h4 class="demo-section-header"> Mini Fab Buttons [mat-mini-fab]</h4>
   <section>
+    <button mat-mini-fab>
+      <mat-icon>menu</mat-icon>
+    </button>
     <button mat-mini-fab color="primary">
       <mat-icon>menu</mat-icon>
     </button>
diff --git a/src/material-experimental/mdc-button/README.md b/src/material-experimental/mdc-button/README.md
@@ -1,11 +1,5 @@
-### Open Issues
-
-- Anchor button does not support disabled - see MDC issue #1339
-
 ### TODO
-- Determine coloring for non-primary buttons (MDC does not support this)
 - 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
diff --git a/src/material-experimental/mdc-button/_mdc-button.scss b/src/material-experimental/mdc-button/_mdc-button.scss
@@ -41,20 +41,40 @@
     }
 
     .mat-mdc-button, .mat-mdc-outlined-button {
-      @include mdc-states-base-color(primary, $query: $mat-theme-styles-query);
+      &.mat-unthemed {
+        @include mdc-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
+      }
+
+      &.mat-primary {
+        @include mdc-button-ink-color(primary, $query: $mat-theme-styles-query);
+        @include mdc-states-base-color(primary, $query: $mat-theme-styles-query);
+      }
 
       &.mat-accent {
         @include mdc-button-ink-color(secondary, $query: $mat-theme-styles-query);
+        @include mdc-states-base-color(secondary, $query: $mat-theme-styles-query);
       }
 
       &.mat-warn {
         @include mdc-button-ink-color(error, $query: $mat-theme-styles-query);
+        @include mdc-states-base-color(error, $query: $mat-theme-styles-query);
       }
     }
 
     .mat-mdc-raised-button,
     .mat-mdc-unelevated-button {
-      @include mdc-states-base-color(on-primary, $query: $mat-theme-styles-query);
+      &.mat-unthemed {
+        @include mdc-button-container-fill-color(
+            $mdc-theme-surface, $query: $mat-theme-styles-query);
+        @include mdc-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
+        @include mdc-states-base-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
+      }
+
+      &.mat-primary {
+        @include mdc-button-container-fill-color(primary, $query: $mat-theme-styles-query);
+        @include mdc-button-ink-color(on-primary, $query: $mat-theme-styles-query);
+        @include mdc-states-base-color(on-primary, $query: $mat-theme-styles-query);
+      }
 
       &.mat-accent {
         @include mdc-button-container-fill-color(secondary, $query: $mat-theme-styles-query);
@@ -74,6 +94,14 @@
     }
 
     .mat-mdc-outlined-button {
+      &.mat-unthemed {
+        @include mdc-button-outline-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
+      }
+
+      &.mat-primary {
+        @include mdc-button-outline-color(primary, $query: $mat-theme-styles-query);
+      }
+
       &.mat-accent {
         @include mdc-button-outline-color(secondary, $query: $mat-theme-styles-query);
       }
@@ -113,15 +141,26 @@
 @mixin mat-fab-theme-mdc($theme) {
   @include mat-using-mdc-theme($theme) {
     .mat-mdc-fab, .mat-mdc-mini-fab {
-      @include mdc-states-base-color(secondary, $query: $mat-theme-styles-query);
       @include mdc-states($query: $mat-theme-styles-query);
 
+      &.mat-unthemed {
+        @include mdc-states-base-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
+        @include mdc-fab-container-color($mdc-theme-surface, $query: $mat-theme-styles-query);
+        @include mdc-fab-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
+      }
+
       &.mat-primary {
         @include mdc-states-base-color(on-primary, $query: $mat-theme-styles-query);
         @include mdc-fab-container-color(primary, $query: $mat-theme-styles-query);
         @include mdc-fab-ink-color(on-primary, $query: $mat-theme-styles-query);
       }
 
+      &.mat-accent {
+        @include mdc-states-base-color(on-secondary, $query: $mat-theme-styles-query);
+        @include mdc-fab-container-color(secondary, $query: $mat-theme-styles-query);
+        @include mdc-fab-ink-color(on-secondary, $query: $mat-theme-styles-query);
+      }
+
       &.mat-warn {
         @include mdc-states-base-color(on-error, $query: $mat-theme-styles-query);
         @include mdc-fab-container-color(error, $query: $mat-theme-styles-query);
@@ -149,8 +188,16 @@
   @include mat-using-mdc-theme($theme) {
     .mat-mdc-icon-button {
       @include mdc-states($query: $mat-theme-styles-query);
-      @include mdc-states-base-color(primary, $query: $mat-theme-styles-query);
-      @include mdc-icon-button-ink-color(primary, $query: $mat-theme-styles-query);
+
+      &.mat-unthemed {
+        @include mdc-states-base-color($mdc-theme-surface, $query: $mat-theme-styles-query);
+        @include mdc-icon-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
+      }
+
+      &.mat-primary {
+        @include mdc-states-base-color(primary, $query: $mat-theme-styles-query);
+        @include mdc-icon-button-ink-color(primary, $query: $mat-theme-styles-query);
+      }
 
       &.mat-accent {
         @include mdc-states-base-color(secondary, $query: $mat-theme-styles-query);
diff --git a/src/material-experimental/mdc-button/button-base.ts b/src/material-experimental/mdc-button/button-base.ts
@@ -30,6 +30,10 @@ export const MAT_BUTTON_INPUTS = ['disabled', 'disableRipple', 'color'];
 export const MAT_BUTTON_HOST = {
   '[attr.disabled]': 'disabled || null',
   '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
+  // MDC automatically applies the primary theme color to the button, but we want to support
+  // an unthemed version. If color is undefined, apply a CSS class that makes it easy to
+  // select and style this "theme".
+  '[class.mat-unthemed]': '!color',
 };
 
 /** List of classes to add to buttons instances based on host attribute selector. */
@@ -131,6 +135,10 @@ export const MAT_ANCHOR_HOST = {
   '[attr.tabindex]': 'disabled ? -1 : (tabIndex || 0)',
   '[attr.aria-disabled]': 'disabled.toString()',
   '(click)': '_haltDisabledEvents($event)',
+  // MDC automatically applies the primary theme color to the button, but we want to support
+  // an unthemed version. If color is undefined, apply a CSS class that makes it easy to
+  // select and style this "theme".
+  '[class.mat-unthemed]': '!color',
 };
 
 /**
