Theme-ui: Stack Component!

[TheMightyPenguin]

Is your feature request related to a problem? Please describe.
I was looking into how to make a Stack layout, and found this recipe: https://theme-ui.com/recipes/stack.
This recipe won't work if the user needs/wants to support IE11, as that browser doesn't have support for grid-gap. Also, I think having to be aware of using either display: flex or grid to implement a Stack is not the ideal development experience. I think that things like display: flex; or display: grid; should be an implementation detail in most cases.

Describe the solution you'd like
Having a Stack component that handles those implementation details and just lets you specify a Space that belongs to your space scale, will be a flexible option that still behaves under your theme constraints. Something that looks like:

// Items are spaced out using the element with index 3 on your spaces scale
<Stack space={3}>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</Stack>

Not sure if that component fits into the principles of this library, but I saw an opportunity, and if it's wanted here I'd love to implement it! 😄

Describe alternatives you've considered
We could do something similar to what's described here: https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/, just to have the Grid component translate the gridGap prop as Autoprefixer does.

Additional context
I've been using the Stack component for a while and found it incredibly useful and reusable. I was heavily inspired by the Stack component on this design system by the team at Seek (https://seek-oss.github.io/braid-design-system/components/Stack)

[lachlanjc]

I'm not sure if/how to implement this, but I'd totally use it if it was available. I oftentimes have a row of buttons, a vertical list of cards, etc & sometimes Grid isn't the right choice, so this could be great. Interested in @jxnblk's thoughts though.

[TheMightyPenguin]

Yeah! I've been using this component for a while now (from an internal library), and it's really versatile. Adapts to a lot of use cases, and turns out stacking things with a space between is a pretty common task! (in my case at least)

[jxnblk]

I might be missing something obvious, but what would this provide that the Grid component doesn’t?

[TheMightyPenguin]

@jxnblk from what I see:

• Support for IE11 without much hassle (probably implemented as flex under the hood)
• Abstracts away implementation details (such as using flex or grid, or how the space between the items is implemented), so users only care about "stacking elements vertically with some space between".

From the second point, I'm not sure if that is aligned with the vision of this library, as Stack is a more specific component, while Grid is a more general one.

[lachlanjc]

Hmm, I’m not sure if this component is worthwhile if it’s only for vertical spacing? With Grid you have to deal with specifying columns if you’re doing horizontal stacking. Ideally to me this would do the equivalent of setting margin right/bottom on children automatically without brittle child selectors in the sx prop. Great for nav bars, card footers with multiple buttons, etc.

[TheMightyPenguin]

To add more context, one of the thing I like the most about components like Stack, is that they're really specific and help even more with enforcing constraints of a design system. For example, Stack could handle vertical alignment and Inline or (HorizontalList) could handle horizontal alignment, of course this could also be a single component List that takes a direction prop.

And yes @lachlanjc, this component would handle properly setting the margin/spacing without the child selectors, so developers would not worry about that.

[CanRau]

For example, Stack could handle vertical alignment and Inline or (HorizontalList) could handle horizontal alignment

That sounds pretty non-responsive though 🤔
I mean I understand that not everything should change orientation, yet

this could also be a single component List that takes a direction prop.

this sounds more universal to me

[jxnblk]

I think there are two separate issues that are being somewhat conflated here: the component API and the implementation.

1) I understand that CSS Grid Layout isn't as widely supported, and there could be something in the implementation that helps with fallbacks for legacy browsers.
2) While I generally am not opposed to the Stack convention/API - the Grid component is intended as a complete replacement for that. I'd like to hear some rationale for why adding Stack in addition to Grid would make sense from an API standpoint.

Again, I'm not opposed to adding a Stack (it could be an extension of the existing Grid component), but just want to make sure I understand the reasons for adding it in

[lachlanjc]

How are we feeling here? Is there a clear need?

[jxnblk]

I think adding a Stack component is a good call -- it provides a more consistent component API with other libraries and might be familiar to some people. If anyone wants to take a shot at a PR, feel free to do so

[TheMightyPenguin]

I can work on a PR to add this @jxnblk

[joe-bell]

To those wanting a Stack, I built this primarily for use with Theme UI:
https://github.com/joe-bell/raam

Hope it helps