Update list examples to use list elements

[bethcollins92]

Done

• Ensure all list examples use list elements

Fixes #4225

QA

• Open demo
• Check responsive divider lists still work as expected

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.
• Documentation side navigation should be updated with the relevant labels.

[webteam-app]

Demo starting at https://vanilla-framework-4302.demos.haus

[bartaz]

Overall I'm not sure about this change.

Technically I agree that we should implement list components as HTML lists, but this doesn't seem like a list component. The p-divider seems more like a layout kind of component not a "list of things". And we don't implement grid as list of rows or columns.

TBH I'm not sure why divider is even part of the "Lists" component page, it's so different from all other lists visually and doesn't even have a "list" in the name, it's just a "Divider". It's not a variant of a list component, it's a separate one.

I guess I'd vote for removing keeping divider as divs, and possibly removing it from "lists" page, but I don't think we have other place for it to live, so it would need to be a separate "Divider" component? (maybe it was before?) - I don't know where is it easier to find it? Would you expect to see it as a list or component on it's own? It seems to me that "Divider" component name by itself also doesn't say much about what it is… So having a "Divider" component page may be as confusing as having it on lists page…

[bethcollins92]

@bartaz This makes sense to me, it does feel weird it's part of the lists component. I wasn't sure if it was intended to be used as a list hence the change.

With regards to a separate divider component, when working on web I would always struggle to find this component. I used to just search the codebase for p-divider and copy what I'd already done. So from a dev usability perspective I think it would make sense to have a divider component page.

[bethcollins92]

@bartaz I've done a rough draft and moved it to it's own component, let me know what you think

[bartaz]

Looks good but couple small things:

• we should update the titles of the examples, they still say "List / Divider" and "List / Divider dark", so it looks weird on the list:

• We should also still mention divider on "Lists" page for reference if anyone may be looking for it there. In new template we have "Related components" section, maybe worth adding it somewhere on the page (after all list variants?)

[bethcollins92]

@bartaz Thanks for the review, I've made those changes

[bethcollins92]

@bartaz Does anything else need doing for this one?