[EuiDataGrid] Feature/euidatagrid menu ux #2392

chandlerprall · 2019-10-01T18:41:15Z

Summary

Moved sorting UX into the grid header
Exposes schema information to sorting UI
Updated sorting tests to reflect changes

ryankeairns · 2019-10-03T14:55:54Z

@snide this looks great and is a very powerful sorting feature.

For the design, what do you think about using the compressed button group for the sorting direction (e.g., high-low; low-high)?

snide · 2019-10-03T17:10:25Z

@ryankeairns I started there originally but they were too big and the borders got heavy when there were a lot of the page. I could mimic the coloring though, or make a "mini" version of the button groups?

ryankeairns · 2019-10-07T14:48:19Z

@snide the coloring approach would be a good quick test. If that doesn't work, then it may negate the mini group button.

snide · 2019-10-07T17:43:02Z

@ryankeairns Toss up to me. I'll go with whichever you feel works the best.

ryankeairns · 2019-10-07T20:20:17Z

@snide Thanks! yes, it's a close call. I would like to go with the gray as it looks less button-y (ie. it otherwise looks like a lot of primary buttons which draw too much eye, imo).

myasonik · 2019-10-08T10:10:28Z

Somewhere along the way we lost screen reader support for sorting (if we're sorted on one column, setting aria-sort, if we're sorted on more then one, setting up an aria-describedby with the explanation).

All the code to do so is still there but the headers are never getting updated with their sort information. Probably means this could use an automated test around it.

Also I'm taking a note to migrate both the top and bottom control areas for the grid into proper toolbars but it's not super high urgency and I think it'll be easier to when some of the in-flight work settles.

chandlerprall · 2019-10-08T16:23:34Z

@myasonik good catch! I've pushed a fix and a unit test to cover.

thompsongl

Not sure this is related to any changes in this PR, but I see this when toggling column visibility off and on:

…react nodes, then use inner text for label

snide · 2019-10-08T21:26:47Z

Refactored this to use EuiButtonGroup, which solved @ryankeairns' request. Unfortunately this broke the tests, which @chandlerprall is going to look at. I have one more commit planned, just to clean up the sorting component into some sub components. The i18n tokenization + screen reader + schema mapping has made this file hard to read. Gonna see if I can break it up a bit (logic and functionality should remain the same). I had a hard time replicating @thompsongl's error. Was it on one of the examples specifically?

thompsongl · 2019-10-09T14:20:27Z

@snide First example. Click the 'Hide fields' button, and toggle off and back on the 'name' field. Happens every time for me.

It's the An error has occurred while a drag is occurring. that's odd, because the drag handle never gets touched.

chandlerprall · 2019-10-09T14:37:19Z

I can reproduce the react-beautiful-dnd error message, happens for me when toggling a column back on, I'll check it out.

chandlerprall · 2019-10-09T18:59:07Z

Everything in this PR should now be ready and reviewable.

thompsongl

Nice!

I noticed that sorting on the 'email' column doesn't work. Is that another case of the lexical sort issue?

src/components/datagrid/column_sorting.tsx

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

I noticed that sorting on the 'email' column doesn't work. Is that another case of the lexical sort issue?

Yes. Believe it's because they are coming in as nodes. I'll add it to #2399

@chandlerprall has a follow up PR to address the actual schema sorting mechanisms.

snide · 2019-10-09T21:40:59Z

Feedback addressed.

ryankeairns · 2019-10-09T22:46:54Z

@snide this looks great, just a few small considerations.

Regarding the sorting menu:

Match up field name fonts sizes: 'Hide fields' uses 14 for field names, 'Sort fields' uses 12
Add a little spacing between field name and the sort direction button group
Match up the 'remove' and 'handle' icons to be the same size (make remove/cross 16)
Consider adding a down arrow icon to the 'Pick fields to sort by' button
Would it be better to say 'Clear sorting' instead of 'Clear all'?

