From 8bad07bcf7aade5bb79b04a177acc227da8527bc Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Fri, 11 Aug 2023 10:53:28 -0700
Subject: [PATCH] feat(switch): add touch target configs

PiperOrigin-RevId: 556012902
---
 switch/internal/_switch.scss | 10 +++++++++-
 switch/internal/switch.ts    |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/switch/internal/_switch.scss b/switch/internal/_switch.scss
index d71b5c168b..a9413b9747 100644
--- a/switch/internal/_switch.scss
+++ b/switch/internal/_switch.scss
@@ -89,6 +89,10 @@
     -webkit-tap-highlight-color: transparent;
   }
 
+  :host([touch-target='wrapper']) {
+    margin: max(0px, (48px - var(--_track-height)) / 2) 0px;
+  }
+
   md-focus-ring {
     @include focus-ring.theme(
       (
@@ -125,7 +129,11 @@
   .touch {
     position: absolute;
     height: 48px;
-    width: 48px;
+    width: 100%;
+  }
+
+  :host([touch-target='none']) .touch {
+    display: none;
   }
 
   // Disabled
diff --git a/switch/internal/switch.ts b/switch/internal/switch.ts
index 4ce7e3a090..67533f3868 100644
--- a/switch/internal/switch.ts
+++ b/switch/internal/switch.ts
@@ -148,12 +148,12 @@ export class Switch extends LitElement {
       'with-icon': this.icons || (this.showOnlySelectedIcon && this.selected),
     };
     return html`
+      ${this.renderTouchTarget()}
       <span class="handle-container">
         <md-ripple for="switch" ?disabled="${this.disabled}"></md-ripple>
         <span class="handle ${classMap(classes)}">
           ${this.shouldShowIcons() ? this.renderIcons() : html``}
         </span>
-        ${this.renderTouchTarget()}
       </span>
     `;
   }