Layout primitives for rendering children with spacing

[andreypopp]

cc @zindel who's enthusiastic about that

[jayclassless]

What does this mean?

[andreypopp]

@zindel wants to have a component like:

<SpacingBox flexDirection="horizontal" spacing={10}>
  <Item1 /><Item2 />
</SpacingBox>

which does the following:

<Box>
  <Box marginH={10}><Item1 /></Box>
  <Box marginH={10}><Item1 /></Box>
<Box>

Personally I believe keeping the layout API to be simple and consist of only few expressive components (<Box /> and <Block />) is the way to go.

[jayclassless]

I think I agree with you. This lib shouldn't turn into a junk drawer of a thousand different components. Not sure if this is a common enough pattern to include.

If it's a regular pattern in whatever project he's working on, it's a simple enough component to write.

[andreypopp]

On the other hand, I think such component could be useful (especially its horizontal flavour) if it would automatically invert order in RTL locales.

[jayclassless]

There are situations in which the browser handles that kind of reversal by itself when using dir="rtl". I don't know all the rules for its behavior, but i've seen a group of inline-block divs automatically get flipped, and table columns automatically get flipped.

Basically, I wouldn't assume that this needs to be driven by the order of the elements in the markup.

[andreypopp]

Interesting, definitely needs some research to be done.