Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit d5bdd6b

Browse files
codebender828codebender828
committed
refactor(toextarea+toast): use attrs api
1 parent 76456b7 commit d5bdd6b

File tree

10 files changed

+299
-183
lines changed

10 files changed

+299
-183
lines changed

‎packages/chakra-ui-core/src/CStack/CStack.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ const CStack = {
9797
},
9898
attrs: {
9999
d: 'inline-block',
100-
...this.computedAttrs
100+
...spacingProps
101101
}
102102
}, [clone])
103103
}

‎packages/chakra-ui-core/src/CTag/tests/__snapshots__/CTag.test.js.snap

Lines changed: 215 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,98 @@
22

33
exports[`should display tag with custom element 1`] = `
44
<DocumentFragment>
5-
<div
6-
class="css-1u7dvmo"
5+
.emotion-4 {
6+
margin-bottom: 0.75rem;
7+
}
8+
9+
.emotion-2 {
10+
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
11+
overflow: hidden;
12+
text-overflow: ellipsis;
13+
white-space: nowrap;
14+
line-height: 1.2;
15+
}
16+
17+
.emotion-3 {
18+
display: -webkit-inline-box;
19+
display: -webkit-inline-flex;
20+
display: -ms-inline-flexbox;
21+
display: inline-flex;
22+
-webkit-align-items: center;
23+
-webkit-box-align: center;
24+
-ms-flex-align: center;
25+
align-items: center;
26+
min-height: 2rem;
27+
max-width: 100%;
28+
border-radius: 9999px;
29+
font-weight: 500;
30+
min-width: 2rem;
31+
padding-left: 0.75rem;
32+
padding-right: 0.75rem;
33+
background-color: #f9bcc2;
34+
color: #44070e;
35+
}
36+
37+
.emotion-1 {
38+
width: 1.5rem;
39+
height: 1.5rem;
40+
font-size: calc(1.5rem / 2.5);
41+
line-height: 1.5rem;
42+
vertical-align: top;
43+
display: -webkit-inline-box;
44+
display: -webkit-inline-flex;
45+
display: -ms-inline-flexbox;
46+
display: inline-flex;
47+
border-radius: 9999px;
48+
-webkit-align-items: center;
49+
-webkit-box-align: center;
50+
-ms-flex-align: center;
51+
align-items: center;
52+
-webkit-flex-shrink: 0;
53+
-ms-flex-negative: 0;
54+
flex-shrink: 0;
55+
-webkit-box-pack: center;
56+
-webkit-justify-content: center;
57+
-ms-flex-pack: center;
58+
justify-content: center;
59+
position: relative;
60+
background-color: #a8eb4f;
61+
color: #1A202C;
62+
border: 2px solid;
63+
border-color: #fff;
64+
}
65+
66+
.emotion-0 {
67+
width: 1.5rem;
68+
height: 1.5rem;
69+
text-align: center;
70+
text-transform: uppercase;
71+
font-weight: 500;
72+
}
73+
74+
<div
75+
class="emotion-4"
776
data-chakra-component="CBox"
877
>
978
<div
10-
class="css-fzcsno css-1v8giig"
79+
class="emotion-3"
1180
data-chakra-component="CTag"
1281
>
1382
<div
14-
class="css-1cm55yf"
83+
class="emotion-1"
1584
data-chakra-component="CAvatar"
1685
>
1786
<div
1887
aria-label="Mesut Koca"
19-
class="css-1wti8hy"
88+
class="emotion-0"
2089
data-chakra-component="CAvatarName"
2190
>
2291
MK
2392
</div>
2493
</div>
2594
2695
<span
27-
class="css-e1yiz6"
96+
class="emotion-2"
2897
data-chakra-component="CTagLabel"
2998
>
3099
Mesut
@@ -36,26 +105,90 @@ exports[`should display tag with custom element 1`] = `
36105

