[mui-system][Grid] Remove disableEqualOverflow by using gap

[DiegoAndai]

Part of #35993

POC to refactor the Grid component using the gap CSS property. This removes the scroll bug that disableEqualOverflow was used to solve. With the removal of disableEqualOverflow, we can remove the use of context and move closer to a RSC compatible Grid.

[mui-bot]

Netlify deploy preview

• docs/data/material/components/grid2/grid2.md
• docs/data/material/migration/migration-v5/migration-v5.md
• docs/data/system/components/grid/grid.md

@material-ui/core: parsed: -0.10% 😍, gzip: -0.15% 😍
@material-ui/system: parsed: -0.72% 😍, gzip: -0.73% 😍
@mui/joy/Grid: parsed: -0.83% 😍, gzip: -0.88% 😍
Unstable_Grid2: parsed: -0.95% 😍, gzip: -0.92% 😍
@mui/joy: parsed: -0.12% 😍, gzip: -0.14% 😍

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 132f89b

[mnajdova]

I like this direction, also keeping the APIs similar between the two Grid components sounds awesome 👌 We should document the breaking change if we decide to go with it!

[DiegoAndai]

There are some style-breaking changes we should discuss. The previous approach of using a negative margin caused some artifacts that are now being fixed but will be perceived as breaking from users that have already adapted to the artifacts. These are reflected on the Argos failing tests so I'll group them and discuss them here:

---

A. Grid is contained inside parent's padding

Previusly, because of the negative margin, the Grid overflowed the parent's padding:

Now, the Grid doesn't overflow:

This is what removes the need for disableEqualOverflow (and thus React context), so I think we should accept the change, but we should know that it will change layouts as now padding affects the Grid differently. This is what causes a lot of the Argos failures:

• https://app.argos-ci.com/mui/material-ui/builds/28714/93536939
• https://app.argos-ci.com/mui/material-ui/builds/28714/93537456
• https://app.argos-ci.com/mui/material-ui/builds/28714/93537458
• https://app.argos-ci.com/mui/material-ui/builds/28714/93537709
• https://app.argos-ci.com/mui/material-ui/builds/28714/93537710
• https://app.argos-ci.com/mui/material-ui/builds/28714/93537833

But it also causes the scroll fix:

• https://app.argos-ci.com/mui/material-ui/builds/28714/93536947
• https://app.argos-ci.com/mui/material-ui/builds/28714/93537741

Here's the fixed demo: https://deploy-preview-42526--material-ui.netlify.app/material-ui/react-grid2/#disable-the-scrollbar

B. Spacing is no longer considered inside the Grid's box

Changing from padding to gap for the spacing implementation causes this space not to be included in the Grid's box anymore, as it's no longer padding. This causes the following Argos failures:

• https://app.argos-ci.com/mui/material-ui/builds/28714/93536941
• https://app.argos-ci.com/mui/material-ui/builds/28714/93536943
• https://app.argos-ci.com/mui/material-ui/builds/28714/93537453

IMO we should accept this change, as gap is the better alternative for this implementation. These examples are still viable but using spacing={0}. You can see the effect of this in this demo: https://deploy-preview-42526--material-ui.netlify.app/material-ui/react-grid2/#full-border

Remaining Argos failures

I'm not sure what caused these Argos failures:

• https://app.argos-ci.com/mui/material-ui/builds/28714/93537740
• https://app.argos-ci.com/mui/material-ui/builds/28714/93536946

But seems like the original implementation is overflowing, so this change looks like an improvement.

Also don't know what happened with this one: https://app.argos-ci.com/mui/material-ui/builds/28714/93537251. It looks good in the preview: https://deploy-preview-42526--material-ui.netlify.app/joy-ui/react-aspect-ratio/#variants

And the dashboard template is showing an error as well: https://app.argos-ci.com/mui/material-ui/builds/28714/93537202. But it looks ok in the preview: https://deploy-preview-42526--material-ui.netlify.app/material-ui/getting-started/templates/dashboard/

Types check failure

The types check failure is because I haven't yet removed the disableEqualOverflow prop from the Prevent Scroll demo. This demo should be removed if we accept this PR, but I'm keeping it for now so we can check that the removal of the prop is working as expected and the scroll bar is not present.

---

@mnajdova @siriwatknp @aarongarciah above is the breakdown of the breaking changes ☝🏼.

I think we should accept these and document them as breaking changes, but I want to know if you're on board. I don't see a way of using gap and keeping the previous spacing artifacts without introducing technical debt. IMO, this is the way we would've implemented it if we were able to use gap back then.

If you're on board, I'll document the breaking changes and mark this PR for review.

[siriwatknp]

Please check https://mui-org.slack.com/archives/C0170JAM7ML/p1655730663719479

[aarongarciah]

@DiegoAndai I think the changes make sense:

• 👍 getting rid of negative margins (auto-contained grid)
• 👍 developers need to explicitly add padding to individual items and explicitly remove the spacing (gap)

This maps better with how developers work with layout these days: flex/grid + gap 👌

Not sure if I'm missing additional issues in the thread that @siriwatknp linked, but it looks like all of it is covered in your explanation.

[siriwatknp]

Thanks for the detailed explanation. We can accept this breaking change because it is a part of the v6 goal, to transition to Pigment CSS 👏

[DiegoAndai]

@siriwatknp, this is ready for review 🙌🏼

I've added a section to the migration guide explaining the breaking changes: https://deploy-preview-42526--material-ui.netlify.app/material-ui/migration/migration-v5/#grid-v2-unstable-grid

Please go through the Argos changes and review if everything makes sense to you or if something is wrong.

[danilo-leal]

Love the before/after images 👌

[siriwatknp]

👍 Love it!