Add shadow to table head #1835
Add shadow to table head #1835
Conversation
|
[Q] Can we match the approach/style that we've taken/used for the sticky column in the comparison table? |
I'm not sure the exact aspects you're referring to, but I'll take a look at it and adopt what I can. I doubt there'll be many issues doing so 👍 |
|
This one:
|
| <div key={column.id}> | ||
| <TableHeader | ||
| orderedColumns={orderedColumns} | ||
| column={column} | ||
| columns={columns} | ||
| sorts={sorts} | ||
| onDragOver={onDragUpdate} | ||
| onDragStart={onDragStart} | ||
| onDrop={onDragEnd} | ||
| /> | ||
| </div> | ||
| <TableHeader | ||
| key={column.id} | ||
| orderedColumns={orderedColumns} | ||
| column={column} | ||
| columns={columns} | ||
| sorts={sorts} | ||
| onDragOver={onDragUpdate} | ||
| onDragStart={onDragStart} | ||
| onDrop={onDragEnd} | ||
| /> |
There was a problem hiding this comment.
Removing the wrapper div makes styling easier, and it didn't do much other than band-aid a sizing issue that was solved in an alternate way with height: auto.
| ), | ||
| style: { | ||
| position: undefined | ||
| } |
There was a problem hiding this comment.
react-table assigns position:relative by default, but that behavior can be suppressed here.
There was a problem hiding this comment.
Can we set it to static or initial? Maybe it's possible to move it with the CSS as well?
There was a problem hiding this comment.
It must be undefined here because these styles get set as inline styles for every cell and can't be overridden with CSS. We can set position to relative, static, or anything else with CSS if we want an explicit default.
| .tr { | ||
| position: relative; | ||
| & > *:first-child { | ||
| background-color: $row-bg-color; | ||
| position: sticky; | ||
| left: 0; | ||
| z-index: 3; | ||
| border-right: 2px solid var(--editor-foreground-transparency-4); |
There was a problem hiding this comment.
Same color and width as the one in the comparison table, though that one is implemented with a pseudo-element. Visually, though, they're the same.
| ), | ||
| style: { | ||
| position: undefined | ||
| } |
There was a problem hiding this comment.
Can we set it to static or initial? Maybe it's possible to move it with the CSS as well?
There was a problem hiding this comment.
Will conflict with #1760. Please can we get that in first and fix the conflicts in this PR.
|
(not a blocker to merge this) I think that we still need to have a shadow in this case though, it's hard to tell when you see a "scrolled" state if there is something or not underneath the first column. An example of some light shadows:
|
|
Please do follow up and drop the shadow unless scroll is active... or I'll have to change theme 😢:
|
|
Changing the experiment column's header cell actually wasn't intentional, it just happened because I was using the same selector for both head and body rows and needed a background color in order to not have things showing up behind when overlapped. I just added separate head and body styles that maintain the same background colors we had before. As far as making the shadow disappear, I'll start on that after the table-wide sort/filter indicators. |
![codeclimate[bot]](https://avatars.githubusercontent.com/in/9403?s=60&v=4){kind=small}
| onDrop={onDragEnd} | ||
| /> | ||
| </div> | ||
| <TableHeader |
There was a problem hiding this comment.
Similar blocks of code found in 2 locations. Consider refactoring.
|
Code Climate has analyzed commit 8efd216 and detected 2 issues on this pull request. Here's the issue category breakdown:
The test coverage on the diff in this pull request is 100.0% (85% is the threshold). This pull request will bring the total coverage in the repository to 96.6% (0.0% change). View more on Code Climate. |
This PR aims to add styles to the sticky head and first column of the experiments table to make it easier to delineate them, especially when scrolling.
For the header, it's a shadow that uses the same color as other items. For the experiment column, it's a right-side border that uses the same styles as the border used for pinned images in the comparison table. Neither of these disappear at the default position, but that can be added if it's an effect we want.
shadow-and-border-demo.mp4