search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.54k stars 1.32k forks source link

[data grid] Improve pinning shadow design #10001

Open marcpachecog opened 1 year ago

marcpachecog commented 1 year ago

Summary 💡

The existing design for pinned columns introduces an unintended visual element with a default box shadow, which contributes unnecessary visual clutter to the UI. To enhance this aspect, consider implementing a refinement where the shadow is selectively applied only in situations where a horizontal scroll is present. This not only serves to mitigate visual noise but also aids users in intuitively grasping their position within the scroll range – indicating whether they are positioned at the beginning, middle, or end of the scroll.

Captura de Pantalla 2023-08-11 a las 10 14 08

Shopify example:

https://github.com/mui/mui-x/assets/100380515/bef2d24c-e73d-4c1c-ac67-d4bce75517ac

Examples 🌈

No response

Motivation 🔦

No response

Order ID 💳 (optional)

No response

DanailH commented 1 year ago

@marcpachecog thanks for raising this! You make good points regarding this. I'm looping in @gerdadesign our designer for further investigation, but if you are interested you can give it a go and open a PR with the improvement 😉

marcpachecog commented 1 year ago

@DanailH Although I'm new to MUI contributions, I'm excited about the challenge this issue presents. Count me in for working on its implementation!

cherniavskii commented 10 months ago

For reference - conditional shadow on pinned columns for data grid v6: https://github.com/mui/mui-x/issues/7152#issuecomment-1344981248 I think we should make this a default behavior in v7

KenanYusuf commented 4 weeks ago

Adding some more context here for future readers.

There were shadows on pinned columns in v5 and v6, but these were removed as part of #10059 to reduce the scope of that huge refactor.

We plan on adding the shadow back in at some stage, potentially with the behavioural changes mentioned (conditionally showing shadows based on scroll position).