Enable padding properties on Flex and Grid components.

[mraymond77]

🙋 Feature Request

This issue proposes the addition of padding properties on Flex and Grid components, like View components have.

🤔 Expected Behavior

Flex and Grid components have margin properties, but no padding properties. Seems like they should be able to have padding as well.

😯 Current Behavior

Currently need to figure out combinations of Flex and View components when needing to pad parts of my app, when it seems like I should be able to do it right within a single Flex component.

💁 Possible Solution

Add the padding properties that View components enjoy.

💻 Examples

const HeaderContainer = ({ children }) => (
   <View paddingX="size-250">
    <Flex
      direction="row"
      justifyContent="space-between"
      height="size-600"
    >
      {children}
    </Flex>
  </View>
);

Could become:

const HeaderContainer = ({ children }) => (
    <Flex
      direction="row"
      justifyContent="space-between"
      paddingX="size-250"
      height="size-600"
    >
      {children}
    </Flex>
  </View>
);

🧢 Your Company/Team

Adobe/Cloud Enablement Services - Foundation Applications

[ktabors]

Thanks for the suggestion. We intended these components to have logical definitions and to be used in relation to each other as you demonstrated above. This does create div bloat. We would accept a contribution adding additional style props to Flex and Grid which would prevent the extra View components. The contribution would need to include tests, updated documentation, as well as Chromatic and Storybook additions.

[drzewieckinicholas]

Is there any update on this? I'm wondering the same thing, and can think of some workarounds, but would prefer the solution described in this issue.

[snowystinger]

No updates. Do you need to use Flex or Grid for anything Spectrum specific?

I ask because Flex was originally solving the issue that CSS' flex implementation did not support gap yet. This is now supported.

So unless you need this for Spectrum specific styles, you are fine to use flex and grid from CSS directly.

If you do need it for Spectrum specific styles, then the fastest way to get an update would be to submit a PR.

[drzewieckinicholas]

@snowystinger Thanks for your reply! I actually have an example now with my latest commit: https://github.com/drzewieckinicholas/adobe-experience-platform-tags-search/blob/master/apps/search-client/src/components/Header/index.tsx

I was wondering how to add padding to the <Flex> without wrapping it in a <View>. I ended up not caring because this app will be relatively small, but I might just use a regular <div>.