Skip to content

Commit

Permalink
fix: multiple input component that labels are not clickable (#4334)
Browse files Browse the repository at this point in the history 
* fix: multiple input component that labels are not clickable

* fix: feedback alex

* fix: spacing in radio label
  • Loading branch information
@matthprost
matthprost authored Oct 10, 2024
1 parent c1ee1d9 commit 501e353
Show file tree
Hide file tree
Showing 23 changed files with 785 additions and 1,209 deletions.
6 changes: 6 additions & 0 deletions .changeset/wild-insects-exercise.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@ultraviolet/form": patch
"@ultraviolet/ui": patch
---

Fix `<Checkbox />`, `<Radio />` and `<Toggle />`, cannot click on label to check
72 changes: 30 additions & 42 deletions packages/form/src/components/CheckboxField/__tests__/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ exports[`CheckboxField > should render correctly 1`] = `
gap: 8px;
}
.emotion-0 .eqr7bqq3 {
.emotion-0 .eqr7bqq4 {
cursor: pointer;
}
Expand All @@ -24,7 +24,7 @@ exports[`CheckboxField > should render correctly 1`] = `
color: #b5b7bd;
}
.emotion-0[aria-disabled='true'] .eqr7bqq3 {
.emotion-0[aria-disabled='true'] .eqr7bqq4 {
cursor: not-allowed;
}
Expand Down Expand Up @@ -97,7 +97,7 @@ exports[`CheckboxField > should render correctly 1`] = `
stroke: #e51963;
}
.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .eqr7bqq5 {
.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .eqr7bqq6 {
fill: #ffffff;
}
Expand Down Expand Up @@ -353,7 +353,7 @@ exports[`CheckboxField > should render correctly checked without value 1`] = `
gap: 8px;
}
.emotion-0 .eqr7bqq3 {
.emotion-0 .eqr7bqq4 {
cursor: pointer;
}
Expand All @@ -362,7 +362,7 @@ exports[`CheckboxField > should render correctly checked without value 1`] = `
color: #b5b7bd;
}
.emotion-0[aria-disabled='true'] .eqr7bqq3 {
.emotion-0[aria-disabled='true'] .eqr7bqq4 {
cursor: not-allowed;
}
Expand Down Expand Up @@ -435,7 +435,7 @@ exports[`CheckboxField > should render correctly checked without value 1`] = `
stroke: #e51963;
}
.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .eqr7bqq5 {
.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .eqr7bqq6 {
fill: #ffffff;
}
Expand Down Expand Up @@ -692,7 +692,7 @@ exports[`CheckboxField > should render correctly disabled 1`] = `
gap: 8px;
}
.emotion-0 .eqr7bqq3 {
.emotion-0 .eqr7bqq4 {
cursor: pointer;
}
Expand All @@ -701,7 +701,7 @@ exports[`CheckboxField > should render correctly disabled 1`] = `
color: #b5b7bd;
}
.emotion-0[aria-disabled='true'] .eqr7bqq3 {
.emotion-0[aria-disabled='true'] .eqr7bqq4 {
cursor: not-allowed;
}
Expand Down Expand Up @@ -774,7 +774,7 @@ exports[`CheckboxField > should render correctly disabled 1`] = `
stroke: #e51963;
}
.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .eqr7bqq5 {
.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .eqr7bqq6 {
fill: #ffffff;
}
Expand Down Expand Up @@ -1031,7 +1031,7 @@ exports[`CheckboxField > should render correctly not checked without value 1`] =
gap: 8px;
}
.emotion-0 .eqr7bqq3 {
.emotion-0 .eqr7bqq4 {
cursor: pointer;
}
Expand All @@ -1040,7 +1040,7 @@ exports[`CheckboxField > should render correctly not checked without value 1`] =
color: #b5b7bd;
}
.emotion-0[aria-disabled='true'] .eqr7bqq3 {
.emotion-0[aria-disabled='true'] .eqr7bqq4 {
cursor: not-allowed;
}
Expand Down Expand Up @@ -1113,7 +1113,7 @@ exports[`CheckboxField > should render correctly not checked without value 1`] =
stroke: #e51963;
}
.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .eqr7bqq5 {
.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .eqr7bqq6 {
fill: #ffffff;
}
Expand Down Expand Up @@ -1369,7 +1369,7 @@ exports[`CheckboxField > should render correctly with errors 1`] = `
gap: 8px;
}
.emotion-0 .emotion-13 {
.emotion-0 .eqr7bqq4 {
cursor: pointer;
}
Expand All @@ -1378,7 +1378,7 @@ exports[`CheckboxField > should render correctly with errors 1`] = `
color: #b5b7bd;
}
.emotion-0[aria-disabled='true'] .emotion-13 {
.emotion-0[aria-disabled='true'] .eqr7bqq4 {
cursor: not-allowed;
}
Expand Down Expand Up @@ -1451,7 +1451,7 @@ exports[`CheckboxField > should render correctly with errors 1`] = `
stroke: #e51963;
}
.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .eqr7bqq5 {
.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .eqr7bqq6 {
fill: #ffffff;
}
Expand Down Expand Up @@ -1630,11 +1630,7 @@ exports[`CheckboxField > should render correctly with errors 1`] = `
flex: 1;
}
.emotion-12 {
width: 100%;
}
.emotion-14 {
.emotion-13 {
color: #3f4250;
font-size: 16px;
font-family: Inter,Asap,sans-serif;
Expand All @@ -1644,9 +1640,11 @@ exports[`CheckboxField > should render correctly with errors 1`] = `
text-transform: none;
-webkit-text-decoration: none;
text-decoration: none;
width: 100%;
cursor: pointer;
}
.emotion-17 {
.emotion-16 {
color: #b3144d;
font-size: 12px;
font-family: Inter,Asap,sans-serif;
Expand Down Expand Up @@ -1716,18 +1714,14 @@ exports[`CheckboxField > should render correctly with errors 1`] = `
class="emotion-10 emotion-9"
>
<label
class="emotion-12 emotion-13"
class="emotion-12 emotion-13 emotion-14"
for=":rb:"
>
<label
class="emotion-14 emotion-15"
>
Checkbox field error
</label>
Checkbox field error
</label>
</div>
<span
class="emotion-16 emotion-17 emotion-15"
class="emotion-15 emotion-16 emotion-14"
>
This field is required
</span>
Expand Down Expand Up @@ -1756,7 +1750,7 @@ exports[`CheckboxField > should trigger events correctly 1`] = `
gap: 8px;
}
.emotion-0 .emotion-13 {
.emotion-0 .eqr7bqq4 {
cursor: pointer;
}
Expand All @@ -1765,7 +1759,7 @@ exports[`CheckboxField > should trigger events correctly 1`] = `
color: #b5b7bd;
}
.emotion-0[aria-disabled='true'] .emotion-13 {
.emotion-0[aria-disabled='true'] .eqr7bqq4 {
cursor: not-allowed;
}
Expand Down Expand Up @@ -1838,7 +1832,7 @@ exports[`CheckboxField > should trigger events correctly 1`] = `
stroke: #e51963;
}
.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .eqr7bqq5 {
.emotion-0 .emotion-3[aria-checked="mixed"]+.emotion-5 .eqr7bqq6 {
fill: #ffffff;
}
Expand Down Expand Up @@ -2017,11 +2011,7 @@ exports[`CheckboxField > should trigger events correctly 1`] = `
flex: 1;
}
.emotion-12 {
width: 100%;
}
.emotion-14 {
.emotion-13 {
color: #3f4250;
font-size: 16px;
font-family: Inter,Asap,sans-serif;
Expand All @@ -2031,6 +2021,8 @@ exports[`CheckboxField > should trigger events correctly 1`] = `
text-transform: none;
-webkit-text-decoration: none;
text-decoration: none;
width: 100%;
cursor: pointer;
}
<div
Expand Down Expand Up @@ -2089,14 +2081,10 @@ exports[`CheckboxField > should trigger events correctly 1`] = `
class="emotion-10 emotion-9"
>
<label
class="emotion-12 emotion-13"
class="emotion-12 emotion-13 emotion-14"
for=":r8:"
>
<label
class="emotion-14 emotion-15"
>
Checkbox field events
</label>
Checkbox field events
</label>
</div>
</div>
Expand Down
Loading

0 comments on commit 501e353

Please sign in to comment.