Add gap prop to Flex component
See original GitHub issueIs your feature request related to a problem? Please describe.
I was looking into how to make a Stack layout, and found this recipe: https://theme-ui.com/recipes/stack.
This recipe won’t work if the user needs/wants to support IE11, as that browser doesn’t have support for grid-gap
. Also, I think having to be aware of using either display: flex
or grid
to implement a Stack is not the ideal development experience. I think that things like display: flex;
or display: grid;
should be an implementation detail in most cases.
Describe the solution you’d like Having a Stack component that handles those implementation details and just lets you specify a Space that belongs to your space scale, will be a flexible option that still behaves under your theme constraints. Something that looks like:
// Items are spaced out using the element with index 3 on your spaces scale
<Stack space={3}>
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</Stack>
Not sure if that component fits into the principles of this library, but I saw an opportunity, and if it’s wanted here I’d love to implement it! 😄
Describe alternatives you’ve considered
We could do something similar to what’s described here: https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/, just to have the Grid
component translate the gridGap
prop as Autoprefixer does.
Additional context I’ve been using the Stack component for a while and found it incredibly useful and reusable. I was heavily inspired by the Stack component on this design system by the team at Seek (https://seek-oss.github.io/braid-design-system/components/Stack)
Issue Analytics
- State:
- Created 4 years ago
- Comments:18 (13 by maintainers)
Top GitHub Comments
To those wanting a
Stack
, I built this primarily for use with Theme UI: https://github.com/joe-bell/raamHope it helps
I think there are two separate issues that are being somewhat conflated here: the component API and the implementation.
Stack
convention/API - theGrid
component is intended as a complete replacement for that. I’d like to hear some rationale for why addingStack
in addition toGrid
would make sense from an API standpoint.Again, I’m not opposed to adding a
Stack
(it could be an extension of the existingGrid
component), but just want to make sure I understand the reasons for adding it in