Skip to content

Commit b2135e5

Browse files
slax57slax57
authored
Merge pull request #10639 from marmelab/support-mui-v7
Add support for MUI v7
2 parents 983d257 + 8764909 commit b2135e5

File tree

72 files changed

+503
-282
lines changed

Some content is hidden

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

72 files changed

+503
-282
lines changed

‎examples/demo/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"type": "module",
66
"dependencies": {
77
"@apollo/client": "^3.12.4",
8-
"@mui/icons-material": "^6.0.0",
9-
"@mui/material": "^6.0.0",
8+
"@mui/icons-material": "^7.0.0",
9+
"@mui/material": "^7.0.0",
1010
"@types/recharts": "^1.8.10",
1111
"@vitejs/plugin-react": "^2.2.0",
1212
"clsx": "^2.1.1",

‎examples/demo/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ const store = localStorageStore(undefined, 'ECommerce');
4343

4444
const App = () => {
4545
const [themeName] = useStore<ThemeName>('themeName', 'soft');
46+
const singleTheme = themes.find(theme => theme.name === themeName)?.single;
4647
const lightTheme = themes.find(theme => theme.name === themeName)?.light;
4748
const darkTheme = themes.find(theme => theme.name === themeName)?.dark;
4849
return (
@@ -58,6 +59,7 @@ const App = () => {
5859
layout={Layout}
5960
i18nProvider={i18nProvider}
6061
disableTelemetry
62+
theme={singleTheme}
6163
lightTheme={lightTheme}
6264
darkTheme={darkTheme}
6365
defaultTheme="light"

‎examples/demo/src/categories/CategoryList.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,7 @@ const CategoryGrid = () => {
5757
<RecordContextProvider key={record.id} value={record}>
5858
<Grid
5959
key={record.id}
60-
xs={12}
61-
sm={6}
62-
md={4}
63-
lg={3}
64-
xl={2}
65-
item
60+
size={{ xs: 12, sm: 6, md: 4, lg: 3, xl: 2 }}
6661
>
6762
<Card>
6863
<CardMedia

‎examples/demo/src/invoices/InvoiceShow.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,19 @@ const InvoiceShow = () => {
1212
<Card sx={{ width: 600, margin: 'auto' }}>
1313
<CardContent>
1414
<Grid container spacing={2}>
15-
<Grid item xs={6}>
15+
<Grid size={{ xs: 6 }}>
1616
<Typography variant="h6" gutterBottom>
1717
Posters Galore
1818
</Typography>
1919
</Grid>
20-
<Grid item xs={6}>
20+
<Grid size={{ xs: 6 }}>
2121
<Typography variant="h6" gutterBottom align="right">
2222
Invoice {record.id}
2323
</Typography>
2424
</Grid>
2525
</Grid>
2626
<Grid container spacing={2}>
27-
<Grid item xs={12} container alignContent="flex-end">
27+
<Grid size={{ xs: 12 }} alignContent="flex-end">
2828
<ReferenceField
2929
reference="customers"
3030
source="customer_id"
@@ -36,7 +36,7 @@ const InvoiceShow = () => {
3636
</Grid>
3737
<Box height={20}>&nbsp;</Box>
3838
<Grid container spacing={2}>
39-
<Grid item xs={6}>
39+
<Grid size={{ xs: 6 }}>
4040
<Typography variant="h6" gutterBottom align="center">
4141
Date{' '}
4242
</Typography>
@@ -45,7 +45,7 @@ const InvoiceShow = () => {
4545
</Typography>
4646
</Grid>
4747

48-
<Grid item xs={5}>
48+
<Grid size={{ xs: 5 }}>
4949
<Typography variant="h6" gutterBottom align="center">
5050
Order
5151
</Typography>

‎examples/demo/src/layout/Layout.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,15 @@ import AppBar from './AppBar';
44
import Menu from './Menu';
55

66
export default ({ children }: { children: React.ReactNode }) => (
7-
<Layout appBar={AppBar} menu={Menu}>
7+
<Layout
8+
appBar={AppBar}
9+
menu={Menu}
10+
sx={{
11+
backgroundColor: theme =>
12+
// @ts-expect-error TS mixes up the Theme type from all the different versions of MUI in the monorepo
13+
(theme.vars || theme).palette.background.default,
14+
}}
15+
>
816
{children}
917
</Layout>
1018
);

‎examples/demo/src/mui.d.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import type {} from '@mui/material/themeCssVarsAugmentation';
2+
3+
declare module '@mui/material/styles' {
4+
interface PaletteOptions {
5+
bulkActionsToolbarColor?: string;
6+
bulkActionsToolbarBackgroundColor?: string;
7+
}
8+
interface Palette {
9+
bulkActionsToolbarColor: string;
10+
bulkActionsToolbarBackgroundColor: string;
11+
}
12+
}

‎examples/demo/src/orders/OrderEdit.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -81,26 +81,26 @@ const OrderForm = () => {
8181
<Card>
8282
<CardContent>
8383
<Grid container spacing={1}>
84-
<Grid item xs={12} sm={12} md={8}>
84+
<Grid size={{ xs: 12, sm: 12, md: 8 }}>
8585
<Typography variant="h6" gutterBottom>
8686
{translate(
8787
'resources.orders.section.order'
8888
)}
8989
</Typography>
9090
<Grid container>
91-
<Grid item xs={12} sm={12} md={6}>
91+
<Grid size={{ xs: 12, sm: 12, md: 6 }}>
9292
<Labeled source="date">
9393
<DateField source="date" />
9494
</Labeled>
9595
</Grid>
96-
<Grid item xs={12} sm={12} md={6}>
96+
<Grid size={{ xs: 12, sm: 12, md: 6 }}>
9797
<Labeled source="reference">
9898
<TextField source="reference" />
9999
</Labeled>
100100
</Grid>
101101
</Grid>
102102
<Grid container>
103-
<Grid item xs={12} sm={12} md={6}>
103+
<Grid size={{ xs: 12, sm: 12, md: 6 }}>
104104
<SelectInput
105105
source="status"
106106
choices={[
@@ -125,7 +125,7 @@ const OrderForm = () => {
125125
sx={{ width: '80%' }}
126126
/>
127127
</Grid>
128-
<Grid item xs={12} sm={12} md={6}>
128+
<Grid size={{ xs: 12, sm: 12, md: 6 }}>
129129
<Box mt={2}>
130130
<BooleanInput
131131
row={true}
@@ -135,7 +135,7 @@ const OrderForm = () => {
135135
</Grid>
136136
</Grid>
137137
</Grid>
138-
<Grid item xs={12} sm={12} md={4}>
138+
<Grid size={{ xs: 12, sm: 12, md: 4 }}>
139139
<Typography variant="h6" gutterBottom>
140140
{translate(
141141
'resources.orders.section.customer'

‎examples/demo/src/products/ProductEditDetails.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ import { InputAdornment, Grid } from '@mui/material';
1010

1111
export const ProductEditDetails = () => (
1212
<Grid container columnSpacing={2}>
13-
<Grid item xs={12} sm={8}>
13+
<Grid size={{ xs: 12, sm: 8 }}>
1414
<TextInput source="reference" validate={req} />
1515
</Grid>
16-
<Grid item xs={12} sm={4}>
16+
<Grid size={{ xs: 12, sm: 4 }}>
1717
<ReferenceInput source="category_id" reference="categories">
1818
<SelectInput optionText="name" validate={req} />
1919
</ReferenceInput>
2020
</Grid>
21-
<Grid item xs={12} sm={4}>
21+
<Grid size={{ xs: 12, sm: 4 }}>
2222
<NumberInput
2323
source="width"
2424
InputProps={{
@@ -29,7 +29,7 @@ export const ProductEditDetails = () => (
2929
validate={req}
3030
/>
3131
</Grid>
32-
<Grid item xs={12} sm={4}>
32+
<Grid size={{ xs: 12, sm: 4 }}>
3333
<NumberInput
3434
source="height"
3535
InputProps={{
@@ -40,8 +40,8 @@ export const ProductEditDetails = () => (
4040
validate={req}
4141
/>
4242
</Grid>
43-
<Grid item xs={0} sm={4}></Grid>
44-
<Grid item xs={12} sm={4}>
43+
<Grid size={{ xs: 0, sm: 48 }} />
44+
<Grid size={{ xs: 12, sm: 4 }}>
4545
<NumberInput
4646
source="price"
4747
InputProps={{
@@ -52,10 +52,10 @@ export const ProductEditDetails = () => (
5252
validate={req}
5353
/>
5454
</Grid>
55-
<Grid item xs={12} sm={4}>
55+
<Grid size={{ xs: 12, sm: 4 }}>
5656
<NumberInput source="stock" validate={req} />
5757
</Grid>
58-
<Grid item xs={12} sm={4}>
58+
<Grid size={{ xs: 12, sm: 4 }}>
5959
<NumberInput source="sales" validate={req} />
6060
</Grid>
6161
</Grid>

‎examples/demo/src/reviews/ReviewEdit.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,22 +49,22 @@ const ReviewEdit = ({ id, onCancel }: ReviewEditProps) => {
4949
toolbar={<ReviewEditToolbar />}
5050
>
5151
<Grid container rowSpacing={1} mb={1}>
52-
<Grid item xs={6}>
52+
<Grid size={{ xs: 6 }}>
5353
<Labeled source="customer_id">
5454
<CustomerReferenceField source="customer_id" />
5555
</Labeled>
5656
</Grid>
57-
<Grid item xs={6}>
57+
<Grid size={{ xs: 6 }}>
5858
<Labeled label="resources.reviews.fields.product_id">
5959
<ProductReferenceField />
6060
</Labeled>
6161
</Grid>
62-
<Grid item xs={6}>
62+
<Grid size={{ xs: 6 }}>
6363
<Labeled>
6464
<DateField source="date" />
6565
</Labeled>
6666
</Grid>
67-
<Grid item xs={6}>
67+
<Grid size={{ xs: 6 }}>
6868
<Labeled label="resources.reviews.fields.rating">
6969
<StarRatingField />
7070
</Labeled>

‎examples/demo/src/themes/cssVariablesTheme.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { createTheme, lighten } from '@mui/material';
2+
import { RaThemeOptions } from 'react-admin';
3+
4+
const defaultTheme = createTheme();
5+
const lightTheme: RaThemeOptions = {
6+
palette: {
7+
mode: 'light',
8+
bulkActionsToolbarBackgroundColor: lighten(
9+
defaultTheme.palette.primary.light,
10+
0.8
11+
),
12+
},
13+
};
14+
const darkTheme: RaThemeOptions = {
15+
palette: {
16+
mode: 'dark',
17+
bulkActionsToolbarBackgroundColor: defaultTheme.palette.primary.dark,
18+
},
19+
};
20+
21+
export const cssVariablesTheme = createTheme({
22+
cssVariables: true,
23+
defaultColorScheme: 'light',
24+
colorSchemes: {
25+
light: lightTheme,
26+
dark: darkTheme,
27+
},
28+
});

0 commit comments

Comments
 (0)