[Data Grid] - Styling built into data grid, full screen mode #2230

snide · 2019-08-15T16:17:59Z

Summary

Docs now use better fake data through Faker JS

There is now a fullscreen mode for tables

This utilizes some similar flex trickery that we use in flyouts.

Datagrids now adapt to their container

Using the same flex trickery, data grids now react to the container they are placed in. Note that I use a resize observer to decide which controls to show in the toolbar. When space is tight, only the "Fullscreen" button shows.

Focus states now look better

This required some complicated sass because our div structure doesn't allow for collapse columns. A combo of fake borders and box shadows work in a pinch, but need some additional calculation because paddings can shift.

New density control can augment the `gridStyle` prop

The density controls now merge predefined styling shapes against whatever an engineer may have initialized the gridStyle prop to begin with. This means you can initially set the font size to be large, or the borders to be off, and the density controls will only overwrite the related properties. This gives us a lot of flexibility for similar styling only controls as this component expands.

Issues that need engineering help

There is a warning about the focus system that I can't track down
I needed EuiFocusTrap to properly use it's {...rest} spread, but in making lockProps usage correct, a lot of our tests broke. I don't know how to fix it.
There is still an infinite loop that can be caused when two grids are on the same page. This seems due to the focus system. In the meantime, I've commented out my examples that show the full feature set.
I think the way we're using hooks for the controls might be causing unnecessary render refreshes. We might want to look into that. I think this, along with the focus work has caused some performance lag in large renders.

Checklist

Checked in dark mode
Checked in mobile
Checked in IE11 and Firefox
Props have proper autodocs
~~Added documentation examples~~
Added or updated jest 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~~

src/components/datagrid/data_grid.tsx

WIP: pass `setGridStyles` through

…ncepts

…gn/toolbar

src-docs/src/views/datagrid/datagrid.js

snide · 2019-08-30T23:33:38Z

This is now ready to review. I've updated the description to show off the changes. There are some engineering todos that I added at the bottom that are possibly blocking this from merge.

snide · 2019-08-30T23:34:56Z

src-docs/src/views/datagrid/datagrid_example.js

@@ -9,6 +9,14 @@ import DataGrid from './datagrid';
 const dataGridSource = require('!!raw-loader!./datagrid');
 const dataGridHtml = renderToHtml(DataGrid);

+// import DataGridContainer from './container';


There is an infinite loop bug caused by having two data grids on the sample page. This means I had to comment out a lot of the examples. You can check them out by turning these files back on.

src/components/focus_trap/focus_trap.js

src/components/datagrid/_data_grid_data_row.scss

myasonik · 2019-09-03T09:03:30Z

UX question

If a user is in a cell (e.g., having pressed enter in a cell with multiple interactive elements), pressing ESC now does 2 things: exists full screen and moves their focus out to the cell container.

Is that fine or do we want to order these effects somehow? (Could do something like, it always exists the cell first then exists full screen, or vice verse, or something like it undoes the last action the user did.)

src/components/datagrid/data_grid.tsx

myasonik · 2019-09-03T10:05:15Z

src/components/datagrid/_data_grid_data_row.scss

