Canopy Patterns (LgCard)

[markblandford]

We have an lgRow of lg-card components and we have a requirement to ensure each card is the same height. This should simply just be a case of applying height: 100%; to each card. However, the question then arose, should this be a 'pattern', either implicitly or explicitly, in Canopy?

I think there are four choices:

1. Do nothing: It is up to the consumer to do what they like, Canopy has no opinion.
2. Just a recommendation from Canopy: Update the 'Do' documentation stating cards should ideally be of the same height when in a row.
3. Available in Canopy but is opt-in: New directive(s), css class(es) etc. and it becomes a 'Do' in the Guide. Potentially could just be generic classes and directives similar to Bootstrap Sizing.
4. Imposed By Canopy: (all cards have a height of 100% for example) - Probably not ideal given the wide usage of lg-card.

I'd really value your opinions and guidance. I think option 4. is a bit of a non-starter but I think there is value in the other three options.

[elenagarrone]

As discussed via email I believe either 2 or 3 are good options depending on the amount of code that needs to be added. If it's only a height: 100% I would probably only add guidance in the Canopy docs of the Card.

Adding our email discussion here (list points have been modified to match this discussion):

Elena:
I think 3 could work well. Maybe we could make the directives generic enough so that we can apply them in any place we need them. I assume they will only add flexbox classes (?).
If we add directives, I would create their own docs page (one for all the directives to achieve the same height of elements) in Storybook and add the recommendation in the ‘Do’ section of the card.

Mark:
I was in favour of option 3 too. However, it looks like that any new directive or CSS class would simply just be applying the CSS: height: 100%;, so it feels like it is perhaps a bit overkill and maybe option 2 is the more lightweight and straight-forward approach? Then again, Bootstrap has classes just for sizing 🤷

Elena:
If that’s the case then we can just add the code snippet to achieve that layout in the Card docs.
I don’t mind either 2 or 3 😊

[paul-request]

I think I agree with option 2, as adding an input/directive just to add 1 line of CSS does seem a bit overkill. A bit of extra guidance in the docs is the best approach, and gives the consumers enough flexibility to optionally achieve 100% height.

[markblandford]

I agree, option 2 it is.