[Data Grid] Added closePopover action to EuiDataGridColumnCellActionP…

…rops (#4346) * Let close the popover for expanded cell * Add CHANGELOG item * Add docs * Cleaned up cell actions example description and alerting; always provide closePopover fn Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
elastic · Dec 8, 2020 · 33221ca · 33221ca
1 parent 2653aba
commit 33221ca
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 7 deletions.
diff --git 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
@@ -22,13 +22,14 @@ const columns = [
     id: 'email',
     isSortable: true,
     cellActions: [
-      ({ rowIndex, columnId, Component }) => {
+      ({ rowIndex, columnId, Component, closePopover }) => {
         const row = ++rowIndex;
         return (
           <Component
-            onClick={() =>
-              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
@@ -345,9 +345,10 @@ export const DataGridStylingExample = {
           <p>
             Below, the email and city columns provide 1{' '}
             <EuiCode>cellAction</EuiCode> each, while the country column
-            provides 2 <EuiCode>cellAction</EuiCode>s. The city column shows
-            another action with different alert when it&apos;s clicked in the
-            popover.
+            provides 2 <EuiCode>cellAction</EuiCode>s.
+            <br />
+            The email column cell action closes the popover if it&apos;s
+            expanded through the <EuiCode>closePopover</EuiCode> prop.
           </p>
         </Fragment>
       ),

diff --git 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
@@ -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
@@ -104,6 +104,7 @@ export function EuiDataGridCellPopover({
                             <EuiButtonEmpty {...props} size="s" />
                           )}
                           isExpanded={true}
+                          closePopover={closePopover}
                         />
                       </EuiFlexItem>
                     );

diff --git 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 {