[EuiDataGrid] Give rows actual positions/dimensions #5555

cee-chen · 2022-01-24T18:37:13Z

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

Check against all themes for compatibility in both light and dark modes
Checked in mobile
Checked in Chrome, Safari, Edge, and Firefox

- [ ] Props have proper autodocs and playground toggles
- [ ] Added documentation
~~- [ ] Checked Code Sandbox works for any docs examples~~

Added or updated jest and cypress tests

~~- [ ] Checked for breaking changes and labeled appropriately~~

Checked for accessibility including keyboard-only and screenreader modes

~~- [ ] A changelog entry exists and is marked appropriately~~ Internal only changes

kibanamachine · 2022-01-24T19:12:04Z

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)

cee-chen · 2022-02-07T22:22:47Z

I've removed the spiked rowClasses API from this PR and will open it as a separate draft PR for testing/discussion once this merges. I'd like to get this PR in separately as it allows us to significantly clean up some of our row-related CSS and styling.

@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?

kibanamachine · 2022-02-07T22:55:41Z

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

cee-chen · 2022-02-07T23:33:08Z

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

kibanamachine · 2022-02-07T23:51:44Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5555/

chandlerprall · 2022-02-08T21:06:22Z

@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?

💯 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

src/components/datagrid/body/data_grid_body.test.tsx

cee-chen · 2022-02-09T22:23:06Z

Alrighty, the issue I screenshotted above should now be fixed with 006df04. The problem was that the containerRef in rowElement.style.width = containerRef.current!.style.width; was (for whatever bizarre reason) becoming stale particularly on out-of-view cells. Switching row elements to use pure CSS to obtain its width from the parent innerGrid element fixes the bug.

I also added data-gridrow-index attributes in a2397ee - I figured some consumers might find this helpful to hook into while we're still discussing the final API.

kibanamachine · 2022-02-09T22:55:22Z

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

kibanamachine · 2022-02-09T23:59:31Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5555/

chandlerprall

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

src/components/datagrid/data_grid_types.ts

This reverts commit aef8c64.

chandlerprall

Additional changes LGTM ❤️

kibanamachine · 2022-02-10T17:21:08Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5555/

cee-chen requested a review from chandlerprall January 24, 2022 18:37

cee-chen mentioned this pull request Jan 24, 2022

[EuiDataGrid] Provide a way to highlight a row #4401

Closed

cee-chen added 4 commits February 7, 2022 14:13

Pass positioning and height/width to portalled rows

204573b

+ adjust scrolling workaround to obtain offsetTop from row parent instead of cell, now that individual cells have a top: 0

Update snapshots

be4c751

Fix scrolling workaround to use row offsetTop

2fae704

- now that cells are relative to the row parent, their offsetTop is 0

cee-chen force-pushed the datagrid/rows branch 2 times, most recently from 8ec0829 to 283e40b Compare February 7, 2022 22:17

cee-chen changed the title ~~[EuiDataGrid] Give rows actual positions/dimensions and add a new gridStyle.rowClasses API for customizing row styles~~ [EuiDataGrid] Give rows actual positions/dimensions Feb 7, 2022

cee-chen added the skip-changelog label Feb 7, 2022

cee-chen marked this pull request as ready for review February 7, 2022 22:19

cee-chen added 2 commits February 7, 2022 15:09

Add unit tests for row manager

0576101

- skipping the mutation observer for now

Account for elastic#5562

ec39fe8

- 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

cee-chen added 3 commits February 9, 2022 12:47

Merge branch 'main' into datagrid/rows

b6b107a

Fix row widths bugging out due to stale containerRef reference

006df04

- using CSS `left`/`right` and `relative` on the inner grid parent solves the issue instead, as the row is now always correct width

Add data-gridrow-index attr for users to more easily hook into rows

a2397ee

chandlerprall reviewed Feb 9, 2022

View reviewed changes

src/components/datagrid/body/data_grid_body.test.tsx Show resolved Hide resolved

cee-chen added 3 commits February 9, 2022 15:14

[REVERT ME] Test striped rows on virtualized grids

aef8c64

Fix rows to add --striped class instead of CSS :nth-child

a71c314

- which does not work well due to children changing on virtualization + set additional visible row index data attribute for extra detail + use dataset

Fix striped footer rows

ddef677

- was previously not working on prod, and now it does

cee-chen requested a review from chandlerprall February 9, 2022 23:26

chandlerprall approved these changes Feb 10, 2022

View reviewed changes

src/components/datagrid/data_grid_types.ts Outdated Show resolved Hide resolved

cee-chen added 2 commits February 10, 2022 08:42

[PR feedback] Convert getRow args to an object

6f63371

Revert "[REVERT ME] Test striped rows on virtualized grids"

f4702f7

This reverts commit aef8c64.

chandlerprall approved these changes Feb 10, 2022

View reviewed changes

cee-chen enabled auto-merge (squash) February 10, 2022 17:35

cee-chen merged commit c1f5de4 into elastic:main Feb 10, 2022

cee-chen deleted the datagrid/rows branch February 10, 2022 17:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiDataGrid] Give rows actual positions/dimensions #5555

[EuiDataGrid] Give rows actual positions/dimensions #5555

cee-chen commented Jan 24, 2022 •

edited

Loading

kibanamachine commented Jan 24, 2022

cee-chen commented Feb 7, 2022

kibanamachine commented Feb 7, 2022

cee-chen commented Feb 7, 2022 •

edited

Loading

kibanamachine commented Feb 7, 2022

chandlerprall commented Feb 8, 2022

cee-chen commented Feb 9, 2022

kibanamachine commented Feb 9, 2022

kibanamachine commented Feb 9, 2022

chandlerprall left a comment

chandlerprall left a comment

kibanamachine commented Feb 10, 2022

[EuiDataGrid] Give rows actual positions/dimensions #5555

[EuiDataGrid] Give rows actual positions/dimensions #5555

Conversation

cee-chen commented Jan 24, 2022 • edited Loading

Summary

Checklist

kibanamachine commented Jan 24, 2022

cee-chen commented Feb 7, 2022

kibanamachine commented Feb 7, 2022

cee-chen commented Feb 7, 2022 • edited Loading

kibanamachine commented Feb 7, 2022

chandlerprall commented Feb 8, 2022

cee-chen commented Feb 9, 2022

kibanamachine commented Feb 9, 2022

kibanamachine commented Feb 9, 2022

chandlerprall left a comment

Choose a reason for hiding this comment

chandlerprall left a comment

Choose a reason for hiding this comment

kibanamachine commented Feb 10, 2022

cee-chen commented Jan 24, 2022 •

edited

Loading

cee-chen commented Feb 7, 2022 •

edited

Loading