chore(iconbutton): Focus ring matches icon shape

PiperOrigin-RevId: 497255853

Author: dfreedm

iconbutton/lib/_filled-icon-button.scss

@@ -9,6 +9,7 @@
 @use 'sass:map';
 @use '../../ripple/ripple';
 @use '../../sass/theme';
+@use '../../focus/focus-ring';
 @use '../../tokens';
 @use './shared';
 
@@ -20,6 +21,7 @@ $_custom-property-prefix: 'filled-icon-button';
     $tokens
   );
   $tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled');
+  $tokens: shared.resolve-shape-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
   @include theme.emit-theme-vars($tokens);
@@ -28,12 +30,24 @@ $_custom-property-prefix: 'filled-icon-button';
 @mixin styles() {
   $tokens: tokens.md-comp-filled-icon-button-values();
   $tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled');
+  $tokens: shared.resolve-shape-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
   :host {
     @each $token, $value in $tokens {
       --_#{$token}: #{$value};
     }
+
+    @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),
+        ),
+      )
+    );
   }
 
   .md3-icon-button {

iconbutton/lib/_filled-tonal-icon-button.scss

@@ -8,6 +8,7 @@
 
 @use 'sass:map';
 @use '../../ripple/ripple';
+@use '../../focus/focus-ring';
 @use '../../sass/theme';
 @use '../../tokens';
 @use './shared';
@@ -20,6 +21,7 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
     $tokens
   );
   $tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled-tonal');
+  $tokens: shared.resolve-shape-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
   @include theme.emit-theme-vars($tokens);
@@ -28,12 +30,24 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
 @mixin styles() {
   $tokens: tokens.md-comp-filled-tonal-icon-button-values();
   $tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled-tonal');
+  $tokens: shared.resolve-shape-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
   :host {
     @each $token, $value in $tokens {
       --_#{$token}: #{$value};
     }
+
+    @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),
+        ),
+      )
+    );
   }
 
   .md3-icon-button {

iconbutton/lib/_outlined-icon-button.scss

@@ -12,6 +12,7 @@
 @use '../../sass/color';
 @use '../../sass/theme';
 @use '../../tokens';
+@use '../../focus/focus-ring';
 @use './shared';
 
 $_custom-property-prefix: 'outlined-icon-button';
@@ -28,6 +29,7 @@ $_custom-property-prefix: 'outlined-icon-button';
   );
   $tokens: theme.validate-theme($reference, $tokens);
   $tokens: shared.flatten-disabled-colors($tokens, $variant: 'outlined');
+  $tokens: shared.resolve-shape-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
   @include theme.emit-theme-vars($tokens);
@@ -45,12 +47,24 @@ $_custom-property-prefix: 'outlined-icon-button';
     )
   );
   $tokens: shared.flatten-disabled-colors($tokens, $variant: 'outlined');
+  $tokens: shared.resolve-shape-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
   :host {
     @each $token, $value in $tokens {
       --_#{$token}: #{$value};
     }
+
+    @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),
+        ),
+      )
+    );
   }
 
   .md3-icon-button--outlined {

iconbutton/lib/_shared.scss

@@ -12,6 +12,8 @@
 @use 'sass:map';
 @use '../../sass/color';
 @use '../../sass/touch-target';
+@use '../../sass/shape';
+@use '../../sass/resolvers';
 @use '../../tokens';
 
 @mixin styles() {
@@ -46,7 +48,10 @@
       0px,
       calc((#{$touch-target-height} - var(--_container-size)) / 2)
     );
-    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);
 
     i,
     svg,
@@ -65,6 +70,11 @@
 
   md-ripple {
     z-index: -1; // Place behind content
+    // TODO(b/263517885): replace with ripple.theme(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-icon-button--flip-icon .md3-icon-button__icon {
@@ -166,3 +176,11 @@
     )
   );
 }
+
+@function resolve-shape-tokens($tokens, $property: 'container-shape') {
+  @return shape.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, 'shape'),
+    $property
+  );
+}

iconbutton/lib/_standard-icon-button.scss

@@ -9,6 +9,7 @@
 @use 'sass:map';
 @use '../../ripple/ripple';
 @use '../../sass/theme';
+@use '../../focus/focus-ring';
 @use '../../tokens';
 @use './shared';
 
@@ -17,6 +18,7 @@ $_custom-property-prefix: 'icon-button';
 @mixin theme($tokens) {
   $tokens: theme.validate-theme(tokens.md-comp-icon-button-values(), $tokens);
   $tokens: shared.flatten-disabled-colors($tokens);
+  $tokens: shared.resolve-shape-tokens($tokens, $property: 'state-layer-shape');
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
   @include theme.emit-theme-vars($tokens);
@@ -25,12 +27,24 @@ $_custom-property-prefix: 'icon-button';
 @mixin styles() {
   $tokens: tokens.md-comp-icon-button-values();
   $tokens: shared.flatten-disabled-colors($tokens);
+  $tokens: shared.resolve-shape-tokens($tokens, $property: 'state-layer-shape');
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
   :host {
     @each $token, $value in $tokens {
       --_#{$token}: #{$value};
     }
+
+    @include focus-ring.theme(
+      (
+        shape: (
+          var(--_state-layer-shape-start-start),
+          var(--_state-layer-shape-start-end),
+          var(--_state-layer-shape-end-end),
+          var(--_state-layer-shape-end-start),
+        ),
+      )
+    );
   }
 
   .md3-icon-button--standard {
@@ -102,4 +116,12 @@ $_custom-property-prefix: 'icon-button';
       )
     );
   }
+
+  md-ripple {
+    // TODO(b/263517885): replace with ripple.theme(state-layer-shape)
+    border-start-start-radius: var(--_state-layer-shape-start-start);
+    border-start-end-radius: var(--_state-layer-shape-start-end);
+    border-end-start-radius: var(--_state-layer-shape-end-start);
+    border-end-end-radius: var(--_state-layer-shape-end-end);
+  }
 }

iconbutton/lib/icon-button-toggle.ts

@@ -80,7 +80,7 @@ export class IconButtonToggle extends LitElement {
   };
 
   protected readonly renderRipple = () => {
-    return html`<md-ripple ?disabled="${this.disabled}" unbounded></md-ripple>`;
+    return html`<md-ripple ?disabled="${this.disabled}"></md-ripple>`;
   };
 
   protected override render(): TemplateResult {

iconbutton/lib/icon-button.ts

@@ -63,7 +63,7 @@ export class IconButton extends LitElement {
   };
 
   protected readonly renderRipple = () => {
-    return html`<md-ripple ?disabled="${this.disabled}" unbounded></md-ripple>`;
+    return html`<md-ripple ?disabled="${this.disabled}"></md-ripple>`;
   };
 
   protected override render(): TemplateResult {