From 21fb3f7c474feb9bec958bcb42135c7b6e9545b4 Mon Sep 17 00:00:00 2001 From: Ruslan Lekhman Date: Thu, 23 Oct 2025 00:37:31 -0600 Subject: [PATCH] fix(material/button): consistent disabled interactive fab close #32146 --- .../button-disabled-interactive-example.html | 26 ++++++++++++++ .../button-disabled-interactive-example.ts | 5 +-- src/material/button/_m2-fab.scss | 34 +++++++++---------- src/material/button/_m3-fab.scss | 19 +++++------ src/material/button/fab.scss | 20 ++++++++--- src/material/menu/_m3-menu.scss | 2 +- 6 files changed, 69 insertions(+), 37 deletions(-) diff --git a/src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.html b/src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.html index 5925e2991940..f7c76412e83a 100644 --- a/src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.html +++ b/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 + + + + + + + + + + + + diff --git a/src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.ts b/src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.ts index 3cac4066ffeb..1bc92c975e2b 100644 --- a/src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.ts +++ b/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 {} diff --git a/src/material/button/_m2-fab.scss b/src/material/button/_m2-fab.scss index 1653cf1f9c88..7fd2e7c27751 100644 --- a/src/material/button/_m2-fab.scss +++ b/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)), diff --git a/src/material/button/_m3-fab.scss b/src/material/button/_m3-fab.scss index 29798b9071ed..7a9d7eda38db 100644 --- a/src/material/button/_m3-fab.scss +++ b/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), diff --git a/src/material/button/fab.scss b/src/material/button/fab.scss index de6e03f23c1e..0d621f64a4b9 100644 --- a/src/material/button/fab.scss +++ b/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); } diff --git a/src/material/menu/_m3-menu.scss b/src/material/menu/_m3-menu.scss index 20ecd0555dad..e18414e9f1f1 100644 --- a/src/material/menu/_m3-menu.scss +++ b/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),