[DataGrid] Drop v4 support #2515

m4theushw · 2021-08-31T22:03:02Z

Breaking changes

The module augmentation is not enabled by default. This change was done to prevent conflicts with projects using DataGrid and DataGridPro together. In order to still be able to do overrides at the theme level, add the following imports to your project:
```
+import type {} from '@mui/x-data-grid/themeAugmentation';
```
```
+import type {} from '@mui/x-data-grid-pro/themeAugmentation';
```

One of #1902, Preview: https://deploy-preview-2515--material-ui-x.netlify.app/components/data-grid/

The previous module augmentation was using the MuiDataGridPro key for overrides:

https://github.com/mui-org/material-ui-x/blob/afb858cb986c7b86494be7261353fde9fe537b90/packages/grid/x-grid/src/themeAugmentation/props.ts#L4

However, this is not right because even in the Pro version the overrides are retrieved from the MuiDataGrid key, so I updated the definitions to use the same key. As consequence, we can't export these definitions in the index because if a project uses both versions (e.g. @mui/x-data-grid-generator) they will conflict and not compile. That's the reason for the breaking change.

https://github.com/mui-org/material-ui-x/blob/afb858cb986c7b86494be7261353fde9fe537b90/packages/grid/x-grid/src/useDataGridProProps.ts#L11

I didn't update the build config to generate the themeAugmentation folder. I plan to do it in a follow-up.

oliviertassinari

Looks great

packages/grid/data-grid/src/index.ts

oliviertassinari · 2021-09-02T15:37:48Z

test/regressions/index.js

