Skip to content

Commit 295650b

Browse files
matthprostmatthprost
committed
refactor(row): vanilla extract (#5503)
* refactor(Row): use vanilla extract * ci: add more tests * fix: feedback alex * fix: feedback alex
1 parent f429146 commit 295650b

File tree

26 files changed

+10204
-11742
lines changed

26 files changed

+10204
-11742
lines changed

‎.changeset/cute-moments-shine.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ultraviolet/ui": minor
3+
---
4+
5+
Refactor `<Row />` component to use vanilla extract

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

Lines changed: 58 additions & 71 deletions
Large diffs are not rendered by default.

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

Lines changed: 42 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ exports[`numberInputField > should render correctly 1`] = `
5050
cursor: not-allowed;
5151
}
5252
53-
.emotion-0[data-controls='false']>.emotion-4 {
53+
.emotion-0[data-controls='false']>.emotion-5 {
5454
border-width: 0;
5555
}
5656
@@ -83,24 +83,15 @@ exports[`numberInputField > should render correctly 1`] = `
8383
padding: 0.25rem 0.5rem;
8484
}
8585
86-
.emotion-5 {
87-
display: grid;
88-
grid-template-columns: 1fr auto;
89-
-webkit-align-items: center;
90-
-webkit-box-align: center;
91-
-ms-flex-align: center;
92-
align-items: center;
93-
-webkit-box-pack: justify;
94-
-webkit-justify-content: space-between;
95-
justify-content: space-between;
86+
.emotion-4 {
9687
border-width: 0 1px 0 1px;
9788
border-style: solid;
9889
border-color: inherit;
9990
background: inherit;
10091
width: 100%;
10192
}
10293
103-
.emotion-7 {
94+
.emotion-6 {
10495
outline: none;
10596
border: none;
10697
padding: 0;
@@ -115,69 +106,69 @@ exports[`numberInputField > should render correctly 1`] = `
115106
background: none;
116107
}
117108
118-
.emotion-7[data-has-unit='true'] {
109+
.emotion-6[data-has-unit='true'] {
119110
text-align: left;
120111
padding: 0.5rem 0 0.5rem 0.5rem;
121112
}
122113
123-
.emotion-7::-webkit-outer-spin-button,
124-
.emotion-7::-webkit-inner-spin-button {
114+
.emotion-6::-webkit-outer-spin-button,
115+
.emotion-6::-webkit-inner-spin-button {
125116
-webkit-appearance: none;
126117
margin: 0;
127118
}
128119
129-
.emotion-7 {
120+
.emotion-6 {
130121
-moz-appearance: textfield;
131122
-webkit-appearance: textfield;
132123
-moz-appearance: textfield;
133124
-ms-appearance: textfield;
134125
appearance: textfield;
135126
}
136127
137-
.emotion-7[data-size='small'] {
128+
.emotion-6[data-size='small'] {
138129
height: 2rem;
139130
}
140131
141-
.emotion-7[data-size='medium'] {
132+
.emotion-6[data-size='medium'] {
142133
height: 2.5rem;
143134
}
144135
145-
.emotion-7[data-size='large'] {
136+
.emotion-6[data-size='large'] {
146137
height: 3rem;
147138
font-size: 1rem;
148139
font-family: Inter,sans-serif;
149140
font-weight: Regular;
150141
line-height: 1.5rem;
151142
}
152143
153-
.emotion-7:-moz-read-only {
144+
.emotion-6:-moz-read-only {
154145
color: #3f4250;
155146
background: #f9f9fa;
156147
border-block: 1px solid #d9dadd;
157148
}
158149
159-
.emotion-7:read-only {
150+
.emotion-6:read-only {
160151
color: #3f4250;
161152
background: #f9f9fa;
162153
border-block: 1px solid #d9dadd;
163154
}
164155
165-
.emotion-7:-moz-read-only~.exvap482 {
156+
.emotion-6:-moz-read-only~.exvap482 {
166157
background: #f9f9fa;
167158
}
168159
169-
.emotion-7:read-only~.exvap482 {
160+
.emotion-6:read-only~.exvap482 {
170161
background: #f9f9fa;
171162
}
172163
173-
.emotion-7:disabled {
164+
.emotion-6:disabled {
174165
color: #b5b7bd;
175166
background: #f3f3f4;
176167
cursor: not-allowed;
177168
border-block: 1px solid #e9eaeb;
178169
}
179170
180-
.emotion-7:disabled~.exvap482 {
171+
.emotion-6:disabled~.exvap482 {
181172
background: #f3f3f4;
182173
cursor: not-allowed;
183174
-webkit-user-select: none;
@@ -186,12 +177,12 @@ exports[`numberInputField > should render correctly 1`] = `
186177
user-select: none;
187178
}
188179
189-
.emotion-7:placeholder-shown~.exvap482 {
180+
.emotion-6:placeholder-shown~.exvap482 {
190181
color: #727683;
191182
font-size: 1rem;
192183
}
193184
194-
.emotion-7[data-controls='false'] {
185+
.emotion-6[data-controls='false'] {
195186
text-align: left;
196187
}
197188
@@ -237,10 +228,11 @@ exports[`numberInputField > should render correctly 1`] = `
237228
</button>
238229
</div>
239230
<div
240-
class="emotion-4 emotion-5 emotion-6"
231+
class="emotion-4 emotion-5 uv_x6hyh50 uv_x6hyh52p uv_x6hyh561"
232+
style="--uv_3mg8xe0: 1fr auto; --uv_3mg8xe1: 1fr auto; --uv_3mg8xe2: 1fr auto; --uv_3mg8xe3: 1fr auto; --uv_3mg8xe4: 1fr auto; --uv_3mg8xe5: 1fr auto;"
241233
>
242234
<input
243-
class="emotion-7 emotion-8"
235+
class="emotion-6 emotion-7"
244236
data-controls="true"
245237
data-has-unit="false"
246238
data-size="large"
@@ -330,7 +322,7 @@ exports[`numberInputField > should render correctly disabled 1`] = `
330322
cursor: not-allowed;
331323
}
332324
333-
.emotion-0[data-controls='false']>.emotion-4 {
325+
.emotion-0[data-controls='false']>.emotion-5 {
334326
border-width: 0;
335327
}
336328
@@ -363,24 +355,15 @@ exports[`numberInputField > should render correctly disabled 1`] = `
363355
padding: 0.25rem 0.5rem;
364356
}
365357
366-
.emotion-5 {
367-
display: grid;
368-
grid-template-columns: 1fr auto;
369-
-webkit-align-items: center;
370-
-webkit-box-align: center;
371-
-ms-flex-align: center;
372-
align-items: center;
373-
-webkit-box-pack: justify;
374-
-webkit-justify-content: space-between;
375-
justify-content: space-between;
358+
.emotion-4 {
376359
border-width: 0 1px 0 1px;
377360
border-style: solid;
378361
border-color: inherit;
379362
background: inherit;
380363
width: 100%;
381364
}
382365
383-
.emotion-7 {
366+
.emotion-6 {
384367
outline: none;
385368
border: none;
386369
padding: 0;
@@ -395,69 +378,69 @@ exports[`numberInputField > should render correctly disabled 1`] = `
395378
background: none;
396379
}
397380
398-
.emotion-7[data-has-unit='true'] {
381+
.emotion-6[data-has-unit='true'] {
399382
text-align: left;
400383
padding: 0.5rem 0 0.5rem 0.5rem;
401384
}
402385
403-
.emotion-7::-webkit-outer-spin-button,
404-
.emotion-7::-webkit-inner-spin-button {
386+
.emotion-6::-webkit-outer-spin-button,
387+
.emotion-6::-webkit-inner-spin-button {
405388
-webkit-appearance: none;
406389
margin: 0;
407390
}
408391
409-
.emotion-7 {
392+
.emotion-6 {
410393
-moz-appearance: textfield;
411394
-webkit-appearance: textfield;
412395
-moz-appearance: textfield;
413396
-ms-appearance: textfield;
414397
appearance: textfield;
415398
}
416399
417-
.emotion-7[data-size='small'] {
400+
.emotion-6[data-size='small'] {
418401
height: 2rem;
419402
}
420403
421-
.emotion-7[data-size='medium'] {
404+
.emotion-6[data-size='medium'] {
422405
height: 2.5rem;
423406
}
424407
425-
.emotion-7[data-size='large'] {
408+
.emotion-6[data-size='large'] {
426409
height: 3rem;
427410
font-size: 1rem;
428411
font-family: Inter,sans-serif;
429412
font-weight: Regular;
430413
line-height: 1.5rem;
431414
}
432415
433-
.emotion-7:-moz-read-only {
416+
.emotion-6:-moz-read-only {
434417
color: #3f4250;
435418
background: #f9f9fa;
436419
border-block: 1px solid #d9dadd;
437420
}
438421
439-
.emotion-7:read-only {
422+
.emotion-6:read-only {
440423
color: #3f4250;
441424
background: #f9f9fa;
442425
border-block: 1px solid #d9dadd;
443426
}
444427
445-
.emotion-7:-moz-read-only~.exvap482 {
428+
.emotion-6:-moz-read-only~.exvap482 {
446429
background: #f9f9fa;
447430
}
448431
449-
.emotion-7:read-only~.exvap482 {
432+
.emotion-6:read-only~.exvap482 {
450433
background: #f9f9fa;
451434
}
452435
453-
.emotion-7:disabled {
436+
.emotion-6:disabled {
454437
color: #b5b7bd;
455438
background: #f3f3f4;
456439
cursor: not-allowed;
457440
border-block: 1px solid #e9eaeb;
458441
}
459442
460-
.emotion-7:disabled~.exvap482 {
443+
.emotion-6:disabled~.exvap482 {
461444
background: #f3f3f4;
462445
cursor: not-allowed;
463446
-webkit-user-select: none;
@@ -466,12 +449,12 @@ exports[`numberInputField > should render correctly disabled 1`] = `
466449
user-select: none;
467450
}
468451
469-
.emotion-7:placeholder-shown~.exvap482 {
452+
.emotion-6:placeholder-shown~.exvap482 {
470453
color: #727683;
471454
font-size: 1rem;
472455
}
473456
474-
.emotion-7[data-controls='false'] {
457+
.emotion-6[data-controls='false'] {
475458
text-align: left;
476459
}
477460
@@ -518,11 +501,12 @@ exports[`numberInputField > should render correctly disabled 1`] = `
518501
</button>
519502
</div>
520503
<div
521-
class="emotion-4 emotion-5 emotion-6"
504+
class="emotion-4 emotion-5 uv_x6hyh50 uv_x6hyh52p uv_x6hyh561"
505+
style="--uv_3mg8xe0: 1fr auto; --uv_3mg8xe1: 1fr auto; --uv_3mg8xe2: 1fr auto; --uv_3mg8xe3: 1fr auto; --uv_3mg8xe4: 1fr auto; --uv_3mg8xe5: 1fr auto;"
522506
>
523507
<input
524508
aria-label="Number Input"
525-
class="emotion-7 emotion-8"
509+
class="emotion-6 emotion-7"
526510
data-controls="true"
527511
data-has-unit="false"
528512
data-size="large"

0 commit comments

Comments
 (0)