feat(iconbutton): add touch target configs

PiperOrigin-RevId: 556114164
material-components · Aug 11, 2023 · 0862c58 · 0862c58
1 parent 88eec0c
commit 0862c58
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/iconbutton/internal/_icon-button.scss b/iconbutton/internal/_icon-button.scss
@@ -39,6 +39,10 @@
     width: var(--_state-layer-size);
   }
 
+  :host([touch-target='wrapper']) {
+    margin: max(0px, (48px - var(--_state-layer-size)) / 2);
+  }
+
   md-focus-ring {
     @include focus-ring.theme(
       (

diff --git a/iconbutton/internal/_shared.scss b/iconbutton/internal/_shared.scss
@@ -25,6 +25,10 @@
     justify-content: center;
   }
 
+  :host([touch-target='wrapper']) {
+    margin: max(0px, (48px - var(--_container-size)) / 2);
+  }
+
   md-focus-ring {
     @include focus-ring.theme(
       (
@@ -49,6 +53,7 @@
     display: flex;
     justify-content: center;
     outline: none;
+    padding: 0;
     position: relative;
     text-decoration: none;
     user-select: none;
@@ -100,4 +105,8 @@
     width: 48px;
     transform: translate(-50%, -50%);
   }
+
+  :host([touch-target='none']) .touch {
+    display: none;
+  }
 }