Skip to content

Commit bc629aa

Browse files
etienne-scalewayetienne-scaleway
authored
fix: correct TagList maxLength prop (#5758)
1 parent ee2f3eb commit bc629aa

File tree

6 files changed

+401
-56
lines changed

6 files changed

+401
-56
lines changed

‎.changeset/flat-groups-add.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@ultraviolet/ui": major
3+
---
4+
5+
! POTENTIAL BREAKING CHANGES !
6+
Fixed the `maxLength` prop on TagList. This prop was previously implemented incorrectly and would only reduce the threshold by one when the total length exceeded `maxLength`.
7+
This change might affect the number of visible tags, particularly if you have many long tags (the default `maxLength` is set to `600` characters) or if you have specified a custom `maxLength`.

‎packages/ui/src/components/TagList/__stories__/MaxLength.stories.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Template } from './Template.stories'
2+
3+
export const MaxLength = Template.bind({})
4+
5+
MaxLength.parameters = {
6+
docs: {
7+
description: {
8+
story:
9+
'`maxLength` prop restricts the threshold based on character count',
10+
},
11+
},
12+
}
13+
14+
MaxLength.args = {
15+
maxLength: 40,
16+
tags: [
17+
'very',
18+
...new Array<string>(50).fill('large'),
19+
'tooltip',
20+
'scaleway',
21+
'paris',
22+
'cloud',
23+
],
24+
threshold: undefined,
25+
}

‎packages/ui/src/components/TagList/__stories__/index.stories.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,4 @@ export { Copiable } from './Copiable.stories'
2020
export { Icons } from './Icons.stories'
2121
export { ParentWithDefinedWidth } from './ParentWithWidth.stories'
2222
export { PopoverMaxHeight } from './PopoverMaxHeight.stories'
23+
export { MaxLength } from './MaxLength.stories'

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