+}
+
+.euiDataGridRowCell__content {
+  @include euiTextTruncate;


Because of text-overflow: ellipses, all of the content that's cutoff isn't rendered.

That's not a problem... until someone enters a cell with tabbable content that has been cut off. Then, they focus onto something that's invisible.

Can try this on cells in the location column.

@snide will this be resolved by your upcoming stuff around popping out the active cell?

I'll be fixing this partially in a later PR by having focused cells "expand" on focus / some sort of action.

Should we at least use EuiInnerText to add the title attribute to the cell contents?

Should we at least use EuiInnerText to add the title attribute to the cell contents?

If you decide to give this a try, I'd suggest using the useInnerText hook, but also be aware that either will watch for DOM changes (using MutationObserver) and could get expensive with column resizing, sorting, etc. It'd take testing to see, though.

I don't think we should use inner text in this case. We really have no idea what contents could be in here. Specifically, I think quite often it could be large JSON. We'll need some manner of cell expansion to solve these problems. That's my next PR.

src/components/datagrid/_data_grid_data_row.scss

chandlerprall · 2019-09-03T14:38:09Z

UX question

If a user is in a cell (e.g., having pressed enter in a cell with multiple interactive elements), pressing ESC now does 2 things: exists full screen and moves their focus out to the cell container.

Is that fine or do we want to order these effects somehow? (Could do something like, it always exists the cell first then exists full screen, or vice verse, or something like it undoes the last action the user did.)

I think the escape-from-cell should take precedence and that function should stop the event's propagation.

src-docs/src/views/icon/icons.js

src/components/datagrid/_data_grid.scss

cchaos · 2019-09-03T18:54:36Z

src/components/datagrid/style_selector.tsx

+      button={
+        <EuiButtonEmpty
+          size="xs"
+          iconType="tableDensityComfortable"


I would use the normal density icon here, or swap it out for the one that's been selected.

Confused by this comment. Are you talking about order?

You've statically chosen to display the expanded density icon for the main toolbar trigger button. I would think you'd want to either display the middle-ground version (normal) or swap out this icon for the one that matches what was chosen.

src/components/datagrid/_data_grid_column_selector.scss

src/components/datagrid/_data_grid_data_row.scss

src/components/datagrid/style_selector.tsx

…ll focus

chandlerprall · 2019-09-03T21:32:45Z

Fixed performance & tests. @myasonik my test fixes involved moving role="grid" to a different element, please double check the change.

myasonik · 2019-09-04T10:35:49Z

Fixed performance & tests. @myasonik my test fixes involved moving role="grid" to a different element, please double check the change.

grid roles all work! Only thing is to move the aria-label with role=grid as well. They should be on the same element. A bit of a nuisance because either aria-label or aria-labelledby can be passed in so we have to check first which to pull out I guess?

CC @chandlerprall @snide

chandlerprall · 2019-09-04T17:14:34Z

Only thing is to move the aria-label with role=grid as well. They should be on the same element.

Good catch, pushed!

snide · 2019-09-05T00:14:48Z

OK. Feedback addressed. Also tested everything in IE and added full i18n to the components.

I added visual things we're still not happy about as checklist items to the meta ticket. We'll get to them before merge #2177

@chandlerprall I believe the i18n wraps around the popover buttons broke the tests with this commit a98779a. I tried to troubleshoot myself, but I'm not as familiar with the logic you're doing there. Beyond that. I think we're mostly good.

chandlerprall · 2019-09-05T15:25:34Z

@snide pushed fix for the popover test

…ore feedback to devs and make them more accurate

chandlerprall · 2019-09-05T15:54:17Z

@snide pushed some updated types for EuiI18n when using tokens+defaults+children callback, it still requires the : ReactChild[] type but is now more flexible and allows string[] when the defaults are all strings, which will help in some future cases.

cchaos · 2019-09-05T17:44:00Z

src/components/datagrid/_data_grid.scss

+}
+
+.euiDataGrid__pagination {
+


Nit: extra space

src/components/datagrid/_data_grid_data_row.scss

src/components/datagrid/column_selector.tsx

cchaos · 2019-09-05T18:09:47Z

Also, just wanted to mention, though it's not a blocker for this PR, that this page with the 3 tables on it now chugs quite significantly. .mov

Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>

snide · 2019-09-05T20:07:10Z

Merging this on green CI. Docs updated.

cchaos

Thx

* initial datagrid * protect against re-rendering content on column width change * Added unit initial tests for EuiDataGrid * [EuiDataGrid] Base layer Sass (#2171) * Initial css fixes * works in IE, addresses feedback * remove user select * Adds basic aria roles and grid navigation (#2187) * Adds basic aria roles and grid navigation Co-Authored-By: Chandler Prall <chandler.prall@gmail.com> * [Data Grid] Grid style options (#2176) Adds basic styling to the data grid. * Add pagination to EuiDataGrid (#2188) * Added pagination to to EuiDataGrid * Move EuiDataGrid row rendering to a sub-component to clean up state management * EuiDataGrid pagination unit tests * fix data grid pagination * revert colors * EuiDataGrid column visibility & ordering (#2207) * Show/hide and re-order datagrid columns * Column visability & ordering tests * column styling * column sizing and bars * blergh * tests * feedback * Fix linting * Adds more complex focus control for DataGrid (#2222) * [Data Grid] - Styling built into data grid, full screen mode (#2230) Styling built into data grid, full screen mode * EuiDataGrid add column sorting (#2278) * API interface for providing column sort order, callback to allow external data sorting * EuiDataGrid renders content into memory, sorts on it * Added tests for EuiDataGrid sorting * Added aria-sort value to a singly-sorted column header * small cleanup * add tests back in, though they are still broken * Clean up some keyboard navigation issues * Fix column sorting & update snapshots * EuiDataGrid hooks cleanup (#2331) * Refactored EuiDataGrid's hooks * Fix datagrid to react to gridStyle changes * [EuiDataGrid] Automatic column schema detection (#2351) * Automatically detect data schema for in-memory datagrid * Merge in described schema for field formatting * Better column type detection * Tests for euidatagrid schema / column type * refactor datagrid schema code, add datetime type detection * some comments * Allow extra type detectors for EuiDataGrid * cleanup of docs and type formatting * Fix datagrid unit test * Update currency detector * Allow EuiDataGrid's inMemory prop to be {true} * Added ability to provide extra props for the containing cell div * Added test for cell props * [EuiDataGrid] InMemory Performance (#2374) * Automatically detect data schema for in-memory datagrid * Merge in described schema for field formatting * Better column type detection * Tests for euidatagrid schema / column type * refactor datagrid schema code, add datetime type detection * some comments * Allow extra type detectors for EuiDataGrid * cleanup of docs and type formatting * Fix datagrid unit test * Update currency detector * Allow EuiDataGrid's inMemory prop to be {true} * Added ability to provide extra props for the containing cell div * Added test for cell props * Performance cleanups * Clean up datagrid doc's inMemory selection * Merged in feature branch * EuiDataGrid in-memory options * Performance refactor for in-memory values * added a comment * Fix sorting on in-memory and schema datagrid docs * [EuiDataGrid] Feature/euidatagrid menu ux (#2392) Moved the sorting mechanism to the top toolbar. * Export useRenderToText to top-level package (#2412) * [DATA GRID] Expand cells (#2418) Data grid cells now can expand and can render individually based upon their schema. * [EuiDataGrid] use schema information when sorting (#2419) * cell expansion working mostly * fix double import * add search to field selector * euitext * cell epansion is now optional through a config * keydown event for cells * remove tabbables * Clean up some code & tests * Remove unused line of code * Center popover against cell * Update euidatagridcell popover placement, trigger, dom structure, and auto focusing * Restore focus to grid cell when popover was in response to mouse click * Allow grid column selection to be searchable * Refactor expansion popover formatting, allow custom ones * schema-based sort comparators * reverse boolean sort to be true-false * adds json schema sorting, fixes issue with popover * Weaken the currency type detector when values have a period in their first few characters, and fix test * Move column order and visibility to be managed externally (#2422) * fix tests * [EuiDataGrid] Custom column headers (#2421) * Allow custom ReactNode for column header display * Allow navigation into grid headers if any are interactive * Properly wrap cell focus and use [enter], [f2] to interact * Corrected header cell focus-state on blurring, [escape]. and single interactives * Corrected header cell focus-state on blurring, [escape]. and single interactives * When datagrid header is interactive, default its tabstop to the first header cell * EuiDataGridHeaderCell warns about multiple interactive elements * fix focus, example and screenreader stuffs, looks like tests pass * simplifying screen reader read out * [DATA GRID] EuiGridToolBar toolbar is now configurable through props (#2443) * EuiGridToolBar toolbar is now configurable through props * better tests * small test typp * Update src/components/datagrid/data_grid_types.ts Co-Authored-By: Greg Thompson <thompsongl@users.noreply.github.com> * feedback * [EuiDataGrid] Docs and autodocs (#2449) * Render out EuiDataGrid proptypes * Add pagination props to docs * Fill out all datagrid autodoc sections * remove debugger statement * Update src/components/datagrid/data_grid_types.ts Co-Authored-By: Greg Thompson <thompsongl@users.noreply.github.com> * words * docs start * datatype renamed to schema, update docs * docs, fix typo for fullscreen buton * core concepts * better in memory explanation * custom schema example * provide a nice, documented snippet * typos * don't show pagination when only one page * clean up styling, better docs for formatters * more docs cleanup * IE fix * IE fix again * small cleanup of docs * describe how to disable expansion popovers * dark mode tweaks * Fix custom datatype sorting * Update src-docs/src/views/datagrid/datagrid_example.js Co-Authored-By: Michail Yasonik <michail@yasonik.com> * Update src-docs/src/views/datagrid/datagrid_example.js Co-Authored-By: Michail Yasonik <michail@yasonik.com> * Update src-docs/src/views/datagrid/datagrid_example.js Co-Authored-By: Michail Yasonik <michail@yasonik.com> * Update src-docs/src/views/datagrid/datagrid_example.js Co-Authored-By: Michail Yasonik <michail@yasonik.com> * Update src-docs/src/views/datagrid/datagrid_example.js Co-Authored-By: Michail Yasonik <michail@yasonik.com> * Update src-docs/src/views/datagrid/datagrid_example.js Co-Authored-By: Michail Yasonik <michail@yasonik.com> * Update src-docs/src/views/datagrid/datagrid_example.js Co-Authored-By: Michail Yasonik <michail@yasonik.com> * Update src-docs/src/views/datagrid/datagrid_example.js Co-Authored-By: Michail Yasonik <michail@yasonik.com> * PR feedback * typo * feedback to break up docs * better cross linking and summary * fix custom schema display * Update src-docs/src/views/datagrid/datagrid_memory_example.js Co-Authored-By: Greg Thompson <thompsongl@users.noreply.github.com> * Update src-docs/src/views/datagrid/datagrid_memory_example.js Co-Authored-By: Greg Thompson <thompsongl@users.noreply.github.com> * Update src-docs/src/views/datagrid/datagrid_memory_example.js Co-Authored-By: Greg Thompson <thompsongl@users.noreply.github.com> * Update src-docs/src/views/datagrid/datagrid_schema_example.js Co-Authored-By: Greg Thompson <thompsongl@users.noreply.github.com> * Update src-docs/src/views/datagrid/datagrid_memory_example.js Co-Authored-By: Greg Thompson <thompsongl@users.noreply.github.com> * Update src-docs/src/views/datagrid/datagrid_memory_example.js Co-Authored-By: Greg Thompson <thompsongl@users.noreply.github.com> * Update src-docs/src/views/datagrid/datagrid_memory_example.js Co-Authored-By: Greg Thompson <thompsongl@users.noreply.github.com> * Updated some datagrid docs * main dg example page feedback * Eui prefix all the things to be consistant. Adjust the data grid docs to match * rewrite intro based on feedback * more tweaking of words * rename toolbarDisplay->toolbarVisibility * in memory docs reworked to four examples * clean up core example * data grid styling snippets * fix prop list * Minor grammar edits * Added isDetails prop to renderCellValue, reducing the use case for expansionFormatters. Speaking of those, expansionFormatter(s) has been renamed to popoverContent(s) and now recieve the rendered cell div in addition to the renderCellValue ReactElement * fix docs renaming, fix css * last docs edit seems fitting * somewhat decent attempt at putting classnames on schemas * Revert "somewhat decent attempt at putting classnames on schemas" This reverts commit 26542d7. * changelog

snide added 2 commits August 15, 2019 08:38

style selector dropdown uses hooks, new icon added, full screen mode

9ab846f

snaps

5842787

snide commented Aug 15, 2019

View reviewed changes

src/components/datagrid/data_grid.tsx Outdated Show resolved Hide resolved

thompsongl and others added 8 commits August 15, 2019 12:59

setState return

9d28b8a

Merge pull request #9 from thompsongl/design/toolbar

73bd35c

WIP: pass `setGridStyles` through

full screen kinda. need to rework a lot of this. just playing with co…

0afdb3f

…ncepts

cleaup. grid now works in small containers

95c48d1

only set column widths initially, not on resize

a38dd47

more cleanup, density controls now merge!

c6ee314

Merge remote-tracking branch 'upstream/feature/euidatagrid' into desi…

b75d97e

…gn/toolbar

cleanup of docs and sass

ae53136

snide commented Aug 30, 2019

View reviewed changes

src-docs/src/views/datagrid/datagrid.js Outdated Show resolved Hide resolved

snide requested review from chandlerprall, myasonik and cchaos August 30, 2019 23:32

snide commented Aug 30, 2019

View reviewed changes

snide requested a review from thompsongl August 30, 2019 23:54

snide commented Aug 30, 2019

View reviewed changes

src/components/focus_trap/focus_trap.js Outdated Show resolved Hide resolved

snide commented Aug 30, 2019

View reviewed changes

src/components/datagrid/_data_grid_data_row.scss Show resolved Hide resolved

snide mentioned this pull request Aug 31, 2019

[META] Data grid features / design to build out #2177

Closed

25 tasks

myasonik reviewed Sep 3, 2019

View reviewed changes

fixed focus trap issues

272729c

cchaos suggested changes Sep 3, 2019

View reviewed changes

chandlerprall added 3 commits September 3, 2019 13:41

Performance fix to avoid re-processing rows unaffected by changing ce…

4575bd8

…ll focus

fix hook problems in datagrid

22346c5

Fixed EuiDataGrid tests

e32fe28

Update position of aria-label[ledby] in EuiDataGrid's role=grid

497ce23

snide added 7 commits September 4, 2019 15:11

style selector i18n

87f423b

euiDataGrid i18n

82c49e4

column selector i18n

a98779a

full screen check

278510e

const for screen width

ed66269

sass lint, stupid vim

9f2dce1

ie11 fixes and some i18n stuffs

c47a4ed

snide requested a review from cchaos September 5, 2019 00:14

Fix/update datagrid tests' popover helper utils

698956f

Update EuiI18n types around defaults & children callback to provide m…

1550e28

…ore feedback to devs and make them more accurate

cchaos reviewed Sep 5, 2019

View reviewed changes

cchaos suggested changes Sep 5, 2019

View reviewed changes

src/components/datagrid/column_selector.tsx Outdated Show resolved Hide resolved

src/components/datagrid/column_selector.tsx Outdated Show resolved Hide resolved

fix for focus trap styles. hat tip to chandler

9f5cd07

snide and others added 3 commits September 5, 2019 11:31

Update src/components/datagrid/column_selector.tsx

d32c8e2

Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>

Update src/components/datagrid/column_selector.tsx

ad66a76

Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>

fix ci, update docs

36a9be2

cchaos approved these changes Sep 5, 2019

View reviewed changes

snide merged commit eead57e into elastic:feature/euidatagrid Sep 5, 2019

snide deleted the design/toolbar branch September 5, 2019 20:24

chandlerprall mentioned this pull request Oct 9, 2019

[WIP] EuiDataGrid #2165

Merged

10 tasks

chandlerprall mentioned this pull request Oct 25, 2019

Upgrade EUI to v14.8.0 elastic/kibana#49375

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Data Grid] - Styling built into data grid, full screen mode #2230

[Data Grid] - Styling built into data grid, full screen mode #2230

snide commented Aug 15, 2019 •

edited

snide commented Aug 30, 2019

snide Aug 30, 2019

myasonik commented Sep 3, 2019

myasonik Sep 3, 2019

chandlerprall Sep 3, 2019

snide Sep 3, 2019

cchaos Sep 3, 2019

thompsongl Sep 3, 2019

snide Sep 4, 2019

chandlerprall commented Sep 3, 2019

cchaos Sep 3, 2019

snide Sep 4, 2019

cchaos Sep 5, 2019

chandlerprall commented Sep 3, 2019

myasonik commented Sep 4, 2019

chandlerprall commented Sep 4, 2019

snide commented Sep 5, 2019

chandlerprall commented Sep 5, 2019

chandlerprall commented Sep 5, 2019

cchaos Sep 5, 2019

cchaos commented Sep 5, 2019

snide commented Sep 5, 2019

cchaos left a comment

		}

		.euiDataGrid__pagination {

[Data Grid] - Styling built into data grid, full screen mode #2230

[Data Grid] - Styling built into data grid, full screen mode #2230

Conversation

snide commented Aug 15, 2019 • edited

Summary

Docs now use better fake data through Faker JS

There is now a fullscreen mode for tables

Datagrids now adapt to their container

Focus states now look better

New density control can augment the gridStyle prop

Issues that need engineering help

Checklist

snide commented Aug 30, 2019

Choose a reason for hiding this comment

myasonik commented Sep 3, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chandlerprall commented Sep 3, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chandlerprall commented Sep 3, 2019

myasonik commented Sep 4, 2019

chandlerprall commented Sep 4, 2019

snide commented Sep 5, 2019

chandlerprall commented Sep 5, 2019

chandlerprall commented Sep 5, 2019

Choose a reason for hiding this comment

cchaos commented Sep 5, 2019

snide commented Sep 5, 2019

cchaos left a comment

Choose a reason for hiding this comment

snide commented Aug 15, 2019 •

edited

New density control can augment the `gridStyle` prop