Skip to content

Commit 19cb986

Browse files
matthprostlisalupi
matthprost
authored and
lisalupi
committed
fix(OrderSummary): time unit value correct width (#5661)
1 parent 73267c3 commit 19cb986

File tree

5 files changed

+39
-24
lines changed

5 files changed

+39
-24
lines changed

‎.changeset/lucky-bushes-laugh.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+
Add prop `maxWidth` on `<UnitInput />` component

‎.changeset/quiet-teeth-give.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ultraviolet/plus": patch
3+
---
4+
5+
Fix `<OrderSummary />` component to show full unit input on time section

‎packages/plus/src/components/OrderSummary/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ exports[`orderSummary > should work with additionalInfo 1`] = `
103103
class="emotion-0 emotion-1 uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u6p"
104104
>
105105
<div
106-
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u6p"
106+
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7d uv_toi52ud uv_toi52u6p"
107107
data-hidedetails="false"
108108
>
109109
<h3
@@ -116,7 +116,7 @@ exports[`orderSummary > should work with additionalInfo 1`] = `
116116
>
117117
<div
118118
class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u1v uv_toi52u5d"
119-
style="--uv_4k0ekn0: 155px;"
119+
style="--uv_4k0ekn1: 200px;"
120120
>
121121
<div
122122
class="uv_gwf0flc uv_gwf0fla uv_gwf0fl5 uv_x6hyh50 "
@@ -909,7 +909,7 @@ exports[`orderSummary > should work with children 1`] = `
909909
class="emotion-0 emotion-1 uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u6p"
910910
>
911911
<div
912-
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u6p"
912+
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7d uv_toi52ud uv_toi52u6p"
913913
data-hidedetails="false"
914914
>
915915
<h3
@@ -922,7 +922,7 @@ exports[`orderSummary > should work with children 1`] = `
922922
>
923923
<div
924924
class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u1v uv_toi52u5d"
925-
style="--uv_4k0ekn0: 155px;"
925+
style="--uv_4k0ekn1: 200px;"
926926
>
927927
<div
928928
class="uv_gwf0flc uv_gwf0fla uv_gwf0fl5 uv_x6hyh50 "
@@ -2242,7 +2242,7 @@ exports[`orderSummary > should work with discount 1`] = `
22422242
class="emotion-0 emotion-1 uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u6p"
22432243
>
22442244
<div
2245-
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u6p"
2245+
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7d uv_toi52ud uv_toi52u6p"
22462246
data-hidedetails="false"
22472247
>
22482248
<h3
@@ -2255,7 +2255,7 @@ exports[`orderSummary > should work with discount 1`] = `
22552255
>
22562256
<div
22572257
class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u1v uv_toi52u5d"
2258-
style="--uv_4k0ekn0: 155px;"
2258+
style="--uv_4k0ekn1: 200px;"
22592259
>
22602260
<div
22612261
class="uv_gwf0flc uv_gwf0fla uv_gwf0fl5 uv_x6hyh50 "
@@ -2519,7 +2519,7 @@ exports[`orderSummary > should work with discount in % 1`] = `
25192519
class="emotion-0 emotion-1 uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u6p"
25202520
>
25212521
<div
2522-
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u6p"
2522+
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7d uv_toi52ud uv_toi52u6p"
25232523
data-hidedetails="false"
25242524
>
25252525
<h3
@@ -2532,7 +2532,7 @@ exports[`orderSummary > should work with discount in % 1`] = `
25322532
>
25332533
<div
25342534
class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u1v uv_toi52u5d"
2535-
style="--uv_4k0ekn0: 155px;"
2535+
style="--uv_4k0ekn1: 200px;"
25362536
>
25372537
<div
25382538
class="uv_gwf0flc uv_gwf0fla uv_gwf0fl5 uv_x6hyh50 "
@@ -2796,7 +2796,7 @@ exports[`orderSummary > should work with footer 1`] = `
27962796
class="emotion-0 emotion-1 uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u6p"
27972797
>
27982798
<div
2799-
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u6p"
2799+
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7d uv_toi52ud uv_toi52u6p"
28002800
data-hidedetails="false"
28012801
>
28022802
<h3
@@ -2809,7 +2809,7 @@ exports[`orderSummary > should work with footer 1`] = `
28092809
>
28102810
<div
28112811
class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u1v uv_toi52u5d"
2812-
style="--uv_4k0ekn0: 155px;"
2812+
style="--uv_4k0ekn1: 200px;"
28132813
>
28142814
<div
28152815
class="uv_gwf0flc uv_gwf0fla uv_gwf0fl5 uv_x6hyh50 "
@@ -3539,7 +3539,7 @@ exports[`orderSummary > should work with fractionDigits 1`] = `
35393539
class="emotion-0 emotion-1 uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u6p"
35403540
>
35413541
<div
3542-
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u6p"
3542+
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7d uv_toi52ud uv_toi52u6p"
35433543
data-hidedetails="false"
35443544
>
35453545
<h3
@@ -3552,7 +3552,7 @@ exports[`orderSummary > should work with fractionDigits 1`] = `
35523552
>
35533553
<div
35543554
class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u1v uv_toi52u5d"
3555-
style="--uv_4k0ekn0: 155px;"
3555+
style="--uv_4k0ekn1: 200px;"
35563556
>
35573557
<div
35583558
class="uv_gwf0flc uv_gwf0fla uv_gwf0fl5 uv_x6hyh50 "
@@ -3821,7 +3821,7 @@ exports[`orderSummary > should work with numberInputs 1`] = `
38213821
class="emotion-0 emotion-1 uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u6p"
38223822
>
38233823
<div
3824-
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u6p"
3824+
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7d uv_toi52ud uv_toi52u6p"
38253825
data-hidedetails="false"
38263826
>
38273827
<h3
@@ -3834,7 +3834,7 @@ exports[`orderSummary > should work with numberInputs 1`] = `
38343834
>
38353835
<div
38363836
class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u1v uv_toi52u5d"
3837-
style="--uv_4k0ekn0: 155px;"
3837+
style="--uv_4k0ekn1: 200px;"
38383838
>
38393839
<div
38403840
class="uv_gwf0flc uv_gwf0fla uv_gwf0fl5 uv_x6hyh50 "
@@ -4240,7 +4240,7 @@ exports[`orderSummary > should work with price as a range 1`] = `
42404240
class="emotion-0 emotion-1 uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u6p"
42414241
>
42424242
<div
4243-
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u6p"
4243+
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7d uv_toi52ud uv_toi52u6p"
42444244
data-hidedetails="false"
42454245
>
42464246
<h3
@@ -4253,7 +4253,7 @@ exports[`orderSummary > should work with price as a range 1`] = `
42534253
>
42544254
<div
42554255
class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u1v uv_toi52u5d"
4256-
style="--uv_4k0ekn0: 155px;"
4256+
style="--uv_4k0ekn1: 200px;"
42574257
>
42584258
<div
42594259
class="uv_gwf0flc uv_gwf0fla uv_gwf0fl5 uv_x6hyh50 "
@@ -4509,7 +4509,7 @@ exports[`orderSummary > should work with totalPriceInfo 1`] = `
45094509
class="emotion-0 emotion-1 uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u6p"
45104510
>
45114511
<div
4512-
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u6p"
4512+
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7d uv_toi52ud uv_toi52u6p"
45134513
data-hidedetails="false"
45144514
>
45154515
<h3
@@ -4522,7 +4522,7 @@ exports[`orderSummary > should work with totalPriceInfo 1`] = `
45224522
>
45234523
<div
45244524
class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u1v uv_toi52u5d"
4525-
style="--uv_4k0ekn0: 155px;"
4525+
style="--uv_4k0ekn1: 200px;"
45264526
>
45274527
<div
45284528
class="uv_gwf0flc uv_gwf0fla uv_gwf0fl5 uv_x6hyh50 "
@@ -5205,7 +5205,7 @@ exports[`orderSummary > should work without unitInput 1`] = `
52055205
class="emotion-0 emotion-1 uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u6p"
52065206
>
52075207
<div
5208-
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u6p"
5208+
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7d uv_toi52ud uv_toi52u6p"
52095209
data-hidedetails="false"
52105210
>
52115211
<h3
@@ -5826,7 +5826,7 @@ exports[`orderSummary > works with hideDetails 1`] = `
58265826
class="emotion-0 emotion-1 uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u61"
58275827
>
58285828
<div
5829-
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u6p"
5829+
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7d uv_toi52ud uv_toi52u6p"
58305830
data-hidedetails="true"
58315831
>
58325832
<h3
@@ -5863,7 +5863,7 @@ exports[`orderSummary > works with hideDetails 1`] = `
58635863
class="emotion-0 emotion-1 uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u61"
58645864
>
58655865
<div
5866-
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u6p"
5866+
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7d uv_toi52ud uv_toi52u6p"
58675867
data-hidedetails="true"
58685868
>
58695869
<h3
@@ -6012,7 +6012,7 @@ exports[`orderSummary > works with negative category price 1`] = `
60126012
class="emotion-0 emotion-1 uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u6p"
60136013
>
60146014
<div
6015-
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u6p"
6015+
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7d uv_toi52ud uv_toi52u6p"
60166016
data-hidedetails="false"
60176017
>
60186018
<h3
@@ -6025,7 +6025,7 @@ exports[`orderSummary > works with negative category price 1`] = `
60256025
>
60266026
<div
60276027
class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u1v uv_toi52u5d"
6028-
style="--uv_4k0ekn0: 155px;"
6028+
style="--uv_4k0ekn1: 200px;"
60296029
>
60306030
<div
60316031
class="uv_gwf0flc uv_gwf0fla uv_gwf0fl5 uv_x6hyh50 "

‎packages/plus/src/components/OrderSummary/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,8 +161,10 @@ export const OrderSummary = ({
161161
>
162162
{header ? (
163163
<HeaderContainer
164+
alignItems="center"
164165
data-hidedetails={hideDetails}
165166
direction="row"
167+
gap={2}
166168
justifyContent="space-between"
167169
>
168170
<Text
@@ -177,6 +179,7 @@ export const OrderSummary = ({
177179
<StyledStack>
178180
<UnitInput
179181
dropdownAlign="center"
182+
maxWidth="200px"
180183
onChange={value => {
181184
setTimePeriodAmount(value)
182185
}}
@@ -190,7 +193,6 @@ export const OrderSummary = ({
190193
templateColumns="2fr 3fr"
191194
unitValue={unitUnitInput}
192195
value={valueUnitInput}
193-
width="155px"
194196
/>
195197
</StyledStack>
196198
) : null}

‎packages/ui/src/components/UnitInput/index.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ type UnitInputProps = {
4242
helper?: string
4343
unitError?: string
4444
width?: CSSProperties['width']
45+
maxWidth?: CSSProperties['maxWidth']
4546
placeholderUnit?: string
4647
error?: boolean | string
4748
success?: boolean | string
@@ -90,6 +91,7 @@ export const UnitInput = ({
9091
success,
9192
'data-testid': dataTestId,
9293
width,
94+
maxWidth,
9395
labelInformation,
9496
readOnly,
9597
onFocus,
@@ -136,6 +138,7 @@ export const UnitInput = ({
136138
return (
137139
<Stack
138140
gap={0.5}
141+
maxWidth={maxWidth}
139142
onBlur={onBlur}
140143
onFocus={onFocus}
141144
onKeyDown={onKeyDown}

0 commit comments

Comments
 (0)