Skip to content

Commit ba4cff4

Browse files
garronejgarronej
committed
Update Mui theme for DataGrid
1 parent 75a76b9 commit ba4cff4

File tree

13 files changed

+805
-837
lines changed

13 files changed

+805
-837
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,8 @@
6767
"@emotion/react": "^11.10.4",
6868
"@emotion/styled": "^11.10.4",
6969
"@gouvfr/dsfr": "1.10.2",
70-
"@mui/icons-material": "^5.11.16",
71-
"@mui/material": "^5.13.3",
70+
"@mui/icons-material": "^5.14.18",
71+
"@mui/material": "^5.14.18",
7272
"@storybook/addon-a11y": "^6.5.16",
7373
"@storybook/addon-actions": "^6.5.13",
7474
"@storybook/addon-essentials": "^6.5.13",

‎src/mui.tsx‎

Lines changed: 80 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,10 @@ export function getMuiDsfrThemeOptions(params: {
188188
"displayedRows": {
189189
//Fixes: https://user-images.githubusercontent.com/6702424/206063347-65e7d13c-3dea-410c-a0e0-51cf214deba0.png
190190
"margin": "unset"
191+
},
192+
"selectLabel": {
193+
//Fixes: https://github.com/codegouvfr/react-dsfr/assets/6702424/678a7f69-d4e8-4897-85f0-65c605b46900
194+
"margin": "unset"
191195
}
192196
}
193197
},
@@ -215,25 +219,89 @@ export function getMuiDsfrThemeOptions(params: {
215219
const nonTypedMuiComponents = {
216220
"MuiDataGrid": {
217221
"styleOverrides": {
222+
"root": (() => {
223+
const set = new WeakSet<Function>();
224+
225+
const borderNone = {
226+
"border": "none"
227+
};
228+
229+
return (params: {
230+
ownerState?: {
231+
getRowClassName?: (params: {
232+
indexRelativeToCurrentPage: number;
233+
}) => string;
234+
};
235+
}) => {
236+
const { ownerState } = params;
237+
238+
if (ownerState === undefined) {
239+
return borderNone;
240+
}
241+
242+
if (
243+
ownerState.getRowClassName === undefined ||
244+
!set.has(ownerState.getRowClassName)
245+
) {
246+
const originalGetRowClassName = ownerState.getRowClassName;
247+
248+
ownerState.getRowClassName = params => {
249+
const { indexRelativeToCurrentPage } = params;
250+
251+
const parityClassName =
252+
indexRelativeToCurrentPage % 2 === 0
253+
? "even"
254+
: "odd";
255+
256+
const className = originalGetRowClassName?.(params);
257+
258+
return className === undefined
259+
? parityClassName
260+
: `${parityClassName} ${className}`;
261+
};
262+
263+
set.add(ownerState.getRowClassName);
264+
}
265+
266+
return borderNone;
267+
};
268+
})(),
218269
"columnHeaders": {
219270
"backgroundColor": decisions.background.contrast.grey.default,
271+
"&&": {
220272
"borderColor": decisions.border.plain.grey.default,
221273
"borderPosition": "bottom",
222274
"borderWidth": 2
275+
}
223276
},
224-
"row": {
225-
"&:nth-of-type(2n)": {
226-
"backgroundColor": decisions.background.contrast.grey.default,
227-
"&:hover": {
228-
"backgroundColor": decisions.background.contrast.grey.hover
229-
}
230-
},
231-
"&:nth-of-type(odd)": {
232-
"backgroundColor": decisions.background.alt.grey.default,
233-
"&:hover": {
234-
"backgroundColor": decisions.background.alt.grey.hover
277+
"row": () => {
278+
const hoveredAndSelected = {
279+
"&.Mui-hovered": {
280+
"backgroundColor": fr.colors.decisions.background.contrast.grey.hover
281+
},
282+
"&.Mui-selected": {
283+
"backgroundColor": fr.colors.decisions.background.contrast.grey.active
284+
},
285+
};
286+
287+
return {
288+
"&.even": {
289+
"backgroundColor":
290+
decisions.background.contrast.grey.default,
291+
"&:hover": {
292+
"backgroundColor":
293+
decisions.background.contrast.grey.hover
294+
},
295+
...hoveredAndSelected
296+
},
297+
"&.odd": {
298+
"backgroundColor": decisions.background.alt.grey.default,
299+
"&:hover": {
300+
"backgroundColor": decisions.background.alt.grey.hover
301+
},
302+
...hoveredAndSelected
235303
}
236-
}
304+
};
237305
},
238306
"columnSeparator": {
239307
"display": "none"

‎test/integration/cra/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@
77
"react-dom": "18.2.0",
88
"react-scripts": "5.0.1",
99
"type-route": "^0.7.2",
10-
"@mui/material": "^5.13.3",
10+
"@mui/material": "^5.14.18",
1111
"@emotion/react": "^11.11.0",
1212
"@emotion/styled": "^11.11.0",
13-
"@mui/icons-material": "^5.10.16",
14-
"@mui/x-date-pickers": "^5.0.9",
13+
"@mui/icons-material": "^5.14.18",
14+
"@mui/x-date-pickers": "^6.18.2",
1515
"dayjs": "^1.11.6",
1616
"@codegouvfr/react-dsfr": "file:../../../dist"
1717
},

‎test/integration/cra/src/Mui.tsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -339,29 +339,23 @@ function MaterialUIPickers() {
339339
<Stack spacing={3} sx={{ mt: 7 }}>
340340
<DesktopDatePicker
341341
label="Date desktop"
342-
inputFormat="MM/DD/YYYY"
343342
value={value}
344343
onChange={handleChange}
345-
renderInput={(params) => <TextField {...params} />}
346344
/>
347345
<MobileDatePicker
348346
label="Date mobile"
349-
inputFormat="MM/DD/YYYY"
350347
value={value}
351348
onChange={handleChange}
352-
renderInput={(params) => <TextField {...params} />}
353349
/>
354350
<TimePicker
355351
label="Time"
356352
value={value}
357353
onChange={handleChange}
358-
renderInput={(params) => <TextField {...params} />}
359354
/>
360355
<DateTimePicker
361356
label="Date&Time picker"
362357
value={value}
363358
onChange={handleChange}
364-
renderInput={(params) => <TextField {...params} />}
365359
/>
366360
</Stack>
367361
</LocalizationProvider>

0 commit comments

Comments
 (0)