fix(iconbutton): allow icon button to be asymmetrically sized

Allow icon button to be asymmetrically sized by moving height and width setting to host. Also, fix focus shape mixin usage. PiperOrigin-RevId: 516301842
material-components · Mar 13, 2023 · 8a37ce2 · 8a37ce2
1 parent 6155278
commit 8a37ce2
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 52 deletions.
diff --git a/iconbutton/lib/_filled-icon-button.scss b/iconbutton/lib/_filled-icon-button.scss
@@ -10,8 +10,8 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../focus/focus-ring';
 @use '../../ripple/ripple';
+@use '../../sass/shape';
 @use '../../sass/theme';
 @use '../../tokens';
 @use './shared';
@@ -41,17 +41,6 @@ $_custom-property-prefix: 'filled-icon-button';
     @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 {

diff --git a/iconbutton/lib/_filled-tonal-icon-button.scss b/iconbutton/lib/_filled-tonal-icon-button.scss
@@ -10,8 +10,8 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../focus/focus-ring';
 @use '../../ripple/ripple';
+@use '../../sass/shape';
 @use '../../sass/theme';
 @use '../../tokens';
 @use './shared';
@@ -41,17 +41,6 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
     @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 {

diff --git a/iconbutton/lib/_outlined-icon-button.scss b/iconbutton/lib/_outlined-icon-button.scss
@@ -10,10 +10,10 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../focus/focus-ring';
 @use '../../ripple/ripple';
 @use '../../sass/color';
 @use '../../sass/resolvers';
+@use '../../sass/shape';
 @use '../../sass/theme';
 @use '../../tokens';
 @use './shared';
@@ -43,17 +43,6 @@ $_custom-property-prefix: 'outlined-icon-button';
     @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 {

diff --git a/iconbutton/lib/_shared.scss b/iconbutton/lib/_shared.scss
@@ -13,6 +13,7 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
+@use '../../focus/focus-ring';
 @use '../../icon/icon';
 @use '../../sass/color';
 @use '../../sass/resolvers';
@@ -26,10 +27,18 @@
     display: inline-flex;
     outline: none;
     -webkit-tap-highlight-color: transparent;
-    height: max(48px, var(--_container-size));
-    width: max(48px, var(--_container-size));
+    height: var(--_container-size);
+    width: var(--_container-size);
     align-items: center;
     justify-content: center;
+    // TODO(b/272824099): remove 48px miniumum size
+    margin: max(0px, (48px - var(--_container-size)) / 2);
+
+    @include focus-ring.theme(
+      (
+        shape: shape.corners-to-shape-token('--_container-shape'),
+      )
+    );
   }
 
   :host([disabled]) {
@@ -48,8 +57,8 @@
     text-decoration: none;
     user-select: none;
     z-index: 0;
-    height: var(--_container-size);
-    width: var(--_container-size);
+    width: 100%;
+    height: 100%;
     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);

diff --git a/iconbutton/lib/_standard-icon-button.scss b/iconbutton/lib/_standard-icon-button.scss
@@ -12,6 +12,7 @@
 // go/keep-sorted start
 @use '../../focus/focus-ring';
 @use '../../ripple/ripple';
+@use '../../sass/shape';
 @use '../../sass/theme';
 @use '../../tokens';
 @use './shared';
@@ -40,26 +41,21 @@ $_shape-property: 'state-layer-shape';
       --_#{$token}: #{$value};
     }
 
-    height: max(48px, var(--_state-layer-size));
-    width: max(48px, var(--_state-layer-size));
+    height: var(--_state-layer-size);
+    width: var(--_state-layer-size);
+    // TODO(b/272824099): remove 48px miniumum size
+    margin: max(0px, (48px - var(--_state-layer-size)) / 2);
 
     @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),
-        ),
+        shape: shape.corners-to-shape-token('--_state-layer-shape'),
       )
     );
   }
 
   .md3-icon-button--standard {
     background-color: transparent;
     color: var(--_unselected-icon-color);
-    height: var(--_state-layer-size);
-    width: var(--_state-layer-size);
 
     @include ripple.theme(
       (
@@ -69,8 +65,7 @@ $_shape-property: 'state-layer-shape';
         hover-opacity: var(--_unselected-hover-state-layer-opacity),
         pressed-color: var(--_unselected-pressed-state-layer-color),
         pressed-opacity: var(--_unselected-pressed-state-layer-opacity),
-        // TODO(b/263517885): replace with ripple.theme(state-layer-shape)
-        shape: var(--_state-layer-shape-start-start),
+        shape: shape.corners-to-shape-token('--_state-layer-shape'),
       )
     );