fix(material/button): consistent disabled interactive fab

close #32146

Author: lekhmanrus

src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.html

@@ -8,3 +8,29 @@
   matButton="elevated"
   disabled
   matTooltip="This is a tooltip!">Default disabled button</button>
+
+<button matFab disabled disabledInteractive matTooltip="This is a tooltip!">
+  <mat-icon>add</mat-icon>
+</button>
+
+<button matFab disabled matTooltip="This is a tooltip!">
+  <mat-icon>add</mat-icon>
+</button>
+
+<button matFab disabled disabledInteractive extended matTooltip="This is a tooltip!">
+  <mat-icon>add</mat-icon>
+  Disabled FAB allowing interactivity
+</button>
+
+<button matFab disabled extended matTooltip="This is a tooltip!">
+  <mat-icon>add</mat-icon>
+  Default disabled FAB
+</button>
+
+<button matMiniFab disabled disabledInteractive matTooltip="This is a tooltip!">
+  <mat-icon>add</mat-icon>
+</button>
+
+<button matMiniFab disabled matTooltip="This is a tooltip!">
+  <mat-icon>add</mat-icon>
+</button>

src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.ts

@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
-import {MatButton} from '@angular/material/button';
+import {MatButton, MatFabButton, MatMiniFabButton} from '@angular/material/button';
+import {MatIcon} from '@angular/material/icon';
 import {MatTooltip} from '@angular/material/tooltip';
 
 /**
@@ -9,6 +10,6 @@ import {MatTooltip} from '@angular/material/tooltip';
   selector: 'button-disabled-interactive-example',
   templateUrl: 'button-disabled-interactive-example.html',
   styleUrl: 'button-disabled-interactive-example.css',
-  imports: [MatButton, MatTooltip],
+  imports: [MatButton, MatFabButton, MatMiniFabButton, MatIcon, MatTooltip],
 })
 export class ButtonDisabledInteractiveExample {}

src/material/button/_m2-fab.scss

@@ -20,43 +20,41 @@
 
   @return (
     base: (
-      fab-container-elevation-shadow: elevation.get-box-shadow(6),
       fab-container-shape: 50%,
       fab-touch-target-size: $touch-target-size,
-      fab-extended-container-elevation-shadow: elevation.get-box-shadow(6),
       fab-extended-container-height: 48px,
       fab-extended-container-shape: 24px,
-      fab-extended-focus-container-elevation-shadow: elevation.get-box-shadow(8),
-      fab-extended-hover-container-elevation-shadow: elevation.get-box-shadow(8),
-      fab-extended-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
-      fab-focus-container-elevation-shadow: elevation.get-box-shadow(8),
-      fab-hover-container-elevation-shadow: elevation.get-box-shadow(8),
-      fab-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
-      fab-small-container-elevation-shadow: elevation.get-box-shadow(6),
       fab-small-container-shape: 50%,
       fab-small-touch-target-size: $touch-target-size,
-      fab-small-focus-container-elevation-shadow: elevation.get-box-shadow(8),
-      fab-small-hover-container-elevation-shadow: elevation.get-box-shadow(8),
-      fab-small-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
     ),
     color: (
       fab-container-color: map.get($system, surface),
-      fab-disabled-state-container-color: $disabled-container,
-      fab-disabled-state-foreground-color: $disabled,
-      fab-disabled-state-layer-color: map.get($system, on-surface-variant),
+      fab-container-elevation-shadow: elevation.get-box-shadow(6),
       fab-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
       fab-foreground-color: map.get($system, on-surface),
       fab-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
       fab-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+      fab-disabled-container-color: $disabled-container,
+      fab-disabled-container-elevation-shadow: elevation.get-box-shadow(0),
+      fab-disabled-label-text-color: $disabled,
+      fab-disabled-state-layer-color: map.get($system, on-surface-variant),
+      fab-extended-container-elevation-shadow: elevation.get-box-shadow(6),
+      fab-extended-focus-container-elevation-shadow: elevation.get-box-shadow(8),
+      fab-extended-hover-container-elevation-shadow: elevation.get-box-shadow(8),
+      fab-extended-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
+      fab-focus-container-elevation-shadow: elevation.get-box-shadow(8),
+      fab-hover-container-elevation-shadow: elevation.get-box-shadow(8),
+      fab-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
       fab-ripple-color: m3-utils.color-with-opacity(
           map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
       fab-small-container-color: map.get($system, surface),
-      fab-small-disabled-state-container-color: $disabled-container,
-      fab-small-disabled-state-foreground-color: $disabled,
-      fab-small-disabled-state-layer-color: map.get($system, on-surface-variant),
+      fab-small-container-elevation-shadow: elevation.get-box-shadow(6),
+      fab-small-focus-container-elevation-shadow: elevation.get-box-shadow(8),
       fab-small-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
       fab-small-foreground-color: map.get($system, on-surface),
+      fab-small-hover-container-elevation-shadow: elevation.get-box-shadow(8),
       fab-small-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      fab-small-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
       fab-small-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
       fab-small-ripple-color: m3-utils.color-with-opacity(
           map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),

src/material/button/_m3-fab.scss

@@ -26,10 +26,6 @@
     color: (
       fab-container-color: map.get($system, primary-container),
       fab-container-elevation-shadow: elevation.get-box-shadow(map.get($system, level3)),
-      fab-disabled-state-container-color:
-          m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
-      fab-disabled-state-foreground-color:
-          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
       fab-extended-container-elevation-shadow: elevation.get-box-shadow(map.get($system, level3)),
       fab-extended-focus-container-elevation-shadow:
           elevation.get-box-shadow(map.get($system, level3)),
@@ -41,16 +37,19 @@
       fab-foreground-color: map.get($system, on-primary-container),
       fab-hover-container-elevation-shadow: elevation.get-box-shadow(map.get($system, level4)),
       fab-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
-      fab-pressed-container-elevation-shadow: elevation.get-box-shadow(map.get($system, level3)),
       fab-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+      fab-disabled-container-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+      fab-disabled-container-elevation-shadow:
+          elevation.get-box-shadow(map.get($system, level0)),
+      fab-disabled-label-text-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      fab-disabled-state-layer-color: map.get($system, on-surface-variant),
+      fab-pressed-container-elevation-shadow: elevation.get-box-shadow(map.get($system, level3)),
       fab-ripple-color: m3-utils.color-with-opacity(
           map.get($system, on-primary-container), map.get($system, pressed-state-layer-opacity)),
       fab-small-container-color: map.get($system, primary-container),
       fab-small-container-elevation-shadow: elevation.get-box-shadow(map.get($system, level3)),
-      fab-small-disabled-state-container-color:
-          m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
-      fab-small-disabled-state-foreground-color:
-          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
       fab-small-focus-container-elevation-shadow:
           elevation.get-box-shadow(map.get($system, level3)),
       fab-small-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
@@ -65,8 +64,6 @@
           map.get($system, on-primary-container), map.get($system, pressed-state-layer-opacity)),
       fab-small-state-layer-color: map.get($system, on-primary-container),
       fab-state-layer-color: map.get($system, on-primary-container),
-      fab-disabled-state-layer-color: null,
-      fab-small-disabled-state-layer-color: null,
     ),
     typography: (
       fab-extended-label-text-font: map.get($system, label-large-font),

src/material/button/fab.scss

@@ -116,8 +116,13 @@ $fallbacks: m3-fab.get-tokens();
   }
 
   @include button-base.mat-private-button-disabled {
-    color: token-utils.slot(fab-disabled-state-foreground-color, $fallbacks);
-    background-color: token-utils.slot(fab-disabled-state-container-color, $fallbacks);
+    color: token-utils.slot(fab-disabled-label-text-color, $fallbacks);
+    background-color: token-utils.slot(fab-disabled-container-color, $fallbacks);
+
+    &.mat-mdc-button-disabled {
+      box-shadow: token-utils.slot(
+          fab-disabled-container-elevation-shadow, $fallbacks);
+    }
   }
 
   @include button-base.mat-private-button-touch-target(true, fab-touch-target-size,
@@ -150,15 +155,20 @@ $fallbacks: m3-fab.get-tokens();
   }
 
   @include button-base.mat-private-button-disabled {
-    color: token-utils.slot(fab-small-disabled-state-foreground-color, $fallbacks);
-    background-color: token-utils.slot(fab-small-disabled-state-container-color, $fallbacks);
+    color: token-utils.slot(fab-disabled-label-text-color, $fallbacks);
+    background-color: token-utils.slot(fab-disabled-container-color, $fallbacks);
+
+    &.mat-mdc-button-disabled {
+      box-shadow: token-utils.slot(
+          fab-disabled-container-elevation-shadow, $fallbacks);
+    }
   }
 
   @include button-base.mat-private-button-touch-target(true,
     fab-small-touch-target-size, fab-small-touch-target-display, $fallbacks);
   @include button-base.mat-private-button-ripple(fab-small-ripple-color,
     fab-small-state-layer-color,
-    fab-small-disabled-state-layer-color, fab-small-hover-state-layer-opacity,
+    fab-disabled-state-layer-color, fab-small-hover-state-layer-opacity,
     fab-small-focus-state-layer-opacity, fab-small-pressed-state-layer-opacity, $fallbacks);
 }
 

src/material/menu/_m3-menu.scss

@@ -19,6 +19,7 @@
       menu-item-with-icon-trailing-spacing: 12px,
     ),
     color: (
+      menu-container-elevation-shadow: elevation.get-box-shadow(2),
       menu-container-shape: map.get($system, corner-extra-small),
       menu-divider-color: map.get($system, surface-variant),
       menu-item-label-text-color: map.get($system, on-surface),
@@ -28,7 +29,6 @@
       menu-item-focus-state-layer-color: m3-utils.color-with-opacity(
           map.get($system, on-surface), map.get($system, focus-state-layer-opacity)),
       menu-container-color: map.get($system, surface-container),
-      menu-container-elevation-shadow: elevation.get-box-shadow(2),
     ),
     typography: (
       menu-item-label-text-font: map.get($system, label-large-font),