fix: The focus ring shouldn't ignore the container-shape value

PiperOrigin-RevId: 561711909
material-components · Aug 31, 2023 · 7a3942e · 7a3942e
1 parent 89b2e41
commit 7a3942e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git 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' {
+    .mdc-button__focus-ring {
+      @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
@@ -70,7 +70,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 +133,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;