[EuiDataGrid] Give rows actual positions/dimensions#5555
[EuiDataGrid] Give rows actual positions/dimensions#5555cee-chen merged 14 commits intoelastic:mainfrom
Conversation
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5555/ |
+ adjust scrolling workaround to obtain offsetTop from row parent instead of cell, now that individual cells have a top: 0
- now that cells are relative to the row parent, their offsetTop is 0
- Remove `@include euiDataGridRowCell` mixin and target the row directly - Remove isStripableRow cell logic and instead use CSS nth-child for alternating stripes - Swap stripes and highlight CSS so that highlight takes precendence over stripes without an !important - Remove background color on individual cells to allow row colors to show through (NB: grid body is already set to the correct background color as well)
8ec0829 to
283e40b
Compare
gridStyle.rowClasses API for customizing row styles|
I've removed the spiked @chandlerprall I'm not 100%, but I don't think this requires a changelog entry so it's primarily an internal only change to EuiDataGrid - am I off on that? |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5555/ |
- skipping the mutation observer for now
- cells no longer have a set background color (to allow row color to bleed through), and we were previously relying on the grid body's bg color to be white
|
Hmmm something funky is happening with the row height demos - the border for the horizontal scrollbar is showing up when it shouldn't be
https://eui.elastic.co/pr_5555/#/tabular-content/data-grid-row-heights-options Not sure if this PR introduces or if it's already in main. Will test a bit more later EDIT: It appears to be this PR and not in main. what the what |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5555/ |
💯 internals-only modifications don't need a changelog |
- using CSS `left`/`right` and `relative` on the inner grid parent solves the issue instead, as the row is now always correct width
|
Alrighty, the issue I screenshotted above should now be fixed with 006df04. The problem was that the I also added |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5555/ |
- which does not work well due to children changing on virtualization + set additional visible row index data attribute for extra detail + use dataset
- was previously not working on prod, and now it does
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5555/ |
chandlerprall
left a comment
There was a problem hiding this comment.
One small suggestion, feel free to ignore.
Tested locally & in the preview docs, couldn't find an issue. Included a specific check to ensure footer row striping still works as expected.
Don't forget to revert the striping example
chandlerprall
left a comment
There was a problem hiding this comment.
Additional changes LGTM ❤️
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5555/ |
Summary
This PR handle gives our created row elements an actual presence in the grid DOM (position & width/height). This then allows us to significantly clean up our CSS to target the row DOM node instead of each cell within the row.
This PR does not fully address #4401, but gets us well on the way to doing so, as rows will now become actual targetable and stylable elements.
Checklist
- [ ] Props have proper autodocs and playground toggles- [ ] Added documentation- [ ] Checked Code Sandbox works for any docs examples- [ ] Checked for breaking changes and labeled appropriately- [ ] A changelog entry exists and is marked appropriatelyInternal only changes