Skip to content

Commit 237a364

Browse files
matthprostmatthprost
committed
fix(TextInput): fix has focus issue
1 parent 14124f5 commit 237a364

File tree

10 files changed

+1658
-6434
lines changed

10 files changed

+1658
-6434
lines changed

‎.changeset/public-fans-dance.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 `<TextInput />` using vanilla extract

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

Lines changed: 111 additions & 553 deletions
Large diffs are not rendered by default.

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

Lines changed: 4 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -2,104 +2,7 @@
22

33
exports[`submit > form is invalid 1`] = `
44
<DocumentFragment>
5-
.emotion-0 {
6-
display: -webkit-box;
7-
display: -webkit-flex;
8-
display: -ms-flexbox;
9-
display: flex;
10-
-webkit-flex-direction: row;
11-
-ms-flex-direction: row;
12-
flex-direction: row;
13-
height: 3rem;
14-
background: #ffffff;
15-
border: 1px solid #d9dadd;
16-
border-radius: 0.25rem;
17-
}
18-
19-
.emotion-0>.emotion-3 {
20-
color: #3f4250;
21-
}
22-
23-
.emotion-0>.emotion-3::-webkit-input-placeholder {
24-
color: #727683;
25-
}
26-
27-
.emotion-0>.emotion-3::-moz-placeholder {
28-
color: #727683;
29-
}
30-
31-
.emotion-0>.emotion-3:-ms-input-placeholder {
32-
color: #727683;
33-
}
34-
35-
.emotion-0>.emotion-3::placeholder {
36-
color: #727683;
37-
}
38-
39-
.emotion-0[data-success='true'] {
40-
border-color: #22674e;
41-
}
42-
43-
.emotion-0[data-error='true'] {
44-
border-color: #b3144d;
45-
}
46-
47-
.emotion-0[data-readonly='true'] {
48-
background: #f9f9fa;
49-
border-color: #d9dadd;
50-
}
51-
52-
.emotion-0[data-disabled='true'] {
53-
background: #f3f3f4;
54-
border-color: #e9eaeb;
55-
}
56-
57-
.emotion-0[data-disabled='true']>.emotion-3 {
58-
color: #b5b7bd;
59-
}
60-
61-
.emotion-0[data-disabled='true']>.emotion-3::-webkit-input-placeholder {
62-
color: #b5b7bd;
63-
}
64-
65-
.emotion-0[data-disabled='true']>.emotion-3::-moz-placeholder {
66-
color: #b5b7bd;
67-
}
68-
69-
.emotion-0[data-disabled='true']>.emotion-3:-ms-input-placeholder {
70-
color: #b5b7bd;
71-
}
72-
73-
.emotion-0[data-disabled='true']>.emotion-3::placeholder {
74-
color: #b5b7bd;
75-
}
76-
77-
.emotion-0:not([data-disabled='true']):not([data-readonly]):hover {
78-
border-color: #8c40ef;
79-
}
80-
81-
.emotion-2 {
82-
-webkit-flex: 1;
83-
-ms-flex: 1;
84-
flex: 1;
85-
border: none;
86-
outline: none;
87-
height: 100%;
88-
width: 100%;
89-
padding-left: 1rem;
90-
background: transparent;
91-
font-size: 0.875rem;
92-
}
93-
94-
.emotion-2[data-size='large'] {
95-
font-size: 1rem;
96-
}
97-
98-
.emotion-2[data-size='small'] {
99-
padding-left: 0.5rem;
100-
}
101-
102-
<div
5+
<div
1036
data-testid="testing"
1047
>
1058
<form
@@ -117,15 +20,16 @@ exports[`submit > form is invalid 1`] = `
11720
</label>
11821
<div>
11922
<div
120-
class="emotion-0 emotion-1"
23+
class="uv_q3q8049 uv_q3q8046"
12124
data-disabled="false"
12225
data-error="false"
26+
data-has-focus="false"
12327
data-readonly="false"
12428
data-success="false"
12529
>
12630
<input
12731
aria-invalid="false"
128-
class="emotion-2 emotion-3"
32+
class="uv_q3q8045"
12933
data-size="large"
13034
id="«r1»"
13135
name="toto"

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

