From bafd37f8dbf64517962c2730c7cc1fd9d552bba4 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 14 Jul 2026 09:51:58 +0200 Subject: [PATCH] fix(material/button): match focus indicator shape to FAB Updates the FAB's focus indicator to match the shape of the button. Relates to #33517. --- src/material/button/fab.scss | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/material/button/fab.scss b/src/material/button/fab.scss index 42071234f8e0..f1ff64f3837b 100644 --- a/src/material/button/fab.scss +++ b/src/material/button/fab.scss @@ -6,6 +6,9 @@ @use './m3-fab'; $fallbacks: m3-fab.get-tokens(); +$indicator-border-width: focus-indicators-private.$default-border-width; +$border-width: var(--mat-focus-indicator-border-width, #{$indicator-border-width}); +$indicator-offset: calc(#{$border-width} + 2px); .mat-mdc-fab-base { @include vendor-prefixes.user-select(none); @@ -81,10 +84,9 @@ $fallbacks: m3-fab.get-tokens(); } .mat-focus-indicator::before { - $default-border-width: focus-indicators-private.$default-border-width; - $border-width: var(--mat-focus-indicator-border-width, #{$default-border-width}); - $offset: calc(#{$border-width} + 2px); - margin: calc(#{$offset} * -1); + margin: calc(#{$indicator-offset} * -1); + border-radius: calc(#{token-utils.slot(fab-container-shape, $fallbacks)} + + #{$indicator-offset}); } @include button-base.mat-private-button-disabled { @@ -149,6 +151,11 @@ $fallbacks: m3-fab.get-tokens(); box-shadow: token-utils.slot(fab-small-pressed-container-elevation-shadow, $fallbacks); } + .mat-focus-indicator::before { + border-radius: calc(#{token-utils.slot(fab-small-container-shape, $fallbacks)} + + #{$indicator-offset}); + } + @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);