[EuiDataGrid] Docs and autodocs #2449

chandlerprall · 2019-10-17T17:51:01Z

Summary

Adds docs and props autodocs for EuiDataGrid.

Autodocs changes

typescript->proptypes modifications
- resolve Omit<X, Y> syntax
- added support for JSXElementConstructor (maps to func instead of elementType for backwards-compatibility)
- added support for indexed property access e.g. MyType['someKey']
made all props sections linkable via #SomeTitle markdown syntax; previously only custom react-docgen sections could be linkable

Small EuiDataGrid changes made during docs creation

EuiDataGridColumn renamed dataTypes to schema to better match the mapping / concepts around that term
CellValueRenderProps renamed to EuiDataGridCellValueRenderProps to better match the rest of the component
toolbarDisplay prop on EuiDataGrid renamed to toolbarVisibility
showFullScreenSelector had a typo that was corrected
Pagination no longer shows if there is only one page of rows
Cleanup up the look and feel of the toolbar so it looks better with all the border options
Dark mode cleanup

TODO: Bugs noticed when writing docs

Custom schemas break sorting because getDetailsForSchema only checks against the built in schemas.
Need an example of how expansionFormatters works
~~How to provide multiple expansionFormatters? Likely should accept an array?~~ Apparently you can pass multiple objects.
There is a memory link somewhere in the sorting dropdown. I think it's on the onChange for EuiButtonGroup?

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 · 2019-10-18T15:49:16Z

Gonna commit to this directly. Mostly just fixing language.

snide · 2019-10-18T15:53:00Z

#SomeTitle markdown syntax; previously only custom react-docgen sections could be linkable

As far as I can tell this doesn't work?

snide · 2019-10-18T19:56:43Z

Another weird one I noticed.

thompsongl

Nothing like a Friday afternoon AST review 😆 My brain tells me callee is a typo every single time.

Strange, but both of @snide's comments don't apply for me. EuiDataGrid prop table is present and the named links are functional

Update:

Uncaught TypeError: Cannot read property 'scrollIntoView' of null

sometimes occurs when clicking type def links (e.g., DataGridColumnVisibility)

src/components/datagrid/data_grid_types.ts

Co-Authored-By: Greg Thompson <thompsongl@users.noreply.github.com>

snide · 2019-10-18T21:44:59Z

The issues i mentioned before were due to cache. I'm working on a commit now to make the language more clear and provide some better examples.

snide · 2019-10-18T22:33:56Z

Will handle merging in the toolbarDisplay stuff now and writing docs for it.

…ure/euidatagrid-proptypes

snide

Adjusted language, added docs and merge up from the feature branch. Outside of the default values not showing in the columns (@chandlerprall is working on it) LGTM.

snide · 2019-10-18T22:58:38Z

jenkins test this

useInnerText › handles updated content failed, but passed locally.

snide · 2019-10-20T18:32:55Z

Hey, I'm pushing the docs rework into this branch even though it will ballon it. It got too hard for me to make changes to the autodocs and the written docs at the same time. I also noticed some typos and small propname inconsistencies that i needed to fix along the way. I'll document those changes within the PR description so they're easier to review.

snide · 2019-10-20T23:19:22Z

OK. Outside of the getDetailsForSchema issue mentioned in the description I think I have good docs and examples for everything EuiDataGrid can do now.

Co-Authored-By: Greg Thompson <thompsongl@users.noreply.github.com>

cchaos

I am reading through the docs as someone mostly unfamiliar with the component.

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

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

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

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

cchaos

I am reading through the docs as someone mostly unfamiliar with the component.

snide · 2019-10-22T22:12:48Z

Just FYI I'm gonna resolve stuff as I fix it locally just so I can keep track. They won't render here till I push.

… to match

snide · 2019-10-23T07:12:21Z

OK. I got to everything I think. I reworked the in memory page completely and am pretty happy with how all this feels now. @chandlerprall and I have a small todo in the morning to do some renaming around expansionFormatters. We're gonna be a little more direct and call them popoverContents. There's also some small tweaks we noticed we'd need to make there to account for the discover scenario.

🛌 🌤 🏃

cchaos · 2019-10-23T15:13:58Z

I just saw some super minor grammar issues and though it easier to just create a PR to fix those instead of commenting each of them. So here's the PR: chandlerprall#13

…pansionFormatters. Speaking of those, expansionFormatter(s) has been renamed to popoverContent(s) and now recieve the rendered cell div in addition to the renderCellValue ReactElement

…rid-proptypes

Minor grammar edits

This reverts commit 26542d7.

cchaos

Looks great! Good job!!!

* 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

chandlerprall added 4 commits October 8, 2019 14:08

Render out EuiDataGrid proptypes

8724183

Add pagination props to docs

1ba6319

Merge branch 'feature/euidatagrid' into feature/euidatagrid-proptypes

da5e009

Fill out all datagrid autodoc sections

46fb5de

chandlerprall requested review from snide and thompsongl October 17, 2019 17:51

