Skip to content
This repository was archived by the owner on Mar 25, 2025. It is now read-only.

Commit 442d445

Browse files
TiggeTigge
committed
fix(select): only style select arrow, not all svgs
When doing custom selects with svgs inside the selectors they are styled in the same color as the arrow which is probably not what the user wants.
1 parent e3605e7 commit 442d445

File tree

5 files changed

+89
-33
lines changed

5 files changed

+89
-33
lines changed

‎packages/core/src/Input/__snapshots__/index.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4592,7 +4592,7 @@ exports[`TextInput TimeInput 1`] = `
45924592
padding: 0 4px 0 8px;
45934593
}
45944594
4595-
.c10 > div > span > svg {
4595+
.c10 .c11 > *:last-child > svg {
45964596
width: 100%;
45974597
height: 100%;
45984598
cursor: pointer;

‎packages/core/src/Select/BaseSelectSelector.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ const SelectInput = styled.div<SelectInputProps>`
6262
: `0 ${spacing.medium}`};
6363
}
6464
65-
> div > span > svg {
65+
${SelectInsideContainer} > *:last-child > svg {
6666
width: 100%;
6767
height: 100%;
6868
cursor: pointer;

‎packages/core/src/Select/__snapshots__/MultiSelect.test.tsx.snap‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ exports[`Select Direction 1`] = `
108108
padding: 0 8px;
109109
}
110110
111-
.c3 > div > span > svg {
111+
.c3 .c4 > *:last-child > svg {
112112
width: 100%;
113113
height: 100%;
114114
cursor: pointer;
@@ -507,7 +507,7 @@ exports[`Select Direction 2`] = `
507507
padding: 0 8px;
508508
}
509509
510-
.c3 > div > span > svg {
510+
.c3 .c4 > *:last-child > svg {
511511
width: 100%;
512512
height: 100%;
513513
cursor: pointer;
@@ -906,7 +906,7 @@ exports[`Select Other 1`] = `
906906
padding: 0 8px;
907907
}
908908
909-
.c3 > div > span > svg {
909+
.c3 .c4 > *:last-child > svg {
910910
width: 100%;
911911
height: 100%;
912912
cursor: pointer;
@@ -1290,6 +1290,14 @@ exports[`Select Other 2`] = `
12901290
padding: 0 8px;
12911291
}
12921292
1293+
.c19 .c4 > *:last-child > svg {
1294+
width: 100%;
1295+
height: 100%;
1296+
cursor: pointer;
1297+
background-color: transparent;
1298+
fill: rgb(102,102,102);
1299+
}
1300+
12931301
.c3 {
12941302
display: -webkit-box;
12951303
display: -webkit-flex;
@@ -1318,7 +1326,7 @@ exports[`Select Other 2`] = `
13181326
padding: 0 8px;
13191327
}
13201328
1321-
.c3 > div > span > svg {
1329+
.c3 .c4 > *:last-child > svg {
13221330
width: 100%;
13231331
height: 100%;
13241332
cursor: pointer;
@@ -1717,7 +1725,7 @@ exports[`Select Width 1`] = `
17171725
padding: 0 8px;
17181726
}
17191727
1720-
.c3 > div > span > svg {
1728+
.c3 .c4 > *:last-child > svg {
17211729
width: 100%;
17221730
height: 100%;
17231731
cursor: pointer;
@@ -2116,7 +2124,7 @@ exports[`Select Width 2`] = `
21162124
padding: 0 8px;
21172125
}
21182126
2119-
.c3 > div > span > svg {
2127+
.c3 .c4 > *:last-child > svg {
21202128
width: 100%;
21212129
height: 100%;
21222130
cursor: pointer;
@@ -2547,7 +2555,7 @@ exports[`Select Width 3`] = `
25472555
padding: 0 8px;
25482556
}
25492557
2550-
.c3 > div > span > svg {
2558+
.c3 .c4 > *:last-child > svg {
25512559
width: 100%;
25522560
height: 100%;
25532561
cursor: pointer;

‎packages/core/src/Select/__snapshots__/SearchSelect.test.tsx.snap‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ exports[`Select Direction 1`] = `
7373
padding: 0 8px;
7474
}
7575
76-
.c3 > div > span > svg {
76+
.c3 .c4 > *:last-child > svg {
7777
width: 100%;
7878
height: 100%;
7979
cursor: pointer;
@@ -300,7 +300,7 @@ exports[`Select Direction 2`] = `
300300
padding: 0 8px;
301301
}
302302
303-
.c3 > div > span > svg {
303+
.c3 .c4 > *:last-child > svg {
304304
width: 100%;
305305
height: 100%;
306306
cursor: pointer;
@@ -527,7 +527,7 @@ exports[`Select Other 1`] = `
527527
padding: 0 8px;
528528
}
529529
530-
.c3 > div > span > svg {
530+
.c3 .c4 > *:last-child > svg {
531531
width: 100%;
532532
height: 100%;
533533
cursor: pointer;
@@ -739,6 +739,14 @@ exports[`Select Other 2`] = `
739739
padding: 0 8px;
740740
}
741741
742+
.c10 .c4 > *:last-child > svg {
743+
width: 100%;
744+
height: 100%;
745+
cursor: pointer;
746+
background-color: transparent;
747+
fill: rgb(102,102,102);
748+
}
749+
742750
.c3 {
743751
display: -webkit-box;
744752
display: -webkit-flex;
@@ -767,7 +775,7 @@ exports[`Select Other 2`] = `
767775
padding: 0 8px;
768776
}
769777
770-
.c3 > div > span > svg {
778+
.c3 .c4 > *:last-child > svg {
771779
width: 100%;
772780
height: 100%;
773781
cursor: pointer;
@@ -994,7 +1002,7 @@ exports[`Select SelectMarker 1`] = `
9941002
padding: 0 8px;
9951003
}
9961004
997-
.c3 > div > span > svg {
1005+
.c3 .c4 > *:last-child > svg {
9981006
width: 100%;
9991007
height: 100%;
10001008
cursor: pointer;
@@ -1221,7 +1229,7 @@ exports[`Select SelectMarker 2`] = `
12211229
padding: 0 8px;
12221230
}
12231231
1224-
.c3 > div > span > svg {
1232+
.c3 .c4 > *:last-child > svg {
12251233
width: 100%;
12261234
height: 100%;
12271235
cursor: pointer;
@@ -1448,7 +1456,7 @@ exports[`Select Width 1`] = `
14481456
padding: 0 8px;
14491457
}
14501458
1451-
.c3 > div > span > svg {
1459+
.c3 .c4 > *:last-child > svg {
14521460
width: 100%;
14531461
height: 100%;
14541462
cursor: pointer;
@@ -1675,7 +1683,7 @@ exports[`Select Width 2`] = `
16751683
padding: 0 8px;
16761684
}
16771685
1678-
.c3 > div > span > svg {
1686+
.c3 .c4 > *:last-child > svg {
16791687
width: 100%;
16801688
height: 100%;
16811689
cursor: pointer;
@@ -1902,7 +1910,7 @@ exports[`Select Width 3`] = `
19021910
padding: 0 8px;
19031911
}
19041912
1905-
.c3 > div > span > svg {
1913+
.c3 .c4 > *:last-child > svg {
19061914
width: 100%;
19071915
height: 100%;
19081916
cursor: pointer;

‎packages/core/src/Select/__snapshots__/Select.test.tsx.snap‎

Lines changed: 55 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ exports[`Select Compact 1`] = `
7373
padding: 0 4px 0 8px;
7474
}
7575
76-
.c3 > div > span > svg {
76+
.c3 .c4 > *:last-child > svg {
7777
width: 100%;
7878
height: 100%;
7979
cursor: pointer;
@@ -254,6 +254,14 @@ exports[`Select Compact 2`] = `
254254
padding: 0 4px 0 8px;
255255
}
256256
257+
.c10 .c4 > *:last-child > svg {
258+
width: 100%;
259+
height: 100%;
260+
cursor: pointer;
261+
background-color: transparent;
262+
fill: rgb(102,102,102);
263+
}
264+
257265
.c3 {
258266
display: -webkit-box;
259267
display: -webkit-flex;
@@ -280,7 +288,7 @@ exports[`Select Compact 2`] = `
280288
padding: 0 8px;
281289
}
282290
283-
.c3 > div > span > svg {
291+
.c3 .c4 > *:last-child > svg {
284292
width: 100%;
285293
height: 100%;
286294
cursor: pointer;
@@ -483,7 +491,7 @@ exports[`Select Direction 1`] = `
483491
padding: 0 8px;
484492
}
485493
486-
.c3 > div > span > svg {
494+
.c3 .c4 > *:last-child > svg {
487495
width: 100%;
488496
height: 100%;
489497
cursor: pointer;
@@ -686,7 +694,7 @@ exports[`Select Direction 2`] = `
686694
padding: 0 8px;
687695
}
688696
689-
.c3 > div > span > svg {
697+
.c3 .c4 > *:last-child > svg {
690698
width: 100%;
691699
height: 100%;
692700
cursor: pointer;
@@ -889,7 +897,7 @@ exports[`Select Other 1`] = `
889897
padding: 0 8px;
890898
}
891899
892-
.c3 > div > span > svg {
900+
.c3 .c4 > *:last-child > svg {
893901
width: 100%;
894902
height: 100%;
895903
cursor: pointer;
@@ -1077,6 +1085,14 @@ exports[`Select Other 2`] = `
10771085
padding: 0 8px;
10781086
}
10791087
1088+
.c10 .c4 > *:last-child > svg {
1089+
width: 100%;
1090+
height: 100%;
1091+
cursor: pointer;
1092+
background-color: transparent;
1093+
fill: rgb(102,102,102);
1094+
}
1095+
10801096
.c3 {
10811097
display: -webkit-box;
10821098
display: -webkit-flex;
@@ -1105,7 +1121,7 @@ exports[`Select Other 2`] = `
11051121
padding: 0 8px;
11061122
}
11071123
1108-
.c3 > div > span > svg {
1124+
.c3 .c4 > *:last-child > svg {
11091125
width: 100%;
11101126
height: 100%;
11111127
cursor: pointer;
@@ -1308,7 +1324,7 @@ exports[`Select SelectMarker 1`] = `
13081324
padding: 0 8px;
13091325
}
13101326
1311-
.c3 > div > span > svg {
1327+
.c3 .c4 > *:last-child > svg {
13121328
width: 100%;
13131329
height: 100%;
13141330
cursor: pointer;
@@ -1511,7 +1527,7 @@ exports[`Select SelectMarker 2`] = `
15111527
padding: 0 8px;
15121528
}
15131529
1514-
.c3 > div > span > svg {
1530+
.c3 .c4 > *:last-child > svg {
15151531
width: 100%;
15161532
height: 100%;
15171533
cursor: pointer;
@@ -1714,7 +1730,7 @@ exports[`Select Variant 1`] = `
17141730
padding: 0 8px;
17151731
}
17161732
1717-
.c3 > div > span > svg {
1733+
.c3 .c4 > *:last-child > svg {
17181734
width: 100%;
17191735
height: 100%;
17201736
cursor: pointer;
@@ -1895,6 +1911,14 @@ exports[`Select Variant 2`] = `
18951911
padding: 0 8px;
18961912
}
18971913
1914+
.c10 .c4 > *:last-child > svg {
1915+
width: 100%;
1916+
height: 100%;
1917+
cursor: pointer;
1918+
background-color: transparent;
1919+
fill: rgb(102,102,102);
1920+
}
1921+
18981922
.c3 {
18991923
display: -webkit-box;
19001924
display: -webkit-flex;
@@ -1921,7 +1945,7 @@ exports[`Select Variant 2`] = `
19211945
padding: 0 8px;
19221946
}
19231947
1924-
.c3 > div > span > svg {
1948+
.c3 .c4 > *:last-child > svg {
19251949
width: 100%;
19261950
height: 100%;
19271951
cursor: pointer;
@@ -2102,10 +2126,26 @@ exports[`Select Variant 3`] = `
21022126
padding: 0 8px;
21032127
}
21042128
2129+
.c10 .c4 > *:last-child > svg {
2130+
width: 100%;
2131+
height: 100%;
2132+
cursor: pointer;
2133+
background-color: transparent;
2134+
fill: rgb(102,102,102);
2135+
}
2136+
21052137
.c11 .c4 {
21062138
padding: 0 8px;
21072139
}
21082140
2141+
.c11 .c4 > *:last-child > svg {
2142+
width: 100%;
2143+
height: 100%;
2144+
cursor: pointer;
2145+
background-color: transparent;
2146+
fill: rgb(102,102,102);
2147+
}
2148+
21092149
.c3 {
21102150
display: -webkit-box;
21112151
display: -webkit-flex;
@@ -2134,7 +2174,7 @@ exports[`Select Variant 3`] = `
21342174
padding: 0 8px;
21352175
}
21362176
2137-
.c3 > div > span > svg {
2177+
.c3 .c4 > *:last-child > svg {
21382178
width: 100%;
21392179
height: 100%;
21402180
cursor: pointer;
@@ -2339,7 +2379,7 @@ exports[`Select Width 1`] = `
23392379
padding: 0 8px;
23402380
}
23412381
2342-
.c3 > div > span > svg {
2382+
.c3 .c4 > *:last-child > svg {
23432383
width: 100%;
23442384
height: 100%;
23452385
cursor: pointer;
@@ -2542,7 +2582,7 @@ exports[`Select Width 2`] = `
25422582
padding: 0 8px;
25432583
}
25442584
2545-
.c3 > div > span > svg {
2585+
.c3 .c4 > *:last-child > svg {
25462586
width: 100%;
25472587
height: 100%;
25482588
cursor: pointer;
@@ -2745,7 +2785,7 @@ exports[`Select Width 3`] = `
27452785
padding: 0 8px;
27462786
}
27472787
2748-
.c3 > div > span > svg {
2788+
.c3 .c4 > *:last-child > svg {
27492789
width: 100%;
27502790
height: 100%;
27512791
cursor: pointer;
@@ -2948,7 +2988,7 @@ exports[`Select Width 4`] = `
29482988
padding: 0 8px;
29492989
}
29502990
2951-
.c3 > div > span > svg {
2991+
.c3 .c4 > *:last-child > svg {
29522992
width: 100%;
29532993
height: 100%;
29542994
cursor: pointer;

0 commit comments

Comments
 (0)