vanilla-framework icon indicating copy to clipboard operation
vanilla-framework copied to clipboard

wip: feat(Tiered List): add media (images/videos) to the Tiered List pattern

Open muhammad-ali-pk opened this issue 8 months ago • 12 comments

Done

  • Added support for rendering images and videos inside the tiered list pattern.
  • First example of variable content ordering in one of our patterns: the media can be displayed before or after the description.

Fixes #5549 Fixes WD-22925

QA

  • Navigate to the combined Tiered list examples and verify they appear as expected. The new examples are at the end of the list of examples, and all include "image" or "video" in their titles.
    • Things to pay attention to:
      • Full-width description examples with default width images cause the media to be displayed beneath/after the description, in the same row as the description.
      • Full width media examples always render the media in a separate row, after the title and description. Media should never precede the title, even if media_placement="before_description" is used.
      • Media uses the proper aspect ratios for requested media size. Full-width = 2.4:1, default-width = 16:9.
      • Videos are always rendered with 16:9 aspect ratio.
      • The rest of the pattern (list & cta) has not been changed at all.
      • Be sure to check at small, medium, and large breakpoints.
  • Review the tiered list with media docs
  • Review 4.25.0 release notes

Check if PR is ready for release

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

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

Screenshots

Screenshot from 2025-06-09 18-12-36 Screenshot from 2025-06-09 18-13-03 Screenshot from 2025-06-09 18-12-42 image

muhammad-ali-pk avatar Apr 21 '25 08:04 muhammad-ali-pk