fix: allow to truncate tags

[rubenmoya]

Description

We've got a report about a data table showing information that overlaps and makes it impossible to read, you can see it here:

Screenshots (if applicable)

I've wrapped the OverflowList component in a 300px div with a red border so we can see the overflow.

Before:

After:

Implementation details

The were a few problems. The first one is that the ValueDisplay renderer for tagList is not using the fill prop, so any tags inside it won't try and fit the available content.

The second problem was that in the calculateVisibleItemCount, we were allowing to return no visible elements, but we don't want that, we want to show at least one of them, and that item should be truncated.

Then we needed to make the BaseTag truncate the text, and add a min-w-0 to avoid the overflowing.

[github-actions]

Coverage Report for packages/react

Status	Category	Percentage	Covered / Total
🔵	Lines	17.63%	17751 / 100651
🔵	Statements	17.63%	17751 / 100651
🔵	Functions	44.21%	852 / 1927
🔵	Branches	69.94%	2493 / 3564

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/react/src/components/tags/BaseTag/index.tsx	96%	20%	100%	96%	45
packages/react/src/components/tags/F0TagDot/F0TagDot.tsx	30%	100%	100%	30%	11-36
packages/react/src/components/tags/F0TagList/components/TagCounter.tsx	18.75%	100%	0%	18.75%	17-64
packages/react/src/components/value-display/types/tagList.tsx	25%	100%	0%	25%	16-21
packages/react/src/ui/OverflowList/index.tsx	96%	55.55%	100%	96%	84, 201-204
packages/react/src/ui/OverflowList/useOverflowCalculation.ts	86%	50%	50%	86%	47-48, 54-57, 60-61, 85-87, 124-126

Generated in workflow #8586 for commit 424efbd by the Vitest Coverage Report Action

[github-actions]

🔍 Visual review for your branch is published 🔍

Here are the links to:

• the Visual Review Page

• the latest build on chromatic

• the full storybook

[github-actions]

size-limit report 📦

Path	Size
JS: Stable	583.86 KB (-0.01% 🔽)
JS: Experimental	971.46 KB (-0.04% 🔽)
CSS	71.96 KB (0%)

[sergiocarracedo]

hi @rubenmoya the stabilizacion PR #2543 already includes the ellipisis in the tag components

[rubenmoya]

hi @rubenmoya the stabilizacion PR #2543 already includes the ellipisis in the tag components

I see it also changes the F0TagList to only use the OverflowList, but still it does not fix the use case I showed:

When the first tag has a long text, and the available width is small it does not show a single item.

Edit: With the changes to the OverflowList component it does work in your PR: