[DataGrid] Column header design updates #14293
Conversation
KenanYusuf
added
component: data grid
|
Deploy preview: https://deploy-preview-14293--material-ui-x.netlify.app/ |
| '&:hover': { | ||
| color: (t.vars || t).palette.text.primary, | ||
| // Reset on touch devices, it doesn't add specificity | ||
| // Always appear as draggable on touch devices |
packages/x-data-grid/src/components/containers/GridRootStyles.ts
Outdated
Show resolved
Hide resolved
packages/x-data-grid/src/components/containers/GridRootStyles.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Side note: Sometimes Argos diff surprises me – it doesn't pick up the separator 😅
Screen.Recording.2024-08-23.at.23.36.55.mov
There was a problem hiding this comment.
Also, this PR warrants a minor release.
dosubot
bot
added
the
size:L
There was a problem hiding this comment.
Nice work!
It also reminded me of a similar issue on the header filters with compact density.
Opened a separate PR for it.
| fontWeight: theme.typography.fontWeightMedium, | ||
| color: (theme.vars || theme).palette.primary.dark, | ||
| textTransform: 'uppercase', | ||
| lineHeight: 'normal', |
There was a problem hiding this comment.
I'm wondering if there is a possibility some users customizing it using theme.*.* variables. What do you think? 🤔
There was a problem hiding this comment.
I'm purposefully deviating from the theme.typography.caption.lineHeight value here because it is too large. normal line-height should keep the spacing looking ok between the column header title and aggregation label I think.
If users want to override it, they have the class I guess?
There was a problem hiding this comment.
Agreed, but I'm only worried if some existing users' styles would break with this.
It's obviously not very likely but theoretically, some users may be using theme.typography.caption.lineHeight to override this style.
It's a nitpick though. Feel free to merge it in current shape.
packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSeparator.tsx
Outdated
Show resolved
Hide resolved
This PR includes a few small design updates to the column headers.
Preview: https://deploy-preview-14293--material-ui-x.netlify.app/x/react-data-grid/#mit-license-free-forever
1. Aggregation label type and layout updates
density="compact"#9104 and [data grid] Improve header behavior with density property #52742. Column separator updates
1pxwidth, the same thickness as borders, growing to3pxon hover3. Fixed overlapping of column menu button and resize handle
24pxto10pxand repositioned the column menu buttons to avoid overlapping of the two actions.sizeprop fromsmalltoinherit.