Skip to content

Commit 6fdf91d

Browse files
lisalupilisalupi
authored
refactor: text area vanilla extract (#5631)
1 parent 3bca6bb commit 6fdf91d

File tree

5 files changed

+185
-1750
lines changed

5 files changed

+185
-1750
lines changed

‎.changeset/swift-wombats-arrive.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 component `TextArea` to use vanilla extract instead of Emotion

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

Lines changed: 15 additions & 282 deletions
Original file line numberDiff line numberDiff line change
@@ -2,94 +2,7 @@
22

33
exports[`textAreaField > should render correctly 1`] = `
44
<DocumentFragment>
5-
.emotion-0 {
6-
position: relative;
7-
display: -webkit-box;
8-
display: -webkit-flex;
9-
display: -ms-flexbox;
10-
display: flex;
11-
width: 100%;
12-
}
13-
14-
.emotion-2 {
15-
width: 100%;
16-
resize: vertical;
17-
background: #ffffff;
18-
border: 1px solid #d9dadd;
19-
color: #3f4250;
20-
border-radius: 0.25rem;
21-
padding: 0.75rem 0.5rem 0.75rem 1rem;
22-
padding-right: calc(1.5rem + 0px + 0px);
23-
}
24-
25-
.emotion-2::-webkit-input-placeholder {
26-
color: #727683;
27-
}
28-
29-
.emotion-2::-moz-placeholder {
30-
color: #727683;
31-
}
32-
33-
.emotion-2:-ms-input-placeholder {
34-
color: #727683;
35-
}
36-
37-
.emotion-2::placeholder {
38-
color: #727683;
39-
}
40-
41-
.emotion-2[data-success='true'] {
42-
border-color: #22674e;
43-
}
44-
45-
.emotion-2[data-error='true'] {
46-
border-color: #b3144d;
47-
}
48-
49-
.emotion-2[data-readonly='true'] {
50-
background: #f9f9fa;
51-
border-color: #d9dadd;
52-
}
53-
54-
.emotion-2:disabled {
55-
background: #f3f3f4;
56-
border-color: #e9eaeb;
57-
color: #b5b7bd;
58-
}
59-
60-
.emotion-2:disabled::-webkit-input-placeholder {
61-
color: #b5b7bd;
62-
}
63-
64-
.emotion-2:disabled::-moz-placeholder {
65-
color: #b5b7bd;
66-
}
67-
68-
.emotion-2:disabled:-ms-input-placeholder {
69-
color: #b5b7bd;
70-
}
71-
72-
.emotion-2:disabled::placeholder {
73-
color: #b5b7bd;
74-
}
75-
76-
.emotion-2:not(:disabled):hover {
77-
border-color: #8c40ef;
78-
}
79-
80-
.emotion-2:not(:disabled):focus {
81-
outline: none;
82-
border-color: #8c40ef;
83-
box-shadow: 0px 0px 0px 3px #8c40ef40;
84-
}
85-
86-
.emotion-4 {
87-
position: absolute;
88-
top: 0.75rem;
89-
right: 0.5rem;
90-
}
91-
92-
<div
5+
<div
936
data-testid="testing"
947
>
958
<form
@@ -106,20 +19,18 @@ exports[`textAreaField > should render correctly 1`] = `
10619
Test
10720
</label>
10821
<div
109-
class="emotion-0 emotion-1"
22+
class="uv_hlf4vn1"
11023
>
11124
<textarea
11225
aria-invalid="false"
113-
class="emotion-2 emotion-3"
114-
data-error="false"
115-
data-readonly="false"
116-
data-success="false"
26+
class="uv_hlf4vn3"
11727
id="«r0»"
11828
name="test"
11929
rows="3"
30+
style="--uv_hlf4vn0: calc(1.5rem + 0px + 0px);"
12031
/>
12132
<div
122-
class="emotion-4 emotion-5 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7d uv_toi52u7 uv_toi52u5d"
33+
class="uv_hlf4vn2 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7d uv_toi52u7 uv_toi52u5d"
12334
/>
12435
</div>
12536
</div>
@@ -130,94 +41,7 @@ exports[`textAreaField > should render correctly 1`] = `
13041

13142
exports[`textAreaField > should render correctly generated 1`] = `
13243
<DocumentFragment>
133-
.emotion-0 {
134-
position: relative;
135-
display: -webkit-box;
136-
display: -webkit-flex;
137-
display: -ms-flexbox;
138-
display: flex;
139-
width: 100%;
140-
}
141-
142-
.emotion-2 {
143-
width: 100%;
144-
resize: vertical;
145-
background: #ffffff;
146-
border: 1px solid #d9dadd;
147-
color: #3f4250;
148-
border-radius: 0.25rem;
149-
padding: 0.75rem 0.5rem 0.75rem 1rem;
150-
padding-right: calc(1.5rem + 300px + 0px);
151-
}
152-
153-
.emotion-2::-webkit-input-placeholder {
154-
color: #727683;
155-
}
156-
157-
.emotion-2::-moz-placeholder {
158-
color: #727683;
159-
}
160-
161-
.emotion-2:-ms-input-placeholder {
162-
color: #727683;
163-
}
164-
165-
.emotion-2::placeholder {
166-
color: #727683;
167-
}
168-
169-
.emotion-2[data-success='true'] {
170-
border-color: #22674e;
171-
}
172-
173-
.emotion-2[data-error='true'] {
174-
border-color: #b3144d;
175-
}
176-
177-
.emotion-2[data-readonly='true'] {
178-
background: #f9f9fa;
179-
border-color: #d9dadd;
180-
}
181-
182-
.emotion-2:disabled {
183-
background: #f3f3f4;
184-
border-color: #e9eaeb;
185-
color: #b5b7bd;
186-
}
187-
188-
.emotion-2:disabled::-webkit-input-placeholder {
189-
color: #b5b7bd;
190-
}
191-
192-
.emotion-2:disabled::-moz-placeholder {
193-
color: #b5b7bd;
194-
}
195-
196-
.emotion-2:disabled:-ms-input-placeholder {
197-
color: #b5b7bd;
198-
}
199-
200-
.emotion-2:disabled::placeholder {
201-
color: #b5b7bd;
202-
}
203-
204-
.emotion-2:not(:disabled):hover {
205-
border-color: #8c40ef;
206-
}
207-
208-
.emotion-2:not(:disabled):focus {
209-
outline: none;
210-
border-color: #8c40ef;
211-
box-shadow: 0px 0px 0px 3px #8c40ef40;
212-
}
213-
214-
.emotion-4 {
215-
position: absolute;
216-
top: 0.75rem;
217-
right: 0.5rem;
218-
}
219-
220-
<div
44+
<div
22145
data-testid="testing"
22246
>
22347
<form
@@ -243,22 +67,20 @@ exports[`textAreaField > should render correctly generated 1`] = `
24367
</span>
24468
</div>
24569
<div
246-
class="emotion-0 emotion-1"
70+
class="uv_hlf4vn1"
24771
>
24872
<textarea
24973
aria-invalid="false"
250-
class="emotion-2 emotion-3"
251-
data-error="false"
252-
data-readonly="false"
253-
data-success="false"
74+
class="uv_hlf4vn3"
25475
id="«r7»"
25576
name="test"
25677
rows="3"
78+
style="--uv_hlf4vn0: calc(1.5rem + 300px + 0px);"
25779
>
25880
This is an example
25981
</textarea>
26082
<div
261-
class="emotion-4 emotion-5 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7d uv_toi52u7 uv_toi52u5d"
83+
class="uv_hlf4vn2 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7d uv_toi52u7 uv_toi52u5d"
26284
>
26385
<button
26486
aria-label="clear value"
@@ -290,94 +112,7 @@ exports[`textAreaField > should render correctly generated 1`] = `
290112

291113
exports[`textAreaField > should submit with onSubmitEnter prop 1`] = `
292114
<DocumentFragment>
293-
.emotion-0 {
294-
position: relative;
295-
display: -webkit-box;
296-
display: -webkit-flex;
297-
display: -ms-flexbox;
298-
display: flex;
299-
width: 100%;
300-
}
301-
302-
.emotion-2 {
303-
width: 100%;
304-
resize: vertical;
305-
background: #ffffff;
306-
border: 1px solid #d9dadd;
307-
color: #3f4250;
308-
border-radius: 0.25rem;
309-
padding: 0.75rem 0.5rem 0.75rem 1rem;
310-
padding-right: calc(1.5rem + 0px + 0px);
311-
}
312-
313-
.emotion-2::-webkit-input-placeholder {
314-
color: #727683;
315-
}
316-
317-
.emotion-2::-moz-placeholder {
318-
color: #727683;
319-
}
320-
321-
.emotion-2:-ms-input-placeholder {
322-
color: #727683;
323-
}
324-
325-
.emotion-2::placeholder {
326-
color: #727683;
327-
}
328-
329-
.emotion-2[data-success='true'] {
330-
border-color: #22674e;
331-
}
332-
333-
.emotion-2[data-error='true'] {
334-
border-color: #b3144d;
335-
}
336-
337-
.emotion-2[data-readonly='true'] {
338-
background: #f9f9fa;
339-
border-color: #d9dadd;
340-
}
341-
342-
.emotion-2:disabled {
343-
background: #f3f3f4;
344-
border-color: #e9eaeb;
345-
color: #b5b7bd;
346-
}
347-
348-
.emotion-2:disabled::-webkit-input-placeholder {
349-
color: #b5b7bd;
350-
}
351-
352-
.emotion-2:disabled::-moz-placeholder {
353-
color: #b5b7bd;
354-
}
355-
356-
.emotion-2:disabled:-ms-input-placeholder {
357-
color: #b5b7bd;
358-
}
359-
360-
.emotion-2:disabled::placeholder {
361-
color: #b5b7bd;
362-
}
363-
364-
.emotion-2:not(:disabled):hover {
365-
border-color: #8c40ef;
366-
}
367-
368-
.emotion-2:not(:disabled):focus {
369-
outline: none;
370-
border-color: #8c40ef;
371-
box-shadow: 0px 0px 0px 3px #8c40ef40;
372-
}
373-
374-
.emotion-4 {
375-
position: absolute;
376-
top: 0.75rem;
377-
right: 0.5rem;
378-
}
379-
380-
<div
115+
<div
381116
data-testid="testing"
382117
>
383118
<form
@@ -394,22 +129,20 @@ exports[`textAreaField > should submit with onSubmitEnter prop 1`] = `
394129
Test
395130
</label>
396131
<div
397-
class="emotion-0 emotion-1"
132+
class="uv_hlf4vn1"
398133
>
399134
<textarea
400135
aria-invalid="false"
401-
class="emotion-2 emotion-3"
402-
data-error="false"
403-
data-readonly="false"
404-
data-success="false"
136+
class="uv_hlf4vn3"
405137
id="«r3»"
406138
name="test"
407139
rows="3"
140+
style="--uv_hlf4vn0: calc(1.5rem + 0px + 0px);"
408141
>
409142
This is an example
410143
</textarea>
411144
<div
412-
class="emotion-4 emotion-5 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7d uv_toi52u7 uv_toi52u5d"
145+
class="uv_hlf4vn2 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7d uv_toi52u7 uv_toi52u5d"
413146
/>
414147
</div>
415148
</div>

0 commit comments

Comments
 (0)