Skip to content

Commit 80f5974

Browse files
lisalupilisalupi
committed
fix(Tag): html tag (#5616)
* fix: tag html * fix: no div in span
1 parent 69a773b commit 80f5974

File tree

8 files changed

+146
-141
lines changed

8 files changed

+146
-141
lines changed

‎.changeset/solid-insects-poke.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ultraviolet/ui": patch
3+
---
4+
5+
`Tag`: container should be a "span", not a "div"

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -278,14 +278,14 @@ exports[`tagInputField > should render correctly with regex 1`] = `
278278
<div
279279
class="emotion-2 emotion-3"
280280
>
281-
<div
281+
<span
282282
class="uv_d6zknp0 uv_d6zknp4"
283283
>
284-
<div
284+
<span
285285
class="uv_d6zknpa uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owi uv_m4c9ows uv_m4c9ow1b uv_m4c9ow3c"
286286
>
287287
4
288-
</div>
288+
</span>
289289
<button
290290
aria-label="Close tag"
291291
class="uv_d6zknpb uv_e1wcoe0 uv_e1wcoe3 uv_e1wcoe6 uv_e1wcoek uv_e1wcoei uv_e1wcoed uv_e1wcoe19"
@@ -301,7 +301,7 @@ exports[`tagInputField > should render correctly with regex 1`] = `
301301
/>
302302
</svg>
303303
</button>
304-
</div>
304+
</span>
305305
<input
306306
class="emotion-4 emotion-5"
307307
data-size="large"
@@ -484,14 +484,14 @@ exports[`tagInputField > should works with defaultValues 1`] = `
484484
<div
485485
class="emotion-2 emotion-3"
486486
>
487-
<div
487+
<span
488488
class="uv_d6zknp0 uv_d6zknp4"
489489
>
490-
<div
490+
<span
491491
class="uv_d6zknpa uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owi uv_m4c9ows uv_m4c9ow1b uv_m4c9ow3c"
492492
>
493493
First
494-
</div>
494+
</span>
495495
<button
496496
aria-label="Close tag"
497497
class="uv_d6zknpb uv_e1wcoe0 uv_e1wcoe3 uv_e1wcoe6 uv_e1wcoek uv_e1wcoei uv_e1wcoed uv_e1wcoe19"
@@ -507,7 +507,7 @@ exports[`tagInputField > should works with defaultValues 1`] = `
507507
/>
508508
</svg>
509509
</button>
510-
</div>
510+
</span>
511511
<input
512512
class="emotion-4 emotion-5"
513513
data-size="large"

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -122,15 +122,15 @@ exports[`conversation > should work with Default 1`] = `
122122
>
123123
Hello
124124
</div>
125-
<div
125+
<span
126126
class="emotion-10 emotion-11 uv_d6zknp0 uv_d6zknp4"
127127
>
128-
<div
128+
<span
129129
class="uv_d6zknpa uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owi uv_m4c9ows uv_m4c9ow1b uv_m4c9ow3c"
130130
>
131131
Hello
132-
</div>
133-
</div>
132+
</span>
133+
</span>
134134
</div>
135135
</div>
136136
<div
@@ -155,15 +155,15 @@ exports[`conversation > should work with Default 1`] = `
155155
>
156156
Hello
157157
</div>
158-
<div
158+
<span
159159
class="emotion-10 emotion-11 uv_d6zknp0 uv_d6zknp4"
160160
>
161-
<div
161+
<span
162162
class="uv_d6zknpa uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owi uv_m4c9ows uv_m4c9ow1b uv_m4c9ow3c"
163163
>
164164
Hello
165-
</div>
166-
</div>
165+
</span>
166+
</span>
167167
</div>
168168
</div>
169169
<div

‎packages/ui/src/components/SelectInput/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7036,15 +7036,15 @@ exports[`selectInput > renders correctly multiselect 1`] = `
70367036
<div
70377037
class="emotion-4 emotion-5 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
70387038
>
7039-
<div
7039+
<span
70407040
class="emotion-6 emotion-7 styles__d6zknp0 styles_sentiment_neutral__d6zknp4"
70417041
data-testid="selected-options-tags"
70427042
>
7043-
<div
7043+
<span
70447044
class="styles__d6zknpa style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_true__m4c9ow7 style_prominence_default__m4c9owi style_variant_caption__m4c9ows style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
70457045
>
70467046
Pluto
7047-
</div>
7047+
</span>
70487048
<button
70497049
aria-label="Close tag"
70507050
class="styles__d6zknpb styles__e1wcoe0 styles_size_small__e1wcoe3 styles_fullWidth_false__e1wcoe6 styles_disabled_false__e1wcoek styles_variant_ghost__e1wcoei styles_sentiment_neutral__e1wcoed styles_undefined_compound_24__e1wcoe19"
@@ -7060,7 +7060,7 @@ exports[`selectInput > renders correctly multiselect 1`] = `
70607060
/>
70617061
</svg>
70627062
</button>
7063-
</div>
7063+
</span>
70647064
</div>
70657065
<div
70667066
class="emotion-8 emotion-9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -9540,16 +9540,16 @@ exports[`selectInput > renders correctly unclosable tags when readonly 1`] = `
95409540
<div
95419541
class="emotion-4 emotion-5 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
95429542
>
9543-
<div
9543+
<span
95449544
class="emotion-6 emotion-7 styles__d6zknp0 styles_sentiment_neutral__d6zknp4"
95459545
data-testid="selected-options-tags"
95469546
>
9547-
<div
9547+
<span
95489548
class="styles__d6zknpa style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_true__m4c9ow7 style_prominence_default__m4c9owi style_variant_caption__m4c9ows style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
95499549
>
95509550
Venus
9551-
</div>
9552-
</div>
9551+
</span>
9552+
</span>
95539553
</div>
95549554
<div
95559555
class="emotion-8 emotion-9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"

‎packages/ui/src/components/Tag/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ exports[`tag > renders correctly 1`] = `
55
<div
66
data-testid="testing"
77
>
8-
<div
8+
<span
99
class="styles__d6zknp0 styles_sentiment_neutral__d6zknp4"
1010
>
11-
<div
11+
<span
1212
class="styles__d6zknpa style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_true__m4c9ow7 style_prominence_default__m4c9owi style_variant_caption__m4c9ows style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
1313
>
1414
test
15-
</div>
16-
</div>
15+
</span>
16+
</span>
1717
</div>
1818
</DocumentFragment>
1919
`;
@@ -23,15 +23,15 @@ exports[`tag > renders correctly colored 1`] = `
2323
<div
2424
data-testid="testing"
2525
>
26-
<div
26+
<span
2727
class="styles__d6zknp0 styles_sentiment_primary__d6zknp5"
2828
>
29-
<div
29+
<span
3030
class="styles__d6zknpa style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_true__m4c9ow7 style_prominence_default__m4c9owi style_variant_caption__m4c9ows style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
3131
>
3232
test
33-
</div>
34-
</div>
33+
</span>
34+
</span>
3535
</div>
3636
</DocumentFragment>
3737
`;
@@ -41,15 +41,15 @@ exports[`tag > renders correctly disabled 1`] = `
4141
<div
4242
data-testid="testing"
4343
>
44-
<div
44+
<span
4545
class="styles__d6zknp0 styles_disabled_true__d6zknp9 styles_sentiment_neutral__d6zknp4"
4646
>
47-
<div
47+
<span
4848
class="styles__d6zknpa style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_true__m4c9ow7 style_prominence_default__m4c9owi style_variant_caption__m4c9ows style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
4949
>
5050
test
51-
</div>
52-
</div>
51+
</span>
52+
</span>
5353
</div>
5454
</DocumentFragment>
5555
`;
@@ -59,15 +59,15 @@ exports[`tag > renders correctly neutral 1`] = `
5959
<div
6060
data-testid="testing"
6161
>
62-
<div
62+
<span
6363
class="styles__d6zknp0 styles_sentiment_neutral__d6zknp4"
6464
>
65-
<div
65+
<span
6666
class="styles__d6zknpa style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_true__m4c9ow7 style_prominence_default__m4c9owi style_variant_caption__m4c9ows style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
6767
>
6868
test
69-
</div>
70-
</div>
69+
</span>
70+
</span>
7171
</div>
7272
</DocumentFragment>
7373
`;
@@ -86,11 +86,11 @@ exports[`tag > renders correctly with copiable 1`] = `
8686
<button
8787
class="styles__d6zknp0 styles_copiable_true__d6zknp1 styles_sentiment_neutral__d6zknp4"
8888
>
89-
<div
89+
<span
9090
class="styles__d6zknpa style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_true__m4c9ow7 style_prominence_default__m4c9owi style_variant_caption__m4c9ows style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
9191
>
9292
test
93-
</div>
93+
</span>
9494
</button>
9595
</div>
9696
</div>
@@ -102,10 +102,10 @@ exports[`tag > renders correctly with icon 1`] = `
102102
<div
103103
data-testid="testing"
104104
>
105-
<div
105+
<span
106106
class="styles__d6zknp0 styles_sentiment_neutral__d6zknp4"
107107
>
108-
<div
108+
<span
109109
class="styles__d6zknpa style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_true__m4c9ow7 style_prominence_default__m4c9owi style_variant_caption__m4c9ows style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
110110
>
111111
<svg
@@ -119,8 +119,8 @@ exports[`tag > renders correctly with icon 1`] = `
119119
/>
120120
</svg>
121121
test
122-
</div>
123-
</div>
122+
</span>
123+
</span>
124124
</div>
125125
</DocumentFragment>
126126
`;
@@ -135,14 +135,14 @@ exports[`tag > renders correctly with isLoading 1`] = `
135135
<div
136136
data-testid="testing"
137137
>
138-
<div
138+
<span
139139
class="styles__d6zknp0 styles_sentiment_neutral__d6zknp4"
140140
>
141-
<div
141+
<span
142142
class="styles__d6zknpa style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_true__m4c9ow7 style_prominence_default__m4c9owi style_variant_caption__m4c9ows style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
143143
>
144144
test
145-
</div>
145+
</span>
146146
<svg
147147
aria-label="Loading"
148148
aria-valuemax="100"
@@ -175,7 +175,7 @@ exports[`tag > renders correctly with isLoading 1`] = `
175175
stroke-width="16"
176176
/>
177177
</svg>
178-
</div>
178+
</span>
179179
</div>
180180
</DocumentFragment>
181181
`;
@@ -185,14 +185,14 @@ exports[`tag > renders correctly with onClose 1`] = `
185185
<div
186186
data-testid="testing"
187187
>
188-
<div
188+
<span
189189
class="styles__d6zknp0 styles_sentiment_neutral__d6zknp4"
190190
>
191-
<div
191+
<span
192192
class="styles__d6zknpa style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_true__m4c9ow7 style_prominence_default__m4c9owi style_variant_caption__m4c9ows style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
193193
>
194194
test
195-
</div>
195+
</span>
196196
<button
197197
aria-label="Close tag"
198198
class="styles__d6zknpb styles__e1wcoe0 styles_size_small__e1wcoe3 styles_fullWidth_false__e1wcoe6 styles_disabled_false__e1wcoek styles_variant_ghost__e1wcoei styles_sentiment_neutral__e1wcoed styles_undefined_compound_24__e1wcoe19"
@@ -208,7 +208,7 @@ exports[`tag > renders correctly with onClose 1`] = `
208208
/>
209209
</svg>
210210
</button>
211-
</div>
211+
</span>
212212
</div>
213213
</DocumentFragment>
214214
`;

‎packages/ui/src/components/Tag/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const TagInner = ({
4040
<>
4141
<Text
4242
aria-disabled={disabled}
43-
as="div"
43+
as="span"
4444
className={textTag}
4545
oneLine
4646
variant="caption"
@@ -116,13 +116,13 @@ export const Tag = ({
116116
}
117117

118118
return (
119-
<div
119+
<span
120120
className={`${className ? `${className} ` : ''}${containerTag({ disabled, sentiment })}`}
121121
data-testid={dataTestId}
122122
>
123123
<TagInner disabled={disabled} isLoading={isLoading} onClose={onClose}>
124124
{children}
125125
</TagInner>
126-
</div>
126+
</span>
127127
)
128128
}

0 commit comments

Comments
 (0)