-
Notifications
You must be signed in to change notification settings - Fork 829
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.
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
[Data Grid] - Styling built into data grid, full screen mode #2230
Conversation
WIP: pass `setGridStyles` through
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. |
@@ -9,6 +9,14 @@ import DataGrid from './datagrid'; | |||
const dataGridSource = require('!!raw-loader!./datagrid'); | |||
const dataGridHtml = renderToHtml(DataGrid); | |||
|
|||
// import DataGridContainer from './container'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
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.) |
} | ||
|
||
.euiDataGridRowCell__content { | ||
@include euiTextTruncate; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@snide will this be resolved by your upcoming stuff around popping out the active cell?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we at least use EuiInnerText
to add the title
attribute to the cell contents?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
I think the escape-from-cell should take precedence and that function should stop the event's propagation. |
button={ | ||
<EuiButtonEmpty | ||
size="xs" | ||
iconType="tableDensityComfortable" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would use the normal density icon here, or swap it out for the one that's been selected.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Confused by this comment. Are you talking about order?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed performance & tests. @myasonik my test fixes involved moving |
grid roles all work! Only thing is to move the |
Good catch, pushed! |
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. |
@snide pushed fix for the popover test |
…ore feedback to devs and make them more accurate
@snide pushed some updated types for EuiI18n when using |
} | ||
|
||
.euiDataGrid__pagination { | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: extra space
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>
Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>
Merging this on green CI. Docs updated. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
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
propThe 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
EuiFocusTrap
to properly use it's{...rest}
spread, but in makinglockProps
usage correct, a lot of our tests broke. I don't know how to fix it.Checklist
Props have proper autodocsAdded documentation examplesChecked for breaking changes and labeled appropriatelyA changelog entry exists and is marked appropriately