fix: Focus ring radius

PiperOrigin-RevId: 559992320
material-components · Aug 25, 2023 · be42690 · be42690
1 parent 0270229
commit be42690
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/packages/mdc-button/_button-base.scss b/packages/mdc-button/_button-base.scss
@@ -81,15 +81,15 @@
       }
     }
 
-    .mdc-button__focus-ring {
+    #{focus-ring.$focus-target} {
       @include focus-ring.focus-ring($query: $query);
       @include feature-targeting.targets($feat-structure) {
         display: none;
       }
     }
 
     @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
@@ -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
@@ -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;