[Data Grid] Grid style options #2176

snide · 2019-07-28T18:37:28Z

Summary

Part of #2177

Adds types and a system for changing the table styling.

TODO

Headers
Clean up some of the look at feel
Code cleanup
~~Make some mappings against the opens... aka "compact", "comfortable"...etc.~~ Next PR. It will use this interface.

Checklist

Checked in dark mode
Checked in mobile
Checked in IE11 and Firefox
Props have proper autodocs TS issue here we'll need to fix before this component is consumable.
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~~

cchaos

Mostly comments on the mixins and wording but the styles themselves are great. Also take it or leave it with all the comments. You might have plans for further use of them that I'm not aware of.

One oddity that I noticed is that when there's a row highlight, and the table isn't the full width of the container, you can still see the rows highlighting even if the mouse isn't hovering the table.

cchaos · 2019-08-01T17:38:07Z

src/components/datagrid/_mixins.scss

+// All this does is take some of the above and make a sibling selector
+// selector(headerMinimal, fontSizeLarge)
+// will produce `.euiDataGrid--headerMinimal.euiDataGrid--fontSizeLarge
+@function selector($selectorKeys...) {


This feels both very useful and overkill at the same time. Haha. But mainly, don't forget that even functions are now available everywhere so you might want to name this something EuiDataGrid specific since eyou have the $euiDataGridPrefix hard-coded in there.

Otherwise, maybe consider making this a global function where you can also pass the prefix.

So I added this last night because I was thinking... "What will @cchaos want me to change". And I thought... she's gonna want me to change all this duplicative nesting and writing out of the same selectors over and over.

I then added the selector check because I was mistyping stuff very commonly, and i figured at the very least, if someone ever touches this. They'll get errors when they use what looks like a complicated mixin / nest structure.

I agree with making it a global and had a similar thought because it's generically useful. I might do that later, because I want to live with it a bit to see if I like it.

I would probably still change the name (even if it changes back later) to something more datagrid specific in case it's forgotten in the future.

src/components/datagrid/_data_grid_data_row.scss

src/components/datagrid/_data_grid_header_row.scss

src/components/datagrid/data_grid.tsx

src/global_styling/variables/_colors.scss

src/themes/eui/eui_colors_dark.scss

snide · 2019-08-01T23:25:36Z

@cchaos Feedback addressed. I can't think of a good way to fix the "secret" row hover problem yet. I'm still fairly amazed this inline-flex solution works, but it comes with the caveat of needing some wrapping containers with widths so the automatic overflows works. Ultimately, I'd like to work with @chandlerprall to get the columns to auto-size to fill their container on initial load so it's probably a moot point long term.

Mixin stuff I'll monitor. It's still early on those.

cchaos

The dark highlight works better (for now), I'll agree it needs some work. It's also possible that it's not yellow in dark mode but like a highlighter green or something. But we can work that out later.

cchaos · 2019-08-02T12:58:07Z

src/components/datagrid/_mixins.scss

+// All this does is take some of the above and make a sibling selector
+// selector(headerMinimal, fontSizeLarge)
+// will produce `.euiDataGrid--headerMinimal.euiDataGrid--fontSizeLarge
+@function selector($selectorKeys...) {


I would probably still change the name (even if it changes back later) to something more datagrid specific in case it's forgotten in the future.

chandlerprall

code changes LGTM

* 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

snide added 8 commits July 26, 2019 10:54

sibling selector for user select: none

ae70c48

mappings set up

2a21f25

borders and font sizes work

1c600bc

paddings and striping

0163e32

table styling docs

a951099

cleanup and headers

c7182ea

header conflicts addressed

147eea4

some fancy mixins to avoid dave typos

597d4d5

snide requested review from chandlerprall and cchaos August 1, 2019 07:35

dark higlight

6e82935

cchaos reviewed Aug 1, 2019

View reviewed changes

snide added 2 commits August 1, 2019 15:54

address feedback

03f7749

whoops

d996416

snide requested a review from cchaos August 1, 2019 23:25

cchaos approved these changes Aug 2, 2019

View reviewed changes

chandlerprall approved these changes Aug 2, 2019

View reviewed changes

snide added 3 commits August 2, 2019 08:08

merge master

e313c51

mixin naming

9c9aa22

fix focus issue with striping

1b5e0d7

snide mentioned this pull request Aug 2, 2019

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

Closed

25 tasks

snide merged commit 2a37c8d into elastic:feature/euidatagrid Aug 2, 2019

snide deleted the grid/design_2 branch August 2, 2019 15:37

chandlerprall mentioned this pull request Oct 9, 2019

[WIP] EuiDataGrid #2165

Merged

10 tasks

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

[Data Grid] Grid style options #2176

[Data Grid] Grid style options #2176

snide commented Jul 28, 2019 •

edited

Loading

cchaos left a comment

cchaos Aug 1, 2019

snide Aug 1, 2019

cchaos Aug 2, 2019

snide commented Aug 1, 2019

cchaos left a comment

cchaos Aug 2, 2019

chandlerprall left a comment

[Data Grid] Grid style options #2176

[Data Grid] Grid style options #2176

Conversation

snide commented Jul 28, 2019 • edited Loading

Summary

TODO

Checklist

cchaos left a comment

Choose a reason for hiding this comment

cchaos Aug 1, 2019

Choose a reason for hiding this comment

snide Aug 1, 2019

Choose a reason for hiding this comment

cchaos Aug 2, 2019

Choose a reason for hiding this comment

snide commented Aug 1, 2019

cchaos left a comment

Choose a reason for hiding this comment

cchaos Aug 2, 2019

Choose a reason for hiding this comment

chandlerprall left a comment

Choose a reason for hiding this comment

snide commented Jul 28, 2019 •

edited

Loading