[DataGrid] Add a subset of used `@mui/material` components to `GridSlotsComponent` #3490

DanailH · 2021-12-21T14:05:25Z

Part of #3066

I've made a subsite of all @mui/material components we use in the grid be available as a slot component. I've checked all the @mui/material we use and these once seemed to make the most sense for a first iteration. I'm adding the rest below. We can discuss and see if any of the others also need to be added in this first iteration (or if I need to revert any of the ones I added).

List of remaining @mui/material components currently used in the grid:

CircularProgress
TablePagination
MenuList
MenuItem
Paper
Grow
Popper
IconButton
ListItemIcon
InputBase
InputLabel
FormControlLabel
Box
Badge
Tooltip
NoSsr
ClickAwayListener
Grow
MuiDivider

…e/DataGrid-3066-add-base-components

github-actions · 2021-12-21T15:15:11Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

flaviendelangle · 2021-12-22T12:31:12Z

Could we add a Form input section here ?
To show how to use it to switch to another variant for instance.

DanailH · 2021-12-22T13:24:42Z

Could we add a Form input section here ? To show how to use it to switch to another variant for instance.

Sure, but I didn't add all the form elements we use from the core. I skipped InputBase, InputLabel, FormControlLabel. If we are adding a Form input section in the docs maybe its better to also add slots for those components before that?

flaviendelangle · 2021-12-22T13:28:01Z

Yes, if you prefer we can first release this feature in a discrete way and then document it fully when ready.

m4theushw

Should Popper also be added? Adding it seems to solve part of the problem raised in #3381.

It is possible to override Portal props for Column Header tooltips by customizing the theme's default props for Tooltip, but since there is no ability to customize default props for Popper/Portal to propogate the shadow dom container, all of the styled(Popper) components will appear outside and have no styling applied.

packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx

…e/DataGrid-3066-add-base-components

DanailH · 2021-12-23T14:40:08Z

Should Popper also be added? Adding it seems to solve part of the problem raised in #3381.

It is possible to override Portal props for Column Header tooltips by customizing the theme's default props for Tooltip, but since there is no ability to customize default props for Popper/Portal to propogate the shadow dom container, all of the styled(Popper) components will appear outside and have no styling applied.

I added componentsProps for Popper since we never use it directly. We use it as a base for GridMenu. In addition, I added the Tooltip to slot components.

m4theushw

It's missing to spread rootProps.componentsProps?.basePopper in the GridPanel.

https://github.com/mui-org/material-ui-x/blob/7bac90d6dbaef58457fda74efa224d7d97dd8f4e/packages/grid/_modules_/grid/components/panel/GridPanel.tsx#L30

packages/grid/_modules_/grid/models/gridSlotsComponent.ts

packages/grid/_modules_/grid/components/menu/GridMenu.tsx

…e/DataGrid-3066-add-base-components

github-actions · 2022-01-05T10:03:41Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

packages/grid/_modules_/grid/components/panel/GridPanel.tsx

m4theushw · 2022-01-06T12:17:35Z

packages/grid/_modules_/grid/components/panel/GridPanel.tsx

