[Data Grid] Allow adding custom actions to DataGridCells and cell popover #3668

kertal · 2020-06-29T11:07:27Z

Summary

This PR allows to specify custom actions for data grid cell by column. These actions are displayed when the mouse hovers the cell and clickable, and also displayed when the cell gains keyboard focus and can be triggered by keyboard actions in the popover.

Action triggered by mouse click

Action triggered by keyboard enter

Checklist

Check against all themes for compatibility in both light and dark modes
Checked in mobile
Checked in Firefox and Safari
Props have proper autodocs
Added documentation
~~- [ ] Checked Code Sandbox works for the any docs 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

kibanamachine · 2020-06-29T11:30:24Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3668/

kertal · 2020-06-29T13:22:35Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3668/

this is fantastic!

snide · 2020-07-02T16:21:18Z

@kertal I noticed you have this in draft mode? Do you want a review?

kertal · 2020-07-02T20:23:07Z

@kertal I noticed you have this in draft mode? Do you want a review?

thx @snide currently testing this in the Discover PR which might lead to a change, but I'm out tomorrow, so let's finish it next week,

kertal · 2020-07-08T06:32:13Z

@kertal I noticed you have this in draft mode? Do you want a review?

thx @snide currently testing this in the Discover PR which might lead to a change, but I'm out tomorrow, so let's finish it next week,

@snide I've experienced a performance when using this PR's modification in my Discover PR in Chrome. Start of the week it was gone, but now I know why, been using my non-retina monitor to debug it, so here is the issue how to reproduce it in the current EUI version: #3705

…-29-datagrid-expandbutton-hover

kibanamachine · 2020-08-04T14:19:25Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3668/

kertal · 2020-08-04T14:23:07Z

since #3726 was merged, performance is fine, so this is now ready for review

…-hover

cchaos · 2020-08-18T19:31:26Z

