Skip to content

Commit a75bee0

Browse files
matthprostlisalupi
matthprost
authored and
lisalupi
committed
refactor(row): vanilla extract (#5503)
* refactor(Row): use vanilla extract * ci: add more tests * fix: feedback alex * fix: feedback alex
1 parent e658405 commit a75bee0

File tree

21 files changed

+38156
-12436
lines changed

21 files changed

+38156
-12436
lines changed

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

Lines changed: 59 additions & 81 deletions
Large diffs are not rendered by default.

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

Lines changed: 42 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ exports[`numberInputField > should render correctly 1`] = `
7777
cursor: not-allowed;
7878
}
7979
80-
.emotion-4[data-controls='false']>.emotion-10 {
80+
.emotion-0[data-controls='false']>.emotion-5 {
8181
border-width: 0;
8282
}
8383
@@ -129,38 +129,15 @@ exports[`numberInputField > should render correctly 1`] = `
129129
padding: 0.25rem 0.5rem;
130130
}
131131
132-
.emotion-8 {
133-
vertical-align: middle;
134-
fill: currentColor;
135-
height: 1rem;
136-
width: 1rem;
137-
min-width: 1rem;
138-
min-height: 1rem;
139-
}
140-
141-
.emotion-8 .fillStroke {
142-
stroke: currentColor;
143-
fill: none;
144-
}
145-
146-
.emotion-11 {
147-
display: grid;
148-
grid-template-columns: 1fr auto;
149-
-webkit-align-items: center;
150-
-webkit-box-align: center;
151-
-ms-flex-align: center;
152-
align-items: center;
153-
-webkit-box-pack: justify;
154-
-webkit-justify-content: space-between;
155-
justify-content: space-between;
132+
.emotion-4 {
156133
border-width: 0 1px 0 1px;
157134
border-style: solid;
158135
border-color: inherit;
159136
background: inherit;
160137
width: 100%;
161138
}
162139
163-
.emotion-13 {
140+
.emotion-6 {
164141
outline: none;
165142
border: none;
166143
padding: 0;
@@ -175,69 +152,69 @@ exports[`numberInputField > should render correctly 1`] = `
175152
background: none;
176153
}
177154
178-
.emotion-13[data-has-unit='true'] {
155+
.emotion-6[data-has-unit='true'] {
179156
text-align: left;
180157
padding: 0.5rem 0 0.5rem 0.5rem;
181158
}
182159
183-
.emotion-13::-webkit-outer-spin-button,
184-
.emotion-13::-webkit-inner-spin-button {
160+
.emotion-6::-webkit-outer-spin-button,
161+
.emotion-6::-webkit-inner-spin-button {
185162
-webkit-appearance: none;
186163
margin: 0;
187164
}
188165
189-
.emotion-13 {
166+
.emotion-6 {
190167
-moz-appearance: textfield;
191168
-webkit-appearance: textfield;
192169
-moz-appearance: textfield;
193170
-ms-appearance: textfield;
194171
appearance: textfield;
195172
}
196173
197-
.emotion-13[data-size='small'] {
174+
.emotion-6[data-size='small'] {
198175
height: 2rem;
199176
}
200177
201-
.emotion-13[data-size='medium'] {
178+
.emotion-6[data-size='medium'] {
202179
height: 2.5rem;
203180
}
204181
205-
.emotion-13[data-size='large'] {
182+
.emotion-6[data-size='large'] {
206183
height: 3rem;
207184
font-size: 1rem;
208185
font-family: Inter,sans-serif;
209186
font-weight: Regular;
210187
line-height: 1.5rem;
211188
}
212189
213-
.emotion-13:-moz-read-only {
190+
.emotion-6:-moz-read-only {
214191
color: #3f4250;
215192
background: #f9f9fa;
216193
border-block: 1px solid #d9dadd;
217194
}
218195
219-
.emotion-13:read-only {
196+
.emotion-6:read-only {
220197
color: #3f4250;
221198
background: #f9f9fa;
222199
border-block: 1px solid #d9dadd;
223200
}
224201
225-
.emotion-13:-moz-read-only~.exvap482 {
202+
.emotion-6:-moz-read-only~.exvap482 {
226203
background: #f9f9fa;
227204
}
228205
229-
.emotion-13:read-only~.exvap482 {
206+
.emotion-6:read-only~.exvap482 {
230207
background: #f9f9fa;
231208
}
232209
233-
.emotion-13:disabled {
210+
.emotion-6:disabled {
234211
color: #b5b7bd;
235212
background: #f3f3f4;
236213
cursor: not-allowed;
237214
border-block: 1px solid #e9eaeb;
238215
}
239216
240-
.emotion-13:disabled~.exvap482 {
217+
.emotion-6:disabled~.exvap482 {
241218
background: #f3f3f4;
242219
cursor: not-allowed;
243220
-webkit-user-select: none;
@@ -246,12 +223,12 @@ exports[`numberInputField > should render correctly 1`] = `
246223
user-select: none;
247224
}
248225
249-
.emotion-13:placeholder-shown~.exvap482 {
226+
.emotion-6:placeholder-shown~.exvap482 {
250227
color: #727683;
251228
font-size: 1rem;
252229
}
253230
254-
.emotion-13[data-controls='false'] {
231+
.emotion-6[data-controls='false'] {
255232
text-align: left;
256233
}
257234
@@ -295,10 +272,11 @@ exports[`numberInputField > should render correctly 1`] = `
295272
</button>
296273
</div>
297274
<div
298-
class="emotion-10 emotion-11 emotion-12"
275+
class="emotion-4 emotion-5 uv_x6hyh50 uv_x6hyh52p uv_x6hyh561"
276+
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;"
299277
>
300278
<input
301-
class="emotion-13 emotion-14"
279+
class="emotion-6 emotion-7"
302280
data-controls="true"
303281
data-has-unit="false"
304282
data-size="large"
@@ -414,7 +392,7 @@ exports[`numberInputField > should render correctly disabled 1`] = `
414392
cursor: not-allowed;
415393
}
416394
417-
.emotion-4[data-controls='false']>.emotion-10 {
395+
.emotion-0[data-controls='false']>.emotion-5 {
418396
border-width: 0;
419397
}
420398
@@ -466,38 +444,15 @@ exports[`numberInputField > should render correctly disabled 1`] = `
466444
padding: 0.25rem 0.5rem;
467445
}
468446
469-
.emotion-8 {
470-
vertical-align: middle;
471-
fill: currentColor;
472-
height: 1rem;
473-
width: 1rem;
474-
min-width: 1rem;
475-
min-height: 1rem;
476-
}
477-
478-
.emotion-8 .fillStroke {
479-
stroke: currentColor;
480-
fill: none;
481-
}
482-
483-
.emotion-11 {
484-
display: grid;
485-
grid-template-columns: 1fr auto;
486-
-webkit-align-items: center;
487-
-webkit-box-align: center;
488-
-ms-flex-align: center;
489-
align-items: center;
490-
-webkit-box-pack: justify;
491-
-webkit-justify-content: space-between;
492-
justify-content: space-between;
447+
.emotion-4 {
493448
border-width: 0 1px 0 1px;
494449
border-style: solid;
495450
border-color: inherit;
496451
background: inherit;
497452
width: 100%;
498453
}
499454
500-
.emotion-13 {
455+
.emotion-6 {
501456
outline: none;
502457
border: none;
503458
padding: 0;
@@ -512,69 +467,69 @@ exports[`numberInputField > should render correctly disabled 1`] = `
512467
background: none;
513468
}
514469
515-
.emotion-13[data-has-unit='true'] {
470+
.emotion-6[data-has-unit='true'] {
516471
text-align: left;
517472
padding: 0.5rem 0 0.5rem 0.5rem;
518473
}
519474
520-
.emotion-13::-webkit-outer-spin-button,
521-
.emotion-13::-webkit-inner-spin-button {
475+
.emotion-6::-webkit-outer-spin-button,
476+
.emotion-6::-webkit-inner-spin-button {
522477
-webkit-appearance: none;
523478
margin: 0;
524479
}
525480
526-
.emotion-13 {
481+
.emotion-6 {
527482
-moz-appearance: textfield;
528483
-webkit-appearance: textfield;
529484
-moz-appearance: textfield;
530485
-ms-appearance: textfield;
531486
appearance: textfield;
532487
}
533488
534-
.emotion-13[data-size='small'] {
489+
.emotion-6[data-size='small'] {
535490
height: 2rem;
536491
}
537492
538-
.emotion-13[data-size='medium'] {
493+
.emotion-6[data-size='medium'] {
539494
height: 2.5rem;
540495
}
541496
542-
.emotion-13[data-size='large'] {
497+
.emotion-6[data-size='large'] {
543498
height: 3rem;
544499
font-size: 1rem;
545500
font-family: Inter,sans-serif;
546501
font-weight: Regular;
547502
line-height: 1.5rem;
548503
}
549504
550-
.emotion-13:-moz-read-only {
505+
.emotion-6:-moz-read-only {
551506
color: #3f4250;
552507
background: #f9f9fa;
553508
border-block: 1px solid #d9dadd;
554509
}
555510
556-
.emotion-13:read-only {
511+
.emotion-6:read-only {
557512
color: #3f4250;
558513
background: #f9f9fa;
559514
border-block: 1px solid #d9dadd;
560515
}
561516
562-
.emotion-13:-moz-read-only~.exvap482 {
517+
.emotion-6:-moz-read-only~.exvap482 {
563518
background: #f9f9fa;
564519
}
565520
566-
.emotion-13:read-only~.exvap482 {
521+
.emotion-6:read-only~.exvap482 {
567522
background: #f9f9fa;
568523
}
569524
570-
.emotion-13:disabled {
525+
.emotion-6:disabled {
571526
color: #b5b7bd;
572527
background: #f3f3f4;
573528
cursor: not-allowed;
574529
border-block: 1px solid #e9eaeb;
575530
}
576531
577-
.emotion-13:disabled~.exvap482 {
532+
.emotion-6:disabled~.exvap482 {
578533
background: #f3f3f4;
579534
cursor: not-allowed;
580535
-webkit-user-select: none;
@@ -583,12 +538,12 @@ exports[`numberInputField > should render correctly disabled 1`] = `
583538
user-select: none;
584539
}
585540
586-
.emotion-13:placeholder-shown~.exvap482 {
541+
.emotion-6:placeholder-shown~.exvap482 {
587542
color: #727683;
588543
font-size: 1rem;
589544
}
590545
591-
.emotion-13[data-controls='false'] {
546+
.emotion-6[data-controls='false'] {
592547
text-align: left;
593548
}
594549
@@ -633,11 +588,12 @@ exports[`numberInputField > should render correctly disabled 1`] = `
633588
</button>
634589
</div>
635590
<div
636-
class="emotion-10 emotion-11 emotion-12"
591+
class="emotion-4 emotion-5 uv_x6hyh50 uv_x6hyh52p uv_x6hyh561"
592+
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;"
637593
>
638594
<input
639595
aria-label="Number Input"
640-
class="emotion-13 emotion-14"
596+
class="emotion-6 emotion-7"
641597
data-controls="true"
642598
data-has-unit="false"
643599
data-size="large"

0 commit comments

Comments
 (0)