Fix lists wrapping under the prefix

[ClementChaumel]

Done

Fix long list elements wrapping under the prefix (bullet, tick, etc.)

Fixes #4696

QA

• Open https://vanilla-framework-4702.demos.haus/docs/examples/patterns/lists/lists-dividers-all-wrapping
• check that all is well

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

[webteam-app]

Demo starting at https://vanilla-framework-4702.demos.haus/docs/examples/patterns/lists/lists-dividers-all-wrapping

[lyubomir-popov]

Sorry to hijack this, but is there a simple way to allow removing the border on the first item - with a utility maybe?

[ClementChaumel]

Sorry to hijack this, but is there a simple way to allow removing the border on the first item - with a utility maybe?

I see two ways we could go about it, either add a modifier for the divided class p-list--divided--omit-first or some utility class that we could apply to any list element like u-no-divider (the names could be something else of course)

In either case, I think it kind of weakens the pattern to allow for such customisation. I think we should decide if we want it always here or never. To reduce inconsistencies.

Thoughts @bartaz @lyubomir-popov ?

[bartaz]

Sorry to hijack this, but is there a simple way to allow removing the border on the first item - with a utility maybe?

Let's not do it in this PR. I don't even know exactly what is expected. Do we always want to hide the first line? Only on nested lists?

Why do we need it as an util? Who will be making a decision to use it or not. If we need it, let's make a separate issue of it and discuss details there.

[bartaz]

I'm a bit worried about assumptions we have to make about HTML and children elements in order for this to work. Like the * is definitely a red flag if it can be avoided.

Would it work if we use padding or margin instead of "prefix" area, and position the prefix before element absolutely on top of this padding/margin?

[ClementChaumel]

Yeah you're right, I liked being able to cleanly define the spacing using the grid gaps but the inability to target the text content of the <li> makes this approach a bit unreliable. Back to absolute positioning!

[bartaz]

LGTM.

I cleaned up couple things in the last commit @ClementChaumel if you wanna take a look what changed.