Space Component & more layout components

[cdedreuille]

Hi everyone,

Pretty excited to start new discussions here on Github. I've just introduced Evergreen to one of my project and its simplicity is everything I needed. I know you're working on better theming in V6 but I though I'll share one of the component I miss the most.

<Space /> or <Stack /> + <Inline />

I created a custom one for my app and this is perhaps the one I use the most.
I use it with these props:

<Stack
  space={32}
  divider=false | true | "regular" | "strong"
/>

<Inline
  space={32}
  alignY="top" | "bottom" | "center"
  alignY="top" | "bottom" | "center"
  reverse=true | false
/>

This could be really amazing and helpful to bring something like this to Evergreen.

✌️

[colinlohner]

Hey @cdedreuille !

Excited that you are jumping into the discussions! This is a really interesting compositional component recommendation. Just to make sure I'm understanding correctly is it basically just adding margins to the children?

We want to create some more compositional components for Evergreen, and are working on figuring out the right way to introduce them into the library. As we figure out the way we want to handle those, we will keep you updated for sure!

[mshwery]

@cdedreuille love the idea of Stack in particular since it's such a common need to evenly space things in a row or column. I think as long as it can be implemented in a way that maintains style encapsulation it would be a nice addition to Evergreen's set of layout components. Would you be interested in contributing a PR to kick this off?

It is fairly easy to do using Pane though, so I wonder about it's utility:

<Pane display="grid" rowGap={32}>
  <div>Foo</div>
  <div>Bar</div>
  <div>Baz</div>
</Pane>

[cdedreuille]

Sure. I can give it a go. Should be fun. 🚀
There's a couple benefits to have <Stack /> instead of <Pane display="grid" rowGap={32} />

• It's an easier concept to understand, close to what you have in design tools.
• You can extend it to have dividers
• You can also simplify the alignment with just an align prop to be left, center, right.

With <Stack />, you also need to have <Inline />. Dividers doesn't make a lot of sense there I think but who knows.

I'll give it a go and send a PR to start the discussion.

[cdedreuille]

@mshwery It seems you already have a Stack component used for some ordering I presume. Any suggestion on how to avoid a conflict here? Should I rename the other one to use /stack for this new component?

[mshwery]

Ah, good question. Stacking Context accurately describes managing z-index, so I do think Stack is the appropriate name for that component (and it's already exported as such).

For this layout component, maybe we should consider calling it Grid. That way the semantics are preserved, and it's clear that you can extend it with normal grid css props, just without needing to specify display="grid"?

[cdedreuille]

How about <Space />? We could have direction as props to be vertical or horizontal. I think Grid could be confusing with traditional grid systems aka columns. This components is meant to create space in a stack.

[maraisr]

Also just wanted to note something here worth considering. We have a <Stack> component in our DS. And we wrap each child in a div to apply the styling etc. Which has been somewhat troublesome with react@experiemntal and <SuspenseList>—granted this is probably not a concern yet for you guys. However believe that as a consideration, allow Stack either support that either direct children are <Suspense>.

What i mean by that is:

Stack
-- SuspenseList
--- Suspense
---- Child
--- Suspense
---- Child

so from an api perspective, perhaps accepting a "isSuspsenseList" prop, but that falls through around suspenselist props passing.

Another way, is to check that if the first and only child is a SuspenseList, to instead look inside it's children to wrap in a div. Or opt for a "Stack" / "StackItem" component tuple. I'm no expert, just wanted to voice how its super tricky to Suspend children when stack wraps children. Unless you have a pure CSS solution that is.