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.

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

[DataGrid] Add support for MUI v5 #855

Merged
merged 11 commits into from
Jan 19, 2021

Conversation

DanailH
Copy link
Member

@DanailH DanailH commented Jan 15, 2021

Closes #441

The current changes provide support for MUI v5 in the DataGrid component. I tested it with both v4 and v5 but what needs to be done for this to be done is to update the docs in the next branch on the core.

I only changed the peerDep in the package.json but kept the v4 version for the root package.json and the one in the storybook and the docs so that master will remain on v4.

I've opened a separate PR in the core for the docs update and add an example that we can use as a test. You can check it here -> mui/material-ui#24428

@DanailH DanailH added component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request labels Jan 15, 2021
@DanailH DanailH self-assigned this Jan 15, 2021
Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

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

I'll open a separate PR in the core for the docs update and add an example that we can use as a test.

Yes, let's open a draft PR in the main repository to add a live demo in v5: https://next.material-ui.com/components/tables/#data-table, as we have in v4: https://material-ui.com/components/tables/#data-table.

packages/x-grid-data-generator/package.json Outdated Show resolved Hide resolved
packages/grid/_modules_/grid/utils/material-ui-utils.ts Outdated Show resolved Hide resolved
Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

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

It looks good. I think that before we merge, we can:

  1. do the draft PR in the main repo with the package built on codesandbox-ci to make sure it works
  2. (optional) if we want to go the extra mile, we could reset hard the next branch on master (in material-ui-x), apply 50a16a1, apply this PR, make sure that all the demos are working. It would help us a bit once we want to swap active development to the next branch (v5).

Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

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

I jumped ahead and did 1. in codesandbox. There is an issue with a deprecated API: https://codesandbox.io/s/peaceful-cache-72s4k?file=/index.js

Capture d’écran 2021-01-15 à 14 14 47

@DanailH
Copy link
Member Author

DanailH commented Jan 15, 2021

@oliviertassinari I opened a PR in core with the update in the docs -> mui/material-ui#24428

Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

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

@DanailH
Copy link
Member Author

DanailH commented Jan 15, 2021

Only thing is that I also wanted to see it here mui/material-ui#24428 but the build fails and idk if is due to the grid package

@DanailH
Copy link
Member Author

DanailH commented Jan 15, 2021

  1. (optional) if we want to go the extra mile, we could reset hard the next branch on master (in material-ui-x), apply 50a16a1, apply this PR, make sure that all the demos are working. It would help us a bit once we want to swap active development to the next branch (v5).

Will do that

@oliviertassinari
Copy link
Member

oliviertassinari commented Jan 18, 2021

I think that we should do something about the input. v5 changes the default to outlined, how about we stick to standard?

Capture d’écran 2021-01-19 à 11 10 14

It's worse with the filters.

Capture d’écran 2021-01-19 à 11 09 44

@DanailH
Copy link
Member Author

DanailH commented Jan 19, 2021

I think that we should do something about the input. v5 changes the default to outlined, how about we stick to standard?

Is this to be changed here or in the core?

@oliviertassinari
Copy link
Member

oliviertassinari commented Jan 19, 2021

Is this to be changed here or in the core?

Why should it be changed in the core? We changed it into the core because Material Design do no longer document the standard variant. In the data grid, I think that we need something light, not using too much space nor catching too much the eye.

@oliviertassinari
Copy link
Member

oliviertassinari commented Jan 19, 2021

Gmail approaches the issue like this:

Capture d’écran 2021-01-19 à 11 06 56

I think that it works with GitHub with an outlined input because the input is smaller:

Capture d’écran 2021-01-19 à 11 08 38

@DanailH
Copy link
Member Author

DanailH commented Jan 19, 2021

Also, Github has lines between the suggested options so there are more block-like with clear boundaries, so a more boxy design suits it.

@DanailH DanailH merged commit 84b0b2b into mui:master Jan 19, 2021
dtassone pushed a commit to dtassone/material-ui-x that referenced this pull request Jan 19, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Update to @material-ui/core v5
3 participants