From 088df46e27213306ff09ba8529d1822ef21abc01 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Sun, 11 May 2025 09:13:20 +0200
Subject: [PATCH] fix(material/button): inherit button shape in focus indicator

Updates the button's focus indicator to inherit the shape of its button which looks better than the current approach.
---
 src/material/button/_button-base.scss | 10 +++++++++-
 src/material/button/fab.scss          |  3 ++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/material/button/_button-base.scss b/src/material/button/_button-base.scss
index bd452c589ad7..33d25abf3bde 100644
--- a/src/material/button/_button-base.scss
+++ b/src/material/button/_button-base.scss
@@ -6,7 +6,7 @@
 // color and opacity for states like hover, active, and focus. Additionally, adds styles to the
 // ripple and state container so that they fill the button, match the border radius, and avoid
 // pointer events.
-@mixin mat-private-button-interactive() {
+@mixin mat-private-button-interactive($focus-indicator-inherits-shape: true) {
   -webkit-tap-highlight-color: transparent;
 
   // The ripple container should match the bounds of the entire button.
@@ -50,10 +50,18 @@
   // The focus indicator should match the bounds of the entire button.
   .mat-focus-indicator {
     @include layout-common.fill();
+
+    @if ($focus-indicator-inherits-shape) {
+      border-radius: inherit;
+    }
   }
 
   &:focus > .mat-focus-indicator::before {
     content: '';
+
+    @if ($focus-indicator-inherits-shape) {
+      border-radius: inherit;
+    }
   }
 }
 
diff --git a/src/material/button/fab.scss b/src/material/button/fab.scss
index 8da19ef2230e..327532994e5e 100644
--- a/src/material/button/fab.scss
+++ b/src/material/button/fab.scss
@@ -26,7 +26,8 @@
     transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);
   flex-shrink: 0; // Prevent the button from shrinking since it's always supposed to be a circle.
 
-  @include button-base.mat-private-button-interactive();
+  // Due to the shape of the FAB, inheriting the shape looks off. Disable it explicitly.
+  @include button-base.mat-private-button-interactive($focus-indicator-inherits-shape: false);
   @include style-private.private-animation-noop();
 
   &::before {