[docs] Allows to experiment autoHeight behavior
#3216
Conversation
|
@alexfauquette any idea why you have to many visual diff on the pagination footer ? |
|
No, I'm only modifying a doc example, so it should not impact other screenshots. Probably my branch is too old. I merge upstream/master, we will see |
oliviertassinari
added
component: data grid
| maxColumns: 6, | ||
| }); | ||
|
|
||
| return ( | ||
| <div style={{ height: 400, width: '100%' }}> | ||
| <DataGrid autoHeight {...data} /> | ||
| <p>more content</p> |
There was a problem hiding this comment.
For context, I added this node because the first implement of autoHeight got it wrong, <p>more content</p> was displayed on top of the data grid 😆. I used the visual regression test for this, I'm not sure there are any other tests: #981 (comment). I guess we can wait for a regression that might never happen to reconsider the approach.
| </Button> | ||
| <DataGrid autoHeight {...data} rows={data.rows.slice(0, nbRows)} /> |
There was a problem hiding this comment.
It could have been nice to add some spacing between the two:
There was a problem hiding this comment.
I usually do the following
<Stack
sx={{ width: '100%', mb: 1 }}
direction="row"
alignItems="flex-start"
columnGap={1}
>
// My buttons
</Stack>There was a problem hiding this comment.
Oh right, between the 3 elements then 😁 . One constraint here is that I think we need to make the autoHeight prop easy to spot for developers, not to get them flooded with other concerns.
There was a problem hiding this comment.
@flaviendelangle thoughts:
columnGap={1}. why not use thespacingprop? AFAIK the flexbox gap prop that is not compatible with our supported browsers (Safari).- "I usually do the following" 👍 for normalizing the demos so we can say "we do x" :) for instance, outlined button vs. text ones
alignItems="flex-start"do we really need this one? I tried without it and couldn't spot an issue.width: '100%'I imagine that as a div inside a parent that is width: 100% we can remove it
There was a problem hiding this comment.
why not use the spacing prop
Because I did not know it existed 😄
I'll trying improving mine and applying it on other demos
Let the reader remove/add rows to see how the layout evolves
https://deploy-preview-3216--material-ui-x.netlify.app/components/data-grid/layout/#auto-height