Material-ui: Add Stack component

Created on 3 Nov 2019 · 15Comments · Source: mui-org/material-ui

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

Sometimes we have a case when we want to give equal spacing i.e. padding/margin between child components where the children are Block components or Inline components

Currently, It is kind of possible with <Grid spacing={}/> but I have to wrap every child component with <Grid item/> inside a <Grid container/> parent. It would be nice If we can have a single parent component for giving equal spacing between children component. Though It can be a different parent component for each Block/Inline children components.

Summary 💡

Currently with `<Grid />`

Horizontal Spacing (Block Component)

<Grid container spacing={2} >
    <Grid item>
        <Typography>A</Typography>
    </Grid>
    <Grid item>
        <Typography>A</Typography>
    </Grid>
    <Grid item>
        <Typography>A</Typography>
    </Grid>
</Grid>

Vertical Spacing (Block Component)

<Grid container spacing={2} direction="column">
    <Grid item>
        <Typography>A</Typography>
    </Grid>
    <Grid item>
        <Typography>A</Typography>
    </Grid>
    <Grid item>
        <Typography>A</Typography>
    </Grid>
</Grid>

As you can see I have to wrap every <Typography /> inside a <Grid item/> component. And There is no way of distributing space between inline components.

Motivation 🔦

What I want to achieve

Vertical Spacing (Block Component)

<Stack spacing={2}>
    <Typography>A</Typography>
    <Typography>A</Typography>
    <Typography>A</Typography>
</Stack>

// or with `@material-ui/system` api
<Stack spacing={{ xs: 2, sm: 3, md: 4 }}>
    <Typography>A</Typography>
    <Typography>A</Typography>
    <Typography>A</Typography>
</Stack>

Horizontal Spacing (Block Component)

<Stack spacing={2} direction="row">
    <Typography>A</Typography>
    <Typography>A</Typography>
    <Typography>A</Typography>
</Stack>

// or with `@material-ui/system` api
<Stack spacing={{ xs: 2, sm: 3, md: 4 }} direction="row">
    <Typography>A</Typography>
    <Typography>A</Typography>
    <Typography>A</Typography>
</Stack>

Inline Components

<Inline spacing={2} >
    <Typography>A</Typography>
    <Typography>A</Typography>
    <Typography>A</Typography>
</Stack>

// or with `@material-ui/system` api
<Inline spacing={{ xs: 2, sm: 3, md: 4 }} >
    <Typography>A</Typography>
    <Typography>A</Typography>
    <Typography>A</Typography>
</Stack>

I don't know If the same can be achieve from the current components set or #15561 makes this redundant. But I am certain that It can find some use cases.

Benchmark

enhancement important

Source

numToStr

👍8

Most helpful comment

So then it's a question of whether, for a relatively low cost of development, it provides sufficient utility to be worth including. I would put it in the same category as Container - something which developers can do themselves, but which solves a frequent enough pattern to be worthwhile.

mbrookes on 6 Nov 2019

👍4

All 15 comments

@vkasraj The idea is interesting, thanks for the suggestion.

oliviertassinari on 3 Nov 2019

👍1

Thanks! :smile:

numToStr on 3 Nov 2019

We would leverage such components in our demos, to remove custom styles. cc @mbrookes.

oliviertassinari on 3 Nov 2019

👍3

I like the concept. Framer provides something similar as one of its built-in components:

mbrookes on 3 Nov 2019

👍1

Here's a rough-and-ready POC using Grid:

https://codesandbox.io/s/material-demo-xs8fq

mbrookes on 3 Nov 2019

❤2

Another example:
https://developer.microsoft.com/en-us/fabric/#/controls/web/stack

@oliviertassinari Worth pursuing in the lab?

mbrookes on 4 Nov 2019

Benchmark time!

It's not a very frequent pattern.

oliviertassinari on 6 Nov 2019

mbrookes on 6 Nov 2019

👍4

@mbrookes Yeah, I think that its the kind of experimentation that we should try in the lab, and see the adoption. I would also propose that we dodge food with as many of our demos as possible.

oliviertassinari on 7 Nov 2019

Great! I am ready to test whenever it is available.

Just want to ask, Is the Stack component can be used for wrapping Inline elements or is it just for block elements? 🤔

numToStr on 7 Nov 2019

@vkasraj I think that we could use both. Would you be interested in working on such component?

oliviertassinari on 7 Nov 2019

@oliviertassinari Thanks for this opportunity but I am not that familiar with source code :disappointed:. It would be great If you guys work on it. :sweat_smile:

numToStr on 8 Nov 2019

Hey
Can I tackle this component development?

Vitao18 on 10 Nov 2019

👍1

@Vitao18 Feel free to give it a go :)

Once you have a proof of concept could you open a draft PR? It allows others to provide feedback easily and see the progress.

joshwooding on 12 Nov 2019

👍1

@mbrookes Was looking at it, but I don't know if he has made any progress. He asked me if I had some recommendation, from the quick look at the problem I could have: