refactor: style disabled button with class instead of :disabled (#19406)

Uses a new class, `.mat-button-disabled`, for applying disabled button styles. This change request comes from GCP, which wants to avoid _actually_ disabling buttons so that they can have tooltips.

Author: nickwalther

src/material/button/_button-base.scss

@@ -58,7 +58,7 @@ $mat-mini-fab-padding: 8px !default;
   // on most browsers except on IE11 where it defaults to `hidden`.
   overflow: visible;
 
-  &[disabled] {
+  &.mat-button-disabled {
     cursor: default;
   }
 

src/material/button/_button-theme.scss

@@ -24,7 +24,7 @@ $_mat-button-ripple-opacity: 0.1;
     background-color: mat-color($warn);
   }
 
-  &[disabled] .mat-button-focus-overlay {
+  &.mat-button-disabled .mat-button-focus-overlay {
     background-color: transparent;
   }
 }
@@ -76,8 +76,8 @@ $_mat-button-ripple-opacity: 0.1;
     #{$property}: mat-color($warn, $hue);
   }
 
-  &.mat-primary, &.mat-accent, &.mat-warn, &[disabled] {
-    &[disabled] {
+  &.mat-primary, &.mat-accent, &.mat-warn, &.mat-button-disabled {
+    &.mat-button-disabled {
       $palette: if($property == 'color', $foreground, $background);
       #{$property}: mat-color($palette, disabled-button);
     }
@@ -118,7 +118,7 @@ $_mat-button-ripple-opacity: 0.1;
 
   // Note: this needs a bit extra specificity, because we're not guaranteed the inclusion
   // order of the theme styles and the button reset may end up resetting this as well.
-  .mat-stroked-button:not([disabled]) {
+  .mat-stroked-button:not(.mat-button-disabled) {
     border-color: mat-color($foreground, divider);
   }
 
@@ -139,23 +139,23 @@ $_mat-button-ripple-opacity: 0.1;
   .mat-raised-button {
     @include _mat-theme-overridable-elevation(2, $config);
 
-    &:not([disabled]):active {
+    &:not(.mat-button-disabled):active {
       @include _mat-theme-overridable-elevation(8, $config);
     }
 
-    &[disabled] {
+    &.mat-button-disabled {
       @include _mat-theme-overridable-elevation(0, $config);
     }
   }
 
   .mat-fab, .mat-mini-fab {
     @include _mat-theme-overridable-elevation(6, $config);
 
-    &:not([disabled]):active {
+    &:not(.mat-button-disabled):active {
       @include _mat-theme-overridable-elevation(12, $config);
     }
 
-    &[disabled] {
+    &.mat-button-disabled {
       @include _mat-theme-overridable-elevation(0, $config);
     }
   }

src/material/button/button.scss

@@ -12,9 +12,9 @@
 
 // Only basic 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-stroked-button:hover {
-  .mat-button-focus-overlay {
+.mat-button,
+.mat-stroked-button {
+  &:hover:not(.mat-button-disabled) .mat-button-focus-overlay {
     opacity: 0.04;
   }
 }
@@ -23,9 +23,9 @@
 // enhancement and not all desktop browsers support this kind of media query, we can't
 // use something like `@media (hover)`.
 @media (hover: none) {
-  .mat-button:hover,
-  .mat-stroked-button:hover {
-    .mat-button-focus-overlay {
+  .mat-button,
+  .mat-stroked-button {
+    &:hover:not(.mat-button-disabled) .mat-button-focus-overlay {
       opacity: 0;
     }
   }

src/material/button/button.ts

@@ -71,6 +71,10 @@ const _MatButtonMixinBase: CanDisableRippleCtor & CanDisableCtor & CanColorCtor
   host: {
     '[attr.disabled]': 'disabled || null',
     '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
+    // Add a class for disabled button styling instead of the using attribute
+    // selector or pseudo-selector.  This allows users to create focusabled
+    // disabled buttons without recreating the styles.
+    '[class.mat-button-disabled]': 'disabled',
     'class': 'mat-focus-indicator',
   },
   templateUrl: 'button.html',
@@ -160,6 +164,7 @@ export class MatButton extends _MatButtonMixinBase
     '[attr.aria-disabled]': 'disabled.toString()',
     '(click)': '_haltDisabledEvents($event)',
     '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
+    '[class.mat-button-disabled]': 'disabled',
     'class': 'mat-focus-indicator',
   },
   inputs: ['disabled', 'disableRipple', 'color'],