Skip to content

Commit 0fd67f5

Browse files
lisalupilisalupi
committed
refactor: card and tag vanilla extract (#5576)
* refactor: card and tag vanilla extract * fix: sentiment style map * fix: feedback
1 parent 166399e commit 0fd67f5

File tree

15 files changed

+762
-1993
lines changed

15 files changed

+762
-1993
lines changed

‎.changeset/wild-houses-camp.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 components `Tag` and `Card` to use vanilla-extract instead of Emotion

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

Lines changed: 26 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -204,46 +204,6 @@ exports[`tagInputField > should render correctly with regex 1`] = `
204204
}
205205
206206
.emotion-4 {
207-
display: -webkit-inline-box;
208-
display: -webkit-inline-flex;
209-
display: -ms-inline-flexbox;
210-
display: inline-flex;
211-
-webkit-align-items: center;
212-
-webkit-box-align: center;
213-
-ms-flex-align: center;
214-
align-items: center;
215-
-webkit-box-pack: center;
216-
-ms-flex-pack: center;
217-
-webkit-justify-content: center;
218-
justify-content: center;
219-
white-space: nowrap;
220-
border-radius: 0.25rem;
221-
padding: 0 0.5rem;
222-
gap: 0.5rem;
223-
width: -webkit-fit-content;
224-
width: -moz-fit-content;
225-
width: fit-content;
226-
height: 1.5rem;
227-
color: #3f4250;
228-
background: #ffffff;
229-
border: solid 1px #d9dadd;
230-
}
231-
232-
.emotion-6 {
233-
max-width: 14.5rem;
234-
}
235-
236-
.emotion-8 {
237-
width: -webkit-fit-content;
238-
width: -moz-fit-content;
239-
width: fit-content;
240-
height: -webkit-fit-content;
241-
height: -moz-fit-content;
242-
height: fit-content;
243-
padding: 0.125rem;
244-
}
245-
246-
.emotion-10 {
247207
display: -webkit-box;
248208
display: -webkit-flex;
249209
display: -ms-flexbox;
@@ -259,27 +219,27 @@ exports[`tagInputField > should render correctly with regex 1`] = `
259219
height: 100%;
260220
}
261221
262-
.emotion-10::-webkit-input-placeholder {
222+
.emotion-4::-webkit-input-placeholder {
263223
color: #727683;
264224
}
265225
266-
.emotion-10::-moz-placeholder {
226+
.emotion-4::-moz-placeholder {
267227
color: #727683;
268228
}
269229
270-
.emotion-10:-ms-input-placeholder {
230+
.emotion-4:-ms-input-placeholder {
271231
color: #727683;
272232
}
273233
274-
.emotion-10::placeholder {
234+
.emotion-4::placeholder {
275235
color: #727683;
276236
}
277237
278-
.emotion-10[data-size="large"] {
238+
.emotion-4[data-size="large"] {
279239
font-size: 1rem;
280240
}
281241
282-
.emotion-12 {
242+
.emotion-6 {
283243
display: -webkit-box;
284244
display: -webkit-flex;
285245
display: -ms-flexbox;
@@ -318,17 +278,17 @@ exports[`tagInputField > should render correctly with regex 1`] = `
318278
<div
319279
class="emotion-2 emotion-3"
320280
>
321-
<span
322-
class="emotion-4 emotion-5"
281+
<div
282+
class="uv_d6zknp0 uv_d6zknp4"
323283
>
324284
<div
325-
class="emotion-6 emotion-7 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owi uv_m4c9ows uv_m4c9ow1b uv_m4c9ow3c"
285+
class="uv_d6zknpa uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owi uv_m4c9ows uv_m4c9ow1b uv_m4c9ow3c"
326286
>
327287
4
328288
</div>
329289
<button
330290
aria-label="Close tag"
331-
class="emotion-8 emotion-9 uv_e1wcoe0 uv_e1wcoe3 uv_e1wcoe6 uv_e1wcoek uv_e1wcoei uv_e1wcoed uv_e1wcoe19"
291+
class="uv_d6zknpb uv_e1wcoe0 uv_e1wcoe3 uv_e1wcoe6 uv_e1wcoek uv_e1wcoei uv_e1wcoed uv_e1wcoe19"
332292
data-testid="close-tag"
333293
type="button"
334294
>
@@ -341,9 +301,9 @@ exports[`tagInputField > should render correctly with regex 1`] = `
341301
/>
342302
</svg>
343303
</button>
344-
</span>
304+
</div>
345305
<input
346-
class="emotion-10 emotion-11"
306+
class="emotion-4 emotion-5"
347307
data-size="large"
348308
id="«r2»"
349309
name="test"
@@ -353,7 +313,7 @@ exports[`tagInputField > should render correctly with regex 1`] = `
353313
/>
354314
</div>
355315
<div
356-
class="emotion-12 emotion-13"
316+
class="emotion-6 emotion-7"
357317
>
358318
<button
359319
aria-label="clear value"
@@ -450,46 +410,6 @@ exports[`tagInputField > should works with defaultValues 1`] = `
450410
}
451411
452412
.emotion-4 {
453-
display: -webkit-inline-box;
454-
display: -webkit-inline-flex;
455-
display: -ms-inline-flexbox;
456-
display: inline-flex;
457-
-webkit-align-items: center;
458-
-webkit-box-align: center;
459-
-ms-flex-align: center;
460-
align-items: center;
461-
-webkit-box-pack: center;
462-
-ms-flex-pack: center;
463-
-webkit-justify-content: center;
464-
justify-content: center;
465-
white-space: nowrap;
466-
border-radius: 0.25rem;
467-
padding: 0 0.5rem;
468-
gap: 0.5rem;
469-
width: -webkit-fit-content;
470-
width: -moz-fit-content;
471-
width: fit-content;
472-
height: 1.5rem;
473-
color: #3f4250;
474-
background: #ffffff;
475-
border: solid 1px #d9dadd;
476-
}
477-
478-
.emotion-6 {
479-
max-width: 14.5rem;
480-
}
481-
482-
.emotion-8 {
483-
width: -webkit-fit-content;
484-
width: -moz-fit-content;
485-
width: fit-content;
486-
height: -webkit-fit-content;
487-
height: -moz-fit-content;
488-
height: fit-content;
489-
padding: 0.125rem;
490-
}
491-
492-
.emotion-10 {
493413
display: -webkit-box;
494414
display: -webkit-flex;
495415
display: -ms-flexbox;
@@ -505,27 +425,27 @@ exports[`tagInputField > should works with defaultValues 1`] = `
505425
height: 100%;
506426
}
507427
508-
.emotion-10::-webkit-input-placeholder {
428+
.emotion-4::-webkit-input-placeholder {
509429
color: #727683;
510430
}
511431
512-
.emotion-10::-moz-placeholder {
432+
.emotion-4::-moz-placeholder {
513433
color: #727683;
514434
}
515435
516-
.emotion-10:-ms-input-placeholder {
436+
.emotion-4:-ms-input-placeholder {
517437
color: #727683;
518438
}
519439
520-
.emotion-10::placeholder {
440+
.emotion-4::placeholder {
521441
color: #727683;
522442
}
523443
524-
.emotion-10[data-size="large"] {
444+
.emotion-4[data-size="large"] {
525445
font-size: 1rem;
526446
}
527447
528-
.emotion-12 {
448+
.emotion-6 {
529449
display: -webkit-box;
530450
display: -webkit-flex;
531451
display: -ms-flexbox;
@@ -564,17 +484,17 @@ exports[`tagInputField > should works with defaultValues 1`] = `
564484
<div
565485
class="emotion-2 emotion-3"
566486
>
567-
<span
568-
class="emotion-4 emotion-5"
487+
<div
488+
class="uv_d6zknp0 uv_d6zknp4"
569489
>
570490
<div
571-
class="emotion-6 emotion-7 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owi uv_m4c9ows uv_m4c9ow1b uv_m4c9ow3c"
491+
class="uv_d6zknpa uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owi uv_m4c9ows uv_m4c9ow1b uv_m4c9ow3c"
572492
>
573493
First
574494
</div>
575495
<button
576496
aria-label="Close tag"
577-
class="emotion-8 emotion-9 uv_e1wcoe0 uv_e1wcoe3 uv_e1wcoe6 uv_e1wcoek uv_e1wcoei uv_e1wcoed uv_e1wcoe19"
497+
class="uv_d6zknpb uv_e1wcoe0 uv_e1wcoe3 uv_e1wcoe6 uv_e1wcoek uv_e1wcoei uv_e1wcoed uv_e1wcoe19"
578498
data-testid="close-tag"
579499
type="button"
580500
>
@@ -587,9 +507,9 @@ exports[`tagInputField > should works with defaultValues 1`] = `
587507
/>
588508
</svg>
589509
</button>
590-
</span>
510+
</div>
591511
<input
592-
class="emotion-10 emotion-11"
512+
class="emotion-4 emotion-5"
593513
data-size="large"
594514
id="«r9»"
595515
name="test"
@@ -599,7 +519,7 @@ exports[`tagInputField > should works with defaultValues 1`] = `
599519
/>
600520
</div>
601521
<div
602-
class="emotion-12 emotion-13"
522+
class="emotion-6 emotion-7"
603523
>
604524
<button
605525
aria-label="clear value"

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

Lines changed: 18 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -46,40 +46,13 @@ exports[`conversation > should work with Default 1`] = `
4646
margin: 0 3.5rem;
4747
}
4848
49-
.emotion-11 {
50-
display: -webkit-inline-box;
51-
display: -webkit-inline-flex;
52-
display: -ms-inline-flexbox;
53-
display: inline-flex;
54-
-webkit-align-items: center;
55-
-webkit-box-align: center;
56-
-ms-flex-align: center;
57-
align-items: center;
58-
-webkit-box-pack: center;
59-
-ms-flex-pack: center;
60-
-webkit-justify-content: center;
61-
justify-content: center;
62-
white-space: nowrap;
63-
border-radius: 0.25rem;
64-
padding: 0 0.5rem;
65-
gap: 0.5rem;
66-
width: -webkit-fit-content;
67-
width: -moz-fit-content;
68-
width: fit-content;
69-
height: 1.5rem;
70-
color: #3f4250;
71-
background: #ffffff;
72-
border: solid 1px #d9dadd;
49+
.emotion-10 {
7350
background-color: #e9eaeb;
7451
height: 16px;
7552
margin-right: 0.5rem;
7653
}
7754
78-
.emotion-13 {
79-
max-width: 14.5rem;
80-
}
81-
82-
.emotion-15 {
55+
.emotion-12 {
8356
display: -webkit-box;
8457
display: -webkit-flex;
8558
display: -ms-flexbox;
@@ -89,7 +62,7 @@ exports[`conversation > should work with Default 1`] = `
8962
align-self: flex-end;
9063
}
9164
92-
.emotion-17 {
65+
.emotion-14 {
9366
display: -webkit-box;
9467
display: -webkit-flex;
9568
display: -ms-flexbox;
@@ -100,15 +73,15 @@ exports[`conversation > should work with Default 1`] = `
10073
margin-bottom: 1rem;
10174
}
10275
103-
.emotion-21 {
76+
.emotion-18 {
10477
margin: 0 1.5rem;
10578
margin-top: 1.5rem;
10679
border-radius: 0.25rem;
10780
padding: 1.5rem;
10881
background-color: #f1eefc;
10982
}
11083
111-
.emotion-23 {
84+
.emotion-20 {
11285
display: -webkit-box;
11386
display: -webkit-flex;
11487
display: -ms-flexbox;
@@ -149,52 +122,52 @@ exports[`conversation > should work with Default 1`] = `
149122
>
150123
Hello
151124
</div>
152-
<span
153-
class="emotion-10 emotion-11 emotion-12"
125+
<div
126+
class="emotion-10 emotion-11 uv_d6zknp0 uv_d6zknp4"
154127
>
155128
<div
156-
class="emotion-13 emotion-14 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owi uv_m4c9ows uv_m4c9ow1b uv_m4c9ow3c"
129+
class="uv_d6zknpa uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owi uv_m4c9ows uv_m4c9ow1b uv_m4c9ow3c"
157130
>
158131
Hello
159132
</div>
160-
</span>
133+
</div>
161134
</div>
162135
</div>
163136
<div
164-
class="emotion-15 emotion-16"
137+
class="emotion-12 emotion-13"
165138
>
166139
<div>
167140
Hello
168141
</div>
169142
</div>
170143
</div>
171144
<div
172-
class="emotion-17 emotion-3"
145+
class="emotion-14 emotion-3"
173146
>
174147
<div
175148
class="emotion-4 emotion-5"
176149
>
177150
<div
178-
class="emotion-21 emotion-7"
151+
class="emotion-18 emotion-7"
179152
>
180153
<div
181-
class="emotion-23 emotion-9"
154+
class="emotion-20 emotion-9"
182155
>
183156
Hello
184157
</div>
185-
<span
186-
class="emotion-10 emotion-11 emotion-12"
158+
<div
159+
class="emotion-10 emotion-11 uv_d6zknp0 uv_d6zknp4"
187160
>
188161
<div
189-
class="emotion-13 emotion-14 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owi uv_m4c9ows uv_m4c9ow1b uv_m4c9ow3c"
162+
class="uv_d6zknpa uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owi uv_m4c9ows uv_m4c9ow1b uv_m4c9ow3c"
190163
>
191164
Hello
192165
</div>
193-
</span>
166+
</div>
194167
</div>
195168
</div>
196169
<div
197-
class="emotion-15 emotion-16"
170+
class="emotion-12 emotion-13"
198171
>
199172
<div>
200173
Hello

0 commit comments

Comments
 (0)