37106
exports[`should display tag with right icon 1`] = `
38107
<DocumentFragment>
39-
<div
40-
class="css-1u7dvmo"
108+
.emotion-4:first-child {
109+
margin-left: 0;
110+
}
111+
112+
.emotion-4:last-child {
113+
margin-right: 0;
114+
}
115+
116+
.emotion-6 {
117+
margin-bottom: 0.75rem;
118+
}
119+
120+
.emotion-5 {
121+
display: -webkit-inline-box;
122+
display: -webkit-inline-flex;
123+
display: -ms-inline-flexbox;
124+
display: inline-flex;
125+
-webkit-align-items: center;
126+
-webkit-box-align: center;
127+
-ms-flex-align: center;
128+
align-items: center;
129+
min-height: 1.5rem;
130+
max-width: 100%;
131+
border-radius: 0.25rem;
132+
font-weight: 500;
133+
min-width: 1.5rem;
134+
font-size: 0.875rem;
135+
padding-left: 0.5rem;
136+
padding-right: 0.5rem;
137+
background-color: #c2ebd4;
138+
color: #0f3921;
139+
}
140+
141+
.emotion-3 {
142+
margin-left: 0.5rem;
143+
margin-right: 0.5rem;
144+
}
145+
146+
.emotion-1 {
147+
-webkit-flex-shrink: 0;
148+
-ms-flex-negative: 0;
149+
flex-shrink: 0;
150+
-webkit-backface-visibility: hidden;
151+
backface-visibility: hidden;
152+
}
153+
154+
.emotion-1:not(:root) {
155+
overflow: hidden;
156+
}
157+
158+
.emotion-2 {
159+
width: 12px;
160+
height: 12px;
161+
display: inline-block;
162+
vertical-align: middle;
163+
}
164+
165+
.emotion-0 {
166+
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
167+
overflow: hidden;
168+
text-overflow: ellipsis;
169+
white-space: nowrap;
170+
line-height: 1.2;
171+
}
172+
173+
<div
174+
class="emotion-6"
41175
data-chakra-component="CBox"
42176
>
43177
<div
44-
class="css-fzcsno css-h304f4"
178+
class="emotion-5"
45179
data-chakra-component="CTag"
46180
>
47181
<span
48-
class="css-e1yiz6"
182+
class="emotion-0"
49183
data-chakra-component="CTagLabel"
50184
>
51185
Green
52186
</span>
53187
54188
<svg
55-
class="css-1w7qkv4 css-y3asau css-9r03b"
189+
class="emotion-1 emotion-2 emotion-3 emotion-4"
56190
data-chakra-component="CTagIcon"
57191
role="presentation"
58-
size="12px"
59192
viewBox="0 0 24 24"
60193
>
61194
@@ -74,19 +207,83 @@ exports[`should display tag with right icon 1`] = `
74207

75208
exports[`should render correctly 1`] = `
76209
<DocumentFragment>
77-
<div
78-
class="css-1u7dvmo"
210+
.emotion-3:first-child {
211+
margin-left: 0;
212+
}
213+
214+
.emotion-3:last-child {
215+
margin-right: 0;
216+
}
217+
218+
.emotion-6 {
219+
margin-bottom: 0.75rem;
220+
}
221+
222+
.emotion-5 {
223+
display: -webkit-inline-box;
224+
display: -webkit-inline-flex;
225+
display: -ms-inline-flexbox;
226+
display: inline-flex;
227+
-webkit-align-items: center;
228+
-webkit-box-align: center;
229+
-ms-flex-align: center;
230+
align-items: center;
231+
min-height: 1.5rem;
232+
max-width: 100%;
233+
border-radius: 0.25rem;
234+
font-weight: 500;
235+
min-width: 1.5rem;
236+
font-size: 0.875rem;
237+
padding-left: 0.5rem;
238+
padding-right: 0.5rem;
239+
background-color: #c2ebd4;
240+
color: #0f3921;
241+
}
242+
243+
.emotion-2 {
244+
margin-left: 0.5rem;
245+
margin-right: 0.5rem;
246+
}
247+
248+
.emotion-0 {
249+
-webkit-flex-shrink: 0;
250+
-ms-flex-negative: 0;
251+
flex-shrink: 0;
252+
-webkit-backface-visibility: hidden;
253+
backface-visibility: hidden;
254+
}
255+
256+
.emotion-0:not(:root) {
257+
overflow: hidden;
258+
}
259+
260+
.emotion-1 {
261+
width: 12px;
262+
height: 12px;
263+
display: inline-block;
264+
vertical-align: middle;
265+
}
266+
267+
.emotion-4 {
268+
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
269+
overflow: hidden;
270+
text-overflow: ellipsis;
271+
white-space: nowrap;
272+
line-height: 1.2;
273+
}
274+
275+
<div
276+
class="emotion-6"
79277
data-chakra-component="CBox"
80278
>
81279
<div
82-
class="css-fzcsno css-h304f4"
280+
class="emotion-5"
83281
data-chakra-component="CTag"
84282
>
85283
<svg
86-
class="css-1w7qkv4 css-y3asau css-9r03b"
284+
class="emotion-0 emotion-1 emotion-2 emotion-3"
87285
data-chakra-component="CTagIcon"
88286
role="presentation"
89-
size="12px"
90287
viewBox="0 0 24 24"
91288
>
92289
@@ -100,7 +297,7 @@ exports[`should render correctly 1`] = `
100297
</svg>
101298
102299
<span
103-
class="css-e1yiz6"
300+
class="emotion-4"
104301
data-chakra-component="CTagLabel"
105302
>
106303
Green

‎packages/chakra-ui-core/src/CText/tests/CText.test.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ it.each`
4444
'should display text type as $as',
4545
({ as }) => {
4646
const inlineAttrs = `as=${as}`
47-
const { asFragment } = renderComponent({ inlineAttrs })
48-
49-
expect(asFragment()).toMatchSnapshot()
47+
const { getByTestId } = renderComponent({ inlineAttrs })
48+
const text = getByTestId('text')
49+
expect(text.tagName.toLowerCase()).toEqual(as)
5050
}
5151
)

0 commit comments

Comments
 (0)