feat(focus-ring, button): Match focus ring shape to button shape

BREAKING CHANGE: Button shape properties are now of the form `--md-text-button-container-shape-start-start` PiperOrigin-RevId: 497196760
material-components · Dec 22, 2022 · 7fad3a5 · 7fad3a5
1 parent 10af36a
commit 7fad3a5
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 7 deletions.
diff --git a/button/lib/_elevated-button.scss b/button/lib/_elevated-button.scss
@@ -7,6 +7,7 @@
 @use '../../sass/resolvers';
 @use '../../sass/theme';
 @use '../../sass/typography';
+@use '../../sass/shape';
 @use '../../tokens';
 @use './elevation';
 @use './shared';
@@ -53,5 +54,10 @@ $_custom-property-prefix: 'elevated-button';
     map.get(resolvers.$material, 'typography'),
     'label-text'
   );
+  $tokens: shape.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, 'shape'),
+    'container-shape'
+  );
   @return elevation.resolve-tokens($tokens);
 }
diff --git a/button/lib/_filled-button.scss b/button/lib/_filled-button.scss
@@ -7,6 +7,7 @@
 @use '../../sass/resolvers';
 @use '../../sass/theme';
 @use '../../sass/typography';
+@use '../../sass/shape';
 @use '../../tokens';
 @use './elevation';
 @use './shared';
@@ -49,5 +50,10 @@ $_custom-property-prefix: 'filled-button';
     map.get(resolvers.$material, 'typography'),
     'label-text'
   );
+  $tokens: shape.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, 'shape'),
+    'container-shape'
+  );
   @return elevation.resolve-tokens($tokens);
 }
diff --git a/button/lib/_outlined-button.scss b/button/lib/_outlined-button.scss
@@ -7,6 +7,7 @@
 @use '../../sass/resolvers';
 @use '../../sass/theme';
 @use '../../sass/typography';
+@use '../../sass/shape';
 @use '../../tokens';
 @use './shared';
 
@@ -51,7 +52,10 @@ $_custom-property-prefix: 'outlined-button';
     position: absolute;
     box-sizing: border-box;
     border-color: var(--_outline-color);
-    border-radius: var(--_container-shape);
+    border-start-start-radius: var(--_container-shape-start-start);
+    border-start-end-radius: var(--_container-shape-start-end);
+    border-end-start-radius: var(--_container-shape-end-start);
+    border-end-end-radius: var(--_container-shape-end-end);
 
     .md3-button:active & {
       border-color: var(--_pressed-outline-color);
@@ -83,5 +87,10 @@ $_custom-property-prefix: 'outlined-button';
     map.get(resolvers.$material, 'typography'),
     'label-text'
   );
+  $tokens: shape.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, 'shape'),
+    'container-shape'
+  );
   @return $tokens;
 }
diff --git a/button/lib/_shared.scss b/button/lib/_shared.scss
@@ -12,6 +12,7 @@
 @use '../../sass/dom';
 @use '../../sass/typography';
 @use '../../sass/resolvers';
+@use '../../focus/focus-ring';
 
 @mixin styles() {
   :host {
@@ -35,16 +36,22 @@
         pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
       )
     );
+
+    @include focus-ring.theme(
+      (
+        shape: (
+          var(--_container-shape-start-start),
+          var(--_container-shape-start-end),
+          var(--_container-shape-end-end),
+          var(--_container-shape-end-start),
+        ),
+      )
+    );
   }
 
   :host([disabled]) {
     cursor: default;
     pointer-events: none;
-
-    border-start-start-radius: var(
-      --md-comp-button-shape-start-start,
-      var(--md-comp-button-shape)
-    );
   }
 
   .md3-button {
@@ -108,7 +115,10 @@
 
   .md3-button,
   .md3-button__ripple {
-    border-radius: var(--_container-shape);
+    border-start-start-radius: var(--_container-shape-start-start);
+    border-start-end-radius: var(--_container-shape-start-end);
+    border-end-start-radius: var(--_container-shape-end-start);
+    border-end-end-radius: var(--_container-shape-end-end);
   }
 
   md-elevation,

diff --git a/button/lib/_text-button.scss b/button/lib/_text-button.scss
@@ -7,6 +7,7 @@
 @use '../../sass/resolvers';
 @use '../../sass/theme';
 @use '../../sass/typography';
+@use '../../sass/shape';
 @use '../../tokens';
 @use './shared';
 
@@ -54,5 +55,10 @@ $_custom-property-prefix: 'text-button';
     map.get(resolvers.$material, 'typography'),
     'label-text'
   );
+  $tokens: shape.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, 'shape'),
+    'container-shape'
+  );
   @return $tokens;
 }
diff --git a/button/lib/_tonal-button.scss b/button/lib/_tonal-button.scss
@@ -7,6 +7,7 @@
 @use '../../sass/resolvers';
 @use '../../sass/theme';
 @use '../../sass/typography';
+@use '../../sass/shape';
 @use '../../tokens';
 @use './elevation';
 @use './shared';
@@ -52,5 +53,10 @@ $_custom-property-prefix: 'tonal-button';
     map.get(resolvers.$material, 'typography'),
     'label-text'
   );
+  $tokens: shape.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, 'shape'),
+    'container-shape'
+  );
   @return elevation.resolve-tokens($tokens);
 }