Skip to content

Commit

Permalink
feat(switch): Restructure DOM (#5312)
Browse files Browse the repository at this point in the history 
Move switch native control out of thumb element and into track element.

BREAKING CHANGE: Switch DOM structure has changed. See switch README for details
  • Loading branch information
@patrickrodee
patrickrodee authored Dec 9, 2019
1 parent a0da497 commit 0ec1fab
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 52 deletions.
15 changes: 6 additions & 9 deletions packages/mdc-switch/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
20 changes: 8 additions & 12 deletions test/screenshot/spec/mdc-switch/classes/baseline.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
12 changes: 5 additions & 7 deletions test/screenshot/spec/mdc-switch/mixins/density.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
20 changes: 8 additions & 12 deletions test/screenshot/spec/mdc-switch/mixins/thumb-color.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
20 changes: 8 additions & 12 deletions test/screenshot/spec/mdc-switch/mixins/track-color.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit 0ec1fab

Please sign in to comment.