Skip to content

Commit

Permalink
[EuiDataGrid] Provide row elements to wrap cells (#5285)
Browse files Browse the repository at this point in the history 
* Provide rows for datagrid cells to be owned by

* changelog

* undoing things

* working except virtualized container

* working row wrapper implementation

* Create datagrid row elements on-demand and render cells via portals

* Provide rows for datagrid cells to be owned by

* changelog

* undoing things

* working except virtualized container

* working row wrapper implementation

* Create datagrid row elements on-demand and render cells via portals

* Small style cleanup

* updated changelog

* fixing a bad changelog merge

* oh that style was important

* Update src/components/datagrid/body/data_grid_row_manager.ts

Co-authored-by: Constance <constancecchen@users.noreply.github.com>

* Update src/components/datagrid/data_grid_types.ts

Co-authored-by: Constance <constancecchen@users.noreply.github.com>

* Ensure unique ID in combobox with prepended or appended labels (#5229)

* Making an explicit check for ID prop in EUI Combobox

* Checking for a user-passed ID prop
* If no user-passed ID, we'll use the `rootId()` class method to set one
* Prepend and append props need an ID to relate label to the input

* Adding example for Combobox with prepended label
* Confirmed the label `for` attribute is referencing input `id`
* Added styles to round the edges of the child `<div>` when we prepend a
  label
* Bumped package.json

* Adding CHANGELOG entry and bumping version

* Update combo_box.tsx

* Updating styles to match other forms with prepend and apppend.

* Finishing Combobox CSS and test updates
* Simplified the Amsterdam overrides for prepended / appended labels
* Added conditional classes to `combo_box.tsx`
* Added unit tests for user passed ID, prepended and appended classes

* Reordering props in child component.

* Final adjustment to ID check in ComboBox

* Final updates to styling and documentation
* Added CSS rules for compressed, prepend and append border radius
* Updated the Display Toggles to include append
* Removed a duplicated instruction paragraph
* Simplified the logic for a unique ID in combobox.ts

* Adding Combobox unique ID to master changelog

* Updated Form Control Layout SCSS
* The borders were still rounded with prepend and append enabled
* Added two more rules to make borders square for full height and compressed

* Move to _combo_box.scss

Co-authored-by: cchaos <caroline.horn@elastic.co>

* update i18ntokens

* 40.0.0

* Updated documentation.

* Add combined Jest+Cypress code coverage reports (#5262)

* Install Cypress code coverage dependencies

* Set up required babel+istanbul config

* Set up Cypress code coverage config

@see https://github.com/cypress-io/code-coverage#instrument-unit-tests

* Add script for combining cypress & jest code coverage
-into a single json & html report

* Misc cleanup/ignores

- Ignore new `.nyc_output` dir generated by cypress/istanbul

- Improve Jest config collectCoverageFrom !ignores:
  - DRY out component+services folder patterns with a {,} glob
  - Ignore new Cypress .spec files and .testenv files for jest coverage

- eslintignore the cypress folder, since they're all .js anyway and it has a decent amount of idiosyncracies
+ cleanup unused eslint-disable
+ cleanup cypress comment boilerplate
+ remove unused paths from webpack config

* Add wiki documentation

* [PR feedback] Move nyc config to own file

* [PR feedback] Switch combine coverage script to .sh

* [EuiMarkdownEditor] Add `remark-breaks` and line break plugin (#5272)

* Add remark-breaks and line break plugin to MarkdownEditor

* Update changelog

* [Docs] Separated out Borders to its own page & [EuiTableRowCell] fixes (#5283)

* Moved Border tokens to its own page
* Figured out a way to get subsections in the sidenav working
* Added the new `_values` under `customizing/`

* [EuiTableRowCell] Actually support `valign` property manually
* [EuiTable*] Fixing some props and mobile options
* Slightly better responsive table styles

* Fix CL from #5272

* [Docs] Update EuiDatePicker types (#5318)

* omit unsupported types

* resolve console errors

* CL

* [Cypress] Add flakey test retries + harden intermittent context menu failures (#5317)

* Add Cypress failed test retries to CI run mode

* Increase cy.wait on flaky context menu tests (just in case)

* More hardening

* [Docs] Fix Colors guidelines (#5316)

* use useJsonVars

* use variable

* Update dependency @elastic/charts to ^38.1.0 (#5321)

* PR feedback

* Added a cypress test for datagrid row rendering

* Revert changes(?) to docs/

* revert changelog reformats

* re-ignore a couple datagrid example pages when running a11y tests

* Alternate way to know if the datagrid cells have rendered

* PR feedback

* changelog

Co-authored-by: Constance <constancecchen@users.noreply.github.com>
Co-authored-by: Trevor Pierce <1Copenut@users.noreply.github.com>
Co-authored-by: cchaos <caroline.horn@elastic.co>
Co-authored-by: ian moersen <ian@union.io>
Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
  • Loading branch information
@chandlerprall @1Copenut
@i-a-n @cchaos @thompsongl @renovate
8 people authored Nov 5, 2021
1 parent 6eb3b6f commit 51cfbb7
Show file tree
Hide file tree
Showing 18 changed files with 255 additions and 18 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
**Bug fixes**

- Fixed an `EuiDataGrid` race condition where grid rows had incorrect heights if loaded in before CSS ([#5284](https://github.com/elastic/eui/pull/5284))
- Fixed an accessibility issue where `EuiDataGrid` cells weren't owned by `role=row` elements ([#5285](https://github.com/elastic/eui/pull/5285))

## [`41.0.0`](https://github.com/elastic/eui/tree/v41.0.0)

Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@
"test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.json",
"test-a11y": "node ./scripts/a11y-testing",
"test-staged": "yarn lint && node scripts/test-staged.js",
"test-cypress": "cross-env NODE_ENV=cypress_test cypress run-ct",
"test-cypress-dev": "cross-env NODE_ENV=cypress_test cypress open-ct",
"test-cypress": "cross-env BABEL_MODULES=false NODE_ENV=cypress_test cypress run-ct",
"test-cypress-dev": "cross-env BABEL_MODULES=false NODE_ENV=cypress_test cypress open-ct",
"combine-test-coverage": "sh ./scripts/combine-coverage.sh",
"start-test-server": "BABEL_MODULES=false NODE_ENV=puppeteer NODE_OPTIONS=--max-old-space-size=4096 webpack-dev-server --config src-docs/webpack.config.js --port 9999",
"yo-component": "yo ./generator-eui/app/component.js",
Expand Down
6 changes: 0 additions & 6 deletions scripts/a11y-testing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,7 @@ const docsPages = async (root, page) => {
`${root}#/forms/color-selection`,
`${root}#/forms/date-picker`,
`${root}#/forms/super-date-picker`,
`${root}#/tabular-content/data-grid`,
`${root}#/tabular-content/data-grid-in-memory-settings`,
`${root}#/tabular-content/data-grid-schemas-and-popovers`,
`${root}#/tabular-content/data-grid-focus`,
`${root}#/tabular-content/data-grid-styling-and-control`,
`${root}#/tabular-content/data-grid-control-columns`,
`${root}#/tabular-content/data-grid-footer-row`,
`${root}#/tabular-content/data-grid-virtualization`,
`${root}#/tabular-content/data-grid-row-heights-options`,
];
Expand Down
34 changes: 34 additions & 0 deletions src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1037,6 +1037,7 @@ Array [
tabindex="0"
>
<div
data-test-subj="euiDataGridBody"
style="width:100%;height:100%;overflow:hidden"
>
<div
Expand Down Expand Up @@ -1130,6 +1131,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
data-gridcell-id="0,0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:0px;height:34px;width:100px"
Expand Down Expand Up @@ -1157,6 +1159,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
data-gridcell-id="0,1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:100px;top:0px;height:34px;width:100px"
Expand Down Expand Up @@ -1184,6 +1187,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
data-gridcell-id="1,0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:34px;height:34px;width:100px"
Expand Down Expand Up @@ -1211,6 +1215,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
data-gridcell-id="1,1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:100px;top:34px;height:34px;width:100px"
Expand Down Expand Up @@ -1238,6 +1243,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
data-gridcell-id="2,0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:68px;height:34px;width:100px"
Expand Down Expand Up @@ -1265,6 +1271,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
data-gridcell-id="2,1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:100px;top:68px;height:34px;width:100px"
Expand Down Expand Up @@ -1433,6 +1440,7 @@ Array [
tabindex="0"
>
<div
data-test-subj="euiDataGridBody"
style="width:100%;height:100%;overflow:hidden"
>
<div
Expand Down Expand Up @@ -1556,6 +1564,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--firstColumn euiDataGridRowCell--controlColumn"
data-gridcell-id="0,0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:0px;height:34px;width:50px"
Expand Down Expand Up @@ -1602,6 +1611,7 @@ Array [
</div>
<div
class="euiDataGridRowCell"
data-gridcell-id="0,1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:50px;top:0px;height:34px;width:100px"
Expand Down Expand Up @@ -1629,6 +1639,7 @@ Array [
</div>
<div
class="euiDataGridRowCell"
data-gridcell-id="0,2"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:150px;top:0px;height:34px;width:100px"
Expand Down Expand Up @@ -1656,6 +1667,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
data-gridcell-id="0,3"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:250px;top:0px;height:34px;width:50px"
Expand Down Expand Up @@ -1702,6 +1714,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn euiDataGridRowCell--controlColumn"
data-gridcell-id="1,0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:34px;height:34px;width:50px"
Expand Down Expand Up @@ -1748,6 +1761,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--stripe"
data-gridcell-id="1,1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:50px;top:34px;height:34px;width:100px"
Expand Down Expand Up @@ -1775,6 +1789,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--stripe"
data-gridcell-id="1,2"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:150px;top:34px;height:34px;width:100px"
Expand Down Expand Up @@ -1802,6 +1817,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
data-gridcell-id="1,3"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:250px;top:34px;height:34px;width:50px"
Expand Down Expand Up @@ -1848,6 +1864,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--firstColumn euiDataGridRowCell--controlColumn"
data-gridcell-id="2,0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:68px;height:34px;width:50px"
Expand Down Expand Up @@ -1894,6 +1911,7 @@ Array [
</div>
<div
class="euiDataGridRowCell"
data-gridcell-id="2,1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:50px;top:68px;height:34px;width:100px"
Expand Down Expand Up @@ -1921,6 +1939,7 @@ Array [
</div>
<div
class="euiDataGridRowCell"
data-gridcell-id="2,2"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:150px;top:68px;height:34px;width:100px"
Expand Down Expand Up @@ -1948,6 +1967,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
data-gridcell-id="2,3"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:250px;top:68px;height:34px;width:50px"
Expand Down Expand Up @@ -2132,6 +2152,7 @@ Array [
tabindex="0"
>
<div
data-test-subj="euiDataGridBody"
style="width:100%;height:100%;overflow:hidden"
>
<div
Expand Down Expand Up @@ -2227,6 +2248,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
data-gridcell-id="0,0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:0px;height:34px;width:100px"
Expand Down Expand Up @@ -2254,6 +2276,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
data-gridcell-id="0,1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:100px;top:0px;height:34px;width:100px"
Expand Down Expand Up @@ -2281,6 +2304,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
data-gridcell-id="1,0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:34px;height:34px;width:100px"
Expand Down Expand Up @@ -2308,6 +2332,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
data-gridcell-id="1,1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:100px;top:34px;height:34px;width:100px"
Expand Down Expand Up @@ -2335,6 +2360,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
data-gridcell-id="2,0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:68px;height:34px;width:100px"
Expand Down Expand Up @@ -2362,6 +2388,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
data-gridcell-id="2,1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:100px;top:68px;height:34px;width:100px"
Expand Down Expand Up @@ -2527,6 +2554,7 @@ Array [
tabindex="0"
>
<div
data-test-subj="euiDataGridBody"
style="width:100%;height:100%;overflow:hidden"
>
<div
Expand Down Expand Up @@ -2620,6 +2648,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
data-gridcell-id="0,0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:0px;height:34px;width:100px"
Expand Down Expand Up @@ -2647,6 +2676,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
data-gridcell-id="0,1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:100px;top:0px;height:34px;width:100px"
Expand Down Expand Up @@ -2674,6 +2704,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
data-gridcell-id="1,0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:34px;height:34px;width:100px"
Expand Down Expand Up @@ -2701,6 +2732,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
data-gridcell-id="1,1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:100px;top:34px;height:34px;width:100px"
Expand Down Expand Up @@ -2728,6 +2760,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
data-gridcell-id="2,0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:68px;height:34px;width:100px"
Expand Down Expand Up @@ -2755,6 +2788,7 @@ Array [
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
data-gridcell-id="2,1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:100px;top:68px;height:34px;width:100px"
Expand Down
1 change: 1 addition & 0 deletions src/components/datagrid/_data_grid_data_row.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.euiDataGridRow {
// needed for footer cells to correctly position
display: flex;
}

Expand Down
3 changes: 3 additions & 0 deletions src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

exports[`EuiDataGridBody renders 1`] = `
<div
data-test-subj="euiDataGridBody"
style="width:100%;height:100%;overflow:hidden"
>
<div
Expand Down Expand Up @@ -89,6 +90,7 @@ exports[`EuiDataGridBody renders 1`] = `
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--boolean euiDataGridRowCell--firstColumn"
data-gridcell-id="0,0"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:0;top:0px;height:34px;width:20px"
Expand Down Expand Up @@ -118,6 +120,7 @@ exports[`EuiDataGridBody renders 1`] = `
</div>
<div
class="euiDataGridRowCell euiDataGridRowCell--string euiDataGridRowCell--lastColumn"
data-gridcell-id="0,1"
data-test-subj="dataGridRowCell"
role="gridcell"
style="position:absolute;left:20px;top:0px;height:34px"
Expand Down
1 change: 1 addition & 0 deletions src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ exports[`EuiDataGridCell renders 1`] = `
>
<div
className="euiDataGridRowCell"
data-gridcell-id="0,0"
data-test-subj="dataGridRowCell"
onBlur={[Function]}
onFocus={[Function]}
Expand Down
Loading

0 comments on commit 51cfbb7

Please sign in to comment.