From 0ec1fabc39222cac4446c8e2b85d74d2a5d21e1a Mon Sep 17 00:00:00 2001
From: Patty RoDee <prodee@google.com>
Date: Mon, 9 Dec 2019 14:34:24 -0800
Subject: [PATCH] feat(switch): Restructure DOM (#5312)

Move switch native control out of thumb element and into track element.

BREAKING CHANGE: Switch DOM structure has changed. See switch README for details
---
 packages/mdc-switch/README.md                 | 15 ++++++--------
 .../spec/mdc-switch/classes/baseline.html     | 20 ++++++++-----------
 .../spec/mdc-switch/mixins/density.html       | 12 +++++------
 .../spec/mdc-switch/mixins/thumb-color.html   | 20 ++++++++-----------
 .../spec/mdc-switch/mixins/track-color.html   | 20 ++++++++-----------
 5 files changed, 35 insertions(+), 52 deletions(-)

diff --git a/packages/mdc-switch/README.md b/packages/mdc-switch/README.md
index 62bad8023c6..695e3f60c82 100644
--- a/packages/mdc-switch/README.md
+++ b/packages/mdc-switch/README.md
@@ -42,9 +42,8 @@ npm install @material/switch
 <div class="mdc-switch">
   <div class="mdc-switch__track"></div>
   <div class="mdc-switch__thumb-underlay">
-    <div class="mdc-switch__thumb">
-        <input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch">
-    </div>
+    <div class="mdc-switch__thumb"></div>
+    <input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch">
   </div>
 </div>
 <label for="basic-switch">off/on</label>
@@ -78,9 +77,8 @@ Add the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disab
 <div class="mdc-switch mdc-switch--disabled">
   <div class="mdc-switch__track"></div>
   <div class="mdc-switch__thumb-underlay">
-    <div class="mdc-switch__thumb">
-      <input type="checkbox" id="another-basic-switch" class="mdc-switch__native-control" role="switch" disabled>
-    </div>
+    <div class="mdc-switch__thumb"></div>
+    <input type="checkbox" id="another-basic-switch" class="mdc-switch__native-control" role="switch" disabled>
   </div>
 </div>
 <label for="another-basic-switch">off/on</label>
@@ -94,9 +92,8 @@ Add the `mdc-switch--checked` class to the `mdc-switch` element, and the `checke
 <div class="mdc-switch mdc-switch--checked">
   <div class="mdc-switch__track"></div>
   <div class="mdc-switch__thumb-underlay">
-    <div class="mdc-switch__thumb">
-      <input type="checkbox" id="another-basic-switch" class="mdc-switch__native-control" role="switch" checked>
-    </div>
+    <div class="mdc-switch__thumb"></div>
+    <input type="checkbox" id="another-basic-switch" class="mdc-switch__native-control" role="switch" checked>
   </div>
 </div>
 <label for="another-basic-switch">off/on</label>
diff --git a/test/screenshot/spec/mdc-switch/classes/baseline.html b/test/screenshot/spec/mdc-switch/classes/baseline.html
index dd59da25128..61d75fc76e4 100644
--- a/test/screenshot/spec/mdc-switch/classes/baseline.html
+++ b/test/screenshot/spec/mdc-switch/classes/baseline.html
@@ -46,9 +46,8 @@
           <div class="mdc-switch">
             <div class="mdc-switch__track"></div>
             <div class="mdc-switch__thumb-underlay">
-              <div class="mdc-switch__thumb">
-                <input type="checkbox" id="basic-switch-1" class="mdc-switch__native-control" role="switch">
-              </div>
+              <div class="mdc-switch__thumb"></div>
+              <input type="checkbox" id="basic-switch-1" class="mdc-switch__native-control" role="switch">
             </div>
           </div>
           <label class="test-switch-label" for="basic-switch-1">1</label>
@@ -58,9 +57,8 @@
           <div class="mdc-switch mdc-switch--checked">
             <div class="mdc-switch__track"></div>
             <div class="mdc-switch__thumb-underlay">
-              <div class="mdc-switch__thumb">
-                <input type="checkbox" id="basic-switch-2" class="mdc-switch__native-control" role="switch" checked>
-              </div>
+              <div class="mdc-switch__thumb"></div>
+              <input type="checkbox" id="basic-switch-2" class="mdc-switch__native-control" role="switch" checked>
             </div>
           </div>
           <label class="test-switch-label" for="basic-switch-2">2</label>
@@ -70,9 +68,8 @@
           <div class="mdc-switch mdc-switch--disabled">
             <div class="mdc-switch__track"></div>
             <div class="mdc-switch__thumb-underlay">
-              <div class="mdc-switch__thumb">
-                <input type="checkbox" id="basic-switch-3" class="mdc-switch__native-control" role="switch" disabled>
-              </div>
+              <div class="mdc-switch__thumb"></div>
+              <input type="checkbox" id="basic-switch-3" class="mdc-switch__native-control" role="switch" disabled>
             </div>
           </div>
           <label class="test-switch-label" for="basic-switch-3">3</label>
@@ -82,9 +79,8 @@
           <div class="mdc-switch mdc-switch--checked mdc-switch--disabled">
             <div class="mdc-switch__track"></div>
             <div class="mdc-switch__thumb-underlay">
-              <div class="mdc-switch__thumb">
-                <input type="checkbox" id="basic-switch-4" class="mdc-switch__native-control" role="switch" checked disabled>
-              </div>
+              <div class="mdc-switch__thumb"></div>
+              <input type="checkbox" id="basic-switch-4" class="mdc-switch__native-control" role="switch" checked disabled>
             </div>
           </div>
           <label class="test-switch-label" for="basic-switch-4">4</label>
diff --git a/test/screenshot/spec/mdc-switch/mixins/density.html b/test/screenshot/spec/mdc-switch/mixins/density.html
index 6052b551e69..3908d2f14d4 100644
--- a/test/screenshot/spec/mdc-switch/mixins/density.html
+++ b/test/screenshot/spec/mdc-switch/mixins/density.html
@@ -47,10 +47,9 @@
           <div class="mdc-switch custom-switch--density-5">
             <div class="mdc-switch__track"></div>
             <div class="mdc-switch__thumb-underlay">
-              <div class="mdc-switch__thumb">
-                <input type="checkbox" id="basic-switch-1" class="mdc-switch__native-control" role="switch"
-                    data-autofocus>
-              </div>
+              <div class="mdc-switch__thumb"></div>
+              <input type="checkbox" id="basic-switch-1" class="mdc-switch__native-control" role="switch"
+              data-autofocus>
             </div>
           </div>
           <label class="test-switch-label" for="basic-switch-1">Density -5</label>
@@ -60,9 +59,8 @@
           <div class="mdc-switch custom-switch--density-2">
             <div class="mdc-switch__track"></div>
             <div class="mdc-switch__thumb-underlay">
-              <div class="mdc-switch__thumb">
-                <input type="checkbox" id="basic-switch-2" class="mdc-switch__native-control" role="switch">
-              </div>
+              <div class="mdc-switch__thumb"></div>
+              <input type="checkbox" id="basic-switch-2" class="mdc-switch__native-control" role="switch">
             </div>
           </div>
           <label class="test-switch-label" for="basic-switch-2">Density -2</label>
diff --git a/test/screenshot/spec/mdc-switch/mixins/thumb-color.html b/test/screenshot/spec/mdc-switch/mixins/thumb-color.html
index 36abbb21a8c..5d1815f9e92 100644
--- a/test/screenshot/spec/mdc-switch/mixins/thumb-color.html
+++ b/test/screenshot/spec/mdc-switch/mixins/thumb-color.html
@@ -46,9 +46,8 @@
           <div class="custom-switch custom-switch--thumb-color mdc-switch">
             <div class="mdc-switch__track"></div>
             <div class="mdc-switch__thumb-underlay">
-              <div class="mdc-switch__thumb">
-                <input type="checkbox" id="basic-switch-1" class="mdc-switch__native-control" role="switch">
-              </div>
+              <div class="mdc-switch__thumb"></div>
+              <input type="checkbox" id="basic-switch-1" class="mdc-switch__native-control" role="switch">
             </div>
           </div>
           <label class="test-switch-label" for="basic-switch-1">1</label>
@@ -58,9 +57,8 @@
           <div class="custom-switch custom-switch--thumb-color mdc-switch mdc-switch--checked">
             <div class="mdc-switch__track"></div>
             <div class="mdc-switch__thumb-underlay">
-              <div class="mdc-switch__thumb">
-                <input type="checkbox" id="basic-switch-2" class="mdc-switch__native-control" role="switch" checked>
-              </div>
+              <div class="mdc-switch__thumb"></div>
+              <input type="checkbox" id="basic-switch-2" class="mdc-switch__native-control" role="switch" checked>
             </div>
           </div>
           <label class="test-switch-label" for="basic-switch-2">2</label>
@@ -70,9 +68,8 @@
           <div class="custom-switch custom-switch--thumb-color mdc-switch mdc-switch--disabled">
             <div class="mdc-switch__track"></div>
             <div class="mdc-switch__thumb-underlay">
-              <div class="mdc-switch__thumb">
-                <input type="checkbox" id="basic-switch-3" class="mdc-switch__native-control" role="switch" disabled>
-              </div>
+              <div class="mdc-switch__thumb"></div>
+              <input type="checkbox" id="basic-switch-3" class="mdc-switch__native-control" role="switch" disabled>
             </div>
           </div>
           <label class="test-switch-label" for="basic-switch-3">3</label>
@@ -82,9 +79,8 @@
           <div class="custom-switch custom-switch--thumb-color mdc-switch mdc-switch--checked mdc-switch--disabled">
             <div class="mdc-switch__track"></div>
             <div class="mdc-switch__thumb-underlay">
-              <div class="mdc-switch__thumb">
-                <input type="checkbox" id="basic-switch-4" class="mdc-switch__native-control" role="switch" checked disabled>
-              </div>
+              <div class="mdc-switch__thumb"></div>
+              <input type="checkbox" id="basic-switch-4" class="mdc-switch__native-control" role="switch" checked disabled>
             </div>
           </div>
           <label class="test-switch-label" for="basic-switch-4">4</label>
diff --git a/test/screenshot/spec/mdc-switch/mixins/track-color.html b/test/screenshot/spec/mdc-switch/mixins/track-color.html
index db1f94f2ba4..511624df772 100644
--- a/test/screenshot/spec/mdc-switch/mixins/track-color.html
+++ b/test/screenshot/spec/mdc-switch/mixins/track-color.html
@@ -46,9 +46,8 @@
           <div class="custom-switch custom-switch--track-color mdc-switch">
             <div class="mdc-switch__track"></div>
             <div class="mdc-switch__thumb-underlay">
-              <div class="mdc-switch__thumb">
-                <input type="checkbox" id="basic-switch-1" class="mdc-switch__native-control" role="switch">
-              </div>
+              <div class="mdc-switch__thumb"></div>
+              <input type="checkbox" id="basic-switch-1" class="mdc-switch__native-control" role="switch">
             </div>
           </div>
           <label class="test-switch-label" for="basic-switch-1">1</label>
@@ -58,9 +57,8 @@
           <div class="custom-switch custom-switch--track-color mdc-switch mdc-switch--checked">
             <div class="mdc-switch__track"></div>
             <div class="mdc-switch__thumb-underlay">
-              <div class="mdc-switch__thumb">
-                <input type="checkbox" id="basic-switch-2" class="mdc-switch__native-control" role="switch" checked>
-              </div>
+              <div class="mdc-switch__thumb"></div>
+              <input type="checkbox" id="basic-switch-2" class="mdc-switch__native-control" role="switch" checked>
             </div>
           </div>
           <label class="test-switch-label" for="basic-switch-2">2</label>
@@ -70,9 +68,8 @@
           <div class="custom-switch custom-switch--track-color mdc-switch mdc-switch--disabled">
             <div class="mdc-switch__track"></div>
             <div class="mdc-switch__thumb-underlay">
-              <div class="mdc-switch__thumb">
-                <input type="checkbox" id="basic-switch-3" class="mdc-switch__native-control" role="switch" disabled>
-              </div>
+              <div class="mdc-switch__thumb"></div>
+              <input type="checkbox" id="basic-switch-3" class="mdc-switch__native-control" role="switch" disabled>
             </div>
           </div>
           <label class="test-switch-label" for="basic-switch-3">3</label>
@@ -82,9 +79,8 @@
           <div class="custom-switch custom-switch--track-color mdc-switch mdc-switch--checked mdc-switch--disabled">
             <div class="mdc-switch__track"></div>
             <div class="mdc-switch__thumb-underlay">
-              <div class="mdc-switch__thumb">
-                <input type="checkbox" id="basic-switch-4" class="mdc-switch__native-control" role="switch" checked disabled>
-              </div>
+              <div class="mdc-switch__thumb"></div>
+              <input type="checkbox" id="basic-switch-4" class="mdc-switch__native-control" role="switch" checked disabled>
             </div>
           </div>
           <label class="test-switch-label" for="basic-switch-4">4</label>