Skip to content

Commit 6a6b537

Browse files
matthprostlisalupi
matthprost
authored and
lisalupi
committed
fix(form): remove all emotion usages (#5439)
* fix(form): remove all emotion usages * fix: snapshots
1 parent ac53ca1 commit 6a6b537

File tree

2 files changed

+145
-15
lines changed

2 files changed

+145
-15
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -996,7 +996,7 @@ exports[`sliderField > should render correctly with possible values and double 1
996996
-webkit-transition: background 0.3s ease-in-out;
997997
transition: background 0.3s ease-in-out;
998998
position: absolute;
999-
left: calc(0% - 8px);
999+
left: calc(100% - 8px);
10001000
top: -8px;
10011001
}
10021002
@@ -1053,7 +1053,7 @@ exports[`sliderField > should render correctly with possible values and double 1
10531053
-webkit-transition: background 0.3s ease-in-out;
10541054
transition: background 0.3s ease-in-out;
10551055
position: absolute;
1056-
left: calc(0% - 8px);
1056+
left: calc(100% - 8px);
10571057
top: -8px;
10581058
}
10591059
@@ -1364,14 +1364,14 @@ exports[`sliderField > should render correctly with possible values and double 1
13641364
transform: translateX(-50%);
13651365
}
13661366
1367-
.emotion-28[data-element-left='true'] {
1367+
.emotion-26[data-element-left='true'] {
13681368
-webkit-transform: none;
13691369
-moz-transform: none;
13701370
-ms-transform: none;
13711371
transform: none;
13721372
}
13731373
1374-
.emotion-28[data-element-right='true'] {
1374+
.emotion-26[data-element-right='true'] {
13751375
-webkit-transform: translateX(-100%);
13761376
-moz-transform: translateX(-100%);
13771377
-ms-transform: translateX(-100%);

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

Lines changed: 141 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,158 @@
22

33
exports[`verificationCodeField > should render correctly 1`] = `
44
<DocumentFragment>
5-
<div
5+
.emotion-0 {
6+
border: none;
7+
padding: 0;
8+
margin: 0;
9+
display: -webkit-box;
10+
display: -webkit-flex;
11+
display: -ms-flexbox;
12+
display: flex;
13+
-webkit-flex-direction: column;
14+
-ms-flex-direction: column;
15+
flex-direction: column;
16+
gap: 0.25rem;
17+
}
18+
19+
.emotion-2 {
20+
display: -webkit-box;
21+
display: -webkit-flex;
22+
display: -ms-flexbox;
23+
display: flex;
24+
-webkit-box-flex-wrap: nowrap;
25+
-webkit-flex-wrap: nowrap;
26+
-ms-flex-wrap: nowrap;
27+
flex-wrap: nowrap;
28+
-webkit-align-items: start;
29+
-webkit-box-align: start;
30+
-ms-flex-align: start;
31+
align-items: start;
32+
-webkit-box-pack: normal;
33+
-ms-flex-pack: normal;
34+
-webkit-justify-content: normal;
35+
justify-content: normal;
36+
-webkit-flex-direction: row;
37+
-ms-flex-direction: row;
38+
flex-direction: row;
39+
gap: 0.25rem;
40+
}
41+
42+
.emotion-5 {
43+
color: #3f4250;
44+
font-size: 1rem;
45+
font-family: Inter,sans-serif;
46+
font-weight: 500;
47+
letter-spacing: 0;
48+
line-height: 1.5rem;
49+
text-transform: none;
50+
-webkit-text-decoration: none;
51+
text-decoration: none;
52+
cursor: text;
53+
}
54+
55+
.emotion-7 {
56+
color: #b3144d;
57+
font-size: 1rem;
58+
font-family: Inter,sans-serif;
59+
font-weight: 500;
60+
letter-spacing: 0;
61+
line-height: 1.5rem;
62+
text-transform: none;
63+
-webkit-text-decoration: none;
64+
text-decoration: none;
65+
}
66+
67+
.emotion-9 {
68+
background: #ffffff;
69+
color: #3f4250;
70+
font-size: 1rem;
71+
font-weight: 400;
72+
text-align: center;
73+
border-radius: 0.25rem;
74+
margin-right: 0.5rem;
75+
width: 2.5rem;
76+
height: 3rem;
77+
outline-style: none;
78+
-webkit-transition: border-color 0.2s ease,box-shadow 0.2s ease;
79+
transition: border-color 0.2s ease,box-shadow 0.2s ease;
80+
border: solid 1px #d9dadd;
81+
}
82+
83+
.emotion-9[aria-invalid='true'] {
84+
border-color: #b3144d;
85+
}
86+
87+
.emotion-9[data-success='true'] {
88+
border-color: #22674e;
89+
}
90+
91+
.emotion-9:hover,
92+
.emotion-9:focus {
93+
border-color: #792dd4;
94+
}
95+
96+
.emotion-9:hover[aria-invalid='true'],
97+
.emotion-9:focus[aria-invalid='true'] {
98+
border-color: #92103f;
99+
}
100+
101+
.emotion-9:hover[data-success='true'],
102+
.emotion-9:focus[data-success='true'] {
103+
border-color: #1b533f;
104+
}
105+
106+
.emotion-9:focus {
107+
box-shadow: 0px 0px 0px 3px #8c40ef40;
108+
}
109+
110+
.emotion-9:last-child {
111+
margin-right: 0;
112+
}
113+
114+
.emotion-9::-webkit-input-placeholder {
115+
color: #727683;
116+
}
117+
118+
.emotion-9::-moz-placeholder {
119+
color: #727683;
120+
}
121+
122+
.emotion-9:-ms-input-placeholder {
123+
color: #727683;
124+
}
125+
126+
.emotion-9::placeholder {
127+
color: #727683;
128+
}
129+
130+
.emotion-9:disabled {
131+
cursor: not-allowed;
132+
background: #f3f3f4;
133+
color: #b5b7bd;
134+
border: solid 1px #e9eaeb;
135+
}
136+
137+
<div
6138
data-testid="testing"
7139
>
8140
<form
9141
novalidate=""
10142
style="display: contents;"
11143
>
12144
<fieldset
13-
class="uv_1k9synd5"
145+
class="emotion-0 emotion-1"
14146
>
15147
<div
16-
class="uv_toi52u0 uv_toi52u3j uv_toi52u2j uv_toi52u7d uv_toi52u1v uv_toi52u5d"
148+
class="emotion-2 emotion-3"
17149
>
18150
<label
19-
class="uv_17td3g91 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow8 uv_m4c9owb uv_m4c9owi uv_m4c9owq uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
20-
for="verification-code-input-0"
21-
id="verification-code-input-label"
151+
class="emotion-4 emotion-5 emotion-6"
22152
>
23153
Code
24154
</label>
25155
<span
26-
class="uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow8 uv_m4c9owd uv_m4c9owi uv_m4c9owq uv_m4c9ow1b uv_m4c9ow1k uv_m4c9ow3c"
156+
class="emotion-7 emotion-6"
27157
>
28158
*
29159
</span>
@@ -33,7 +163,7 @@ exports[`verificationCodeField > should render correctly 1`] = `
33163
aria-invalid="false"
34164
aria-label="Verification code 0"
35165
autocomplete="off"
36-
class="uv_1k9synd2 uv_1k9synd4"
166+
class="emotion-9 emotion-10"
37167
data-success="false"
38168
data-testid="0"
39169
id="verification-code-input-0"
@@ -47,7 +177,7 @@ exports[`verificationCodeField > should render correctly 1`] = `
47177
aria-invalid="false"
48178
aria-label="Verification code 1"
49179
autocomplete="off"
50-
class="uv_1k9synd2 uv_1k9synd4"
180+
class="emotion-9 emotion-10"
51181
data-success="false"
52182
data-testid="1"
53183
id="verification-code-input-1"
@@ -61,7 +191,7 @@ exports[`verificationCodeField > should render correctly 1`] = `
61191
aria-invalid="false"
62192
aria-label="Verification code 2"
63193
autocomplete="off"
64-
class="uv_1k9synd2 uv_1k9synd4"
194+
class="emotion-9 emotion-10"
65195
data-success="false"
66196
data-testid="2"
67197
id="verification-code-input-2"
@@ -75,7 +205,7 @@ exports[`verificationCodeField > should render correctly 1`] = `
75205
aria-invalid="false"
76206
aria-label="Verification code 3"
77207
autocomplete="off"
78-
class="uv_1k9synd2 uv_1k9synd4"
208+
class="emotion-9 emotion-10"
79209
data-success="false"
80210
data-testid="3"
81211
id="verification-code-input-3"

0 commit comments

Comments
 (0)