I can get this into a weird state (maybe it's like a fake focused state or something) where, if I click the button to open the popover, then hit esc, It's still showing the popout button but without any space between it and the content until I hover over it.

kibanamachine · 2020-08-18T19:50:05Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3668/

kertal · 2020-08-20T05:03:43Z

I can get this into a weird state (maybe it's like a fake focused state or something) where, if I click the button to open the popover, then hit esc, It's still showing the popout button but without any space between it and the content until I hover over it.

@cchaos I can't reproduce (tested in the Preview documentation change), in which browser do you experience this problem?

cchaos · 2020-08-25T21:09:03Z

I was also on the preview build and using Chrome. I can reliably reproduce this with the following steps:

Hover and click on the popout to see the popover
Hit esc which closes the popover
Without clicking on anything else, just start rolling the mouse over other cells then back to the original cell

kertal · 2020-08-26T11:40:39Z

@cchaos thx! I could reproduce it now!

…thub.com:kertal/eui into kertal-pr-2020-06-29-datagrid-expandbutton-hover

kibanamachine · 2020-08-26T21:17:15Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3668/

kertal · 2020-08-27T05:31:36Z

I was also on the preview build and using Chrome. I can reliably reproduce this with the following steps:

Hover and click on the popout to see the popover

Hit esc which closes the popover

Without clicking on anything else, just start rolling the mouse over other cells then back to the original cell

So what happens is, that after closing the popover, which owns focus, focuses the expand button, and therefore this is displayed, changed the CSS to prevent this. thx for catching this!

kertal · 2020-10-13T16:00:05Z

so how would we handle this, if we would use the CustomAction approach?

The provided Component could be a small wrapper around EuiButtonIcon, (props) => <EuiButtonIcon {...props} aria-hidden/>

@chandlerprall I changed and it works! Hopefully last problem: how to satisfy TypeScript for the Component prop? Here's the draft that makes TypeScript cry.

export interface EuiDataGridColumnCellActionProps {
  /**
   * The index of the row that contains cell's data
   */
  rowIndex: number;
  /**
   * The id of the column that contains the cell's data
   */
  columnId: string;
  /**
   * React component representing the action displayed in the cell
   */
  Component: JSXElementConstructor<EuiButtonIconProps | EuiButtonEmptyProps>;
  /**
   * Determines whether the cell's action is displayed expanded (in the Popover)
   */
  isExpanded: boolean;
}

kibanamachine · 2020-10-13T17:32:55Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3668/

kibanamachine · 2020-10-13T18:30:56Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3668/

kibanamachine · 2020-10-14T09:11:38Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3668/

…-29-datagrid-expandbutton-hover

kibanamachine · 2020-10-14T12:23:48Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3668/

kibanamachine · 2020-10-14T12:51:11Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3668/

kertal · 2020-10-14T14:28:06Z

jenkins test this

kibanamachine · 2020-10-14T14:47:36Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3668/

wiki/automated-accessibility-testing.md

kibanamachine · 2020-10-14T19:09:48Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3668/

chandlerprall

Changes LGTM; pulled & tested locally. 🎉

andreadelrio

@kertal Row counter is starting at 0 for "paint", sent a suggestion.

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

Co-authored-by: Andrea Del Rio <[email protected]>

andreadelrio

LGTM 🎉

kibanamachine · 2020-10-19T20:34:35Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3668/

Modify SCSS to also show expand button on hover

558dcf9

kertal added the data grid label Jun 29, 2020

kertal self-assigned this Jun 29, 2020

kertal marked this pull request as draft June 29, 2020 11:07

kertal requested a review from chandlerprall June 29, 2020 12:14

kertal mentioned this pull request Jun 30, 2020

[Discover] EuiDataGrid Implementation elastic/kibana#67259

Merged

13 tasks

kertal mentioned this pull request Aug 3, 2020

[DataGrid] Add will-change to CSS to improve performance in chrome full screen mode #3726

Merged

2 tasks

kertal added 2 commits August 4, 2020 15:03

Merge remote-tracking branch 'upstream/master' into kertal-pr-2020-06…

f693220

…-29-datagrid-expandbutton-hover

Adapt CHANGELOG.md

21af3b4

kertal marked this pull request as ready for review August 4, 2020 14:21

cchaos self-requested a review August 18, 2020 16:59

Merge branch 'master' into kertal-pr-2020-06-29-datagrid-expandbutton…

f8e5efb

…-hover

kertal added 3 commits August 26, 2020 18:09

Merge master/fix conflicts

30d5670

Fix focused expand button troubles

0132406

Merge branch 'kertal-pr-2020-06-29-datagrid-expandbutton-hover' of gi…

444fe31

…thub.com:kertal/eui into kertal-pr-2020-06-29-datagrid-expandbutton-hover

Prevent color from .euiButtonIcon--text:focus

33d0df8

refactor like suggested in review

05000b7

small typo check

5f2a53a

Fix tests

603c621

kertal added 3 commits October 14, 2020 13:39

Merge remote-tracking branch 'upstream/master' into kertal-pr-2020-06…

b4602ef

…-29-datagrid-expandbutton-hover

Merge and fix conflicts

cc3b8d0

Adapt CHANGELOG.md

859107b

Adapt documentation

6c256b7

myasonik reviewed Oct 14, 2020

View reviewed changes

wiki/automated-accessibility-testing.md Outdated Show resolved Hide resolved

revert typo

7f23aa3

chandlerprall approved these changes Oct 19, 2020

View reviewed changes

andreadelrio requested changes Oct 19, 2020

View reviewed changes

src-docs/src/views/datagrid/column_cell_actions.js Outdated Show resolved Hide resolved

src-docs/src/views/datagrid/column_cell_actions.js Outdated Show resolved Hide resolved

andreadelrio self-requested a review October 19, 2020 20:03

andreadelrio requested changes Oct 19, 2020

View reviewed changes

src-docs/src/views/datagrid/column_cell_actions.js Outdated Show resolved Hide resolved

kertal and others added 3 commits October 19, 2020 22:12

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

4bebc51

Co-authored-by: Andrea Del Rio <[email protected]>

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

0415860

Co-authored-by: Andrea Del Rio <[email protected]>

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

183d8d3

Co-authored-by: Andrea Del Rio <[email protected]>

kertal requested a review from andreadelrio October 19, 2020 20:14

andreadelrio approved these changes Oct 19, 2020

View reviewed changes

kertal merged commit 5226ddb into elastic:master Oct 20, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Data Grid] Allow adding custom actions to DataGridCells and cell popover #3668

[Data Grid] Allow adding custom actions to DataGridCells and cell popover #3668

kertal commented Jun 29, 2020 •

edited

Loading

kibanamachine commented Jun 29, 2020

kertal commented Jun 29, 2020

snide commented Jul 2, 2020

kertal commented Jul 2, 2020

kertal commented Jul 8, 2020

kibanamachine commented Aug 4, 2020

kertal commented Aug 4, 2020

cchaos commented Aug 18, 2020

kibanamachine commented Aug 18, 2020

kertal commented Aug 20, 2020

cchaos commented Aug 25, 2020

kertal commented Aug 26, 2020

kibanamachine commented Aug 26, 2020

kertal commented Aug 27, 2020

kertal commented Oct 13, 2020

kibanamachine commented Oct 13, 2020

kibanamachine commented Oct 13, 2020

kibanamachine commented Oct 14, 2020

kibanamachine commented Oct 14, 2020

kibanamachine commented Oct 14, 2020

kertal commented Oct 14, 2020

kibanamachine commented Oct 14, 2020

kibanamachine commented Oct 14, 2020

chandlerprall left a comment

andreadelrio left a comment •

edited

Loading

andreadelrio left a comment

kibanamachine commented Oct 19, 2020

[Data Grid] Allow adding custom actions to DataGridCells and cell popover #3668

[Data Grid] Allow adding custom actions to DataGridCells and cell popover #3668

Conversation

kertal commented Jun 29, 2020 • edited Loading

Summary

Action triggered by mouse click

Action triggered by keyboard enter

Checklist

kibanamachine commented Jun 29, 2020

kertal commented Jun 29, 2020

snide commented Jul 2, 2020

kertal commented Jul 2, 2020

kertal commented Jul 8, 2020

kibanamachine commented Aug 4, 2020

kertal commented Aug 4, 2020

cchaos commented Aug 18, 2020

kibanamachine commented Aug 18, 2020

kertal commented Aug 20, 2020

cchaos commented Aug 25, 2020

kertal commented Aug 26, 2020

kibanamachine commented Aug 26, 2020

kertal commented Aug 27, 2020

kertal commented Oct 13, 2020

kibanamachine commented Oct 13, 2020

kibanamachine commented Oct 13, 2020

kibanamachine commented Oct 14, 2020

kibanamachine commented Oct 14, 2020

kibanamachine commented Oct 14, 2020

kertal commented Oct 14, 2020

kibanamachine commented Oct 14, 2020

kibanamachine commented Oct 14, 2020

chandlerprall left a comment

Choose a reason for hiding this comment

andreadelrio left a comment • edited Loading

Choose a reason for hiding this comment

andreadelrio left a comment

Choose a reason for hiding this comment

kibanamachine commented Oct 19, 2020

kertal commented Jun 29, 2020 •

edited

Loading

andreadelrio left a comment •

edited

Loading