New - Grid Row-Gap

[markblandford]

Type of request
New

Component, pattern or foundation?
Foundation maybe?

Nature of request

Unless I'm mistaken (I can't find anything in the docs of Canopy or Flexboxgrid), there is no built-in way to specify the CSS row-gap property on an lgRow element. As such, when a row 'stacks' there is no Canopy way to specify the 'gap' between flex items in the row.

For example, this HTML:

<div lgContainer>
  <div lgRow [style.margin-bottom]="'1rem'">
    <div lgColLg="4" lgCol="12">
      <lg-card lgMarginBottom="none" [style.height]="'100%'">
        <lg-card-content>
          <lg-heading level="2.0">Card 0</lg-heading>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </lg-card-content>
      </lg-card>
    </div>
    <div [lgColLg]="4" lgCol="12">
      <lg-card lgMarginBottom="none" [style.height]="'100%'">
        <lg-card-content>
          <lg-heading level="2.0">Card 1</lg-heading>
          <p>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
            voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          </p>
        </lg-card-content>
      </lg-card>
    </div>
  </div>
</div>

Generates:

LG Viewport	SM Viewport

As you can see, there is no 'gap' between the flex items when stacked (I've removed the margin on the cards for demonstration purposes only).

Adding the row-gap: 1rem; to the lgRow <div>, leads to no change in the rendering when the cards / flex items are in a row, but when they become stacked, we see a nice, consistent 1rem gap between each item:

Proposal

I propose the following:

1. A new lgRowGap= directive, where a consumer of Canopy can specify the CSS row-gap property and it's value. If a value is not provided, it will default to var(--space-sm).
2. New CSS classes, .lg-row-gap--#{$val} along the same lines as as the existing, .lg-margin--#{$val}, so the same can be achieved with a CSS class.
3. If neither the new directive or CSS classes are provided, the existing behaviour is observed.

I am not proposing any column-gap behaviour, as I feel the existing Canopy grid sort of already deals with this quite nicely (and was previously discussed in issue 198 in Flexboxgrid).

This can of course be achieved, as I have done above, by simply adding the style in the consuming app, but given the 'grid' is handled by Canopy, I feel it should be able to support this.

If this is accepted, I would like the opportunity to contribute and create a PR.

[alexcanning]

Hi Mark, thanks for raising a request. Maybe I've misunderstood but are you saying that you're seeing zero margin by default? Or that you'd like the ability to specify a custom margin?

@elenagarrone I wonder if this is a bug? There's definitely no scenario where we'd deliberately want zero horizontal margin between cards.

[markblandford]

@elenagarrone @paul-request if this is a new directive & CSS classes, would this be a breaking change if the original behaviour isn't impacted?

[elenagarrone]

@markblandford it's only a breaking change if we add the default value to the lgRow directive in my opinion as other apps have other methods of adding the spacing between cards on small devices. The new lgRowGap directive alone is not.

We could maybe add the lgRowGap directive without adding the default value to lgRow so that the change can be merged into master. Then we could create a separate PR to go into next to add the default as a breaking change.

[markblandford]

I'll write some code, raise a draft PR and we can then take it from there. Thank you everyone!

[markblandford]

@elenagarrone @paul-request I've created a draft PR here: #1052

[elenagarrone]

This is now merged and available in v9.1.0. Thanks @markblandford for contributing 👍