Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DATA GRID] Expand cells #2418

Merged
merged 27 commits into from
Oct 10, 2019
Merged

[DATA GRID] Expand cells #2418

merged 27 commits into from
Oct 10, 2019

Conversation

snide
Copy link
Contributor

@snide snide commented Oct 10, 2019

Replaces #2366

Summary

Removes the tabbable system and replaces it with a simpler popover system that allows cells to expand into a focus trapped popover.

Features this adds

  • There is now an isExpandable setting on data grid columns that lets you turn on/off cell expansion.
  • If on, the cells will show a button to trigged a popup that will render the content of the cell in a popover. This content is focus trapped and acts exactly like a normal popover.
  • This popover can be triggered/closed by using enter/escape with your keyboard on focus of any cell.
  • The contents of the popover can have custom rendering per schema type. In the docs is an example where json content is rendered within an EuiCodeBlock

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

snide and others added 27 commits September 23, 2019 15:51
@snide
cell expansion working mostly
b9839fe
@snide
fix double import
3cfae45
@snide
add search to field selector
4209301
@snide
euitext
eb3a495
@snide
Merge branch 'feature/euidatagrid' into grid/expand
ab2a03b
@snide
cell epansion is now optional through a config
2c35acb
@snide
keydown event for cells
fc5d03e
@snide
Merge branch 'feature/euidatagrid' into grid/expand
29f8a66
@snide
remove tabbables
5302ce5
@chandlerprall
Clean up some code & tests
e4d9910
@chandlerprall
Remove unused line of code
ceaa11e
@chandlerprall
Center popover against cell
346811a
@chandlerprall
Update euidatagridcell popover placement, trigger, dom structure, and…
cb76824 
… auto focusing
@chandlerprall
Restore focus to grid cell when popover was in response to mouse click
d35e459
@chandlerprall
Allow grid column selection to be searchable
f3edb5e
@chandlerprall
Refactor expansion popover formatting, allow custom ones
59afd89
@snide
fix expand buttons
133dd79
@snide
fix tests
cb01767
@snide
popovers now use role dialog. make grid cell selection more accessible
b9ad5d1
@chandlerprall
Update datagrid unit tests
0d8bec7
a11y tweaks
28e163b
@chandlerprall
Disable tab stops on in-grid rendered cells
158650e
@chandlerprall
Disable tabbable elements in expandable cells, too
f7c61b0
@chandlerprall
Internationalize some text
7fc21db
@snide
Merge branch 'grid/expand' into grid/expandtime
7c62b26
@snide
fix schema
a5f87f4
@snide
typo for icon
5f5b1c8
@snide snide mentioned this pull request Oct 10, 2019
Closed
9 tasks
@snide snide merged commit 09e6a63 into elastic:feature/euidatagrid Oct 10, 2019
@snide snide deleted the grid/expandtime branch October 10, 2019 23:40
chandlerprall added a commit that referenced this pull request Oct 24, 2019
@chandlerprall
[WIP] EuiDataGrid (#2165)
b64d503 
* 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@snide @chandlerprall