feat(switch): add touch target configs

PiperOrigin-RevId: 556012902
material-components · Aug 11, 2023 · 8bad07b · 8bad07b
1 parent b8d0828
commit 8bad07b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git 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
@@ -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>
     `;
   }