Lines changed: 147 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,89 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3+
exports[`tagList > hide items after maxLength 1`] = `
4+
<DocumentFragment>
5+
<div
6+
data-testid="testing"
7+
>
8+
<div
9+
class="styles__1f9zr5y1"
10+
data-testid="taglist"
11+
style="visibility: visible;"
12+
>
13+
<div
14+
class="styles__1f9zr5y2 styles__1f9zr5y4"
15+
data-testid="taglist-container"
16+
style="--_1f9zr5y0: 50px;"
17+
>
18+
<span
19+
class="styles__d6zknp0 styles_sentiment_neutral__d6zknp4"
20+
>
21+
<span
22+
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"
23+
>
24+
scaleway
25+
</span>
26+
</span>
27+
<span
28+
class="styles__d6zknp0 styles_sentiment_neutral__d6zknp4"
29+
>
30+
<span
31+
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"
32+
>
33+
cloud
34+
</span>
35+
</span>
36+
<span
37+
class="styles__d6zknp0 styles_sentiment_neutral__d6zknp4"
38+
>
39+
<span
40+
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"
41+
>
42+
provider
43+
</span>
44+
</span>
45+
<span
46+
class="ellipsed styles__d6zknp0 styles_sentiment_neutral__d6zknp4"
47+
>
48+
<span
49+
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"
50+
>
51+
database
52+
</span>
53+
</span>
54+
</div>
55+
<div
56+
aria-controls="_r_12_"
57+
aria-describedby="_r_12_"
58+
class="styles__w40vpo9"
59+
tabindex="-1"
60+
>
61+
<span
62+
class="styles__1f9zr5y5"
63+
data-testid="taglist-open"
64+
tabindex="0"
65+
>
66+
+2
67+
</span>
68+
</div>
69+
</div>
70+
</div>
71+
</DocumentFragment>
72+
`;
73+
374
exports[`tagList > renders correctly 1`] = `
475
<DocumentFragment>
576
<div
677
data-testid="testing"
778
>
879
<div
980
class="styles__1f9zr5y1"
81+
data-testid="taglist"
1082
style="visibility: visible;"
1183
>
1284
<div
1385
class="styles__1f9zr5y2 styles__1f9zr5y4"
86+
data-testid="taglist-container"
1487
style="--_1f9zr5y0: 50px;"
1588
>
1689
<span
@@ -49,11 +122,13 @@ exports[`tagList > renders correctly a scrollable popover with non default popov
49122
>
50123
<div
51124
class="styles__1f9zr5y1"
125+
data-testid="taglist"
52126
style="visibility: visible;"
53127
>
54128
<div
55129
class="styles__1f9zr5y2 styles__1f9zr5y4"
56-
style="--_1f9zr5y0: 100px;"
130+
data-testid="taglist-container"
131+
style="--_1f9zr5y0: 50px;"
57132
>
58133
<span
59134
class="styles__d6zknp0 styles_sentiment_neutral__d6zknp4"
@@ -82,6 +157,15 @@ exports[`tagList > renders correctly a scrollable popover with non default popov
82157
item
83158
</span>
84159
</span>
160+
<span
161+
class="styles__d6zknp0 styles_sentiment_neutral__d6zknp4"
162+
>
163+
<span
164+
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"
165+
>
166+
item
167+
</span>
168+
</span>
85169
<span
86170
class="ellipsed styles__d6zknp0 styles_sentiment_neutral__d6zknp4"
87171
>
@@ -93,8 +177,8 @@ exports[`tagList > renders correctly a scrollable popover with non default popov
93177
</span>
94178
</div>
95179
<div
96-
aria-controls="_r_27_"
97-
aria-describedby="_r_27_"
180+
aria-controls="_r_2i_"
181+
aria-describedby="_r_2i_"
98182
class="styles__w40vpo9"
99183
tabindex="-1"
100184
>
@@ -103,7 +187,7 @@ exports[`tagList > renders correctly a scrollable popover with non default popov
103187
data-testid="taglist-open"
104188
tabindex="0"
105189
>
106-
+51
190+
+50
107191
</span>
108192
</div>
109193
</div>
@@ -118,10 +202,12 @@ exports[`tagList > renders correctly and add ellipsis to the first tag as it too
118202
>
119203
<div
120204
class="styles__1f9zr5y1"
205+
data-testid="taglist"
121206
style="visibility: visible;"
122207
>
123208
<div
124209
class="styles__1f9zr5y2 styles__1f9zr5y4"
210+
data-testid="taglist-container"
125211
style="--_1f9zr5y0: 0px;"
126212
>
127213
<span
@@ -146,10 +232,12 @@ exports[`tagList > renders correctly and ignore custom threshold as it does not
146232
>
147233
<div
148234
class="styles__1f9zr5y1"
235+
data-testid="taglist"
149236
style="visibility: visible;"
150237
>
151238
<div
152239
class="styles__1f9zr5y2 styles__1f9zr5y4"
240+
data-testid="taglist-container"
153241
style="--_1f9zr5y0: 50px;"
154242
>
155243
<span
@@ -181,22 +269,54 @@ exports[`tagList > renders correctly and ignore custom threshold as it does not
181269
</DocumentFragment>
182270
`;
183271

272+
exports[`tagList > renders correctly when maxLength is smaller than first tag 1`] = `
273+
<DocumentFragment>
274+
<div
275+
data-testid="testing"
276+
>
277+
<div
278+
class="styles__1f9zr5y1"
279+
data-testid="taglist"
280+
style="visibility: visible;"
281+
>
282+
<div
283+
class="styles__1f9zr5y2 styles__1f9zr5y4"
284+
data-testid="taglist-container"
285+
style="--_1f9zr5y0: 0px;"
286+
>
287+
<span
288+
class="ellipsed styles__d6zknp0 styles_sentiment_neutral__d6zknp4"
289+
>
290+
<span
291+
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"
292+
>
293+
scaleway
294+
</span>
295+
</span>
296+
</div>
297+
</div>
298+
</div>
299+
</DocumentFragment>
300+
`;
301+
184302
exports[`tagList > renders correctly with copiable 1`] = `
185303
<DocumentFragment>
186304
<div
187305
data-testid="testing"
188306
>
189307
<div
190308
class="styles__1f9zr5y1"
309+
data-testid="taglist"
191310
style="visibility: visible;"
192311
>
193312
<div
194313
class="styles__1f9zr5y2 "
314+
data-testid="taglist-container"
195315
style="--_1f9zr5y0: 0px;"
196316
>
197317
<div
198-
aria-controls="_r_11_"
199-
aria-describedby="_r_11_"
318+
aria-controls="_r_1c_"
319+
aria-describedby="_r_1c_"
200320
class="styles__w40vpo9"
201321
tabindex="0"
202322
>
@@ -211,8 +331,8 @@ exports[`tagList > renders correctly with copiable 1`] = `
211331
</button>
212332
</div>
213333
<div
214-
aria-controls="_r_13_"
215-
aria-describedby="_r_13_"
334+
aria-controls="_r_1e_"
335+
aria-describedby="_r_1e_"
216336
class="styles__w40vpo9"
217337
tabindex="0"
218338
>
@@ -239,10 +359,12 @@ exports[`tagList > renders correctly with custom threshold 1`] = `
239359
>
240360
<div
241361
class="styles__1f9zr5y1"
362+
data-testid="taglist"
242363
style="visibility: visible;"
243364
>
244365
<div
245366
class="styles__1f9zr5y2 "
367+
data-testid="taglist-container"
246368
style="--_1f9zr5y0: 0px;"
247369
>
248370
<span
@@ -276,10 +398,12 @@ exports[`tagList > renders correctly with custom threshold and extra tags 1`] =
276398
>
277399
<div
278400
class="styles__1f9zr5y1"
401+
data-testid="taglist"
279402
style="visibility: visible;"
280403
>
281404
<div
282405
class="styles__1f9zr5y2 styles__1f9zr5y4"
406+
data-testid="taglist-container"
283407
style="--_1f9zr5y0: 50px;"
284408
>
285409
<span
@@ -327,11 +451,13 @@ exports[`tagList > renders correctly with custom threshold and extra tags and ma
327451
>
328452
<div
329453
class="styles__1f9zr5y1"
454+
data-testid="taglist"
330455
style="visibility: visible;"
331456
>
332457
<div
333458
class="styles__1f9zr5y2 styles__1f9zr5y4"
334-
style="--_1f9zr5y0: 100px;"
459+
data-testid="taglist-container"
460+
style="--_1f9zr5y0: 50px;"
335461
>
336462
<span
337463
class="ellipsed styles__d6zknp0 styles_sentiment_neutral__d6zknp4"
@@ -369,15 +495,17 @@ exports[`tagList > renders correctly with icons 1`] = `
369495
>
370496
<div
371497
class="styles__1f9zr5y1"
498+
data-testid="taglist"
372499
style="visibility: visible;"
373500
>
374501
<div
375502
class="styles__1f9zr5y2 "
503+
data-testid="taglist-container"
376504
style="--_1f9zr5y0: 0px;"
377505
>
378506
<div
379-
aria-controls="_r_19_"
380-
aria-describedby="_r_19_"
507+
aria-controls="_r_1k_"
508+
aria-describedby="_r_1k_"
381509
class="styles__w40vpo9"
382510
tabindex="0"
383511
>
@@ -392,8 +520,8 @@ exports[`tagList > renders correctly with icons 1`] = `
392520
</button>
393521
</div>
394522
<div
395-
aria-controls="_r_1b_"
396-
aria-describedby="_r_1b_"
523+
aria-controls="_r_1m_"
524+
aria-describedby="_r_1m_"
397525
class="styles__w40vpo9"
398526
tabindex="0"
399527
>
@@ -420,10 +548,12 @@ exports[`tagList > renders correctly with multiline 1`] = `
420548
>
421549
<div
422550
class="styles__1f9zr5y1"
551+
data-testid="taglist"
423552
style="visibility: visible;"
424553
>
425554
<div
426555
class="styles__1f9zr5y2 styles_multiline_true__1f9zr5y3 "
556+
data-testid="taglist-container"
427557
style="--_1f9zr5y0: 0px;"
428558
>
429559
<span
@@ -446,8 +576,8 @@ exports[`tagList > renders correctly with multiline 1`] = `
446576
</span>
447577
</div>
448578
<div
449-
aria-controls="_r_s_"
450-
aria-describedby="_r_s_"
579+
aria-controls="_r_17_"
580+
aria-describedby="_r_17_"
451581
class="styles__w40vpo9"
452582
tabindex="-1"
453583
>
@@ -479,10 +609,12 @@ exports[`tagList > renders correctly with placement 1`] = `
479609
>
480610
<div
481611
class="styles__1f9zr5y1"
612+
data-testid="taglist"
482613
style="visibility: visible;"
483614
>
484615
<div
485616
class="styles__1f9zr5y2 styles__1f9zr5y4"
617+
data-testid="taglist-container"
486618
style="--_1f9zr5y0: 50px;"
487619
>
488620
<span

0 commit comments

Comments
 (0)