Allow for Spacing utility classes in more components

[mcnedward]

Right now, it seems like the Spacing utility classes are not available in certain components, for example I was trying to use them in my Buttons.

I'm not sure if this is by design or not, but I would expect to be able to use these class props on any of the components (and actually I would think the same should be true for the Sizing utility classes).

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

I should be able to use margin and padding utility classes, and sizing utility classes, in components like Button.

Examples 🌈

Here are my components:

<Button width={300} m={5} px={5}>
  No spacing
</Button>
<Box width={400} p={1} my={1} bgcolor="grey.300">
  Width 300
</Box>

And what I get:

Motivation 🔦

I want to have buttons right next to each other with some margins in between them without having to create and add a className to those components.

[oliviertassinari]

@mcnedward I'm at 💯💯% with that proposal. We keep track of the progress in #15561.

[mcnedward]

Sounds good, I didn't see that issue. Thanks!