Feat: Rich vertical list pattern #5306

jmuzina · 2024-08-16T18:06:46Z

Done

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

QA

Review all vertical rich list examples and compare them against design
Review rich list docs
Review 4.16.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 · 2024-08-16T18:06:50Z

Demo

Jenkins

demos.haus

pastelcyborg

Looks like the combined demo link doesn't work

pastelcyborg · 2024-08-16T20:38:30Z

templates/_macros/rich-vertical-list.jinja

@@ -0,0 +1,127 @@
+# Params
+# title (string) (required): Title of the rich vertical list
+# flipped (boolean) (optional): Whether the list items are flipped so image is on the left and the text is on the right. Defaults to false.


I would probably change this to the new variant param as discussed, to allow for more flexibility in the future if new layouts are designed.

Just for clarification, are you looking for the integer variant approach as explored in #5304 ? If so, I think we should have a wider team discussion on this approach before committing to it

Yeah - still a bit hesitant to merge this until we have a conclusion there, because I suspect we're going to have to change the way we handle variants/variant params, and I'd like to figure that out before we add any new macros to the codebase

I don't want to be blocking this on the decision. We already have couple patterns merged that use flags for variants, so this follows existing convention.

Obviously, it would be good to have a conclusion before we officially publish macros (not to change API later), but I think we are fine doing any changes if needed before that.

templates/_macros/rich-vertical-list.jinja

templates/docs/examples/patterns/rich-list/vertical/default.html

jmuzina · 2024-08-16T21:07:14Z

Looks like the combined demo link doesn't work

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

lyubomir-popov · 2024-08-20T11:28:54Z

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 · 2024-08-20T20:05:28Z

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 · 2024-08-22T09:31:18Z

demo not working

jmuzina · 2024-08-22T14:29:28Z

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

pastelcyborg · 2024-08-22T18:51:53Z

templates/_macros/rich-vertical-list.jinja

@@ -0,0 +1,127 @@
+# Params
+# title (string) (required): Title of the rich vertical list
+# flipped (boolean) (optional): Whether the list items are flipped so image is on the left and the text is on the right. Defaults to false.


Yeah - still a bit hesitant to merge this until we have a conclusion there, because I suspect we're going to have to change the way we handle variants/variant params, and I'd like to figure that out before we add any new macros to the codebase

templates/_macros/rich-vertical-list.jinja

jmuzina · 2024-08-22T21:48:52Z

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.

This reverts commit d74cac6.

This reverts commit 40c45c4.

…. Change list item api to pass the item itself in

Namespace rich vertical list with vf_ Rename `numbered` -> `ordered` for rich vertical list Rename `flipped` param to `is_flipped` tweak rich list release notes for capitalization consistency

spec review

jmuzina added Feature 🎁 New feature or request Don't merge labels Aug 16, 2024

jmuzina changed the title ~~wip: Feat: Initial rich vertical list~~ wip: Feat: Rich vertical list pattern Aug 16, 2024

jmuzina added Review: Design needed Review: QA needed Review: Code needed and removed Don't merge labels Aug 16, 2024

jmuzina changed the title ~~wip: Feat: Rich vertical list pattern~~ Feat: Rich vertical list pattern Aug 16, 2024

jmuzina marked this pull request as ready for review August 16, 2024 19:07

jmuzina requested review from lyubomir-popov and pastelcyborg August 16, 2024 19:08

pastelcyborg reviewed Aug 16, 2024

View reviewed changes

lyubomir-popov added Review: Design +1 and removed Review: Design needed labels Aug 20, 2024

jmuzina force-pushed the hoc-rich-vertical-list branch from 4401179 to f12c469 Compare August 20, 2024 20:16

jmuzina requested review from pastelcyborg and advl August 21, 2024 13:01

jmuzina force-pushed the hoc-rich-vertical-list branch from f12c469 to 00befe2 Compare August 21, 2024 17:12

pastelcyborg reviewed Aug 22, 2024

View reviewed changes

jmuzina force-pushed the hoc-rich-vertical-list branch from 00befe2 to 4401179 Compare August 26, 2024 13:34

