[DataGrid] Add missing keys to the classes prop
#2458
Conversation
m4theushw
force-pushed
the
classes-prop
branch
from
aeaf55c to
be73696
Compare
m4theushw
added
component: data grid
packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderFilterIcon.tsx
Outdated
Show resolved
Hide resolved
packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderMenuIcon.tsx
Outdated
Show resolved
Hide resolved
packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaders.tsx
Outdated
Show resolved
Hide resolved
packages/grid/_modules_/grid/components/containers/GridRoot.tsx
Outdated
Show resolved
Hide resolved
packages/grid/_modules_/grid/components/containers/GridWindow.tsx
Outdated
Show resolved
Hide resolved
packages/grid/_modules_/grid/components/containers/GridRootStyles.ts
Outdated
Show resolved
Hide resolved
|
Seems good to me |
| 'checkboxInput', | ||
| 'overlay', | ||
| 'renderingZone', | ||
| 'root', |
There was a problem hiding this comment.
I wonder if we should keep the classes in a DOM order rather than an alphabetical one. For instance, root is the first one people will see in the DOM. In the core, we use the DOM order, but I would understand that it might not work well when they are many classes.
There was a problem hiding this comment.
DOM order would make more sense. I'll reorder them in #2465. For now, the alphabetical order is fine.
| @@ -105,7 +105,7 @@ const globalPseudoClassesMapping: Record<string, string> = { | |||
|
|
|||
| export function generateUtilityClass(componentName: string, slot: string): string { | |||
| const globalPseudoClass = globalPseudoClassesMapping[slot]; | |||
| return globalPseudoClass || `${componentName}-${slot}`; | |||
| return globalPseudoClass || `${componentName}-${slot}`.replace('__', '--'); | |||
There was a problem hiding this comment.
I got a bit confused about the usage of __ for the JS classes API, and -- for the CSS class name API. Is the long-term plan to unify around __? I recall seeing an issue but I can't find it back. Maybe to open a new one.
There was a problem hiding this comment.
I reverted this part because I didn't receive many positive feedbacks about it in #420 (comment). We could re-evaluate if the BEM syntax is something we want to use in the future. I was trying to avoid having to use this syntax: https://github.com/mui-org/material-ui-x/pull/2458/files#diff-daa7ce589b380e02bf73ba2d9b08377cc7571039f62c5e057e027f3f0393779aR86
Breaking changes
.Mui-resizingCSS class to.MuiDataGrid-columnSeparator.Preview: https://deploy-preview-2458--material-ui-x.netlify.app/api/data-grid/data-grid/#css
Closes #420
The docs generator uses the
classesprop to extract information for the CSS section. Since we were supporting only a few keys, we would not be able to document all the classes available. This PR adds these missing keys. In components where multiple classes are applied depending on conditions, I implemented theuseUtilityClassespattern used in the core, but in most cases I went withclsx.Part of this PR will conflict with #2433, specially where we replace "__" with "--". #2433 introduced a single hook to allow to pre-process the prop values, but here I duplicated the code between DataGrid and DataGridPro.
I renamed
.MuiDataGrid-columnSeparator--draggingto.MuiDataGrid-columnHeader--draggingbecause in #2320 I used the wrong name: https://github.com/mui-org/material-ui-x/pull/2320/files#diff-0fae50bd4900beba39da8e79eedc2a3655445f14682f842c89b65b49e1a622dfL67