[DataGrid] Rename `components` and `componentsProps` props #7059

DanailH · 2022-12-01T14:29:03Z

Breaking change

-<DataGrid components={} componentsProps={}>
+<DataGrid slots={} slotsProps={}>

PS: @flaviendelangle it probably makes sense to do the same change for the pickers

flaviendelangle · 2022-12-01T14:32:26Z

@DanailH With @joserodolfofreitas , we discussed keeping both names during v6.
Our goal was to discuss it during the monthly meeting to see how the core was approaching the topic, to avoid having big inconsistencies across all the packages.
I don't know what we will end up doing, but we should definitely discuss it and decide before merging this PR.

@alexfauquette will do the implementation on the picker side.

mui-bot · 2022-12-01T14:34:03Z

	Messages
📖	Netlify deploy preview: https://deploy-preview-7059--material-ui-x.netlify.app/

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	604.5	820.7	687.6	709.9	94.113
Sort 100k rows	ms	595.7	996.1	811.8	811.12	132.884
Select 100k rows	ms	198.6	292	210.3	235.6	40.909
Deselect 100k rows	ms	137.1	203	176.5	174.46	24.894

Generated by 🚫 dangerJS against d3f37d5

cherniavskii · 2022-12-01T16:46:19Z

We have briefly discussed it last week and it sounded like we were leaning toward the same approach as Material UI (option 2 in #6986).
But there was no decision on that yet.
cc @joserodolfofreitas

joserodolfofreitas · 2022-12-01T17:34:29Z

Perhaps it's a better idea to try closing this topic earlier at the General meeting tomorrow, we'll have more time to discuss the trade-offs.

From DX side, I think it's positive to keep both APIs (during v6) and provide consistency for users using Material UI. It's also generally a more friendly approach, which is particularly important when updating one of the core concepts for customization. The negative aspect I see is the possibility of users relying too much on copying and pasting and ending up with both the slots and components set, which in this case, they should be warned that only slots property will be considered (however, that's also a realistic scenario if we make the breaking change now).

From the development side, as I understand, we'd have to maintain (during v6) a few duplicated APIs and types. I guess most of the deprecation warnings and error treatment would be the same, probably with some additional logic conditional statements.

github-actions · 2022-12-02T10:44:33Z

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

m4theushw · 2022-12-12T17:08:43Z

packages/grid/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx

@@ -13,7 +13,7 @@ import {
 import { useBasicDemoData } from '@mui/x-data-grid-generator';
 import { getCell, getRow } from 'test/utils/helperFn';

-describe('<DataGridPro/> - Components', () => {
+describe('<DataGridPro/> - slots', () => {


Suggested change

describe('<DataGridPro/> - slots', () => {

describe('<DataGridPro/> - Slots', () => {

m4theushw · 2022-12-12T17:18:30Z

packages/grid/x-data-grid/src/tests/components.DataGrid.test.tsx

@@ -11,7 +11,7 @@ import { spy } from 'sinon';
 import { DataGrid, GridOverlay } from '@mui/x-data-grid';
 import { getCell, getRow } from 'test/utils/helperFn';

-describe('<DataGrid /> - Components', () => {
+describe('<DataGrid /> - slots', () => {


Suggested change

describe('<DataGrid /> - slots', () => {

describe('<DataGrid /> - Slots', () => {

m4theushw · 2022-12-12T17:21:46Z

packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts

-  const components = React.useMemo<GridSlotsComponent>(() => {
-    const overrides = themedProps.components;
+  const slots = React.useMemo<GridSlotsComponent>(() => {
+    const overrides = themedProps.slots;


We'll need to continue extending from components while MUI Core has not renamed the prop on their side.

Suggested change

const overrides = themedProps.slots;

const overrides = themedProps.components;

m4theushw · 2022-12-12T17:26:03Z

packages/grid/x-data-grid/src/models/props/DataGridProps.ts

@@ -86,7 +86,7 @@ export type DataGridForcedPropsKey =
 * The `DataGrid` options with a default value that must be merged with the value given through props.
 */
 export interface DataGridPropsWithComplexDefaultValueAfterProcessing {
-  components: GridSlotsComponent;
+  slots: GridSlotsComponent;


We need to decide which approach to follow:

Keep only slots

Only support slots and show a warning if components is used

Recommend slots but continue supporting components with a warning

cc @mui/x

I'd say go for no. 3 for v6. It'll ease down some of the migration pain. Probably remove completely in v7?

supporting components with a warning

Maybe mark those props as @deprecated instead of a warning in the console?

https://www.notion.so/mui-org/X-General-Meeting-2022-12-02-ef4eac5767114e40abed748bf592e69e

We went for the @deprecated indeed

MBilalShafi · 2023-02-06T12:01:06Z

Should we additionally follow these conventions too? (From mui/material-ui#34693)

componentsProps -> slotsProps
change of casing in slots' fields from Pascal-case to camelCase (Root -> root)

I think pickers followed it (at least the slotProps part)

MBilalShafi · 2023-02-18T03:57:03Z

Has been handled in #7882

Rename components and componentsProps props

db307e9

DanailH requested review from flaviendelangle, MBilalShafi, cherniavskii and m4theushw December 1, 2022 14:29

DanailH changed the title ~~Rename components and componentsProps props~~ [DataGrid] Rename components and componentsProps props Dec 1, 2022

DanailH self-assigned this Dec 1, 2022

DanailH added breaking change component: data grid This is the name of the generic UI component, not the React module! labels Dec 1, 2022

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

m4theushw reviewed Dec 12, 2022

View reviewed changes

update migration

d3f37d5

DanailH removed the breaking change label Jan 13, 2023

MBilalShafi mentioned this pull request Jan 13, 2023

[DataGrid] Add codemods for v6 breaking changes #7086

Closed

16 tasks

MBilalShafi mentioned this pull request Feb 10, 2023

[DataGrid] Introduce slots and deprecate components #7882

Merged

MBilalShafi closed this Feb 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Rename `components` and `componentsProps` props #7059

[DataGrid] Rename `components` and `componentsProps` props #7059

DanailH commented Dec 1, 2022

flaviendelangle commented Dec 1, 2022

mui-bot commented Dec 1, 2022 •

edited

Loading

cherniavskii commented Dec 1, 2022

joserodolfofreitas commented Dec 1, 2022 •

edited

Loading

github-actions bot commented Dec 2, 2022

m4theushw Dec 12, 2022

m4theushw Dec 12, 2022

m4theushw Dec 12, 2022

m4theushw Dec 12, 2022

MBilalShafi Dec 13, 2022

cherniavskii Dec 28, 2022

flaviendelangle Dec 29, 2022

MBilalShafi commented Feb 6, 2023

MBilalShafi commented Feb 18, 2023

	describe('<DataGridPro/> - slots', () => {
	describe('<DataGridPro/> - Slots', () => {

	describe('<DataGrid /> - slots', () => {
	describe('<DataGrid /> - Slots', () => {

	const overrides = themedProps.slots;
	const overrides = themedProps.components;

[DataGrid] Rename components and componentsProps props #7059

[DataGrid] Rename components and componentsProps props #7059

Conversation

DanailH commented Dec 1, 2022

Breaking change

flaviendelangle commented Dec 1, 2022

mui-bot commented Dec 1, 2022 • edited Loading

cherniavskii commented Dec 1, 2022

joserodolfofreitas commented Dec 1, 2022 • edited Loading

github-actions bot commented Dec 2, 2022

m4theushw Dec 12, 2022

Choose a reason for hiding this comment

m4theushw Dec 12, 2022

Choose a reason for hiding this comment

m4theushw Dec 12, 2022

Choose a reason for hiding this comment

m4theushw Dec 12, 2022

Choose a reason for hiding this comment

MBilalShafi Dec 13, 2022

Choose a reason for hiding this comment

cherniavskii Dec 28, 2022

Choose a reason for hiding this comment

flaviendelangle Dec 29, 2022

Choose a reason for hiding this comment

MBilalShafi commented Feb 6, 2023

MBilalShafi commented Feb 18, 2023

[DataGrid] Rename `components` and `componentsProps` props #7059

[DataGrid] Rename `components` and `componentsProps` props #7059

mui-bot commented Dec 1, 2022 •

edited

Loading

joserodolfofreitas commented Dec 1, 2022 •

edited

Loading