diff --git a/CHANGELOG.md b/CHANGELOG.md index afb055cb2a2..c7739225ab9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - Added `success` and `warning` colors to `EuiButtonEmpty` ([#4325](https://github.com/elastic/eui/pull/4325)) - Added a sorting indicator on the `EuiDataGridColumn` which indicates the sorting direction and is being displayed only when the column is sorted ([#4343](https://github.com/elastic/eui/pull/4343)) - Added `disabled` and `loading` `status` to `EuiStep` ([#4338](https://github.com/elastic/eui/pull/4338)) +- Added `closePopover` prop to `EuiDataGridColumnCellActionProps` ([#4346](https://github.com/elastic/eui/pull/4346)) **Bug fixes** diff --git a/src-docs/src/views/datagrid/column_cell_actions.js b/src-docs/src/views/datagrid/column_cell_actions.js index c544773dc3e..aead8202688 100644 --- a/src-docs/src/views/datagrid/column_cell_actions.js +++ b/src-docs/src/views/datagrid/column_cell_actions.js @@ -22,13 +22,14 @@ const columns = [ id: 'email', isSortable: true, cellActions: [ - ({ rowIndex, columnId, Component }) => { + ({ rowIndex, columnId, Component, closePopover }) => { const row = ++rowIndex; return ( - alert(`Love sent from row ${row}, column "${columnId}"`) - } + onClick={() => { + alert(`Love sent from row ${row}, column "${columnId}"`); + closePopover(); + }} iconType="heart" aria-label={`Send love to ${row}, column "${columnId}" `}> Send love diff --git a/src-docs/src/views/datagrid/datagrid_styling_example.js b/src-docs/src/views/datagrid/datagrid_styling_example.js index f11aad3f04d..6ec3bb3dcf6 100644 --- a/src-docs/src/views/datagrid/datagrid_styling_example.js +++ b/src-docs/src/views/datagrid/datagrid_styling_example.js @@ -345,9 +345,10 @@ export const DataGridStylingExample = {

Below, the email and city columns provide 1{' '} cellAction each, while the country column - provides 2 cellActions. The city column shows - another action with different alert when it's clicked in the - popover. + provides 2 cellActions. +
+ The email column cell action closes the popover if it's + expanded through the closePopover prop.

), diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx index c3d83290a9d..aaf3a41a50f 100644 --- a/src/components/datagrid/data_grid_cell.tsx +++ b/src/components/datagrid/data_grid_cell.tsx @@ -461,6 +461,7 @@ export class EuiDataGridCell extends Component< rowIndex={rowIndex} column={column} popoverIsOpen={this.state.popoverIsOpen} + closePopover={() => this.setState({ popoverIsOpen: false })} onExpandClick={() => { this.setState(({ popoverIsOpen }) => ({ popoverIsOpen: !popoverIsOpen, diff --git a/src/components/datagrid/data_grid_cell_buttons.tsx b/src/components/datagrid/data_grid_cell_buttons.tsx index ab9520590dc..ee01e8fe6a9 100644 --- a/src/components/datagrid/data_grid_cell_buttons.tsx +++ b/src/components/datagrid/data_grid_cell_buttons.tsx @@ -28,11 +28,13 @@ import { EuiButtonIcon, EuiButtonIconProps } from '../button/button_icon'; export const EuiDataGridCellButtons = ({ popoverIsOpen, + closePopover, onExpandClick, column, rowIndex, }: { popoverIsOpen: boolean; + closePopover: () => void; onExpandClick: () => void; column?: EuiDataGridColumn; rowIndex: number; @@ -84,6 +86,7 @@ export const EuiDataGridCellButtons = ({ columnId={column.id} Component={ButtonComponent} isExpanded={false} + closePopover={closePopover} /> ); } diff --git a/src/components/datagrid/data_grid_cell_popover.tsx b/src/components/datagrid/data_grid_cell_popover.tsx index 288ae7dce8f..5f421a5e08b 100644 --- a/src/components/datagrid/data_grid_cell_popover.tsx +++ b/src/components/datagrid/data_grid_cell_popover.tsx @@ -104,6 +104,7 @@ export function EuiDataGridCellPopover({ )} isExpanded={true} + closePopover={closePopover} /> ); diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts index 25e2884b72b..11ee88fdd17 100644 --- a/src/components/datagrid/data_grid_types.ts +++ b/src/components/datagrid/data_grid_types.ts @@ -137,6 +137,11 @@ export interface EuiDataGridColumnCellActionProps { * Determines whether the cell's action is displayed expanded (in the Popover) */ isExpanded: boolean; + /** + * Closes the popover if a cell is expanded. + * The prop is provided for an expanded cell only. + */ + closePopover: () => void; } export interface EuiDataGridColumnVisibility {