feat(material-experimental/button): anchor disabled state

Author: andrewseguin

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

@@ -12,6 +12,18 @@ <h4 class="demo-section-header">Buttons</h4>
       <mat-icon>check</mat-icon>
     </button>
   </section>
+  <section>
+    <button mat-button disabled>normal</button>
+    <button mat-raised-button disabled>raised</button>
+    <button mat-stroked-button disabled>stroked</button>
+    <button mat-flat-button disabled>flat</button>
+    <button mat-fab disabled>
+      <mat-icon>check</mat-icon>
+    </button>
+    <button mat-mini-fab disabled>
+      <mat-icon>check</mat-icon>
+    </button>
+  </section>
 
   <h4 class="demo-section-header">Anchors</h4>
   <section>
@@ -26,6 +38,18 @@ <h4 class="demo-section-header">Anchors</h4>
       <mat-icon>check</mat-icon>
     </a>
   </section>
+  <section>
+    <a href="//www.google.com" disabled mat-button color="primary">SEARCH</a>
+    <a href="//www.google.com" disabled mat-raised-button>SEARCH</a>
+    <a href="//www.google.com" disabled mat-stroked-button color="primary">SEARCH</a>
+    <a href="//www.google.com" disabled mat-flat-button>SEARCH</a>
+    <a href="//www.google.com" disabled mat-fab>
+      <mat-icon>check</mat-icon>
+    </a>
+    <a href="//www.google.com" disabled mat-mini-fab>
+      <mat-icon>check</mat-icon>
+    </a>
+  </section>
 
   <h4 class="demo-section-header">Text Buttons [mat-button]</h4>
   <section>

src/material-experimental/mdc-button/_button-base.scss

@@ -13,3 +13,12 @@
     @content;
   }
 }
+
+// MDC's disabled buttons define a default cursor with pointer-events none. However, they select
+// :disabled for this, which does not affect anchor tags.
+@mixin _mat-button-disabled() {
+  &[disabled] {
+    cursor: default;
+    pointer-events: none;
+  }
+}

src/material-experimental/mdc-button/_mdc-button.scss

@@ -1,4 +1,5 @@
 @import '@material/button/mixins';
+@import '@material/button/variables';
 @import '@material/fab/mixins';
 @import '@material/ripple/mixins';
 @import '@material/icon-button/mixins';
@@ -39,6 +40,10 @@
         @include mdc-button-ink-color(on-error, $query: $mat-theme-styles-query);
         @include mdc-states-base-color(on-error, $query: $mat-theme-styles-query);
       }
+
+      &[disabled][disabled] {
+        @include mdc-theme-prop(background-color, rgba(mdc-theme-prop-value(on-surface), .12));
+      }
     }
 
     .mat-mdc-outlined-button {
@@ -49,6 +54,25 @@
       &.mat-warn {
         @include mdc-button-outline-color(error, $query: $mat-theme-styles-query);
       }
+
+      &[disabled][disabled] {
+        @include mdc-theme-prop(border-color, mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-background));
+      }
+    }
+
+    // MDC adds theme color by using :not(:disabled), so just using [disabled] once will not
+    // override this and also will not apply to anchor tags. This needs to override the
+    // previously set theme color, so it must be ordered after the theme styles.
+    .mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-unelevated-button, .mat-mdc-outlined-button {
+      &[disabled][disabled] {
+        @include mdc-theme-prop(color, mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-background));
+      }
+    }
+
+    .mat-mdc-raised-button {
+      &[disabled][disabled] {
+        @include mdc-elevation(0, $query: $mat-theme-styles-query);
+      }
     }
 
     @include mdc-button-without-ripple($query: $mat-theme-styles-query);
@@ -78,6 +102,12 @@
         @include mdc-fab-container-color(error, $query: $mat-theme-styles-query);
         @include mdc-fab-ink-color(on-error, $query: $mat-theme-styles-query);
       }
+
+      &[disabled][disabled] {
+        @include mdc-theme-prop(color, mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-background));
+        @include mdc-theme-prop(background-color, rgba(mdc-theme-prop-value(on-surface), .12));
+        @include mdc-elevation(0, $query: $mat-theme-styles-query);
+      }
     }
 
     @include mdc-fab-without-ripple($query: $mat-theme-styles-query);
@@ -106,6 +136,10 @@
         @include mdc-states-base-color(error, $query: $mat-theme-styles-query);
         @include mdc-icon-button-ink-color(error, $query: $mat-theme-styles-query);
       }
+
+      &[disabled][disabled] {
+        @include mdc-theme-prop(color, mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-background));
+      }
     }
 
     @include mdc-icon-button-without-ripple($query: $mat-theme-styles-query);

src/material-experimental/mdc-button/button-base.ts

@@ -118,7 +118,9 @@ export const MAT_ANCHOR_INPUTS = ['disabled', 'disableRipple', 'color', 'tabInde
 
 /** Shared host configuration for buttons using the `<a>` tag. */
 export const MAT_ANCHOR_HOST = {
-  ...MAT_BUTTON_HOST,
+  '[attr.disabled]': 'disabled || null',
+  '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
+
   // Note that we ignore the user-specified tabindex when it's disabled for
   // consistency with the `mat-button` applied on native buttons where even
   // though they have an index, they're not tabbable.

src/material-experimental/mdc-button/button.scss

@@ -16,5 +16,5 @@
   }
 
   @include _mat-button-interactive();
+  @include _mat-button-disabled();
 }
-

src/material-experimental/mdc-button/fab.scss

@@ -8,15 +8,7 @@
 
 .mat-mdc-fab, .mat-mdc-mini-fab {
   @include _mat-button-interactive();
-
-  // Spec does not define disabled FAB buttons but Angular Material does support it.
-  &:disabled {
-    background-color: rgba(mdc-theme-prop-value(on-surface), 0.12);
-    color: $mdc-button-disabled-ink-color;
-    cursor: default;
-    pointer-events: none;
-    box-shadow: none;
-  }
+  @include _mat-button-disabled();
 }
 
 .mat-mdc-fab, .mat-mdc-mini-fab {

src/material-experimental/mdc-button/icon-button.scss

@@ -12,4 +12,5 @@
   // Border radius is inherited by ripple to know its shape. Set to 50% so the ripple is round.
   border-radius: 50%;
 
+  @include _mat-button-disabled();
 }