feat(button): add touch target configs

PiperOrigin-RevId: 555666648
material-components · Aug 10, 2023 · 1f46179 · 1f46179
1 parent 2300eb6
commit 1f46179
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/button/internal/_shared.scss b/button/internal/_shared.scss
@@ -14,6 +14,7 @@
 @mixin styles() {
   :host {
     display: inline-flex;
+    height: var(--_container-height);
     outline: none;
     -webkit-tap-highlight-color: transparent;
     // Override vertical-align with shortest value "top". Vertical-align's
@@ -31,6 +32,10 @@
     );
   }
 
+  :host([touch-target='wrapper']) {
+    margin: max(0px, (48px - var(--_container-height)) / 2) 0;
+  }
+
   md-focus-ring {
     @include focus-ring.theme(
       (
@@ -63,7 +68,7 @@
     inline-size: 100%;
     position: relative;
     z-index: 0; // Place content on top of elevation and ripple
-    block-size: var(--_container-height);
+    height: 100%;
     font: var(--_label-text-type);
     color: var(--_label-text-color);
     // TODO(b/181413732): Verify token below are named correctly

diff --git a/button/internal/_touch-target.scss b/button/internal/_touch-target.scss
@@ -4,12 +4,16 @@
 //
 
 @mixin styles() {
-  .button__touch {
+  .touch {
     position: absolute;
     top: 50%;
     height: 48px;
     left: 0;
     right: 0;
     transform: translateY(-50%);
   }
+
+  :host([touch-target='none']) .touch {
+    display: none;
+  }
 }
diff --git a/button/internal/button.ts b/button/internal/button.ts
@@ -135,9 +135,7 @@ export abstract class Button extends LitElement implements FormSubmitter {
   }
 
   private renderTouchTarget() {
-    return html`
-      <span class="button__touch"></span>
-    `;
+    return html`<span class="touch"></span>`;
   }
 
   private readonly handleActivationClick = (event: MouseEvent) => {