Stack generates a lot of extra Markup

I watched the conference talk of Mark last night and found it very interesting. One flag to me was that Stack wraps a Div for every child. Seems like an overload of unnecessary markup. The approach in our Design system was to apply a default stack (1 rem down) to our Atomic components. With a BEM modifier of $–no-stack as an optional prop noStack

If we need spacing to be grouped, we use a Block and allow that to have a variety of stack down sizes.

https://github.com/seek-oss/braid-design-system/blob/master/lib/components/Stack/Stack.tsx

[markdalgleish]

Thanks for raising this question. It’s definitely a valid concern.

An alternative approach would be to use a selector like > *:not(:first-child) to add top padding to all child nodes via CSS, but there are a couple of tradeoffs here:

• This will create additional CSS, rather than re-using existing padding classes from Box. We’d have to create a separate atomic class for every item in our space scale, for each of our viewport sizes.
• Arguably creates a leaky abstraction if a child component returns a fragment because the spacing will impact the child nodes of another component.

However, I can definitely see an argument that this tradeoff is worth it:

• If Stack is used a lot in a single page, the extra CSS will be smaller than the additional HTML.
• You could alternatively argue that not spacing out fragmented content is actually a bug. Currently, if a component returns a fragment and you want to maintain the correct spacing, you have to return a Stack instead. We’ve run into this a bit, and in practice it kinda feels like a poor separation of concerns.

On reflection, I can see us changing approaches here, but we’ll discuss this a bit further internally.

[LasseRafn]

Still toying around, mostly have just made the layout components (not buttons etc.)

Will be making it available soon, can shoot you a link by then?

Tried to make api, dom structure and styling more or less identical