From a0d1e1fec70b56a3a2bc7f26d98508e4971644f4 Mon Sep 17 00:00:00 2001
From: Material Web Team <material-web-copybara@google.com>
Date: Thu, 24 Aug 2023 23:30:46 -0700
Subject: [PATCH] fix: The focus ring shouldn't ignore the container-shape
 value

PiperOrigin-RevId: 559992320
---
 packages/mdc-button/_button-base.scss         |  4 ++--
 packages/mdc-button/_button-shared-theme.scss | 14 ++++++++++++++
 packages/mdc-focus-ring/_focus-ring.scss      |  6 ++++--
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/mdc-button/_button-base.scss b/packages/mdc-button/_button-base.scss
index 011f8980284..39a7b44a8f4 100644
--- a/packages/mdc-button/_button-base.scss
+++ b/packages/mdc-button/_button-base.scss
@@ -81,7 +81,7 @@
       }
     }
 
-    .mdc-button__focus-ring {
+    #{focus-ring.$focus-target} {
       @include focus-ring.focus-ring($query: $query);
       @include feature-targeting.targets($feat-structure) {
         display: none;
@@ -89,7 +89,7 @@
     }
 
     @include ripple-theme.focus {
-      .mdc-button__focus-ring {
+      #{focus-ring.$focus-target} {
         @include dom.forced-colors-mode($exclude-ie11: true) {
           @include feature-targeting.targets($feat-structure) {
             display: block;
diff --git a/packages/mdc-button/_button-shared-theme.scss b/packages/mdc-button/_button-shared-theme.scss
index 73a425e2411..70534909a0d 100644
--- a/packages/mdc-button/_button-shared-theme.scss
+++ b/packages/mdc-button/_button-shared-theme.scss
@@ -496,6 +496,20 @@ $disabled-container-color: rgba(
     $query: $query
   );
 
+  $radius-value: $radius;
+  @if custom-properties.is-custom-prop($radius) {
+    $radius-value: custom-properties.get-declaration-value($radius);
+  }
+
+  @if $radius-value != 0 and type-of($radius-value) == 'number' {
+    #{focus-ring.$focus-target} {
+      @include focus-ring.focus-ring-radius(
+        $ring-radius: $radius-value,
+        $query: $query
+      );
+    }
+  }
+
   #{button-ripple.$ripple-target} {
     @include shape-mixins.radius(
       $radius,
diff --git a/packages/mdc-focus-ring/_focus-ring.scss b/packages/mdc-focus-ring/_focus-ring.scss
index b534882470f..638d5a12628 100644
--- a/packages/mdc-focus-ring/_focus-ring.scss
+++ b/packages/mdc-focus-ring/_focus-ring.scss
@@ -24,6 +24,8 @@
 @use '@material/rtl/rtl';
 @use '@material/dom/dom';
 
+$focus-target: '.mdc-button__focus-ring';
+
 $ring-radius-default: 8px !default;
 $inner-ring-width-default: 2px !default;
 $inner-ring-color-default: transparent !default;
@@ -70,7 +72,7 @@ $container-outer-padding-default: 2px !default;
   @include feature-targeting.targets($feat-structure) {
     pointer-events: none;
     border: $inner-ring-width solid $inner-ring-color;
-    border-radius: $ring-radius - $outer-ring-width;
+    border-radius: calc($ring-radius - $outer-ring-width);
     box-sizing: content-box;
     position: absolute;
     top: 50%;
@@ -133,7 +135,7 @@ $container-outer-padding-default: 2px !default;
   $feat-structure: feature-targeting.create-target($query, structure);
 
   @include feature-targeting.targets($feat-structure) {
-    border-radius: $ring-radius - $outer-ring-width;
+    border-radius: calc($ring-radius - $outer-ring-width);
 
     &::after {
       border-radius: $ring-radius;