@@ -76,7 +78,6 @@ const GridPanel = React.forwardRef<HTMLDivElement, GridPanelProps>((props, ref)
      ref={ref}
      placement="bottom-start"
      className={clsx(className, classes.panel)}


The as prop is missing as well as rootProps.componentsProps.panel.

I can't add them in the GridPanel directly because the useGridRootProps can be used in components outside of DataGrid. That's why I had to pass it down from the parent. The same applies to the other comment #3490 (comment)

Error: Uncaught Error: MUI: useGridRootProps should only be used inside the DataGrid/DataGridPro component.

We had a discussion about that in #2522.

Currently the GridPanel already depends on another context: GridApiContext. We could also use useGridRootProps but that would be a breaking change. So I'm OK to not do that for now.

Ok so if we are postponing this and if this is the only thing left can we proceed with merging this PR?

m4theushw · 2022-01-06T12:19:17Z

packages/grid/_modules_/grid/components/panel/GridPreferencesPanel.tsx

+      as={rootProps.components.BasePopper}
      open={columns.length > 0 && preferencePanelState.open}
      {...rootProps.componentsProps?.panel}


If the as prop is applied inside GridPanel, then it doesn't need to be applied here again.

DanailH added 2 commits December 21, 2021 14:58

make a subset of all core components interchangable

dbe348f

Merge branch 'master' of github.com:mui-org/material-ui-x into featur…

772f620

…e/DataGrid-3066-add-base-components

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 Dec 21, 2021

DanailH requested review from flaviendelangle, m4theushw and alexfauquette December 21, 2021 14:05

DanailH self-assigned this Dec 21, 2021

DanailH changed the title ~~[DataGrid] Add a subset of @mui/material components to GridSlotsComponent~~ [DataGrid] Add a subset of used @mui/material components to GridSlotsComponent Dec 21, 2021

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 21, 2021

resolve conflicts

4943b1d

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 22, 2021

m4theushw reviewed Dec 22, 2021

View reviewed changes

packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx Show resolved Hide resolved

DanailH added 3 commits December 23, 2021 14:39

Merge branch 'master' of github.com:mui-org/material-ui-x into featur…

be69639

…e/DataGrid-3066-add-base-components

add base props

089cc36

add popper props and tooltip slot

86a5d8d

DanailH requested a review from m4theushw December 23, 2021 14:40

Fix testss

c5e3025

m4theushw reviewed Dec 30, 2021

View reviewed changes

packages/grid/_modules_/grid/models/gridSlotsComponent.ts Show resolved Hide resolved

packages/grid/_modules_/grid/components/menu/GridMenu.tsx Show resolved Hide resolved

add missing props

751c751

hafley66 mentioned this pull request Jan 4, 2022

[DataGrid][ShadowDOM] Add GridMenu to GridSlotsComponent to override Popper.container -> Portal.container #3381

Closed

2 tasks

DanailH added 3 commits January 4, 2022 16:46

add slot for popper

cd768d6

Fix test

15e36ee

Merge branch 'master' of github.com:mui-org/material-ui-x into featur…

b771029

…e/DataGrid-3066-add-base-components

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 5, 2022

resolve conflicts

b02fb35

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 5, 2022

DanailH added 2 commits January 5, 2022 13:26

fix proptypes

e0f9943

docs update

7eca673

DanailH requested a review from m4theushw January 5, 2022 12:51

m4theushw reviewed Jan 5, 2022

View reviewed changes

packages/grid/_modules_/grid/components/panel/GridPanel.tsx Outdated Show resolved Hide resolved

packages/grid/_modules_/grid/components/panel/GridPanel.tsx Outdated Show resolved Hide resolved

make popper default option

ac64ebd

DanailH requested a review from m4theushw January 6, 2022 10:55

m4theushw reviewed Jan 6, 2022

View reviewed changes

m4theushw approved these changes Jan 7, 2022

View reviewed changes

DanailH merged commit dd4b11f into mui:master Jan 10, 2022

alexfauquette mentioned this pull request Mar 10, 2022

[DataGrid] Input fields do not honor defined theme variant #2944

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Add a subset of used `@mui/material` components to `GridSlotsComponent` #3490

[DataGrid] Add a subset of used `@mui/material` components to `GridSlotsComponent` #3490

DanailH commented Dec 21, 2021 •

edited

github-actions bot commented Dec 21, 2021

flaviendelangle commented Dec 22, 2021 •

edited

DanailH commented Dec 22, 2021

flaviendelangle commented Dec 22, 2021

m4theushw left a comment

DanailH commented Dec 23, 2021

m4theushw left a comment

github-actions bot commented Jan 5, 2022

m4theushw Jan 6, 2022

DanailH Jan 6, 2022

m4theushw Jan 7, 2022

DanailH Jan 7, 2022

m4theushw Jan 6, 2022

[DataGrid] Add a subset of used @mui/material components to GridSlotsComponent #3490

[DataGrid] Add a subset of used @mui/material components to GridSlotsComponent #3490

Conversation

DanailH commented Dec 21, 2021 • edited

github-actions bot commented Dec 21, 2021

flaviendelangle commented Dec 22, 2021 • edited

DanailH commented Dec 22, 2021

flaviendelangle commented Dec 22, 2021

m4theushw left a comment

Choose a reason for hiding this comment

DanailH commented Dec 23, 2021

m4theushw left a comment

Choose a reason for hiding this comment

github-actions bot commented Jan 5, 2022

m4theushw Jan 6, 2022

Choose a reason for hiding this comment

DanailH Jan 6, 2022

Choose a reason for hiding this comment

m4theushw Jan 7, 2022

Choose a reason for hiding this comment

DanailH Jan 7, 2022

Choose a reason for hiding this comment

m4theushw Jan 6, 2022

Choose a reason for hiding this comment

[DataGrid] Add a subset of used `@mui/material` components to `GridSlotsComponent` #3490

[DataGrid] Add a subset of used `@mui/material` components to `GridSlotsComponent` #3490

DanailH commented Dec 21, 2021 •

edited

flaviendelangle commented Dec 22, 2021 •

edited