Skip to content

[WIP] EuiDataGrid#2165

Merged
chandlerprall merged 32 commits intomasterfrom
feature/euidatagrid
Oct 24, 2019
Merged

[WIP] EuiDataGrid#2165
chandlerprall merged 32 commits intomasterfrom
feature/euidatagrid

Conversation

@chandlerprall
Copy link
Copy Markdown
Contributor

@chandlerprall chandlerprall commented Jul 25, 2019

Summary

Creating this to track the progress & history of feature/euidatagrid branch.

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

Changelog items in addition to this component

As part of #2392

  • EuiButtonGroup and EuiButtonToggle now accept ReactNode for their label prop instead of string
  • useRenderToText added to inner_text service suite which is useful for transforming i18n content into strings for use in labels

As part of #2230

  • Added react-hooks plugin to eslint
  • Added icons tableDensityExpanded, tableDensityCompact, tableDensityNormal to EuiIcon
  • Corrected lockProps passdown in EuiFocusTrap, specifically to allows style to be passed down.
  • Changed children property on I18nTokensShape type from a single ReactChild to now accept an array
  • Added !important to the animation of EuiFocusRing animation to make sure it is always used

As part of #2176

  • Adjusted the color of $euiColorHighlight in dark mode

As part of #2207

  • Changed EuiPopoverFooter padding to uniformly adjust with the size of the popover

As part of #2366

  • Adds expandMini icon to EuiIcon
  • Adds isDragDisabled passdown prop to EuiDraggable
  • Changed EuiPopover to use role="dialog" for better screen-reader announcements
  • Added function callback onTrapDeactivation to EuiPopover for when a focus trap is deactivated
  • Added logic for rendering of focus around EuiPopover to counteract a race condition upon rendering that can cause styling issues. (fixes SuperDatePicker date popover EuiTabs not firing TransitionEnd event properly #2403)

As part of #2421

  • Fixed EuiMutationObserver's handling ofonMutation when that prop's value changes

Checklist

  • This was checked in mobile
  • This was checked in IE11
  • This was checked in dark mode
  • Any props added have proper autodocs
  • Documentation examples were added
  • A changelog entry exists and is marked appropriately
  • This was checked for breaking changes and labeled appropriately
  • Jest tests were updated or added to match the most common scenarios
  • This was checked against keyboard-only and screenreader scenarios
  • This required updates to Framer X components

chandlerprall and others added 26 commits July 24, 2019 14:55
* Initial css fixes

* works in IE, addresses feedback

* remove user select
* Adds basic aria roles and grid navigation

Co-Authored-By: Chandler Prall <chandler.prall@gmail.com>
Adds basic styling to the data grid.
* 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
* Show/hide and re-order datagrid columns

* Column visability & ordering tests

* column styling

* column sizing and bars

* blergh

* tests

* feedback

* Fix linting
Styling built into data grid, full screen mode
* 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
* Refactored EuiDataGrid's hooks

* Fix datagrid to react to gridStyle changes
* 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
* 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
Moved the sorting mechanism to the top toolbar.
Data grid cells now can expand and can render individually based upon their schema.
* 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
@snide
Copy link
Copy Markdown
Contributor

snide commented Oct 16, 2019

@chandlerprall fyi, looks like the last merge broke tests here.

@snide
Copy link
Copy Markdown
Contributor

snide commented Oct 16, 2019

Nevermind. Think I got it. Just needed the visibility added.

* 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
snide and others added 2 commits October 18, 2019 15:13
…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
* 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.
@snide snide marked this pull request as ready for review October 23, 2019 20:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

SuperDatePicker date popover EuiTabs not firing TransitionEnd event properly

2 participants