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.

Sign up for GitHub

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

[System] Fix nested grid v2 #35994

Merged
merged 7 commits into from
Feb 3, 2023
Merged

[System] Fix nested grid v2 #35994

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9dc3749
fix nested grid
siriwatknp Jan 30, 2023
b7acff7
fix tests
siriwatknp Jan 30, 2023
70f9661
context should be created for container only
siriwatknp Jan 30, 2023
ac407f5
Merge branch 'master' of https://github.com/mui/material-ui into grid…
siriwatknp Feb 2, 2023
7f0ab7f
fix implementation
siriwatknp Feb 2, 2023
46464c2
fix test
siriwatknp Feb 2, 2023
5920aaf
run ts formatted
siriwatknp Feb 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 46 additions & 44 deletions docs/data/material/components/grid2/SpacingGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Unstable_Grid2';
import FormLabel from '@mui/material/FormLabel';
import FormControl from '@mui/material/FormControl';
Expand All @@ -20,51 +21,52 @@ export default function SpacingGrid() {
`;

return (
<Grid sx={{ flexGrow: 1 }} container spacing={2}>
Copy link
Member Author

@siriwatknp siriwatknp Feb 2, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

This demo does not need to use a nested grid. Simple box is enough.

<Grid xs={12}>
<Grid container justifyContent="center" spacing={spacing}>
{[0, 1, 2].map((value) => (
<Grid key={value}>
<Paper
sx={{
height: 140,
width: 100,
backgroundColor: (theme) =>
theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
}}
/>
</Grid>
))}
</Grid>
</Grid>
<Grid xs={12}>
<Paper sx={{ p: 2 }}>
<Grid container>
<Grid>
<FormControl component="fieldset">
<FormLabel component="legend">spacing</FormLabel>
<RadioGroup
name="spacing"
aria-label="spacing"
value={spacing.toString()}
onChange={handleChange}
row
>
{[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => (
<FormControlLabel
key={value}
value={value.toString()}
control={<Radio />}
label={value.toString()}
/>
))}
</RadioGroup>
</FormControl>
</Grid>
<Box
sx={{
flexGrow: 1,
display: 'flex',
flexDirection: 'column',
gap: 2,
pt: 2,
'&& pre': { margin: 0 },
}}
>
<Grid container justifyContent="center" spacing={spacing}>
{[0, 1, 2].map((value) => (
<Grid key={value}>
<Paper
sx={{
height: 140,
width: 100,
backgroundColor: (theme) =>
theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
}}
/>
</Grid>
</Paper>
<HighlightedCode code={jsx} language="jsx" />
))}
</Grid>
</Grid>
<Paper sx={{ p: 2 }}>
<FormControl component="fieldset">
<FormLabel component="legend">spacing</FormLabel>
<RadioGroup
name="spacing"
aria-label="spacing"
value={spacing.toString()}
onChange={handleChange}
row
>
{[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => (
<FormControlLabel
key={value}
value={value.toString()}
control={<Radio />}
label={value.toString()}
/>
))}
</RadioGroup>
</FormControl>
</Paper>
<HighlightedCode code={jsx} language="jsx" />
</Box>
);
}
90 changes: 46 additions & 44 deletions docs/data/material/components/grid2/SpacingGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Unstable_Grid2';
import FormLabel from '@mui/material/FormLabel';
import FormControl from '@mui/material/FormControl';
Expand All @@ -20,51 +21,52 @@ export default function SpacingGrid() {
`;

return (
<Grid sx={{ flexGrow: 1 }} container spacing={2}>
<Grid xs={12}>
<Grid container justifyContent="center" spacing={spacing}>
{[0, 1, 2].map((value) => (
<Grid key={value}>
<Paper
sx={{
height: 140,
width: 100,
backgroundColor: (theme) =>
theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
}}
/>
</Grid>
))}
</Grid>
</Grid>
<Grid xs={12}>
<Paper sx={{ p: 2 }}>
<Grid container>
<Grid>
<FormControl component="fieldset">
<FormLabel component="legend">spacing</FormLabel>
<RadioGroup
name="spacing"
aria-label="spacing"
value={spacing.toString()}
onChange={handleChange}
row
>
{[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => (
<FormControlLabel
key={value}
value={value.toString()}
control={<Radio />}
label={value.toString()}
/>
))}
</RadioGroup>
</FormControl>
</Grid>
<Box
sx={{
flexGrow: 1,
display: 'flex',
flexDirection: 'column',
gap: 2,
pt: 2,
'&& pre': { margin: 0 },
}}
>
<Grid container justifyContent="center" spacing={spacing}>
{[0, 1, 2].map((value) => (
<Grid key={value}>
<Paper
sx={{
height: 140,
width: 100,
backgroundColor: (theme) =>
theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
}}
/>
</Grid>
</Paper>
<HighlightedCode code={jsx} language="jsx" />
))}
</Grid>
</Grid>
<Paper sx={{ p: 2 }}>
<FormControl component="fieldset">
<FormLabel component="legend">spacing</FormLabel>
<RadioGroup
name="spacing"
aria-label="spacing"
value={spacing.toString()}
onChange={handleChange}
row
>
{[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => (
<FormControlLabel
key={value}
value={value.toString()}
control={<Radio />}
label={value.toString()}
/>
))}
</RadioGroup>
</FormControl>
</Paper>
<HighlightedCode code={jsx} language="jsx" />
</Box>
);
}
13 changes: 12 additions & 1 deletion packages/mui-system/src/Unstable_Grid/GridProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,18 @@ export interface GridBaseProps extends Breakpoints {
}

