Rework frozen column shadow#3969
Conversation
Co-authored-by: nstepien
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #3969 +/- ##
==========================================
+ Coverage 97.53% 97.55% +0.01%
==========================================
Files 36 36
Lines 1463 1473 +10
Branches 472 481 +9
==========================================
+ Hits 1427 1437 +10
Misses 36 36
🚀 New features to boost your workflow:
|
| transition: opacity 0.1s; | ||
|
|
||
| /* TODO: reverse 'opacity' and remove 'not' */ | ||
| @container rdg-root not scroll-state(scrollable: inline-start) { |
There was a problem hiding this comment.
Firefox/Safari will always show the shadow until they support scroll-state container queries.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/container-type
| width: 10px; | ||
| background-image: linear-gradient( | ||
| to right, | ||
| light-dark(rgb(0 0 0 / 15%), rgb(0 0 0 / 40%)), | ||
| transparent | ||
| ); |
There was a problem hiding this comment.
The shadow is wider/stronger than before, let me know if you think we should tweak it.
| )} | ||
| </DataGridDefaultRenderersContext> | ||
|
|
||
| {lastFrozenColumnIndex > -1 && ( |
There was a problem hiding this comment.
This is the best way I found to make it work in all scenarios, including column grouping.
| width: 10px; | ||
| background-image: linear-gradient( | ||
| to right, | ||
| light-dark(rgb(0 0 0 / 15%), rgb(0 0 0 / 40%)), | ||
| transparent | ||
| ); |
| transition: opacity 0.1s; | ||
|
|
||
| /* TODO: reverse 'opacity' and remove 'not' */ | ||
| @container rdg-root not scroll-state(scrollable: inline-start) { |
|
|
||
| {lastFrozenColumnIndex > -1 && ( | ||
| <> | ||
| <div |
There was a problem hiding this comment.
Is is possible or a good idea to use a single div instead? Can it cause performance issues?
There was a problem hiding this comment.
Not really, for example:
| header cell |
| top summary |
| cell |
| |
| bot summary |
If we have no rows between the last row and the bottom summary, then we don't want to render a shadow for non-existent cells.
Also, if you scroll very fast then rows/cells may not be rendered yet, in that case I think it's better to not render the shadow as well.
3 participants
Before
Borders would increase the layer size (in devtools: "show layer borders"), and bleed onto other rows. They'd also be slightly round, instead of being uniform vertically.
box-shadowmay also impact browser rendering performance, haven't checked though.I've maxed out the shadow's color opacity in the second screenshot so it's easier to tell.
After
No overlapping layers, uniform shadows, and thanks to container queries: no shadow if we're at
scrollable: inline-start👍I've also tweaked the shadow so it looks more like a shadow than before.