[Data Grid] Added closePopover action to EuiDataGridColumnCellActionProps #4346

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Dec 8, 2020

CHANGELOG.md

-Original file line number
+Diff line change
@@ Expand Up / @@ -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**
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -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
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -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>
           ),
@@ Expand Down @@

src/components/datagrid/data_grid_cell.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -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,
@@ Expand Down @@

src/components/datagrid/data_grid_cell_buttons.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
     export const EuiDataGridCellButtons = ({
       popoverIsOpen,
+      closePopover,
       onExpandClick,
       column,
       rowIndex,
     }: {
       popoverIsOpen: boolean;
+      closePopover: () => void;
       onExpandClick: () => void;
       column?: EuiDataGridColumn;
       rowIndex: number;
@@ Expand Down Expand Up / @@ -84,6 +86,7 @@ export const EuiDataGridCellButtons = ({ @@
                     columnId={column.id}
                     Component={ButtonComponent}
                     isExpanded={false}
+                    closePopover={closePopover}
                   />
                 );
               }
@@ Expand Down @@

src/components/datagrid/data_grid_cell_popover.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -104,6 +104,7 @@ export function EuiDataGridCellPopover({ @@
                                 <EuiButtonEmpty {...props} size="s" />
                               )}
                               isExpanded={true}
+                              closePopover={closePopover}
                             />
                           </EuiFlexItem>
                         );
@@ Expand Down @@

src/components/datagrid/data_grid_types.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -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 {
@@ Expand Down @@

Provide feedback