@@ -21,6 +21,7 @@ const blacklist = [
  'docs-components-data-grid-filtering/ColumnTypeFilteringGrid.png', // Needs interaction
  'docs-components-data-grid-filtering/CustomRatingOperator.png', // Needs interaction
  'docs-components-data-grid-filtering/ExtendNumericOperator.png', // Needs interaction
+  'docs-components-data-grid-components/CustomFooter.png', // Needs @material-ui/lab v4


Could you detail the issue here?

I upgraded all @material-ui/xxx dependencies in the root's package.json to v5, so this regression test will now run with @material-ui/lab v5. However, the Rating component in v5 is not in the lab anymore, then it throws a "The Rating component was moved from the lab to the core" error in the console. Since no test can output to the console it fails.

https://github.com/mui-org/material-ui-x/blob/e214b3a43f639980fde82ff9d62eb40612aa335f/test/regressions/index.test.js#L107

OK, so maybe we should do

Suggested change

'docs-components-data-grid-components/CustomFooter.png', // Needs @material-ui/lab v4

// TODO import the Rating from @mui/material, not the lab.

'docs-components-data-grid-components/CustomFooter.png',

oliviertassinari · 2021-09-02T15:38:20Z

packages/grid/x-grid/src/themeAugmentation/props.ts

+  interface ComponentsPropsList extends DataGridProComponentsPropsList {}
+}
+
+declare module '@material-ui/core/styles/components' {


It's a private path:

Suggested change

declare module '@material-ui/core/styles/components' {

declare module '@material-ui/core/styles' {

The Components interface is not exported. We will be able to remove the private path when @mui/material 5.0.0-rc.0 became the minimum version. The RC includes mui/material-ui#28078.

packages/grid/data-grid/src/themeAugmentation/props.ts

flaviendelangle · 2021-09-03T13:01:15Z

v4

v5

It's sad to loose the full label of the header of the column Desk (same on other headers)

Otherwise, the Argos diffs seems logical

flaviendelangle · 2021-09-03T13:56:33Z

#2527

@mui-org/x should we switch to the release candidate of the core directly on this PR to avoid having this problem ?
I suppose users already on v5 will quickly upgrade to the release candidate, and thus we should support the new package names rather than the old ones.

m4theushw · 2021-09-03T14:50:02Z

@flaviendelangle No, this PR is only to remove the v4 dependency. To support the new package name we have to rename all files, so it's better to do in another one.

m4theushw · 2021-09-03T15:55:04Z

It's sad to loose the full label of the header of the column Desk (same on other headers)

@flaviendelangle The IconButton in v5 is 28x28 while it's 24x24 in v4. We can increase the column width in the x-data-grid-generator.

oliviertassinari

Looks good

oliviertassinari · 2021-09-03T23:31:13Z

packages/grid/x-grid-data-generator/src/renderer/renderEditCountry.tsx

@@ -66,7 +66,7 @@ function EditCountry(props: GridRenderEditCellParams) {
      open
      classes={classes}
      disableClearable
-      renderOption={(option) => (
+      renderOption={(liProps, option) => (


liProps needs to be applied on a DOM node, to replace the React fragment.

oliviertassinari · 2021-09-03T23:33:33Z

test/regressions/index.js

@@ -21,6 +21,7 @@ const blacklist = [
  'docs-components-data-grid-filtering/ColumnTypeFilteringGrid.png', // Needs interaction
  'docs-components-data-grid-filtering/CustomRatingOperator.png', // Needs interaction
  'docs-components-data-grid-filtering/ExtendNumericOperator.png', // Needs interaction
+  'docs-components-data-grid-components/CustomFooter.png', // Needs @material-ui/lab v4


OK, so maybe we should do

Suggested change

'docs-components-data-grid-components/CustomFooter.png', // Needs @material-ui/lab v4

// TODO import the Rating from @mui/material, not the lab.

'docs-components-data-grid-components/CustomFooter.png',

suggestion applied

flaviendelangle · 2021-09-08T08:17:22Z

It's sad to loose the full label of the header of the column Desk (same on other headers)

@flaviendelangle The IconButton in v5 is 28x28 while it's 24x24 in v4. We can increase the column width in the x-data-grid-generator.

OK
I think it would be a good idea indeed.

m4theushw force-pushed the drop-v4-support branch from 33a7491 to 2e35be3 Compare August 31, 2021 22:36

[DataGrid] Drop v4 support

a382e90

m4theushw force-pushed the drop-v4-support branch from 2e35be3 to a382e90 Compare August 31, 2021 22:52

Ignore regression test that fails with @material-ui/lab v5

fdc7396

m4theushw added component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request labels Sep 1, 2021

m4theushw mentioned this pull request Sep 2, 2021

[core] Provide theme augmentation as separate module #2520

Merged

m4theushw requested review from oliviertassinari, DanailH and flaviendelangle September 2, 2021 15:29

oliviertassinari reviewed Sep 2, 2021

View reviewed changes

m4theushw mentioned this pull request Sep 3, 2021

[docs] Use same infra from v5 #2441

Merged

oliviertassinari previously requested changes Sep 3, 2021

View reviewed changes

m4theushw added 4 commits September 7, 2021 18:48

Merge branch 'next' into drop-v4-support

c9e4c43

fix types

cb15295

apply props to option

c0d9bfc

leave TODO

8855b2d

m4theushw added 2 commits September 8, 2021 19:04

Merge branch 'next' into drop-v4-support

c4360ad

yarn proptypes

8beec2e

m4theushw merged commit 305affa into mui:next Sep 9, 2021

m4theushw deleted the drop-v4-support branch September 9, 2021 00:21

ZeeshanTamboli mentioned this pull request Sep 10, 2021

[docs] Explain how to use theme augmentation #2582

Merged

m4theushw mentioned this pull request Sep 16, 2021

v5.0.0-beta.0 #2619

Merged

m4theushw added the breaking change label Sep 16, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Drop v4 support #2515

[DataGrid] Drop v4 support #2515

m4theushw commented Aug 31, 2021 •

edited by oliviertassinari

Loading

oliviertassinari left a comment

oliviertassinari Sep 2, 2021

m4theushw Sep 3, 2021 •

edited

Loading

oliviertassinari Sep 3, 2021

oliviertassinari Sep 2, 2021

m4theushw Sep 3, 2021

flaviendelangle commented Sep 3, 2021 •

edited

Loading

flaviendelangle commented Sep 3, 2021

m4theushw commented Sep 3, 2021

m4theushw commented Sep 3, 2021 •

edited

Loading

oliviertassinari left a comment

oliviertassinari Sep 3, 2021

oliviertassinari Sep 3, 2021

flaviendelangle commented Sep 8, 2021

	'docs-components-data-grid-components/CustomFooter.png', // Needs @material-ui/lab v4
	// TODO import the Rating from @mui/material, not the lab.
	'docs-components-data-grid-components/CustomFooter.png',

	declare module '@material-ui/core/styles/components' {
	declare module '@material-ui/core/styles' {

[DataGrid] Drop v4 support #2515

[DataGrid] Drop v4 support #2515

Conversation

m4theushw commented Aug 31, 2021 • edited by oliviertassinari Loading

Breaking changes

oliviertassinari left a comment

Choose a reason for hiding this comment

oliviertassinari Sep 2, 2021

Choose a reason for hiding this comment

m4theushw Sep 3, 2021 • edited Loading

Choose a reason for hiding this comment

oliviertassinari Sep 3, 2021

Choose a reason for hiding this comment

oliviertassinari Sep 2, 2021

Choose a reason for hiding this comment

m4theushw Sep 3, 2021

Choose a reason for hiding this comment

flaviendelangle commented Sep 3, 2021 • edited Loading

flaviendelangle commented Sep 3, 2021

m4theushw commented Sep 3, 2021

m4theushw commented Sep 3, 2021 • edited Loading

oliviertassinari left a comment

Choose a reason for hiding this comment

oliviertassinari Sep 3, 2021

Choose a reason for hiding this comment

oliviertassinari Sep 3, 2021

Choose a reason for hiding this comment

flaviendelangle commented Sep 8, 2021

m4theushw commented Aug 31, 2021 •

edited by oliviertassinari

Loading

m4theushw Sep 3, 2021 •

edited

Loading

flaviendelangle commented Sep 3, 2021 •

edited

Loading

m4theushw commented Sep 3, 2021 •

edited

Loading