Decathlon / vitamin-web

Decathlon Design System UI components for web applications
https://decathlon.github.io/vitamin-web
Apache License 2.0
282 stars 76 forks source link

feat(`@vtmn/css`): Add position relative on `vtmn-list_text` for the component `VtmnListItem` #1382

Closed Tlahey closed 1 year ago

Tlahey commented 1 year ago

Hello,

We wants to worked with the VtmnListItem but in one case, we want to ellipsis the content of the list item (in order to avoid multi lines).

With the truncate class from tailwind, the component doesn't render correctly.

image

This side effect can be avoid by adding a position relative on the class vtmn-list_text. This makes it easier to manage the content/text displayed.

NB: It is also possible to make an workaround by setup a position relative on the item itself.

Proposal :

What do you think ? Expected behaviour with position relative + truncate with absolute

image

Edit: It could have breaking changes if the developper has used a position relative on the ListItem.