refactor(iconbutton): set target size directly on host, same as radio…

… and checkbox PiperOrigin-RevId: 501020595
material-components · Jan 10, 2023 · 82d7556 · 82d7556
1 parent 4974ede
commit 82d7556
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 11 deletions.
diff --git a/iconbutton/lib/_shared.scss b/iconbutton/lib/_shared.scss
@@ -22,15 +22,17 @@
     display: inline-flex;
     outline: none;
     -webkit-tap-highlight-color: transparent;
+    height: max(48px, var(--_container-size));
+    width: max(48px, var(--_container-size));
+    align-items: center;
+    justify-content: center;
   }
 
   :host([disabled]) {
     pointer-events: none;
   }
 
   .md3-icon-button {
-    $touch-target-height: 48px;
-
     align-items: center;
     border: none;
     box-sizing: border-box;
@@ -44,10 +46,6 @@
     z-index: 0;
     height: var(--_container-size);
     width: var(--_container-size);
-    margin: max(
-      0px,
-      calc((#{$touch-target-height} - var(--_container-size)) / 2)
-    );
     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
@@ -35,6 +35,9 @@ $_custom-property-prefix: 'icon-button';
       --_#{$token}: #{$value};
     }
 
+    height: max(48px, var(--_state-layer-size));
+    width: max(48px, var(--_state-layer-size));
+
     @include focus-ring.theme(
       (
         shape: (
@@ -48,15 +51,10 @@ $_custom-property-prefix: 'icon-button';
   }
 
   .md3-icon-button--standard {
-    $touch-target-height: 48px;
     background-color: transparent;
     color: var(--_unselected-icon-color);
     height: var(--_state-layer-size);
     width: var(--_state-layer-size);
-    margin: max(
-      0px,
-      calc((#{$touch-target-height} - #{var(--_state-layer-size)}) / 2)
-    );
 
     @include ripple.theme(
       (