fix(focus)!: refactor focus ring to better match component shape

- Focus ring now adds offset and width to look spec correct - Replace `offset-vertical` and `offset-horizontal` tokens with a single `offset` token. PiperOrigin-RevId: 516361036
material-components · Mar 13, 2023 · 61ff279 · 61ff279
1 parent 8a37ce2
commit 61ff279
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 22 deletions.
diff --git a/checkbox/lib/_checkbox.scss b/checkbox/lib/_checkbox.scss
@@ -134,8 +134,7 @@ $_checkmark-bottom-left: 7px, -14px;
   md-focus-ring {
     @include focus-ring.theme(
       (
-        offset-vertical: -2px,
-        offset-horizontal: -2px,
+        offset: -2px,
         shape: map.get(tokens.md-sys-shape-values(), corner-full),
       )
     );

diff --git a/fab/lib/_shared.scss b/fab/lib/_shared.scss
@@ -53,7 +53,7 @@
 
     @include focus-ring.theme(
       (
-        shape: shape.corners-to-shape-token(--_container-shape),
+        shape: shape.corners-to-shape-token('--_container-shape'),
       )
     );
 
@@ -193,8 +193,7 @@
       // Adjust the focus ring padding to account for the 1px border in HCM.
       @include focus-ring.theme(
         (
-          offset-vertical: 3px,
-          offset-horizontal: 3px,
+          offset: 3px,
         )
       );
       border: 1px solid ButtonText;

diff --git a/focus/lib/_focus-ring.scss b/focus/lib/_focus-ring.scss
@@ -37,16 +37,22 @@ $_custom-property-prefix: 'focus-ring';
     box-sizing: border-box;
     pointer-events: none;
     border: var(--_width) solid var(--_color);
-    border-start-start-radius: var(--_shape-start-start);
-    border-start-end-radius: var(--_shape-start-end);
-    border-end-start-radius: var(--_shape-end-start);
-    border-end-end-radius: var(--_shape-end-end);
+    border-start-start-radius: calc(
+      var(--_offset) + var(--_width) + var(--_shape-start-start)
+    );
+    border-start-end-radius: calc(
+      var(--_offset) + var(--_width) + var(--_shape-start-end)
+    );
+    border-end-start-radius: calc(
+      var(--_offset) + var(--_width) + var(--_shape-end-start)
+    );
+    border-end-end-radius: calc(
+      var(--_offset) + var(--_width) + var(--_shape-end-end)
+    );
     // Note that the ring will not respect its parent's border. This will not be
     // an issue as long as border is set via a sibling node, similar to ripple
     // and touch target.
-    $vertical-inset: calc(-1 * (var(--_offset-vertical) + var(--_width)));
-    $horizontal-inset: calc(-1 * (var(--_offset-horizontal) + var(--_width)));
-    inset: $vertical-inset $horizontal-inset;
+    inset: calc(-1 * (var(--_offset) + var(--_width)));
   }
 
   :host([visible]) {

diff --git a/focus/lib/_md-comp-focus-ring.scss b/focus/lib/_md-comp-focus-ring.scss
@@ -23,8 +23,7 @@ $_default: (
         null,
         map.get($deps, md-sys-shape, corner-full)
       ),
-    offset-vertical: if($exclude-hardcoded-values, null, 2px),
-    offset-horizontal: if($exclude-hardcoded-values, null, 2px),
+    offset: if($exclude-hardcoded-values, null, 2px),
     width: if($exclude-hardcoded-values, null, 3px),
     color: map.get($deps, md-sys-color, secondary)
   );

diff --git a/list/lib/listitem/_list-item.scss b/list/lib/listitem/_list-item.scss
@@ -50,8 +50,7 @@
 
     @include focus-ring.theme(
       (
-        offset-vertical: -2px,
-        offset-horizontal: -3px,
+        offset: -3px,
         shape: map.get(tokens.md-sys-shape-values(), corner-extra-small),
       )
     );

diff --git a/navigationtab/lib/_navigation-tab.scss b/navigationtab/lib/_navigation-tab.scss
@@ -44,8 +44,7 @@ $_custom-property-prefix: 'navigation-bar';
 
     @include focus-ring.theme(
       (
-        offset-vertical: -2px,
-        offset-horizontal: -2px,
+        offset: -2px,
         shape: map.get(tokens.md-sys-shape-values(), corner-small),
       )
     );

diff --git a/radio/lib/_radio.scss b/radio/lib/_radio.scss
@@ -45,8 +45,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 
     @include focus-ring.theme(
       (
-        offset-vertical: -2px,
-        offset-horizontal: -2px,
+        offset: -2px,
       )
     );
 

diff --git a/slider/lib/_slider.scss b/slider/lib/_slider.scss
@@ -471,8 +471,7 @@
   md-focus-ring {
     @include focus-ring.theme(
       (
-        offset-vertical: -2px,
-        offset-horizontal: -2px,
+        offset: -2px,
         shape: map.get(tokens.md-sys-shape-values(), corner-full),
       )
     );