Lines changed: 9 additions & 205 deletions
Original file line numberDiff line numberDiff line change
@@ -2,104 +2,7 @@
22

33
exports[`textInputField > should render correctly 1`] = `
44
<DocumentFragment>
5-
.emotion-0 {
6-
display: -webkit-box;
7-
display: -webkit-flex;
8-
display: -ms-flexbox;
9-
display: flex;
10-
-webkit-flex-direction: row;
11-
-ms-flex-direction: row;
12-
flex-direction: row;
13-
height: 3rem;
14-
background: #ffffff;
15-
border: 1px solid #d9dadd;
16-
border-radius: 0.25rem;
17-
}
18-
19-
.emotion-0>.emotion-3 {
20-
color: #3f4250;
21-
}
22-
23-
.emotion-0>.emotion-3::-webkit-input-placeholder {
24-
color: #727683;
25-
}
26-
27-
.emotion-0>.emotion-3::-moz-placeholder {
28-
color: #727683;
29-
}
30-
31-
.emotion-0>.emotion-3:-ms-input-placeholder {
32-
color: #727683;
33-
}
34-
35-
.emotion-0>.emotion-3::placeholder {
36-
color: #727683;
37-
}
38-
39-
.emotion-0[data-success='true'] {
40-
border-color: #22674e;
41-
}
42-
43-
.emotion-0[data-error='true'] {
44-
border-color: #b3144d;
45-
}
46-
47-
.emotion-0[data-readonly='true'] {
48-
background: #f9f9fa;
49-
border-color: #d9dadd;
50-
}
51-
52-
.emotion-0[data-disabled='true'] {
53-
background: #f3f3f4;
54-
border-color: #e9eaeb;
55-
}
56-
57-
.emotion-0[data-disabled='true']>.emotion-3 {
58-
color: #b5b7bd;
59-
}
60-
61-
.emotion-0[data-disabled='true']>.emotion-3::-webkit-input-placeholder {
62-
color: #b5b7bd;
63-
}
64-
65-
.emotion-0[data-disabled='true']>.emotion-3::-moz-placeholder {
66-
color: #b5b7bd;
67-
}
68-
69-
.emotion-0[data-disabled='true']>.emotion-3:-ms-input-placeholder {
70-
color: #b5b7bd;
71-
}
72-
73-
.emotion-0[data-disabled='true']>.emotion-3::placeholder {
74-
color: #b5b7bd;
75-
}
76-
77-
.emotion-0:not([data-disabled='true']):not([data-readonly]):hover {
78-
border-color: #8c40ef;
79-
}
80-
81-
.emotion-2 {
82-
-webkit-flex: 1;
83-
-ms-flex: 1;
84-
flex: 1;
85-
border: none;
86-
outline: none;
87-
height: 100%;
88-
width: 100%;
89-
padding-left: 1rem;
90-
background: transparent;
91-
font-size: 0.875rem;
92-
}
93-
94-
.emotion-2[data-size='large'] {
95-
font-size: 1rem;
96-
}
97-
98-
.emotion-2[data-size='small'] {
99-
padding-left: 0.5rem;
100-
}
101-
102-
<div
5+
<div
1036
data-testid="testing"
1047
>
1058
<form
@@ -117,15 +20,16 @@ exports[`textInputField > should render correctly 1`] = `
11720
</label>
11821
<div>
11922
<div
120-
class="emotion-0 emotion-1"
23+
class="uv_q3q8049 uv_q3q8046"
12124
data-disabled="false"
12225
data-error="false"
26+
data-has-focus="false"
12327
data-readonly="false"
12428
data-success="false"
12529
>
12630
<input
12731
aria-invalid="false"
128-
class="emotion-2 emotion-3"
32+
class="uv_q3q8045"
12933
data-size="large"
13034
id="«r0»"
13135
name="test"
@@ -142,108 +46,7 @@ exports[`textInputField > should render correctly 1`] = `
14246

14347
exports[`textInputField > should render correctly generated 1`] = `
14448
<DocumentFragment>
145-
.emotion-0 {
146-
display: -webkit-box;
147-
display: -webkit-flex;
148-
display: -ms-flexbox;
149-
display: flex;
150-
-webkit-flex-direction: row;
151-
-ms-flex-direction: row;
152-
flex-direction: row;
153-
height: 3rem;
154-
background: #ffffff;
155-
border: 1px solid #d9dadd;
156-
border-radius: 0.25rem;
157-
}
158-
159-
.emotion-0>.emotion-3 {
160-
color: #3f4250;
161-
}
162-
163-
.emotion-0>.emotion-3::-webkit-input-placeholder {
164-
color: #727683;
165-
}
166-
167-
.emotion-0>.emotion-3::-moz-placeholder {
168-
color: #727683;
169-
}
170-
171-
.emotion-0>.emotion-3:-ms-input-placeholder {
172-
color: #727683;
173-
}
174-
175-
.emotion-0>.emotion-3::placeholder {
176-
color: #727683;
177-
}
178-
179-
.emotion-0[data-success='true'] {
180-
border-color: #22674e;
181-
}
182-
183-
.emotion-0[data-error='true'] {
184-
border-color: #b3144d;
185-
}
186-
187-
.emotion-0[data-readonly='true'] {
188-
background: #f9f9fa;
189-
border-color: #d9dadd;
190-
}
191-
192-
.emotion-0[data-disabled='true'] {
193-
background: #f3f3f4;
194-
border-color: #e9eaeb;
195-
}
196-
197-
.emotion-0[data-disabled='true']>.emotion-3 {
198-
color: #b5b7bd;
199-
}
200-
201-
.emotion-0[data-disabled='true']>.emotion-3::-webkit-input-placeholder {
202-
color: #b5b7bd;
203-
}
204-
205-
.emotion-0[data-disabled='true']>.emotion-3::-moz-placeholder {
206-
color: #b5b7bd;
207-
}
208-
209-
.emotion-0[data-disabled='true']>.emotion-3:-ms-input-placeholder {
210-
color: #b5b7bd;
211-
}
212-
213-
.emotion-0[data-disabled='true']>.emotion-3::placeholder {
214-
color: #b5b7bd;
215-
}
216-
217-
.emotion-0:not([data-disabled='true']):not([data-readonly]):hover {
218-
border-color: #8c40ef;
219-
}
220-
221-
.emotion-2 {
222-
-webkit-flex: 1;
223-
-ms-flex: 1;
224-
flex: 1;
225-
border: none;
226-
outline: none;
227-
height: 100%;
228-
width: 100%;
229-
padding-left: 1rem;
230-
background: transparent;
231-
font-size: 0.875rem;
232-
}
233-
234-
.emotion-2[data-size='large'] {
235-
font-size: 1rem;
236-
}
237-
238-
.emotion-2[data-size='small'] {
239-
padding-left: 0.5rem;
240-
}
241-
242-
.emotion-4 {
243-
padding: 0 1rem;
244-
}
245-
246-
<div
49+
<div
24750
data-testid="testing"
24851
>
24952
<form
@@ -270,15 +73,16 @@ exports[`textInputField > should render correctly generated 1`] = `
27073
</div>
27174
<div>
27275
<div
273-
class="emotion-0 emotion-1"
76+
class="uv_q3q8049 uv_q3q8046"
27477
data-disabled="false"
27578
data-error="false"
79+
data-has-focus="false"
27680
data-readonly="false"
27781
data-success="false"
27882
>
27983
<input
28084
aria-invalid="false"
281-
class="emotion-2 emotion-3"
85+
class="uv_q3q8045"
28286
data-size="large"
28387
id="«r3»"
28488
name="test"
@@ -287,7 +91,7 @@ exports[`textInputField > should render correctly generated 1`] = `
28791
value="This is an example"
28892
/>
28993
<div
290-
class="emotion-4 emotion-5 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7d uv_toi52u7 uv_toi52u5d"
94+
class="uv_q3q8042 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7d uv_toi52u7 uv_toi52u5d"
29195
>
29296
<button
29397
aria-label="clear value"

0 commit comments

Comments
 (0)