[DataGrid] Fix separator styles on touch devices #14471
Conversation
KenanYusuf
added
the
component: data grid
|
Deploy preview: https://deploy-preview-14471--material-ui-x.netlify.app/ |
| opacity: 1, | ||
| color: (t.vars || t).palette.primary.main, |
There was a problem hiding this comment.
This was problematic - the conditions of the separator being the primary color are different on touch devices to desktop. Moved here: https://github.com/mui/mui-x/pull/14471/files#diff-e1db53193a627d36d1cd3f651a954ee1e32ecb93caa020446631d722bb1be75cR415-R422
KenanYusuf
changed the title
| & .${c.columnHeader}:has(+ .${c.columnHeader}:focus), | ||
| & .${c.columnHeader}:has(+ .${c.columnHeader}:focus-within)`]: { | ||
| [`.${c['columnSeparator--resizable']}`]: { | ||
| color: (t.vars || t).palette.primary.main, |
There was a problem hiding this comment.
What is the motivation behind having separators in an "active" state when the column header cell is selected?
There was a problem hiding this comment.
I think the colors clash a little when the column group has a blue outline and the separators are grey. This situation never occurs on desktop because the separators are not visible when the column header is focused until the side is hovered (which also turns the separator blue).
Without:
With:
There was a problem hiding this comment.
Right, this makes sense then 👍🏻
There was a problem hiding this comment.
I would be in favor of removing these lines: https://github.com/mui/mui-x/pull/14471/files#diff-e1db53193a627d36d1cd3f651a954ee1e32ecb93caa020446631d722bb1be75cR447-R449
So that the separator is in an "active" state when you drag it on the touch screen.
What do you think?
There was a problem hiding this comment.
Good shout, updated here: 1b18a02
cherniavskii
added
enhancement
Fixes a couple of issues found on touch devices, introduced here #14293
Snag 1: Double border caused by separator not being hidden when a cell is focused
Snag 2: Last separator always in "active" state