fix(chips): add touch target

PiperOrigin-RevId: 530436458
material-components · May 8, 2023 · 55c9701 · 55c9701
1 parent 8d31bd9
commit 55c9701
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/chips/lib/_shared.scss b/chips/lib/_shared.scss
@@ -88,6 +88,14 @@
     padding-inline-end: 8px;
   }
 
+  .touch {
+    height: 48px;
+    inset: 50% 0 0;
+    position: absolute;
+    transform: translateY(-50%);
+    width: 100%;
+  }
+
   // Outline, separate node for disabled opacity changes
   .outline {
     border: var(--_outline-width) solid var(--_outline-color);
@@ -111,7 +119,8 @@
   }
 
   .label,
-  .icon {
+  .icon,
+  .touch {
     // Place content above background elements
     z-index: 1;
   }

diff --git a/chips/lib/chip.ts b/chips/lib/chip.ts
@@ -73,6 +73,7 @@ export abstract class Chip extends LitElement {
         ${this.renderLeadingIcon()}
       </span>
       <span class="label">${this.label}</span>
+      <span class="touch"></span>
     `;
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -73,6 +73,7 @@ export abstract class Chip extends LitElement { @@
             ${this.renderLeadingIcon()}
           </span>
           <span class="label">${this.label}</span>
+          <span class="touch"></span>
         `;
       }
@@ Expand Down @@