Feat: Rich vertical list pattern

[jmuzina]

Done

Builds macro, examples, and documentation for the rich vertical list pattern per design and spec

Fixes WD-14038

QA

• Review all vertical rich list examples and compare them against design
• Review rich list docs
• Review 4.18.0 release notes

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 release (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

Jenkins

demos.haus

[pastelcyborg]

Looks like the combined demo link doesn't work

[jmuzina]

Looks like the combined demo link doesn't work

Fixed, it was just pointing to the wrong url :)

[lyubomir-popov]

looks great overall! 1 small glitch I noticed: some blurry logos - can you please use the official ones uploaded here https://assets.ubuntu.com/manager?tag=variable-width-logos-july-2024

docs suggestions:

• flipped: mention that this is useful when having multiple vertical rich lists in a sequence, alternating between flipped and default#

• this feels too empty. Can we say we should have at least one of the optional elements, e.g. a paragraph or list?

[jmuzina]

1 small glitch I noticed: some blurry logos - can you please use the official ones uploaded here https://assets.ubuntu.com/manager?tag=variable-width-logos-july-2024

The only Intel logo I found here doesn't look quite right - it has a dotted border and is too wide. Do you have a better one?

Also, the mockup uses Intel logo twice in the same logo section - it doesn't really matter for the example's sake, but I figured I'd mention it in case there is another logo we could use

Your other comments have been addressed!

[lyubomir-popov]

demo not working

[jmuzina]

demo not working

@lyubomir-popov I've requested the demo to restart in Jenkins, it should be up in a few minutes if things are working properly

update: demo is now up

[jmuzina]

Tomorrow I'll update the images on this to use the new responsive image container. They get quite tall on smaller screens, so we can take advantage of a wider aspect ratio in those cases to make things look better.

[bartaz]

@jmuzina Please update/refresh the branch and let's discuss what are next steps or decisions to make.

[jmuzina]

@lyubomir-popov @dgtlntv @mattea-turic Tall images that are stacked vertically on small and medium breakpoints can disrupt the page flow a bit by making the user scroll past a very tall image. This is especially noticeable in the flipped variant.

To account for this, the examples now have two images - one with a wide aspect ratio for smaller screens, and one with a taller aspect ratio for larger screens.

Ex: before:

After:

Let me know if you think this is unnecessary or if there's a better way around it - just wanted to make sure these look as presentable as possible for release :)

[bartaz]

Looks good, thanks!

[mattea-turic]

Quote reply

This looks good to me :)