Skip to content

WD-32254-Updated equal heights row and pattern to use 4 4 8 grid#5729

Merged
jmuzina merged 7 commits intomainfrom
WD-32254-dev-update-equal-heights-row-and-pattern-to-use-4-4-8-grid
Jan 13, 2026
Merged

WD-32254-Updated equal heights row and pattern to use 4 4 8 grid#5729
jmuzina merged 7 commits intomainfrom
WD-32254-dev-update-equal-heights-row-and-pattern-to-use-4-4-8-grid

Conversation

@immortalcodes
Copy link
Member

@immortalcodes immortalcodes commented Jan 6, 2026 •
edited
Loading

Done

  • Added support to link titles for items in equal heights pattern.
  • Updated equal heights row and pattern to use 4-4-8 grid
  • I had a manual check at uses of the pattern and component in canonical.com and ubuntu.com and they do not break, simply because the legacy 3 item row has same ratio(9/12) as the new grid(6/8),also true for 2 items row - (6/12) and (4/8). Still it would be better to take another look at the demo.
  • As Julie said in this comment, at some places if an html element uses old grid values and is nested inside the equal-height-row component then it could break the layout, but such instances are rare and need a closer look when the sites are updated to use the 4-4-8 grid equal height pattern.

Fixes [list issues/bugs if needed]
#5587
https://warthogs.atlassian.net/browse/WD-32254

QA

  • Open equal heights pattern and equal heights
  • See the equal heights pattern and equal heights component to see they do not break and follow 8 column grid.
  • See there are no breaking changes in Canonical.com
  • For ubuntu.com the styles have been custom modified and would require taking a look at this file when updating to latest vanilla package.
  • For linked titles see the highlighted images example.

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:

  • 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 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
  • 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

[if relevant, include a screenshot or screen capture]

Copilot AI review requested due to automatic review settings January 6, 2026 12:37
@webteam-app
Copy link

webteam-app commented Jan 6, 2026

Demo

Jenkins

demos.haus

Copilot AI reviewed Jan 6, 2026
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This pull request migrates the equal heights row pattern and component from the legacy 12-column grid system (4/6/12) to the new 8-column grid system (4/4/8). The changes update grid class names, SCSS grid variables, and refactor the template logic to use a new shared macro for better code reusability.

  • Migrated from legacy grid classes (.row, .col) to new grid classes (.grid-row, .grid-col)
  • Updated SCSS to use 8-column grid variables ($grid-8-columns) instead of legacy 12-column variables
  • Extracted equal heights block rendering into a reusable shared macro

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
templates/_macros/vf_equal-heights.jinja Updated grid class names from legacy to 8-column grid, changed quote styles, and refactored to use new shared macro
templates/_macros/shared/vf_equal-heights-block.jinja New shared macro containing extracted equal heights block rendering logic for reusability
scss/_patterns_equal-height-row.scss Migrated grid variables from 12-column to 8-column system, updated calculations, added support for both new and legacy grid class selectors
releases.yml Added release notes for version 4.40.0 documenting the grid migration
package.json Bumped version from 4.39.0 to 4.40.0

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

petesfrench
petesfrench reviewed Jan 7, 2026
View reviewed changes
Copy link
Contributor

@petesfrench petesfrench left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

QA'd on some different pages and looks good. Just left some minor comments in the code.

@kim-isaac
Copy link

kim-isaac commented Jan 8, 2026

Thanks for adding linked title @immortalcodes , I'm adding +1!

petesfrench
petesfrench approved these changes Jan 9, 2026
View reviewed changes
Copy link
Contributor

@petesfrench petesfrench left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@jmuzina jmuzina self-requested a review January 9, 2026 14:52
jmuzina
jmuzina requested changes Jan 9, 2026
View reviewed changes
Copy link
Member

@jmuzina jmuzina left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for working on this! Just a few comments:

  1. I found a visual regression with data spotlight pattern's 2-block variant. It is using equal heights row component under the hood.
  2. Please refactor title_link to title_link_attrs object instead of an href string, for consistency with the object forwarding pattern we have been using in other patterns.
  3. Revert version to 4.39.0 in package.json and releases.yml (it hasn't been released yet - we can release after this PR)
  4. Some docs cleanup suggestions
  5. Prettier needs to be run

@jmuzina jmuzina added Review: Percy -1 and removed Review: Percy needed This PR needs a review of Percy for visual regressions labels Jan 9, 2026
jmuzina
jmuzina approved these changes Jan 12, 2026
View reviewed changes
Copy link
Member

@jmuzina jmuzina left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A small comment to keep docs up-to-date, then lgtm

@advl
Copy link
Contributor

advl commented Jan 13, 2026

Sorry for jumping late on this. It looks good to me.

@jmuzina jmuzina merged commit 27d352c into main Jan 13, 2026
12 checks passed
@jmuzina jmuzina deleted the WD-32254-dev-update-equal-heights-row-and-pattern-to-use-4-4-8-grid branch January 13, 2026 15:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jmuzina jmuzina jmuzina approved these changes

Copilot code review Copilot Copilot left review comments

@advl advl advl approved these changes

@petesfrench petesfrench petesfrench approved these changes

@kim-isaac kim-isaac Awaiting requested review from kim-isaac

Assignees

@immortalcodes immortalcodes

Labels

Maintenance 🔨 Review: Code +1 (with changes) Review: Design +1 Review: Percy +1 Review: QA +1

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

7 participants

@immortalcodes @webteam-app @kim-isaac @advl @jmuzina @petesfrench