feat: Add Breakout component that lets media content stick out of a Spotlight

[VincentSmedinga]

Update (2024/09/13): We decided against making Grid more complex (for now). We copied Grid, including the new row spanning and gap covering features, to a separate Breakout component, then reverted the changes in Grid, maintaining the approach outlined below.

---

tl;dr:

1. This uses a 2 x 2 Grid
2. The Spotlight is separated from the text
3. Grid Cells can now span rows
4. The example still requires two inline styles
5. For the rest, it works! 🎉

---

I had this lingering idea that the feature set of CSS Grid should be rich enough to meet (most of) our ‘Spotlight with break-out content challenge’. We already use stacking grid cells in Overlap, like Niels I thought grid rows should play a role, and we need some box alignment features.

With our current approach of a Grid in a Spotlight, we could never let something on the grid pop out of the Spotlight, as it contains the Grid and would grow with it.

So I turned it upside down and put the Spotlight in a Grid. The idea was to have a grid of two columns and two rows, with the Spotlight in the bottom two cells and the image in the two at the right, using overlapping grid cells as mentioned. The realisation then was that it would obfuscate half of the text.

My solution was to separate the Spotlight from the text. It may be a bit controversial, but there’s no way both will become misaligned and the text unreadable because they use the bottom left cell. The empty Spotlight is just a coloured div, and the component API still ensures the correct colours are used. It does need a negative margin to overlap the horizontal and vertical whitespace, but we can reuse the design tokens here and use the padding props to make it work with content above and below.

The rows' height is perfect by default—their auto size makes the Spotlight exactly as high as the text, even while they are separated in the DOM, and the image takes the rest of the height.

I’ve extended the existing API with rows. This makes it easy to stack the parts vertically instead of horizontally on narrow screens.

The approach works with any of the aspect ratios, any content even. It is a bit of a puzzle to make this example look good on various widhts – text an images scale totally differently. I had to give up the 50/50 layout on the 8-column grid; check out the commit before ‘Stack image and text vertically in medium grid as well’ to see why. And I wrapped all Spotlight stories in a Screen because the sticking out broke spectacularly on my ultra-wide monitor. (Which might be a good idea for all stories; we can combine it with the language attribute.)

The increased size of the CSS for the Grid component is a downside. We should shorten these class names. An idea is to make them utility classes with abbreviations like we do for ‘margin bottom’. As a bonus, we can put this class name directly on the paragraph or image without needing an intermediary Grid Cell div.

There are still a few things funky in this approach, see my own comments, but I think the aspects that work well – row height, grid placement, responsiveness, general applicability, much automatic stuff – outweigh them. There’s a few more things we could hide into an API.

The example is called ‘Stick out’ because ‘Break out’ seems to be used for sections stretching to the window's edge while other content gets horizontally constrained. ‘Pop out’ could be an alternative, too. I’ve checked with Thomas, and he’s on the same track :)

[dlnr]

This makes me wonder if grid should be a design system component instead of some guidelines. It's getting overcomplicated and solving this in application specific CSS is going to be a lot lighter/faster.

Just a couple of remarks, not a real review.