Skip to content

Commit 345fef7

Browse files
lisalupilisalupi
committed
fix: onclickoutside selectinput
1 parent 9ebc1fb commit 345fef7

File tree

18 files changed

+534
-0
lines changed

18 files changed

+534
-0
lines changed

‎.changeset/sharp-steaks-nail.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@ultraviolet/ui": patch
3+
---
4+
5+
`SelectInput`:
6+
- click outside should work in every context
7+
- fix placeholder alignment when small

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ exports[`selectInputField > should display right value on grouped options 1`] =
1919
background: #ffffff;
2020
border-radius: 0.25rem;
2121
width: 100%;
22+
-webkit-align-content: center;
23+
-ms-flex-line-pack: center;
24+
align-content: center;
2225
}
2326
2427
.emotion-2[data-size='small'] {
@@ -677,6 +680,9 @@ exports[`selectInputField > should render correctly 1`] = `
677680
background: #ffffff;
678681
border-radius: 0.25rem;
679682
width: 100%;
683+
-webkit-align-content: center;
684+
-ms-flex-line-pack: center;
685+
align-content: center;
680686
}
681687
682688
.emotion-2[data-size='small'] {
@@ -857,6 +863,9 @@ exports[`selectInputField > should render correctly disabled 1`] = `
857863
background: #ffffff;
858864
border-radius: 0.25rem;
859865
width: 100%;
866+
-webkit-align-content: center;
867+
-ms-flex-line-pack: center;
868+
align-content: center;
860869
}
861870
862871
.emotion-2[data-size='small'] {
@@ -1037,6 +1046,9 @@ exports[`selectInputField > should render correctly grouped 1`] = `
10371046
background: #ffffff;
10381047
border-radius: 0.25rem;
10391048
width: 100%;
1049+
-webkit-align-content: center;
1050+
-ms-flex-line-pack: center;
1051+
align-content: center;
10401052
}
10411053
10421054
.emotion-2[data-size='small'] {
@@ -1217,6 +1229,9 @@ exports[`selectInputField > should render correctly multiselect 1`] = `
12171229
background: #ffffff;
12181230
border-radius: 0.25rem;
12191231
width: 100%;
1232+
-webkit-align-content: center;
1233+
-ms-flex-line-pack: center;
1234+
align-content: center;
12201235
}
12211236
12221237
.emotion-2[data-size='small'] {
@@ -1397,6 +1412,9 @@ exports[`selectInputField > should trigger events 1`] = `
13971412
background: #ffffff;
13981413
border-radius: 0.25rem;
13991414
width: 100%;
1415+
-webkit-align-content: center;
1416+
-ms-flex-line-pack: center;
1417+
align-content: center;
14001418
}
14011419
14021420
.emotion-2[data-size='small'] {

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,9 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
196196
background: #ffffff;
197197
border-radius: 0.25rem;
198198
width: 100%;
199+
-webkit-align-content: center;
200+
-ms-flex-line-pack: center;
201+
align-content: center;
199202
}
200203
201204
.emotion-18[data-size='small'] {

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,9 @@ exports[`unitInputField > should handles onChange and selection 1`] = `
236236
background: #ffffff;
237237
border-radius: 0.25rem;
238238
width: 100%;
239+
-webkit-align-content: center;
240+
-ms-flex-line-pack: center;
241+
align-content: center;
239242
}
240243
241244
.emotion-9[data-size='small'] {
@@ -679,6 +682,9 @@ exports[`unitInputField > should render correctly 1`] = `
679682
background: #ffffff;
680683
border-radius: 0.25rem;
681684
width: 100%;
685+
-webkit-align-content: center;
686+
-ms-flex-line-pack: center;
687+
align-content: center;
682688
}
683689
684690
.emotion-9[data-size='small'] {

‎packages/plus/src/components/EstimateCost/__tests__/__snapshots__/CustomUnitInput.test.tsx.snap‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,9 @@ exports[`estimateCost - CustomUnitInput > render default values 1`] = `
246246
background: #ffffff;
247247
border-radius: 0.25rem;
248248
width: 100%;
249+
-webkit-align-content: center;
250+
-ms-flex-line-pack: center;
251+
align-content: center;
249252
}
250253
251254
.emotion-10[data-size='small'] {

‎packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Item.test.tsx.snap‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -917,6 +917,9 @@ exports[`estimateCost - Item > render with labelTextVariant 1`] = `
917917
background: #ffffff;
918918
border-radius: 0.25rem;
919919
width: 100%;
920+
-webkit-align-content: center;
921+
-ms-flex-line-pack: center;
922+
align-content: center;
920923
}
921924
922925
.emotion-44[data-size='small'] {
@@ -1010,6 +1013,9 @@ exports[`estimateCost - Item > render with labelTextVariant 1`] = `
10101013
background: #ffffff;
10111014
border-radius: 0.25rem;
10121015
width: 100%;
1016+
-webkit-align-content: center;
1017+
-ms-flex-line-pack: center;
1018+
align-content: center;
10131019
}
10141020
10151021
.emotion-44[data-size='small'] {
@@ -2100,6 +2106,9 @@ exports[`estimateCost - Item > render with noPrice and noBorder 1`] = `
21002106
background: #ffffff;
21012107
border-radius: 0.25rem;
21022108
width: 100%;
2109+
-webkit-align-content: center;
2110+
-ms-flex-line-pack: center;
2111+
align-content: center;
21032112
}
21042113
21052114
.emotion-44[data-size='small'] {
@@ -3514,6 +3523,9 @@ exports[`estimateCost - Item > render with notice 1`] = `
35143523
background: #ffffff;
35153524
border-radius: 0.25rem;
35163525
width: 100%;
3526+
-webkit-align-content: center;
3527+
-ms-flex-line-pack: center;
3528+
align-content: center;
35173529
}
35183530
35193531
.emotion-46[data-size='small'] {
@@ -3607,6 +3619,9 @@ exports[`estimateCost - Item > render with notice 1`] = `
36073619
background: #ffffff;
36083620
border-radius: 0.25rem;
36093621
width: 100%;
3622+
-webkit-align-content: center;
3623+
-ms-flex-line-pack: center;
3624+
align-content: center;
36103625
}
36113626
36123627
.emotion-46[data-size='small'] {
@@ -5158,6 +5173,9 @@ exports[`estimateCost - Item > render with priceText 1`] = `
51585173
background: #ffffff;
51595174
border-radius: 0.25rem;
51605175
width: 100%;
5176+
-webkit-align-content: center;
5177+
-ms-flex-line-pack: center;
5178+
align-content: center;
51615179
}
51625180
51635181
.emotion-44[data-size='small'] {
@@ -5251,6 +5269,9 @@ exports[`estimateCost - Item > render with priceText 1`] = `
52515269
background: #ffffff;
52525270
border-radius: 0.25rem;
52535271
width: 100%;
5272+
-webkit-align-content: center;
5273+
-ms-flex-line-pack: center;
5274+
align-content: center;
52545275
}
52555276
52565277
.emotion-44[data-size='small'] {
@@ -6321,6 +6342,35 @@ exports[`estimateCost - Item > render with tabulation 1`] = `
63216342
-webkit-justify-content: normal;
63226343
justify-content: normal;
63236344
width: 100%;
6345+
gap: 0.5rem;
6346+
grid-template-columns: 1fr auto;
6347+
padding: 0.5rem;
6348+
padding-right: 0;
6349+
padding-left: 1rem;
6350+
cursor: pointer;
6351+
box-shadow: none;
6352+
background: #ffffff;
6353+
border-radius: 0.25rem;
6354+
width: 100%;
6355+
-webkit-align-content: center;
6356+
-ms-flex-line-pack: center;
6357+
align-content: center;
6358+
}
6359+
6360+
.emotion-36[data-size='small'] {
6361+
height: 2rem;
6362+
padding-left: 0.5rem;
6363+
}
6364+
6365+
.emotion-36[data-size='medium'] {
6366+
height: 2.5rem;
6367+
}
6368+
6369+
.emotion-36[data-size='large'] {
6370+
height: 3rem;
6371+
}
6372+
6373+
.emotion-36[data-state='neutral'] {
63246374
border: 1px solid #d9dadd;
63256375
border-radius: 0.25rem;
63266376
}
@@ -6462,6 +6512,35 @@ exports[`estimateCost - Item > render with tabulation 1`] = `
64626512
-webkit-justify-content: normal;
64636513
justify-content: normal;
64646514
width: 100%;
6515+
gap: 0.5rem;
6516+
grid-template-columns: 1fr auto;
6517+
padding: 0.5rem;
6518+
padding-right: 0;
6519+
padding-left: 1rem;
6520+
cursor: pointer;
6521+
box-shadow: none;
6522+
background: #ffffff;
6523+
border-radius: 0.25rem;
6524+
width: 100%;
6525+
-webkit-align-content: center;
6526+
-ms-flex-line-pack: center;
6527+
align-content: center;
6528+
}
6529+
6530+
.emotion-36[data-size='small'] {
6531+
height: 2rem;
6532+
padding-left: 0.5rem;
6533+
}
6534+
6535+
.emotion-36[data-size='medium'] {
6536+
height: 2.5rem;
6537+
}
6538+
6539+
.emotion-36[data-size='large'] {
6540+
height: 3rem;
6541+
}
6542+
6543+
.emotion-36[data-state='neutral'] {
64656544
border: 1px solid #d9dadd;
64666545
border-radius: 0.25rem;
64676546
}
@@ -8414,6 +8493,9 @@ exports[`estimateCost - Item > render with tooltipInfo 1`] = `
84148493
background: #ffffff;
84158494
border-radius: 0.25rem;
84168495
width: 100%;
8496+
-webkit-align-content: center;
8497+
-ms-flex-line-pack: center;
8498+
align-content: center;
84178499
}
84188500
84198501
.emotion-46[data-size='small'] {
@@ -8507,6 +8589,9 @@ exports[`estimateCost - Item > render with tooltipInfo 1`] = `
85078589
background: #ffffff;
85088590
border-radius: 0.25rem;
85098591
width: 100%;
8592+
-webkit-align-content: center;
8593+
-ms-flex-line-pack: center;
8594+
align-content: center;
85108595
}
85118596
85128597
.emotion-46[data-size='small'] {

‎packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Region.test.tsx.snap‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -471,6 +471,9 @@ exports[`estimateCost - Region > render region component 1`] = `
471471
background: #ffffff;
472472
border-radius: 0.25rem;
473473
width: 100%;
474+
-webkit-align-content: center;
475+
-ms-flex-line-pack: center;
476+
align-content: center;
474477
}
475478
476479
.emotion-46[data-size='small'] {

‎packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Stepper.test.tsx.snap‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -454,6 +454,9 @@ exports[`estimateCost - NumberInput Item > render basic props 1`] = `
454454
background: #ffffff;
455455
border-radius: 0.25rem;
456456
width: 100%;
457+
-webkit-align-content: center;
458+
-ms-flex-line-pack: center;
459+
align-content: center;
457460
}
458461
459462
.emotion-45[data-size='small'] {
@@ -1454,6 +1457,9 @@ exports[`estimateCost - NumberInput Item > render basic with overlay 1`] = `
14541457
background: #ffffff;
14551458
border-radius: 0.25rem;
14561459
width: 100%;
1460+
-webkit-align-content: center;
1461+
-ms-flex-line-pack: center;
1462+
align-content: center;
14571463
}
14581464
14591465
.emotion-45[data-size='small'] {
@@ -2454,6 +2460,9 @@ exports[`estimateCost - NumberInput Item > render with getAmountValue 1`] = `
24542460
background: #ffffff;
24552461
border-radius: 0.25rem;
24562462
width: 100%;
2463+
-webkit-align-content: center;
2464+
-ms-flex-line-pack: center;
2465+
align-content: center;
24572466
}
24582467
24592468
.emotion-45[data-size='small'] {
@@ -3454,6 +3463,9 @@ exports[`estimateCost - NumberInput Item > render with values 1`] = `
34543463
background: #ffffff;
34553464
border-radius: 0.25rem;
34563465
width: 100%;
3466+
-webkit-align-content: center;
3467+
-ms-flex-line-pack: center;
3468+
align-content: center;
34573469
}
34583470
34593471
.emotion-45[data-size='small'] {

‎packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Strong.test.tsx.snap‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -456,6 +456,9 @@ exports[`estimateCost - Strong Item > render basic props 1`] = `
456456
background: #ffffff;
457457
border-radius: 0.25rem;
458458
width: 100%;
459+
-webkit-align-content: center;
460+
-ms-flex-line-pack: center;
461+
align-content: center;
459462
}
460463
461464
.emotion-43[data-size='small'] {
@@ -1380,6 +1383,9 @@ exports[`estimateCost - Strong Item > render with isDisabledOnOverlay 1`] = `
13801383
background: #ffffff;
13811384
border-radius: 0.25rem;
13821385
width: 100%;
1386+
-webkit-align-content: center;
1387+
-ms-flex-line-pack: center;
1388+
align-content: center;
13831389
}
13841390
13851391
.emotion-40[data-size='small'] {
@@ -2325,6 +2331,9 @@ exports[`estimateCost - Strong Item > render with small variant 1`] = `
23252331
background: #ffffff;
23262332
border-radius: 0.25rem;
23272333
width: 100%;
2334+
-webkit-align-content: center;
2335+
-ms-flex-line-pack: center;
2336+
align-content: center;
23282337
}
23292338
23302339
.emotion-43[data-size='small'] {

0 commit comments

Comments
 (0)