Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Grid2] Support dynamic nested columns #36401

Merged
merged 4 commits into from
Mar 22, 2023

Conversation

siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Mar 2, 2023

closes #36335

Before:

The nested grid container does not get the --Grid-columns value from its parent because it is overridden by its own variable. The fix is similar to how nested spacing works.

https://stackblitz.com/edit/react-6xxqec?file=demo.tsx

image

After

https://codesandbox.io/s/material-cra-ts-forked-55ep57?file=/src/App.tsx

image


@siriwatknp siriwatknp added bug 🐛 Something doesn't work component: Grid The React component. package: system Specific to @mui/system labels Mar 2, 2023
@siriwatknp siriwatknp changed the title [Grid2] Support nested columns [Grid2] Support dynamic nested columns Mar 2, 2023
@mui-bot
Copy link

mui-bot commented Mar 2, 2023

Netlify deploy preview

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against 63a6d1b

@siriwatknp siriwatknp marked this pull request as ready for review March 3, 2023 03:52
@siriwatknp siriwatknp requested review from mnajdova and a team March 3, 2023 04:16
Copy link
Member

@mnajdova mnajdova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The logic and demos look good. I left one comment on the CSS variable name.

packages/mui-system/src/Unstable_Grid/gridGenerator.ts Outdated Show resolved Hide resolved
@mnajdova
Copy link
Member

@siriwatknp should we merge this one?

@siriwatknp siriwatknp merged commit 380bc4b into mui:master Mar 22, 2023
@francescovenica
Copy link

francescovenica commented Apr 4, 2023

would be possible to check if this issue:
#36777

is cause by this pr? I think this doesn't work if the parent is not a grid, I Was able to fix the issue above adding the columns prop, not sure if we should default the column prop to the theme column number

@pongells
Copy link

@francescovenica most likely. I just noticed the same issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: Grid The React component. package: system Specific to @mui/system
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Nested grids break custom column layout
5 participants