Skip to content

Commit c8f5887

Browse files
matthprostmatthprost
authored
fix(SelectableCard): make label clickable by removing pointer events to none (#4870)
1 parent 356fde9 commit c8f5887

File tree

17 files changed

+7544
-2844
lines changed

17 files changed

+7544
-2844
lines changed

‎.changeset/brown-months-repeat.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ultraviolet/ui": patch
3+
---
4+
5+
Fix `<SelectableCard />` to be able to click on the label and remove all `pointer-events: none`

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

+205-5
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,6 @@ exports[`SelectableCardField > should render correctly 1`] = `
124124
-webkit-box-align: start;
125125
-ms-flex-align: start;
126126
align-items: start;
127-
pointer-events: none;
128127
}
129128
130129
.emotion-5[aria-disabled='false'],
@@ -183,6 +182,47 @@ exports[`SelectableCardField > should render correctly 1`] = `
183182
display: none;
184183
}
185184
185+
.emotion-5:hover[aria-disabled='false']:not([data-checked='true']) .emotion-8+.emotion-10 {
186+
fill: #d9dadd;
187+
}
188+
189+
.emotion-5:hover[aria-disabled='false']:not([data-checked='true']) .emotion-8+.emotion-10 .emotion-12 {
190+
fill: #ffffff;
191+
}
192+
193+
.emotion-5:hover[aria-disabled='false']:not([data-checked='true']) .emotion-8[aria-invalid='true']+.emotion-10 {
194+
fill: #b3144d;
195+
}
196+
197+
.emotion-5:hover[aria-disabled='false']:not([data-checked='true']) .emotion-8[aria-invalid='true']+.emotion-10 .emotion-12 {
198+
fill: #ffffff;
199+
}
200+
201+
.emotion-5:hover[aria-disabled='false'] .emotion-8+.emotion-10 {
202+
fill: #8c40ef;
203+
}
204+
205+
.emotion-5:hover[aria-disabled='false'] .emotion-8+.emotion-10 .emotion-12 {
206+
fill: #ffffff;
207+
}
208+
209+
.emotion-5:hover[aria-disabled='false'] .emotion-8[aria-invalid='true']+.emotion-10 {
210+
fill: #b3144d;
211+
}
212+
213+
.emotion-5:hover[aria-disabled='false'] .emotion-8[aria-invalid='true']+.emotion-10 .emotion-12 {
214+
fill: #ffffff;
215+
}
216+
217+
.emotion-5 .emotion-8[aria-disabled='false']:active+.emotion-10 {
218+
background: none;
219+
fill: #8c40ef;
220+
}
221+
222+
.emotion-5 .emotion-8[aria-disabled='false']:active+.emotion-10 .emotion-12 {
223+
fill: #ffffff;
224+
}
225+
186226
.emotion-7 {
187227
cursor: pointer;
188228
position: absolute;
@@ -509,7 +549,6 @@ exports[`SelectableCardField > should render correctly checked 1`] = `
509549
-webkit-box-align: start;
510550
-ms-flex-align: start;
511551
align-items: start;
512-
pointer-events: none;
513552
}
514553
515554
.emotion-5[aria-disabled='false'],
@@ -568,6 +607,47 @@ exports[`SelectableCardField > should render correctly checked 1`] = `
568607
display: none;
569608
}
570609
610+
.emotion-5:hover[aria-disabled='false']:not([data-checked='true']) .emotion-8+.emotion-10 {
611+
fill: #d9dadd;
612+
}
613+
614+
.emotion-5:hover[aria-disabled='false']:not([data-checked='true']) .emotion-8+.emotion-10 .emotion-12 {
615+
fill: #ffffff;
616+
}
617+
618+
.emotion-5:hover[aria-disabled='false']:not([data-checked='true']) .emotion-8[aria-invalid='true']+.emotion-10 {
619+
fill: #b3144d;
620+
}
621+
622+
.emotion-5:hover[aria-disabled='false']:not([data-checked='true']) .emotion-8[aria-invalid='true']+.emotion-10 .emotion-12 {
623+
fill: #ffffff;
624+
}
625+
626+
.emotion-5:hover[aria-disabled='false'] .emotion-8+.emotion-10 {
627+
fill: #8c40ef;
628+
}
629+
630+
.emotion-5:hover[aria-disabled='false'] .emotion-8+.emotion-10 .emotion-12 {
631+
fill: #ffffff;
632+
}
633+
634+
.emotion-5:hover[aria-disabled='false'] .emotion-8[aria-invalid='true']+.emotion-10 {
635+
fill: #b3144d;
636+
}
637+
638+
.emotion-5:hover[aria-disabled='false'] .emotion-8[aria-invalid='true']+.emotion-10 .emotion-12 {
639+
fill: #ffffff;
640+
}
641+
642+
.emotion-5 .emotion-8[aria-disabled='false']:active+.emotion-10 {
643+
background: none;
644+
fill: #8c40ef;
645+
}
646+
647+
.emotion-5 .emotion-8[aria-disabled='false']:active+.emotion-10 .emotion-12 {
648+
fill: #ffffff;
649+
}
650+
571651
.emotion-7 {
572652
cursor: pointer;
573653
position: absolute;
@@ -895,7 +975,6 @@ exports[`SelectableCardField > should render correctly disabled 1`] = `
895975
-webkit-box-align: start;
896976
-ms-flex-align: start;
897977
align-items: start;
898-
pointer-events: none;
899978
}
900979
901980
.emotion-5[aria-disabled='false'],
@@ -954,6 +1033,47 @@ exports[`SelectableCardField > should render correctly disabled 1`] = `
9541033
display: none;
9551034
}
9561035
1036+
.emotion-5:hover[aria-disabled='false']:not([data-checked='true']) .emotion-8+.emotion-10 {
1037+
fill: #d9dadd;
1038+
}
1039+
1040+
.emotion-5:hover[aria-disabled='false']:not([data-checked='true']) .emotion-8+.emotion-10 .emotion-12 {
1041+
fill: #ffffff;
1042+
}
1043+
1044+
.emotion-5:hover[aria-disabled='false']:not([data-checked='true']) .emotion-8[aria-invalid='true']+.emotion-10 {
1045+
fill: #b3144d;
1046+
}
1047+
1048+
.emotion-5:hover[aria-disabled='false']:not([data-checked='true']) .emotion-8[aria-invalid='true']+.emotion-10 .emotion-12 {
1049+
fill: #ffffff;
1050+
}
1051+
1052+
.emotion-5:hover[aria-disabled='false'] .emotion-8+.emotion-10 {
1053+
fill: #8c40ef;
1054+
}
1055+
1056+
.emotion-5:hover[aria-disabled='false'] .emotion-8+.emotion-10 .emotion-12 {
1057+
fill: #ffffff;
1058+
}
1059+
1060+
.emotion-5:hover[aria-disabled='false'] .emotion-8[aria-invalid='true']+.emotion-10 {
1061+
fill: #b3144d;
1062+
}
1063+
1064+
.emotion-5:hover[aria-disabled='false'] .emotion-8[aria-invalid='true']+.emotion-10 .emotion-12 {
1065+
fill: #ffffff;
1066+
}
1067+
1068+
.emotion-5 .emotion-8[aria-disabled='false']:active+.emotion-10 {
1069+
background: none;
1070+
fill: #8c40ef;
1071+
}
1072+
1073+
.emotion-5 .emotion-8[aria-disabled='false']:active+.emotion-10 .emotion-12 {
1074+
fill: #ffffff;
1075+
}
1076+
9571077
.emotion-7 {
9581078
cursor: pointer;
9591079
position: absolute;
@@ -1280,7 +1400,6 @@ exports[`SelectableCardField > should render correctly with errors 1`] = `
12801400
-webkit-box-align: start;
12811401
-ms-flex-align: start;
12821402
align-items: start;
1283-
pointer-events: none;
12841403
}
12851404
12861405
.emotion-5[aria-disabled='false'],
@@ -1339,6 +1458,47 @@ exports[`SelectableCardField > should render correctly with errors 1`] = `
13391458
display: none;
13401459
}
13411460
1461+
.emotion-5:hover[aria-disabled='false']:not([data-checked='true']) .emotion-8+.emotion-10 {
1462+
fill: #d9dadd;
1463+
}
1464+
1465+
.emotion-5:hover[aria-disabled='false']:not([data-checked='true']) .emotion-8+.emotion-10 .emotion-12 {
1466+
fill: #ffffff;
1467+
}
1468+
1469+
.emotion-5:hover[aria-disabled='false']:not([data-checked='true']) .emotion-8[aria-invalid='true']+.emotion-10 {
1470+
fill: #b3144d;
1471+
}
1472+
1473+
.emotion-5:hover[aria-disabled='false']:not([data-checked='true']) .emotion-8[aria-invalid='true']+.emotion-10 .emotion-12 {
1474+
fill: #ffffff;
1475+
}
1476+
1477+
.emotion-5:hover[aria-disabled='false'] .emotion-8+.emotion-10 {
1478+
fill: #8c40ef;
1479+
}
1480+
1481+
.emotion-5:hover[aria-disabled='false'] .emotion-8+.emotion-10 .emotion-12 {
1482+
fill: #ffffff;
1483+
}
1484+
1485+
.emotion-5:hover[aria-disabled='false'] .emotion-8[aria-invalid='true']+.emotion-10 {
1486+
fill: #b3144d;
1487+
}
1488+
1489+
.emotion-5:hover[aria-disabled='false'] .emotion-8[aria-invalid='true']+.emotion-10 .emotion-12 {
1490+
fill: #ffffff;
1491+
}
1492+
1493+
.emotion-5 .emotion-8[aria-disabled='false']:active+.emotion-10 {
1494+
background: none;
1495+
fill: #8c40ef;
1496+
}
1497+
1498+
.emotion-5 .emotion-8[aria-disabled='false']:active+.emotion-10 .emotion-12 {
1499+
fill: #ffffff;
1500+
}
1501+
13421502
.emotion-7 {
13431503
cursor: pointer;
13441504
position: absolute;
@@ -1670,7 +1830,6 @@ exports[`SelectableCardField > should trigger events correctly 1`] = `
16701830
-webkit-box-align: start;
16711831
-ms-flex-align: start;
16721832
align-items: start;
1673-
pointer-events: none;
16741833
}
16751834
16761835
.emotion-5[aria-disabled='false'],
@@ -1729,6 +1888,47 @@ exports[`SelectableCardField > should trigger events correctly 1`] = `
17291888
display: none;
17301889
}
17311890
1891+
.emotion-5:hover[aria-disabled='false']:not([data-checked='true']) .emotion-8+.emotion-10 {
1892+
fill: #d9dadd;
1893+
}
1894+
1895+
.emotion-5:hover[aria-disabled='false']:not([data-checked='true']) .emotion-8+.emotion-10 .emotion-12 {
1896+
fill: #ffffff;
1897+
}
1898+
1899+
.emotion-5:hover[aria-disabled='false']:not([data-checked='true']) .emotion-8[aria-invalid='true']+.emotion-10 {
1900+
fill: #b3144d;
1901+
}
1902+
1903+
.emotion-5:hover[aria-disabled='false']:not([data-checked='true']) .emotion-8[aria-invalid='true']+.emotion-10 .emotion-12 {
1904+
fill: #ffffff;
1905+
}
1906+
1907+
.emotion-5:hover[aria-disabled='false'] .emotion-8+.emotion-10 {
1908+
fill: #8c40ef;
1909+
}
1910+
1911+
.emotion-5:hover[aria-disabled='false'] .emotion-8+.emotion-10 .emotion-12 {
1912+
fill: #ffffff;
1913+
}
1914+
1915+
.emotion-5:hover[aria-disabled='false'] .emotion-8[aria-invalid='true']+.emotion-10 {
1916+
fill: #b3144d;
1917+
}
1918+
1919+
.emotion-5:hover[aria-disabled='false'] .emotion-8[aria-invalid='true']+.emotion-10 .emotion-12 {
1920+
fill: #ffffff;
1921+
}
1922+
1923+
.emotion-5 .emotion-8[aria-disabled='false']:active+.emotion-10 {
1924+
background: none;
1925+
fill: #8c40ef;
1926+
}
1927+
1928+
.emotion-5 .emotion-8[aria-disabled='false']:active+.emotion-10 .emotion-12 {
1929+
fill: #ffffff;
1930+
}
1931+
17321932
.emotion-7 {
17331933
cursor: pointer;
17341934
position: absolute;

0 commit comments

Comments
 (0)