snide · 2019-10-09T23:14:51Z

@ryankeairns

Feedback addressed. Only one I couldn't do was adjust the cross/drag handle. The icons themselves are the correct size, it's just the hitzones are a little different. The drag handle one comes as part of that component, and because there's not visual difference I'm ok leaving them as is.

I also went ahead and made sure not to show "clear sorting" if no sorts had been applied yet. GIF below includes all the changes.

myasonik · 2019-10-10T09:33:00Z

Anyone else think that the mini switches have a near invisible focus state?

ryankeairns

Thanks for the changes, looks good!

thompsongl

Anyone else think that the mini switches have a near invisible focus state?

Now that you mention it, yeah, it's not very noticeable. I'd be ok with looking into it independent of this PR, though

snide · 2019-10-10T14:49:56Z

Gonna merge this one since I'm building docs off it. Thanks for the review folks.

Moved the sorting mechanism to the top toolbar.

* 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 <[email protected]> * [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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * Update src-docs/src/views/datagrid/datagrid_example.js Co-Authored-By: Michail Yasonik <[email protected]> * Update src-docs/src/views/datagrid/datagrid_example.js Co-Authored-By: Michail Yasonik <[email protected]> * Update src-docs/src/views/datagrid/datagrid_example.js Co-Authored-By: Michail Yasonik <[email protected]> * Update src-docs/src/views/datagrid/datagrid_example.js Co-Authored-By: Michail Yasonik <[email protected]> * Update src-docs/src/views/datagrid/datagrid_example.js Co-Authored-By: Michail Yasonik <[email protected]> * Update src-docs/src/views/datagrid/datagrid_example.js Co-Authored-By: Michail Yasonik <[email protected]> * Update src-docs/src/views/datagrid/datagrid_example.js Co-Authored-By: Michail Yasonik <[email protected]> * 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 <[email protected]> * Update src-docs/src/views/datagrid/datagrid_memory_example.js Co-Authored-By: Greg Thompson <[email protected]> * Update src-docs/src/views/datagrid/datagrid_memory_example.js Co-Authored-By: Greg Thompson <[email protected]> * Update src-docs/src/views/datagrid/datagrid_schema_example.js Co-Authored-By: Greg Thompson <[email protected]> * Update src-docs/src/views/datagrid/datagrid_memory_example.js Co-Authored-By: Greg Thompson <[email protected]> * Update src-docs/src/views/datagrid/datagrid_memory_example.js Co-Authored-By: Greg Thompson <[email protected]> * Update src-docs/src/views/datagrid/datagrid_memory_example.js Co-Authored-By: Greg Thompson <[email protected]> * 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

chandlerprall added 3 commits October 1, 2019 08:55

first iteration of column sorting

bfde1b7

Column sorting popover

93ec2bb

Grid unit tests, expose schema info to sorting ui

fe38683

chandlerprall changed the base branch from master to feature/euidatagrid October 1, 2019 18:42

snide added 4 commits October 1, 2019 16:13

basic interactions, minus styling

dd63760

cleanup, still needs work

ba7e015

works, but need help on tests

f8cdafc

fix text

2ef7627

fix sort naming

5319356

snide added 3 commits October 3, 2019 13:11

Merge branch 'feature/euidatagrid' into feature/euidatagrid-menu-ux

55d0ab8

currency icons

35e83c6

use viz palette for icons

08c2b37

chandlerprall and others added 4 commits October 7, 2019 10:36

Update datagrid unit tests

e7b051d

scss

cd83aa5

update test

196c46d

i18n for buttons

db809a7

Fix aria attributes for sorting on datagrid headers

475ec3b

fix i18n

3cbad1f

thompsongl reviewed Oct 8, 2019

View reviewed changes

replace sort buttons with button group, allow button group to accept …

66a6867

…react nodes, then use inner text for label

snide added 2 commits October 8, 2019 15:02

split up column sorting into smaller components

edb9ba2

use compressed style in style selector

2b6ed4f

chandlerprall and others added 3 commits October 9, 2019 12:18

Update column sorting tests

ab8ea0e

fix scss

b774f51

Fix resizeobserver loop

ffc855e

chandlerprall changed the title ~~[WIP] [EuiDataGrid] Feature/euidatagrid menu ux~~ [EuiDataGrid] Feature/euidatagrid menu ux Oct 9, 2019

snide requested a review from ryankeairns October 9, 2019 19:11

thompsongl suggested changes Oct 9, 2019

View reviewed changes

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

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

feedback

fb28d77

chandlerprall mentioned this pull request Oct 9, 2019

[WIP] EuiDataGrid #2165

Merged

10 tasks

feedback

36c9e45

ryankeairns approved these changes Oct 10, 2019

View reviewed changes

thompsongl approved these changes Oct 10, 2019

View reviewed changes

snide merged commit ac30871 into elastic:feature/euidatagrid Oct 10, 2019

chandlerprall mentioned this pull request Oct 10, 2019

[EuiDataGrid] Export useRenderToText #2412

Merged

snide pushed a commit to snide/eui that referenced this pull request Oct 10, 2019

[EuiDataGrid] Feature/euidatagrid menu ux (elastic#2392)

07566cb

Moved the sorting mechanism to the top toolbar.

myasonik mentioned this pull request Oct 11, 2019

Mini switch focus styles aren't discernable #2420

Closed

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

[EuiDataGrid] Feature/euidatagrid menu ux #2392

[EuiDataGrid] Feature/euidatagrid menu ux #2392

chandlerprall commented Oct 1, 2019

ryankeairns commented Oct 3, 2019 •

edited

Loading

snide commented Oct 3, 2019

ryankeairns commented Oct 7, 2019

snide commented Oct 7, 2019

ryankeairns commented Oct 7, 2019

myasonik commented Oct 8, 2019

chandlerprall commented Oct 8, 2019

thompsongl left a comment •

edited

Loading

snide commented Oct 8, 2019

thompsongl commented Oct 9, 2019

chandlerprall commented Oct 9, 2019

chandlerprall commented Oct 9, 2019

thompsongl left a comment

snide commented Oct 9, 2019

snide commented Oct 9, 2019

ryankeairns commented Oct 9, 2019 •

edited

Loading

snide commented Oct 9, 2019

myasonik commented Oct 10, 2019

ryankeairns left a comment

thompsongl left a comment

snide commented Oct 10, 2019

[EuiDataGrid] Feature/euidatagrid menu ux #2392

[EuiDataGrid] Feature/euidatagrid menu ux #2392

Conversation

chandlerprall commented Oct 1, 2019

Summary

ryankeairns commented Oct 3, 2019 • edited Loading

snide commented Oct 3, 2019

ryankeairns commented Oct 7, 2019

snide commented Oct 7, 2019

ryankeairns commented Oct 7, 2019

myasonik commented Oct 8, 2019

chandlerprall commented Oct 8, 2019

thompsongl left a comment • edited Loading

Choose a reason for hiding this comment

snide commented Oct 8, 2019

thompsongl commented Oct 9, 2019

chandlerprall commented Oct 9, 2019

chandlerprall commented Oct 9, 2019

thompsongl left a comment

Choose a reason for hiding this comment

snide commented Oct 9, 2019

snide commented Oct 9, 2019

ryankeairns commented Oct 9, 2019 • edited Loading

snide commented Oct 9, 2019

myasonik commented Oct 10, 2019

ryankeairns left a comment

Choose a reason for hiding this comment

thompsongl left a comment

Choose a reason for hiding this comment

snide commented Oct 10, 2019

ryankeairns commented Oct 3, 2019 •

edited

Loading

thompsongl left a comment •

edited

Loading

ryankeairns commented Oct 9, 2019 •

edited

Loading