List Tag Rendering Incorrectly With Bullet

[rtkaaho]

Hi there!

Working through adding capsize to the text component in our design system and am running into an issue where capsized text in an li tag renders on the next line of the bullet instead of inline. Is this use case not meant to be supported or is this a general issue?

Reproduction

You can easily reproduce it on https://seek-oss.github.io/capsize/ by changing the tag of the capsized text to an li tag. See the screenshot below:

[michaeltaranto]

Hey 👋
Unfortunately, there are some tradeoffs with this technique, the main one being that the text node should be self contained and not have mixed styles with its parent. Unfortunately the li tag injects a marker pseudo element who's layout we cannot control.

In our design system we have opted for custom bullets, which I acknowledge adds complexity, but if you're trimming the space on your list items, you're likely opting into managing this complexity for your consumers anyway.

Also trimming the white space on the list items means having to manage the space with your ul/ol element, which you will need to handle carefully to not introduce additional elements in the DOM between the list and item.

Hope that helps.