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.07k stars 1.26k 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 8 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