Skip to content

Commit 065d581

Browse files
oliviertassinarioliviertassinari
committed
Revert "[docs] Fix look & feel of the Masonry demos (mui#30971)"
This reverts commit e47f22b.
1 parent e47f22b commit 065d581

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+133
-231
lines changed

‎docs/data/material/components/grid/AutoGrid.js

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Paper from '@mui/material/Paper';
55
import Grid from '@mui/material/Grid';
66

77
const Item = styled(Paper)(({ theme }) => ({
8-
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
98
...theme.typography.body2,
109
padding: theme.spacing(1),
1110
textAlign: 'center',

‎docs/data/material/components/grid/AutoGrid.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Paper from '@mui/material/Paper';
55
import Grid from '@mui/material/Grid';
66

77
const Item = styled(Paper)(({ theme }) => ({
8-
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
98
...theme.typography.body2,
109
padding: theme.spacing(1),
1110
textAlign: 'center',

‎docs/data/material/components/grid/AutoGridNoWrap.js

+6-33
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,17 @@
11
import * as React from 'react';
2-
import { styled } from '@mui/material/styles';
32
import Box from '@mui/material/Box';
43
import Paper from '@mui/material/Paper';
54
import Grid from '@mui/material/Grid';
65
import Avatar from '@mui/material/Avatar';
76
import Typography from '@mui/material/Typography';
87

9-
const StyledPaper = styled(Paper)(({ theme }) => ({
10-
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
11-
...theme.typography.body2,
12-
padding: theme.spacing(2),
13-
maxWidth: 400,
14-
color: theme.palette.text.primary,
15-
}));
16-
178
const message = `Truncation should be conditionally applicable on this long line of text
189
as this is a much longer line than what the container can support. `;
1910

2011
export default function AutoGridNoWrap() {
2112
return (
2213
<Box sx={{ flexGrow: 1, overflow: 'hidden', px: 3 }}>
23-
<StyledPaper
24-
sx={{
25-
my: 1,
26-
mx: 'auto',
27-
p: 2,
28-
}}
29-
>
14+
<Paper sx={{ maxWidth: 400, my: 1, mx: 'auto', p: 2 }}>
3015
<Grid container wrap="nowrap" spacing={2}>
3116
<Grid item>
3217
<Avatar>W</Avatar>
@@ -35,14 +20,8 @@ export default function AutoGridNoWrap() {
3520
<Typography noWrap>{message}</Typography>
3621
</Grid>
3722
</Grid>
38-
</StyledPaper>
39-
<StyledPaper
40-
sx={{
41-
my: 1,
42-
mx: 'auto',
43-
p: 2,
44-
}}
45-
>
23+
</Paper>
24+
<Paper sx={{ maxWidth: 400, my: 1, mx: 'auto', p: 2 }}>
4625
<Grid container wrap="nowrap" spacing={2}>
4726
<Grid item>
4827
<Avatar>W</Avatar>
@@ -51,14 +30,8 @@ export default function AutoGridNoWrap() {
5130
<Typography noWrap>{message}</Typography>
5231
</Grid>
5332
</Grid>
54-
</StyledPaper>
55-
<StyledPaper
56-
sx={{
57-
my: 1,
58-
mx: 'auto',
59-
p: 2,
60-
}}
61-
>
33+
</Paper>
34+
<Paper sx={{ maxWidth: 400, my: 1, mx: 'auto', p: 2 }}>
6235
<Grid container wrap="nowrap" spacing={2}>
6336
<Grid item>
6437
<Avatar>W</Avatar>
@@ -67,7 +40,7 @@ export default function AutoGridNoWrap() {
6740
<Typography>{message}</Typography>
6841
</Grid>
6942
</Grid>
70-
</StyledPaper>
43+
</Paper>
7144
</Box>
7245
);
7346
}

‎docs/data/material/components/grid/AutoGridNoWrap.tsx

+6-33
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,17 @@
11
import * as React from 'react';
2-
import { styled } from '@mui/material/styles';
32
import Box from '@mui/material/Box';
43
import Paper from '@mui/material/Paper';
54
import Grid from '@mui/material/Grid';
65
import Avatar from '@mui/material/Avatar';
76
import Typography from '@mui/material/Typography';
87

9-
const StyledPaper = styled(Paper)(({ theme }) => ({
10-
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
11-
...theme.typography.body2,
12-
padding: theme.spacing(2),
13-
maxWidth: 400,
14-
color: theme.palette.text.primary,
15-
}));
16-
178
const message = `Truncation should be conditionally applicable on this long line of text
189
as this is a much longer line than what the container can support. `;
1910

2011
export default function AutoGridNoWrap() {
2112
return (
2213
<Box sx={{ flexGrow: 1, overflow: 'hidden', px: 3 }}>
23-
<StyledPaper
24-
sx={{
25-
my: 1,
26-
mx: 'auto',
27-
p: 2,
28-
}}
29-
>
14+
<Paper sx={{ maxWidth: 400, my: 1, mx: 'auto', p: 2 }}>
3015
<Grid container wrap="nowrap" spacing={2}>
3116
<Grid item>
3217
<Avatar>W</Avatar>
@@ -35,14 +20,8 @@ export default function AutoGridNoWrap() {
3520
<Typography noWrap>{message}</Typography>
3621
</Grid>
3722
</Grid>
38-
</StyledPaper>
39-
<StyledPaper
40-
sx={{
41-
my: 1,
42-
mx: 'auto',
43-
p: 2,
44-
}}
45-
>
23+
</Paper>
24+
<Paper sx={{ maxWidth: 400, my: 1, mx: 'auto', p: 2 }}>
4625
<Grid container wrap="nowrap" spacing={2}>
4726
<Grid item>
4827
<Avatar>W</Avatar>
@@ -51,14 +30,8 @@ export default function AutoGridNoWrap() {
5130
<Typography noWrap>{message}</Typography>
5231
</Grid>
5332
</Grid>
54-
</StyledPaper>
55-
<StyledPaper
56-
sx={{
57-
my: 1,
58-
mx: 'auto',
59-
p: 2,
60-
}}
61-
>
33+
</Paper>
34+
<Paper sx={{ maxWidth: 400, my: 1, mx: 'auto', p: 2 }}>
6235
<Grid container wrap="nowrap" spacing={2}>
6336
<Grid item>
6437
<Avatar>W</Avatar>
@@ -67,7 +40,7 @@ export default function AutoGridNoWrap() {
6740
<Typography>{message}</Typography>
6841
</Grid>
6942
</Grid>
70-
</StyledPaper>
43+
</Paper>
7144
</Box>
7245
);
7346
}

‎docs/data/material/components/grid/BasicGrid.js

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Paper from '@mui/material/Paper';
55
import Grid from '@mui/material/Grid';
66

77
const Item = styled(Paper)(({ theme }) => ({
8-
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
98
...theme.typography.body2,
109
padding: theme.spacing(1),
1110
textAlign: 'center',

‎docs/data/material/components/grid/BasicGrid.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Paper from '@mui/material/Paper';
55
import Grid from '@mui/material/Grid';
66

77
const Item = styled(Paper)(({ theme }) => ({
8-
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
98
...theme.typography.body2,
109
padding: theme.spacing(1),
1110
textAlign: 'center',

‎docs/data/material/components/grid/CSSGrid.js

-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import Box from '@mui/material/Box';
44
import Paper from '@mui/material/Paper';
55

66
const Item = styled(Paper)(({ theme }) => ({
7-
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
87
...theme.typography.body2,
98
padding: theme.spacing(1),
109
textAlign: 'center',

‎docs/data/material/components/grid/CSSGrid.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import Box from '@mui/material/Box';
44
import Paper from '@mui/material/Paper';
55

66
const Item = styled(Paper)(({ theme }) => ({
7-
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
87
...theme.typography.body2,
98
padding: theme.spacing(1),
109
textAlign: 'center',

‎docs/data/material/components/grid/ColumnsGrid.js

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Paper from '@mui/material/Paper';
55
import Grid from '@mui/material/Grid';
66

77
const Item = styled(Paper)(({ theme }) => ({
8-
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
98
...theme.typography.body2,
109
padding: theme.spacing(1),
1110
textAlign: 'center',

‎docs/data/material/components/grid/ColumnsGrid.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Paper from '@mui/material/Paper';
55
import Grid from '@mui/material/Grid';
66

77
const Item = styled(Paper)(({ theme }) => ({
8-
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
98
...theme.typography.body2,
109
padding: theme.spacing(1),
1110
textAlign: 'center',

‎docs/data/material/components/grid/ComplexGrid.js

+1-10
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,7 @@ const Img = styled('img')({
1414

1515
export default function ComplexGrid() {
1616
return (
17-
<Paper
18-
sx={{
19-
p: 2,
20-
margin: 'auto',
21-
maxWidth: 500,
22-
flexGrow: 1,
23-
backgroundColor: (theme) =>
24-
theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
25-
}}
26-
>
17+
<Paper sx={{ p: 2, margin: 'auto', maxWidth: 500, flexGrow: 1 }}>
2718
<Grid container spacing={2}>
2819
<Grid item>
2920
<ButtonBase sx={{ width: 128, height: 128 }}>

‎docs/data/material/components/grid/ComplexGrid.tsx

+1-10
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,7 @@ const Img = styled('img')({
1414

1515
export default function ComplexGrid() {
1616
return (
17-
<Paper
18-
sx={{
19-
p: 2,
20-
margin: 'auto',
21-
maxWidth: 500,
22-
flexGrow: 1,
23-
backgroundColor: (theme) =>
24-
theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
25-
}}
26-
>
17+
<Paper sx={{ p: 2, margin: 'auto', maxWidth: 500, flexGrow: 1 }}>
2718
<Grid container spacing={2}>
2819
<Grid item>
2920
<ButtonBase sx={{ width: 128, height: 128 }}>

‎docs/data/material/components/grid/FullWidthGrid.js

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Paper from '@mui/material/Paper';
55
import Grid from '@mui/material/Grid';
66

77
const Item = styled(Paper)(({ theme }) => ({
8-
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
98
...theme.typography.body2,
109
padding: theme.spacing(1),
1110
textAlign: 'center',

‎docs/data/material/components/grid/FullWidthGrid.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Paper from '@mui/material/Paper';
55
import Grid from '@mui/material/Grid';
66

77
const Item = styled(Paper)(({ theme }) => ({
8-
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
98
...theme.typography.body2,
109
padding: theme.spacing(1),
1110
textAlign: 'center',

‎docs/data/material/components/grid/InteractiveGrid.js

-2
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,6 @@ export default function InteractiveGrid() {
3838
<Paper
3939
sx={{
4040
p: 2,
41-
backgroundColor: (theme) =>
42-
theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
4341
height: '100%',
4442
color: 'text.secondary',
4543
pt: `${(value + 1) * 10}px`,

‎docs/data/material/components/grid/InteractiveGrid.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,6 @@ export default function InteractiveGrid() {
5454
<Paper
5555
sx={{
5656
p: 2,
57-
backgroundColor: (theme) =>
58-
theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
5957
height: '100%',
6058
color: 'text.secondary',
6159
pt: `${(value + 1) * 10}px`,

‎docs/data/material/components/grid/NestedGrid.js

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Paper from '@mui/material/Paper';
55
import Grid from '@mui/material/Grid';
66

77
const Item = styled(Paper)(({ theme }) => ({
8-
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
98
...theme.typography.body2,
109
padding: theme.spacing(1),
1110
textAlign: 'center',

‎docs/data/material/components/grid/NestedGrid.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Paper from '@mui/material/Paper';
55
import Grid from '@mui/material/Grid';
66

77
const Item = styled(Paper)(({ theme }) => ({
8-
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
98
...theme.typography.body2,
109
padding: theme.spacing(1),
1110
textAlign: 'center',

‎docs/data/material/components/grid/ResponsiveGrid.js

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Paper from '@mui/material/Paper';
55
import Grid from '@mui/material/Grid';
66

77
const Item = styled(Paper)(({ theme }) => ({
8-
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
98
...theme.typography.body2,
109
padding: theme.spacing(2),
1110
textAlign: 'center',

‎docs/data/material/components/grid/ResponsiveGrid.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Paper from '@mui/material/Paper';
55
import Grid from '@mui/material/Grid';
66

77
const Item = styled(Paper)(({ theme }) => ({
8-
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
98
...theme.typography.body2,
109
padding: theme.spacing(2),
1110
textAlign: 'center',

‎docs/data/material/components/grid/RowAndColumnSpacing.js

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Paper from '@mui/material/Paper';
55
import Box from '@mui/material/Box';
66

77
const Item = styled(Paper)(({ theme }) => ({
8-
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
98
...theme.typography.body2,
109
padding: theme.spacing(1),
1110
textAlign: 'center',

‎docs/data/material/components/grid/RowAndColumnSpacing.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Paper from '@mui/material/Paper';
55
import Box from '@mui/material/Box';
66

77
const Item = styled(Paper)(({ theme }) => ({
8-
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
98
...theme.typography.body2,
109
padding: theme.spacing(1),
1110
textAlign: 'center',

‎docs/data/material/components/grid/SpacingGrid.js

+1-8
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,7 @@ export default function SpacingGrid() {
2525
<Grid container justifyContent="center" spacing={spacing}>
2626
{[0, 1, 2].map((value) => (
2727
<Grid key={value} item>
28-
<Paper
29-
sx={{
30-
height: 140,
31-
width: 100,
32-
backgroundColor: (theme) =>
33-
theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
34-
}}
35-
/>
28+
<Paper sx={{ height: 140, width: 100 }} />
3629
</Grid>
3730
))}
3831
</Grid>

‎docs/data/material/components/grid/SpacingGrid.tsx

+1-8
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,7 @@ export default function SpacingGrid() {
2525
<Grid container justifyContent="center" spacing={spacing}>
2626
{[0, 1, 2].map((value) => (
2727
<Grid key={value} item>
28-
<Paper
29-
sx={{
30-
height: 140,
31-
width: 100,
32-
backgroundColor: (theme) =>
33-
theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
34-
}}
35-
/>
28+
<Paper sx={{ height: 140, width: 100 }} />
3629
</Grid>
3730
))}
3831
</Grid>

‎docs/data/material/components/grid/VariableWidthGrid.js

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Paper from '@mui/material/Paper';
55
import Grid from '@mui/material/Grid';
66

77
const Item = styled(Paper)(({ theme }) => ({
8-
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
98
...theme.typography.body2,
109
padding: theme.spacing(1),
1110
textAlign: 'center',

‎docs/data/material/components/grid/VariableWidthGrid.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Paper from '@mui/material/Paper';
55
import Grid from '@mui/material/Grid';
66

77
const Item = styled(Paper)(({ theme }) => ({
8-
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
98
...theme.typography.body2,
109
padding: theme.spacing(1),
1110
textAlign: 'center',

0 commit comments

Comments
 (0)