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

[immortalcodes]

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]

[webteam-app]

Demo

Jenkins

demos.haus

[Copilot]

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]

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

[kim-isaac]

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

[petesfrench]

LGTM

[jmuzina]

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]

From Prettier in CI:

[warn] Code style issues found in the above file. Run Prettier with --write to fix.

Fix this with npx prettier -c -w .

[jmuzina]

These changes have caused a visual regression in the data spotlight pattern's 2-block variant - that pattern uses the equal height row component.

Before

After

[jmuzina]

v4.39.0 has yet to be released (we can release it after this merges), can you revert this change

[jmuzina]

v4.39.0 has yet to be released (we can release it after this merges), can you move these notes into the 4.39.0 release entry

[jmuzina]

We have tended to do this in newer patterns with link_attrs object, rather than an href string, so that other attributes of the link can be customized (for instance aria labels, classes, as necessary). See data spotlight for example. Can you update accordingly so this is consistent between patterns?

[jmuzina]

In this case it can be title_link_attrs.

[jmuzina]

The TODO's and "This needs to be carefully investigated" can be removed now - but we should add a comment explaining that we intentinoally use grid-8 column counts even for row- classes for backwards compatibility while also noting potential problems with that (that you have determined are rare cases)