jmuzina added Don't merge and removed Don't merge labels Aug 26, 2024

jmuzina force-pushed the hoc-rich-vertical-list branch from 6b17330 to cdf54f7 Compare August 26, 2024 15:16

jmuzina marked this pull request as draft September 4, 2024 14:01

jmuzina added the Blocked ⛔ label Sep 4, 2024

jmuzina force-pushed the hoc-rich-vertical-list branch from 6d57a8c to 206fd9e Compare September 9, 2024 21:36

jmuzina added 22 commits September 10, 2024 16:09

Initial rich vertical list

fd12dc4

rich lists have their own docs page (sidenav update)

1465829

add cta to default vertical list example

c450653

rich vertical list stacks on medium

fd3f068

Default rich vertical list items are ticked rather than bulleted

3d95f85

Add flipped rich vertical list example

5a34d33

Revert "rich vertical list stacks on medium"

f603976

This reverts commit d74cac6.

Reapply "rich vertical list stacks on medium"

d7e27a0

This reverts commit 40c45c4.

Add rich list documentation page

858c304

rich list whitespace adjustents

6f35f86

Rich list markup comments

bae6712

logo section logo alt text

9a071b1

Add minimal rich vertical list example

356fbf5

Add rich vertical list elements table

5930d55

wrap logo section in shallow section

c8e2173

Add assumption comments to rich vertical list macro

7446fdb

Remove unnecessary space in list_items length check

6cc90f3

Fix list item formatting

c9ff30e

Change title param to title_text per code review

5489c65

Use logo section slot rather than list of slots

2dfe4bb

Rich vertical list supports bulleted, ticked, default, numbered lists…

4412cea

…. Change list item api to pass the item itself in

Add at least one optional element to the minimal quote wrapper example

ef9fc59

jmuzina force-pushed the hoc-rich-vertical-list branch from ecb6a79 to 859b960 Compare September 10, 2024 20:10

Rich vertical list param convention/release notes tweaks

a01e567

Namespace rich vertical list with vf_ Rename `numbered` -> `ordered` for rich vertical list Rename `flipped` param to `is_flipped` tweak rich list release notes for capitalization consistency

jmuzina force-pushed the hoc-rich-vertical-list branch from 859b960 to a01e567 Compare September 10, 2024 20:13

jmuzina added 2 commits September 10, 2024 16:23

Fix small typo in minimal rich vertical list docs

55ec794

Wrap list in section and move HR to within the grid, per @lyubomir-popov

60a4c38

spec review

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: Rich vertical list pattern #5306

Feat: Rich vertical list pattern #5306

jmuzina commented Aug 16, 2024 •

edited

Loading

webteam-app commented Aug 16, 2024

pastelcyborg left a comment

pastelcyborg Aug 16, 2024

jmuzina Aug 20, 2024

pastelcyborg Aug 22, 2024

bartaz Aug 27, 2024

jmuzina commented Aug 16, 2024

lyubomir-popov commented Aug 20, 2024

jmuzina commented Aug 20, 2024 •

edited

Loading

lyubomir-popov commented Aug 22, 2024

jmuzina commented Aug 22, 2024 •

edited

Loading

pastelcyborg Aug 22, 2024

jmuzina commented Aug 22, 2024

Feat: Rich vertical list pattern #5306

Are you sure you want to change the base?

Feat: Rich vertical list pattern #5306

Conversation

jmuzina commented Aug 16, 2024 • edited Loading

Done

QA

Check if PR is ready for release

Screenshots

webteam-app commented Aug 16, 2024

pastelcyborg left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jmuzina commented Aug 16, 2024

lyubomir-popov commented Aug 20, 2024

jmuzina commented Aug 20, 2024 • edited Loading

lyubomir-popov commented Aug 22, 2024

jmuzina commented Aug 22, 2024 • edited Loading

Choose a reason for hiding this comment

jmuzina commented Aug 22, 2024

jmuzina commented Aug 16, 2024 •

edited

Loading

jmuzina commented Aug 20, 2024 •

edited

Loading

jmuzina commented Aug 22, 2024 •

edited

Loading