Skip to content

Commit b144d15

Browse files
matthprostmatthprost
authored
fix(Toggle): native behavior on uncontrolled version (#5402)
1 parent 21df8c6 commit b144d15

File tree

7 files changed

+272
-314
lines changed

7 files changed

+272
-314
lines changed

‎.changeset/crazy-rooms-call.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ultraviolet/ui": patch
3+
---
4+
5+
Fix `<Toggle />` to use native behavior for uncontrolled version

‎packages/form/src/components/ToggleField/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 36 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -105,33 +105,33 @@ exports[`ToggleField > should render correctly 1`] = `
105105
width: calc(1rem * 1.3775);
106106
}
107107
108-
.emotion-6[data-checked="true"] {
108+
.emotion-6:has(:checked) {
109109
color: #222638;
110110
background-color: #8c40ef;
111111
}
112112
113-
.emotion-6[data-checked="true"]:hover {
113+
.emotion-6:has(:checked):hover {
114114
background-color: #792dd4;
115115
}
116116
117-
.emotion-6[data-checked="true"]:after {
117+
.emotion-6:has(:checked):after {
118118
left: calc(100% - 5px);
119119
-webkit-transform: translateX(-100%);
120120
-moz-transform: translateX(-100%);
121121
-ms-transform: translateX(-100%);
122122
transform: translateX(-100%);
123123
}
124124
125-
.emotion-6[data-checked="true"]:focus-within,
126-
.emotion-6[data-checked="true"]:focus {
125+
.emotion-6:has(:checked):focus-within,
126+
.emotion-6:has(:checked):focus {
127127
box-shadow: 0px 0px 0px 3px #8c40ef40;
128128
}
129129
130130
.emotion-6[data-disabled="true"] {
131131
background: #f3f3f4;
132132
}
133133
134-
.emotion-6[data-disabled="true"][data-checked="true"] {
134+
.emotion-6[data-disabled="true"]:has(:checked) {
135135
background: #e5dbfd;
136136
}
137137
@@ -144,15 +144,15 @@ exports[`ToggleField > should render correctly 1`] = `
144144
box-shadow: 0px 0px 0px 3px #f91b6c40;
145145
}
146146
147-
.emotion-6[data-error="true"][data-checked="true"] {
147+
.emotion-6[data-error="true"]:has(:checked) {
148148
background-color: #e51963;
149149
}
150150
151151
.emotion-6[data-error="true"][data-disabled="true"] {
152152
background-color: #fff3f7;
153153
}
154154
155-
.emotion-6[data-error="true"][data-disabled="true"][data-checked="true"] {
155+
.emotion-6[data-error="true"][data-disabled="true"]:has(:checked) {
156156
background-color: #ffd3e3;
157157
}
158158
@@ -186,12 +186,11 @@ exports[`ToggleField > should render correctly 1`] = `
186186
/>
187187
<div
188188
class="emotion-6 emotion-7"
189-
data-checked="false"
190189
data-disabled="false"
191190
data-error="false"
192191
>
193192
<input
194-
aria-checked="false"
193+
aria-invalid="false"
195194
class="emotion-8 emotion-9"
196195
id="«r0»"
197196
name="test"
@@ -309,33 +308,33 @@ exports[`ToggleField > should render correctly checked 1`] = `
309308
width: calc(1rem * 1.3775);
310309
}
311310
312-
.emotion-6[data-checked="true"] {
311+
.emotion-6:has(:checked) {
313312
color: #222638;
314313
background-color: #8c40ef;
315314
}
316315
317-
.emotion-6[data-checked="true"]:hover {
316+
.emotion-6:has(:checked):hover {
318317
background-color: #792dd4;
319318
}
320319
321-
.emotion-6[data-checked="true"]:after {
320+
.emotion-6:has(:checked):after {
322321
left: calc(100% - 5px);
323322
-webkit-transform: translateX(-100%);
324323
-moz-transform: translateX(-100%);
325324
-ms-transform: translateX(-100%);
326325
transform: translateX(-100%);
327326
}
328327
329-
.emotion-6[data-checked="true"]:focus-within,
330-
.emotion-6[data-checked="true"]:focus {
328+
.emotion-6:has(:checked):focus-within,
329+
.emotion-6:has(:checked):focus {
331330
box-shadow: 0px 0px 0px 3px #8c40ef40;
332331
}
333332
334333
.emotion-6[data-disabled="true"] {
335334
background: #f3f3f4;
336335
}
337336
338-
.emotion-6[data-disabled="true"][data-checked="true"] {
337+
.emotion-6[data-disabled="true"]:has(:checked) {
339338
background: #e5dbfd;
340339
}
341340
@@ -348,15 +347,15 @@ exports[`ToggleField > should render correctly checked 1`] = `
348347
box-shadow: 0px 0px 0px 3px #f91b6c40;
349348
}
350349
351-
.emotion-6[data-error="true"][data-checked="true"] {
350+
.emotion-6[data-error="true"]:has(:checked) {
352351
background-color: #e51963;
353352
}
354353
355354
.emotion-6[data-error="true"][data-disabled="true"] {
356355
background-color: #fff3f7;
357356
}
358357
359-
.emotion-6[data-error="true"][data-disabled="true"][data-checked="true"] {
358+
.emotion-6[data-error="true"][data-disabled="true"]:has(:checked) {
360359
background-color: #ffd3e3;
361360
}
362361
@@ -390,12 +389,11 @@ exports[`ToggleField > should render correctly checked 1`] = `
390389
/>
391390
<div
392391
class="emotion-6 emotion-7"
393-
data-checked="true"
394392
data-disabled="false"
395393
data-error="false"
396394
>
397395
<input
398-
aria-checked="true"
396+
aria-invalid="false"
399397
checked=""
400398
class="emotion-8 emotion-9"
401399
id="«r4»"
@@ -514,33 +512,33 @@ exports[`ToggleField > should render correctly disabled 1`] = `
514512
width: calc(1rem * 1.3775);
515513
}
516514
517-
.emotion-6[data-checked="true"] {
515+
.emotion-6:has(:checked) {
518516
color: #222638;
519517
background-color: #8c40ef;
520518
}
521519
522-
.emotion-6[data-checked="true"]:hover {
520+
.emotion-6:has(:checked):hover {
523521
background-color: #792dd4;
524522
}
525523
526-
.emotion-6[data-checked="true"]:after {
524+
.emotion-6:has(:checked):after {
527525
left: calc(100% - 5px);
528526
-webkit-transform: translateX(-100%);
529527
-moz-transform: translateX(-100%);
530528
-ms-transform: translateX(-100%);
531529
transform: translateX(-100%);
532530
}
533531
534-
.emotion-6[data-checked="true"]:focus-within,
535-
.emotion-6[data-checked="true"]:focus {
532+
.emotion-6:has(:checked):focus-within,
533+
.emotion-6:has(:checked):focus {
536534
box-shadow: 0px 0px 0px 3px #8c40ef40;
537535
}
538536
539537
.emotion-6[data-disabled="true"] {
540538
background: #f3f3f4;
541539
}
542540
543-
.emotion-6[data-disabled="true"][data-checked="true"] {
541+
.emotion-6[data-disabled="true"]:has(:checked) {
544542
background: #e5dbfd;
545543
}
546544
@@ -553,15 +551,15 @@ exports[`ToggleField > should render correctly disabled 1`] = `
553551
box-shadow: 0px 0px 0px 3px #f91b6c40;
554552
}
555553
556-
.emotion-6[data-error="true"][data-checked="true"] {
554+
.emotion-6[data-error="true"]:has(:checked) {
557555
background-color: #e51963;
558556
}
559557
560558
.emotion-6[data-error="true"][data-disabled="true"] {
561559
background-color: #fff3f7;
562560
}
563561
564-
.emotion-6[data-error="true"][data-disabled="true"][data-checked="true"] {
562+
.emotion-6[data-error="true"][data-disabled="true"]:has(:checked) {
565563
background-color: #ffd3e3;
566564
}
567565
@@ -595,12 +593,11 @@ exports[`ToggleField > should render correctly disabled 1`] = `
595593
/>
596594
<div
597595
class="emotion-6 emotion-7"
598-
data-checked="false"
599596
data-disabled="true"
600597
data-error="false"
601598
>
602599
<input
603-
aria-checked="false"
600+
aria-invalid="false"
604601
class="emotion-8 emotion-9"
605602
disabled=""
606603
id="«r2»"
@@ -745,33 +742,33 @@ exports[`ToggleField > should render correctly with label and checked 1`] = `
745742
width: calc(1rem * 1.3775);
746743
}
747744
748-
.emotion-10[data-checked="true"] {
745+
.emotion-10:has(:checked) {
749746
color: #222638;
750747
background-color: #8c40ef;
751748
}
752749
753-
.emotion-10[data-checked="true"]:hover {
750+
.emotion-10:has(:checked):hover {
754751
background-color: #792dd4;
755752
}
756753
757-
.emotion-10[data-checked="true"]:after {
754+
.emotion-10:has(:checked):after {
758755
left: calc(100% - 5px);
759756
-webkit-transform: translateX(-100%);
760757
-moz-transform: translateX(-100%);
761758
-ms-transform: translateX(-100%);
762759
transform: translateX(-100%);
763760
}
764761
765-
.emotion-10[data-checked="true"]:focus-within,
766-
.emotion-10[data-checked="true"]:focus {
762+
.emotion-10:has(:checked):focus-within,
763+
.emotion-10:has(:checked):focus {
767764
box-shadow: 0px 0px 0px 3px #8c40ef40;
768765
}
769766
770767
.emotion-10[data-disabled="true"] {
771768
background: #f3f3f4;
772769
}
773770
774-
.emotion-10[data-disabled="true"][data-checked="true"] {
771+
.emotion-10[data-disabled="true"]:has(:checked) {
775772
background: #e5dbfd;
776773
}
777774
@@ -784,15 +781,15 @@ exports[`ToggleField > should render correctly with label and checked 1`] = `
784781
box-shadow: 0px 0px 0px 3px #f91b6c40;
785782
}
786783
787-
.emotion-10[data-error="true"][data-checked="true"] {
784+
.emotion-10[data-error="true"]:has(:checked) {
788785
background-color: #e51963;
789786
}
790787
791788
.emotion-10[data-error="true"][data-disabled="true"] {
792789
background-color: #fff3f7;
793790
}
794791
795-
.emotion-10[data-error="true"][data-disabled="true"][data-checked="true"] {
792+
.emotion-10[data-error="true"][data-disabled="true"]:has(:checked) {
796793
background-color: #ffd3e3;
797794
}
798795
@@ -836,12 +833,11 @@ exports[`ToggleField > should render correctly with label and checked 1`] = `
836833
</div>
837834
<div
838835
class="emotion-10 emotion-11"
839-
data-checked="true"
840836
data-disabled="false"
841837
data-error="false"
842838
>
843839
<input
844-
aria-checked="true"
840+
aria-invalid="false"
845841
checked=""
846842
class="emotion-12 emotion-13"
847843
id="«r6»"

0 commit comments

Comments
 (0)