Adding spaceY and spaceX util styles for generic Chakra elements

[imMatheus]

Description

A new property on elements such as <Box> that applies margin spacing to direct children

Problem Statement/Justification

Sometimes, you find yourself in a situation where you would like to add some spacing for all elements inside a <Box> or another wrapper element. For example, given the following code example.

// app.jsx
<Box>
    <MyOwnComponet />
    <MyOwnComponet />
    <MyOwnComponet />
</Box>

// MyOwnComponet.jsx
const MyOwnComponent = () => {
  return (
    <Box>My own component</Box>
  )
}

Here I would like the all the <MyOwnComponet /> inside my <Box> in the app.jsx file to have a spacing of 16px or 4 chakra units. There a couple of solutions here

1. I could change the definition of <MyOwnComponent/> to have something like mt={4} and then _first={{mt: 0}} - But this has a couple of drawbacks, for example if I dont want the margin top to always be there in other pages. Adding a margin like this feels pretty bad in my opinion and usually just results in needing to pass in some prop to disable the margin, and then maybe you find yourself in a situation where you would like to have more margin in some pages and then this just starts to get a bit out of hand.
2. You could change the <Box> that is wrapping my 3 <MyOwnComponet /> in a <Flex> with a flexDir="column" and then add gap={4} - This would solve the issue and is a pretty common approach, but also might not be the best thing ever as changing the wrapper to a flex could effect the layout of the elements inside and have some unwanted side-effects. But that is pretty uncommon.
3. You could add some sort of "spacer" element around the components that have the given height - But this usually feels pretty bad and is annoying if you are dealing with a long manual list of elements. Also will add unnecessary HTML that have no semantic value

Proposed Solution or API

Adding a new property to the standard Chakra components that is heavily inspiread by the space utils from Tailwind.css.

In the code below I would like the spaceY (and also a spaceX) property to be added

<Box spaceY={4} bg="#f00">
    <MyOwnComponet />
    <MyOwnComponet />
    <MyOwnComponet />
</Box>

Here is a proposed CSS output (given that the box's generated class name is abc123)

.abc123{
background: #f00;
}

.abc123>:not([hidden])~:not([hidden]) {
margin-top: 1rem;
margin-bottom: 1rem;
}

Alternatives

No response

Additional Information

I would gladly take this on and provide a PR if you want :)

[segunadebayo]

Consider using the Stack component instead

[imMatheus]

Thanks for the response, was not aware of the Stack component. With that said, even if it does solve the issue here, as i said before, adding flexbox to the wrapper just to then add some gap could lead to some edge cases and does not feel great always. Its honestly not super common to encounter these edge cases when working with a column flex box, but for row flex boxes its much more common i would say as flexboxes with a row direction do a lot of things to the direct children when it comes to the size. And for some cases using flex box for such a thing would not be suitable. So for that reason I do still believe that some sort of spaceX/spaceY property would be a great feature. Do you see any downsides of adding such property?