Add equal height row component

[mas-who]

Done

Added the equal height row component which includes the following features:

• Consistent alignment of grid items across all column in a row
• Out of box responsive behaviour for grid items
• Support for use in standard and 25-75 grid layouts
• Insert dividers that can span across all columns in a row (bridges grid gaps) on large screens and breaks up into smaller per column dividers on smaller screen sizes

Fixes: WD-10102

QA

• Open demo
• Inspect the following component examples and make sure behaviour on all screen sizes align with the functionalities outlined above: Equal height row / Three column row, Equal height row / 4 item columns, Equal height row / Default
• Review updated documentation:
  • equal height row

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

[mas-who]

A rough initial setup to get a sense for what needs to be implemented. There are still some discussions to be had about the approach.

[lyubomir-popov]

looks good, some comments in the code

[lyubomir-popov]

10? wasn't there an auto value

[mas-who]

This can't be auto because .p-equal-height-col is a subgrid and its parent grid has grid-template-rows set to default auto. This means the subgrid is actually defining the row structure for the parent grid, so we need to explicitly define the row span. Although we can set the span to 4 instead of 10 to cater for maximum 4 grid items, previously this is set to 10 to cater for an arbitrary number of grid items in a column, but we have decided to have maximum 4 items in a column now.

[lyubomir-popov]

Iwould refer to the dividers as "above". They are attached top the element that follows.

[mas-who]

If we use "above", then the dividers will have to start at item-2 i.e. has-divider-above-item-2, has-divider-above-item-3, has-divider-above-item-4. Seems a little weird to start at item-2 for me, what do you think?

[mas-who]

In separate discussion with bartek, we think has-1st-divider, has-2nd-divider and has-3rd-divider might be a good compromise to make the classes less verbose, wdyt?

[bartaz]

Would it make sense to use actual border on small screens instead of the before/after pseudo element divider?

So, if we have a class name that adds divider between items 1/2 - the item 2 will have border on top:

// pseudo-code, just to give idea
&.has-divider-above-item-2 .p-equal-height-row__item:nth-child(2) {
  border-top: 1px solid $colors--theme--border-default;
}

[mas-who]

I did try with border first, but it doesn't play nicely with spacing such as margin-top. Using pseudo elements, the absolute positioning inside the grid works for all kinds of spacing between items since the element aligns exactly with the grid tracks.

[mas-who]

There is one more assumption made that may break things.

In case of default 4 col example, we currently rely on the fact that it's not nested in any row or grid. It's wrong assumption. While it may not be, it doesn't have to be, it can be. Esprcially if it may be wrapped by section component for some padding.

So we need to make sure that cases like:

<div class="u-fixed-width">
  <div class="p-equal-height-row has-1st-divider"> …

or the same nested in row > col-12.

Right now the divideer width will be wrongly calculated (because padding won't be there if nested):

Yes agreed, this relates to assuming that width of the divider needs to be calculated with the parent grid padding in mind. The fix based on the other comment changed the divider definition to use grid-column-start and grid-column-end. This resolved the problem because we no longer have to calculate the width of the divider (also works for .equal-height-row nested inside a col-12)

[bartaz]

One last thing would be to update the examples to make them closer to real content.

For default (4 cols) let's use this (hopefully the needed images can be found on assets server):

For 3 cols in 25-75 use this:

And this could serve as both having 4 items in columns and divider (images like this may not be available, but any placeholder could work for now I think):

https://www.figma.com/file/YNYesRrgkpP9bM3JQbFiXz/Responsive-equal-heights-grid?type=design&node-id=0-1&mode=design&t=esDiQnQTIvweaHkG-0

[bartaz]

Some comments on the docs contents.

[lyubomir-popov]

assets for thew above 4 images: https://assets.ubuntu.com/manager?tag=equal-heights-component-example-assets

please also replace these with the onese above ^

[mas-who]

assets for thew above 4 images: https://assets.ubuntu.com/manager?tag=equal-heights-component-example-assets

please also replace these with the onese above ^

@lyubomir-popov thanks I have replaced the images

[bartaz]

@mas-who Could you also add p-rule--highlight on top of the titles, as per design? (https://vanillaframework.io/docs/patterns/rule#highlighted)

[bartaz]

One last thing (hopefully) as a drive-by. Currently images have unnecessary spacing below them because they are inline.

I think it would be fine to make images block inside p-media-container, so could you add .p-media-container img { display: block; } to media container component?

[bartaz]

Small suggestions for the docs

[lyubomir-popov]

Really nice work @mas-who +1

approved

[bartaz]

Awesome work, thanks @mas-who !