Add Media Group object

[dromo77]

Overview

This PR adds a Media Group object. It should be helpful for aligning images/content on pages like the Case Study Listing page.

Screenshots

Testing

---

• Fixes Column content alignment pattern #1390

[changeset-bot]

🦋 Changeset detected

Latest commit: 7fed1a7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@cloudfour/patterns	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✔️ Deploy Preview for cloudfour-patterns ready!

🔨 Explore the source changes: 7fed1a7

🔍 Inspect the deploy log: https://app.netlify.com/sites/cloudfour-patterns/deploys/6192b555713b880008fcd832

😎 Browse the preview: https://deploy-preview-1579--cloudfour-patterns.netlify.app

[tylersticka]

@dromo77 Thanks for tackling this challenging layout problem.

I'm not sure I understand what o-media-group__item does that o-media does not, or what o-media-group does that o-deck does not. I assume I'm missing something between the way the two interact?

[dromo77]

I'm not sure I understand what o-media-group__item does that o-media does not, or what o-media-group does that o-deck does not. I assume I'm missing something between the way the two interact?

@tylersticka I ran into a couple issues trying to use o-media and o-deck as a solution. In the prototype the content splits into two columns at the l breakpoint. o-deck automatically creates columns, so there were multiple columns before the l breakpoint. The content looked a little squished.

o-media doesn't size the object and also uses flex. I thought about some sort of modifier that uses CSS Grid. This would help size the object and could also be used to align objects vertically, similar to what the o-media-group__item is doing. However, the alignment and grid size of the object are different on small screens versus large screens. I wasn't sure how to handle the different sizes/alignment needed.

I'm open to other solutions, but wanted to give some context to the problems I ran into using existing patterns.

[tylersticka]

o-deck automatically creates columns, so there were multiple columns before the l breakpoint. The content looked a little squished.

I assume that was true even with the o-deck--2-column@lmodifier. Perhaps we should add 1-column modifiers to o-deck? Would that solve the issue?

o-media doesn't size the object and also uses flex. I thought about some sort of modifier that uses CSS Grid. This would help size the object and could also be used to align objects vertically, similar to what the o-media-group__item is doing. However, the alignment and grid size of the object are different on small screens versus large screens. I wasn't sure how to handle the different sizes/alignment needed.

Reading the comment in the media.scss file, it seems like I used Flexbox to write it just because it was simple. But that's not a very compelling reason to keep using Flexbox. If there's a good reason to use CSS Grid instead, we should totally do that.

From there, there are probably a few ways of handling those case study image widths. Perhaps we could make one or more o-media modifiers that enforce a certain object column width?

Or, honestly, I don't mind the different media columns being different as much as I used to. If we find that's taking an outsized amount of effort to componentize, maybe it isn't completely necessary after all? What do you think?

[dromo77]

If we find that's taking an outsized amount of effort to componentize, maybe it isn't completely necessary after all?

I'll try using our existing patterns with the changes you mentioned. I don't think it will take too much time to add o-media modifiers, but if I find otherwise we can consider different sized columns.

[dromo77]

@tylersticka I made several changes:

1. I updated the Case Study Listing prototype to use patterns so we can see what it looks like in action.
2. I updated the o-deck column modifier so you can specify when you want 1 column.
3. I updated o-media to use CSS grid when supported. I think I did it correctly. I haven't noticed any regressions, but would appreciate another pair of eyes on it.
4. I added a modifier to specify the size of o-media__object relative to o-media__content. I want to make sure the modifier name and documentation makes sense.
5. I added another modifier to o-media to fix some alignment issues I noticed in the prototype.

[tylersticka]

It looks like some of the prototype images have been copied from src/prototypes/case-study-listings/images to static/media. That's fine, but can we remove the duplicates so they are only in one place?

[tylersticka]

Apparently I wrote a comment on Friday that I never actually posted. Sorry about that. 🤦

[tylersticka]

Can we have a demo that more clearly shows the use case, as well as more context for why one would use it versus the default behavior? It isn't clear to me how the demo differs visually from the others as-is.

[dromo77]

@tylersticka I updated the example, let me know if it makes more sense 🙂