chandlerprall changed the base branch from master to feature/euidatagrid October 17, 2019 17:51

remove debugger statement

dfc8b3a

thompsongl reviewed Oct 18, 2019

View reviewed changes

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

Update src/components/datagrid/data_grid_types.ts

dfee675

Co-Authored-By: Greg Thompson <thompsongl@users.noreply.github.com>

words

81c9afa

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

04eb997

…ure/euidatagrid-proptypes

snide approved these changes Oct 18, 2019

View reviewed changes

snide added 3 commits October 19, 2019 09:27

docs start

7cc1d19

datatype renamed to schema, update docs

10f887b

docs, fix typo for fullscreen buton

996f29a

snide changed the title ~~[EuiDataGrid] typescript/proptypes autodocs~~ [EuiDataGrid] Docs and autodocs Oct 20, 2019

snide added 4 commits October 20, 2019 12:04

core concepts

6d8c646

better in memory explanation

e3b86e2

custom schema example

b7224ed

provide a nice, documented snippet

e2e7cc8

typos

d92dca3

chandlerprall and others added 2 commits October 22, 2019 09:44

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

3726be7

Co-Authored-By: Greg Thompson <thompsongl@users.noreply.github.com>

Updated some datagrid docs

acfd3de

cchaos reviewed Oct 22, 2019

View reviewed changes

snide added 7 commits October 22, 2019 16:02

main dg example page feedback

2ba28a2

Eui prefix all the things to be consistant. Adjust the data grid docs…

3b0602e

… to match

rewrite intro based on feedback

90dc785

more tweaking of words

b78ecae

rename toolbarDisplay->toolbarVisibility

41d81e2

in memory docs reworked to four examples

69704fd

clean up core example

18ab582

snide mentioned this pull request Oct 23, 2019

[EuiDataGrid] Add className to EuiDataGridSchemaDetector #2475

Closed

snide added 2 commits October 22, 2019 23:46

data grid styling snippets

f3749f6

fix prop list

1a023a1

Minor grammar edits

6b6d45d

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

Added isDetails prop to renderCellValue, reducing the use case for ex…

ab504f3

…pansionFormatters. Speaking of those, expansionFormatter(s) has been renamed to popoverContent(s) and now recieve the rendered cell div in addition to the renderCellValue ReactElement

Merge branch 'feature/euidatagrid-proptypes' into cp/feature/euidatag…

d0bd3d5

…rid-proptypes

Merge pull request #13 from cchaos/cp/feature/euidatagrid-proptypes

833067e

Minor grammar edits

fix docs renaming, fix css

060ca87

last docs edit seems fitting

c973a89

somewhat decent attempt at putting classnames on schemas

26542d7

Revert "somewhat decent attempt at putting classnames on schemas"

6183abf

This reverts commit 26542d7.

cchaos approved these changes Oct 23, 2019

View reviewed changes

chandlerprall merged commit 01ae4b9 into elastic:feature/euidatagrid Oct 23, 2019

chandlerprall deleted the feature/euidatagrid-proptypes branch October 23, 2019 20:31

snide added the typescript label Apr 17, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiDataGrid] Docs and autodocs #2449

[EuiDataGrid] Docs and autodocs #2449

chandlerprall commented Oct 17, 2019 •

edited by snide

Loading

snide commented Oct 18, 2019

snide commented Oct 18, 2019

snide commented Oct 18, 2019

thompsongl left a comment •

edited

Loading

snide commented Oct 18, 2019

snide commented Oct 18, 2019

snide left a comment

snide commented Oct 18, 2019

snide commented Oct 20, 2019

snide commented Oct 20, 2019

cchaos left a comment

cchaos left a comment

snide commented Oct 22, 2019

snide commented Oct 23, 2019 •

edited

Loading

cchaos commented Oct 23, 2019

cchaos left a comment

[EuiDataGrid] Docs and autodocs #2449

[EuiDataGrid] Docs and autodocs #2449

Conversation

chandlerprall commented Oct 17, 2019 • edited by snide Loading

Summary

Autodocs changes

Small EuiDataGrid changes made during docs creation

TODO: Bugs noticed when writing docs

Checklist

snide commented Oct 18, 2019

snide commented Oct 18, 2019

snide commented Oct 18, 2019

thompsongl left a comment • edited Loading

Choose a reason for hiding this comment

snide commented Oct 18, 2019

snide commented Oct 18, 2019

snide left a comment

Choose a reason for hiding this comment

snide commented Oct 18, 2019

snide commented Oct 20, 2019

snide commented Oct 20, 2019

cchaos left a comment

Choose a reason for hiding this comment

cchaos left a comment

Choose a reason for hiding this comment

snide commented Oct 22, 2019

snide commented Oct 23, 2019 • edited Loading

cchaos commented Oct 23, 2019

cchaos left a comment

Choose a reason for hiding this comment

chandlerprall commented Oct 17, 2019 •

edited by snide

Loading

thompsongl left a comment •

edited

Loading

snide commented Oct 23, 2019 •

edited

Loading