[DataGrid] Column header design updates#14293
Conversation
|
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 |
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.
oliviertassinari
left a comment
There was a problem hiding this comment.
The general direction looks right 👍
MBilalShafi
left a comment
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.
cherniavskii
left a comment
There was a problem hiding this comment.
Looks good to me!
I prefer not to include this PR in this week's release with the Material UI v6 support. Keeping other changes to a minimum would make the upgrade easier for those who need Material UI v6.
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.