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

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

* add mixin for applying disabled state

* add TODOs for review concerns

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,15 @@
     @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.
+// TODO(andrewseguin): Discuss with the MDC team about a mixin we can call for applying this style,
+// and note that having pointer-events may have unintended side-effects, e.g. allowing the user
+// to click the target underneath the button.
+@mixin _mat-button-disabled() {
+  &[disabled] {
+    cursor: default;
+    pointer-events: none;
+  }
+}

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

@@ -1,9 +1,37 @@
 @import '@material/button/mixins';
+@import '@material/button/variables';
 @import '@material/fab/mixins';
 @import '@material/ripple/mixins';
 @import '@material/icon-button/mixins';
 @import '../mdc-helpers/mdc-helpers';
 
+// Applies the disabled theme color to the text color.
+@mixin _mat-button-disabled-color() {
+  @include mdc-theme-prop(color,
+      mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-background));
+}
+
+// Wraps the content style in a selector for the disabled state.
+// MDC adds theme color by using :not(:disabled), so just using [disabled] once will not
+// override this, neither will it apply to anchor tags. This needs to override the
+// previously set theme color, so it must be ordered after the theme styles.
+// TODO(andrewseguin): Discuss with the MDC team to see if we can avoid the :not(:disabled) by
+// manually styling disabled buttons with a [disabled] selector.
+@mixin _mat-button-apply-disabled-style() {
+  &[disabled][disabled] {
+    @content;
+  }
+}
+
+// Applies the disabled theme background color for raised buttons. Value is taken from
+// mixin `mdc-button--filled`.
+// TODO(andrewseguin): Discuss with the MDC team about providing a variable for the 0.12 value
+// or otherwise have a mixin we can call to apply this style for both button and anchors.
+@mixin _mat-button-disabled-background() {
+  @include mdc-theme-prop(background-color, rgba(mdc-theme-prop-value(on-surface), 0.12));
+}
+
+
 @mixin mat-button-theme-mdc($theme) {
   @include mat-using-mdc-theme($theme) {
     // Add state interactions for hover, focus, press, active. Colors are changed based on
@@ -39,6 +67,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);
       }
+
+      @include _mat-button-apply-disabled-style() {
+        @include _mat-button-disabled-background();
+      }
     }
 
     .mat-mdc-outlined-button {
@@ -49,6 +81,23 @@
       &.mat-warn {
         @include mdc-button-outline-color(error, $query: $mat-theme-styles-query);
       }
+
+      @include _mat-button-apply-disabled-style() {
+        @include mdc-theme-prop(border-color,
+            mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-background));
+      }
+    }
+
+    .mat-mdc-raised-button {
+      @include _mat-button-apply-disabled-style() {
+        @include mdc-elevation(0, $query: $mat-theme-styles-query);
+      }
+    }
+
+    .mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-unelevated-button, .mat-mdc-outlined-button {
+      @include _mat-button-apply-disabled-style() {
+        @include _mat-button-disabled-color();
+      }
     }
 
     @include mdc-button-without-ripple($query: $mat-theme-styles-query);
@@ -78,6 +127,12 @@
         @include mdc-fab-container-color(error, $query: $mat-theme-styles-query);
         @include mdc-fab-ink-color(on-error, $query: $mat-theme-styles-query);
       }
+
+      @include _mat-button-apply-disabled-style() {
+        @include _mat-button-disabled-color();
+        @include _mat-button-disabled-background();
+        @include mdc-elevation(0, $query: $mat-theme-styles-query);
+      }
     }
 
     @include mdc-fab-without-ripple($query: $mat-theme-styles-query);
@@ -106,6 +161,10 @@
         @include mdc-states-base-color(error, $query: $mat-theme-styles-query);
         @include mdc-icon-button-ink-color(error, $query: $mat-theme-styles-query);
       }
+
+      @include _mat-button-apply-disabled-style() {
+        @include _mat-button-disabled-color();
+      }
     }
 
     @include mdc-icon-button-without-ripple($query: $mat-theme-styles-query);

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

@@ -122,7 +122,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();
 }