export interface GridOwnerState extends GridBaseProps {
nested: boolean;
Copy link
Member Author

Choose a reason for hiding this comment

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

Changed to level sounds better because it is not a boolean anymore, it is a number.

/**
* The level of the grid starts from `0`
* and increases when the grid nests inside another grid regardless of container or item.
*
* ```js
* <Grid> // level 0
* <Grid> // level 1
* <Grid> // level 2
* <Grid> // level 1
* ```
*/
level: number;
gridSize: Partial<Record<Breakpoint, GridSize | boolean>>;
gridOffset: Partial<Record<Breakpoint, GridSize>>;
}
Expand Down
20 changes: 10 additions & 10 deletions packages/mui-system/src/Unstable_Grid/createGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export default function createGrid(
componentName = 'MuiGrid',
} = options;

const NestedContext = React.createContext(false);
const NestedContext = React.createContext<number>(0);
const OverflowContext = React.createContext<boolean | undefined>(undefined);

const useUtilityClasses = (ownerState: GridOwnerState, theme: typeof defaultTheme) => {
Expand Down Expand Up @@ -93,7 +93,7 @@ export default function createGrid(
const theme = useTheme();
const themeProps = useThemeProps<typeof inProps & { component?: React.ElementType }>(inProps);
const props = extendSxProp(themeProps) as Omit<typeof themeProps, 'color'>; // `color` type conflicts with html color attribute.
const nested = React.useContext(NestedContext);
const level = React.useContext(NestedContext);
const overflow = React.useContext(OverflowContext);
const {
className,
Expand All @@ -110,7 +110,7 @@ export default function createGrid(
} = props;
// Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
let disableEqualOverflow = themeDisableEqualOverflow;
if (nested && themeDisableEqualOverflow !== undefined) {
if (level && themeDisableEqualOverflow !== undefined) {
disableEqualOverflow = inProps.disableEqualOverflow;
}
// collect breakpoints related props because they can be customized from the theme.
Expand All @@ -128,15 +128,15 @@ export default function createGrid(
}
});

const columns = inProps.columns ?? (nested ? undefined : columnsProp);
const spacing = inProps.spacing ?? (nested ? undefined : spacingProp);
const columns = inProps.columns ?? (level ? undefined : columnsProp);
const spacing = inProps.spacing ?? (level ? undefined : spacingProp);
const rowSpacing =
inProps.rowSpacing ?? inProps.spacing ?? (nested ? undefined : rowSpacingProp);
inProps.rowSpacing ?? inProps.spacing ?? (level ? undefined : rowSpacingProp);
const columnSpacing =
inProps.columnSpacing ?? inProps.spacing ?? (nested ? undefined : columnSpacingProp);
inProps.columnSpacing ?? inProps.spacing ?? (level ? undefined : columnSpacingProp);
const ownerState = {
...props,
nested,
level,
columns,
container,
direction,
Expand All @@ -162,8 +162,8 @@ export default function createGrid(
/>
);

if (!nested) {
result = <NestedContext.Provider value>{result}</NestedContext.Provider>;
if (container) {
result = <NestedContext.Provider value={level + 1}>{result}</NestedContext.Provider>;
}

if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow ?? false)) {
Expand Down
Loading