[EuiDataGrid] Enforce visibleCellActions shown (overflowing extra actions to the cell popover)

src-docs/src/views/datagrid/cells_popovers/datagrid_cells_example.js

@@ -15,6 +15,9 @@ import {
 import DataGridColumnCellActions from './column_cell_actions';
 const dataGridColumnCellActionsSource = require('!!raw-loader!./column_cell_actions');
 
+import VisibleCellActions from './visible_cell_actions';
+const visibleCellActionsSource = require('!!raw-loader!./visible_cell_actions');
+
 import { DataGridCellPopoverExample } from './datagrid_cell_popover_example';
 
 import DataGridFocus from './focus';
@@ -63,20 +66,26 @@ export const DataGridCellsExample = {
       text: (
         <Fragment>
           <p>
-            On top of making a cell expandable, you can add more custom actions
-            by setting <EuiCode>cellActions</EuiCode>. This contains functions
-            called to render additional buttons in the cell and in the popover
-            when expanded. Behind the scenes those are treated as a React
+            In addition to making a cell expandable, you can add more custom
+            actions by setting <EuiCode>columns.cellActions</EuiCode>. These
+            actions will render as icon buttons in the cell on hover/focus, and
+            render as full buttons in the cell expansion popover. Note that once
+            any <EuiCode>cellActions</EuiCode> are passed, the cell becomes
+            automatically expandable - this ensures keyboard and screen reader
+            users have access to all cell actions.
+          </p>
+          <p>
+            <EuiCode>columns.cellActions</EuiCode> accepts an array of render
+            functions. Behind the scenes, the functions are treated as a React
             components allowing hooks, context, and other React concepts to be
-            used. The functions receives an argument of type
-            <code>EuiDataGridColumnCellActionProps</code>. The icons of these
-            actions are displayed on mouse over, and also appear in the popover
-            when the cell is expanded. Note that once you&apos;ve defined the{' '}
-            <EuiCode>cellAction</EuiCode> property, the cell&apos;s
-            automatically expandable.
+            used. Because different button types are used between the cell and
+            the cell popover, we pass your render function a{' '}
+            <EuiCode>Component</EuiCode> prop which you must render in order for
+            your cell actions to switch correctly between button icons and
+            buttons.
           </p>
           <p>
-            Below, the email and city columns provide 1{' '}
+            In the below example, the email and city columns provide 1{' '}
             <EuiCode>cellAction</EuiCode> each, while the country column
             provides 2 <EuiCode>cellAction</EuiCode>s.
             <br />
@@ -95,6 +104,42 @@ export const DataGridCellsExample = {
       },
       demo: <DataGridColumnCellActions />,
     },
+    {
+      title: 'Visible cell actions and cell popovers',
+      text: (
+        <>
+          <p>
+            By default, only the first 2 cell actions of a cell will be
+            displayed to the left of the expand action button, and remaining
+            actions will be displayed in the footer of the cell expansion
+            popover.
+          </p>
+          <p>
+            This number is configurable by setting{' '}
+            <EuiCode>columns.visibleCellActions</EuiCode>, should you need to
+            display more cell actions immediately. However, we advise caution
+            when increasing this limit - the default is set to ensure cell
+            action buttons do not crowd out content.
+          </p>
+          <p>
+            The below example shows an increasing number of{' '}
+            <EuiCode>cellActions</EuiCode> in each column. The third column
+            shows <EuiCode>visibleCellActions</EuiCode> set to 3, and the fourth
+            column shows excess actions overflowing into the popover.
+          </p>
+        </>
+      ),
+      demo: <VisibleCellActions />,
+      source: [
+        {
+          type: GuideSectionTypes.TSX,
+          code: visibleCellActionsSource,
+        },
+      ],
+      props: {
+        EuiDataGridColumn,
+      },
+    },
 
     ...DataGridCellPopoverExample.sections,
 

src-docs/src/views/datagrid/cells_popovers/visible_cell_actions.tsx

@@ -0,0 +1,97 @@
+import React, { useState, ReactNode } from 'react';
+// @ts-ignore - faker does not have type declarations
+import { fake } from 'faker';
+
+import {
+  EuiDataGrid,
+  EuiDataGridColumnCellAction,
+  EuiDataGridColumn,
+} from '../../../../../src/components';
+
+const cellActions1: EuiDataGridColumnCellAction[] = [
+  ({ Component }) => (
+    <Component onClick={() => {}} iconType="timeline">
+      Add to timeline
+    </Component>
+  ),
+];
+const cellActions2: EuiDataGridColumnCellAction[] = [
+  ({ Component }) => (
+    <Component iconType="plusInCircle" aria-label="Filter in">
+      Filter in
+    </Component>
+  ),
+  ({ Component }) => (
+    <Component iconType="minusInCircle" aria-label="Filter out">
+      Filter out
+    </Component>
+  ),
+];
+const cellActions3 = [...cellActions2, ...cellActions1];
+const cellActions5: EuiDataGridColumnCellAction[] = [
+  ...cellActions3,
+  ({ Component }) => (
+    <Component onClick={() => {}} iconType="starEmpty">
+      Custom action 1
+    </Component>
+  ),
+  ({ Component }) => (
+    <Component onClick={() => {}} iconType="starEmpty">
+      Custom action 2
+    </Component>
+  ),
+];
+
+const columns: EuiDataGridColumn[] = [
+  {
+    id: 'default',
+    cellActions: cellActions1,
+  },
+  {
+    id: 'datetime',
+    cellActions: cellActions2,
+  },
+  {
+    id: 'json',
+    schema: 'json',
+    cellActions: cellActions3,
+    visibleCellActions: 3,
+  },
+  {
+    id: 'custom',
+    schema: 'favoriteFranchise',
+    cellActions: cellActions5,
+  },
+];
+
+const data: Array<{ [key: string]: ReactNode }> = [];
+for (let i = 1; i < 5; i++) {
+  data.push({
+    default: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
+    datetime: fake('{{date.past}}'),
+    json: JSON.stringify([
+      {
+        numeric: fake('{{finance.account}}'),
+        currency: fake('${{finance.amount}}'),
+        date: fake('{{date.past}}'),
+      },
+    ]),
+    custom: i % 2 === 0 ? 'Star Wars' : 'Star Trek',
+  });
+}
+
+export default () => {
+  const [visibleColumns, setVisibleColumns] = useState(
+    columns.map(({ id }) => id)
+  );
+
+  return (
+    <EuiDataGrid
+      aria-label="Data grid example of cellActions within popovers"
+      columns={columns}
+      columnVisibility={{ visibleColumns, setVisibleColumns }}
+      rowCount={data.length}
+      renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
+    />
+  );
+};

src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap

@@ -1,5 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiDataGridCell componentDidUpdate handles the cell popover by forwarding the cell's DOM node and contents to the parent popover context 1`] = `
+Array [
+  <div
+    class="euiText euiText--medium"
+  >
+    <div>
+      <button
+        data-datagrid-interactable="true"
+      >
+        hello
+      </button>
+      <button
+        data-datagrid-interactable="true"
+      >
+        world
+      </button>
+    </div>
+  </div>,
+  <div
+    class="euiPopoverFooter"
+  >
+    <div
+      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--wrap"
+    >
+      <div
+        class="euiFlexItem"
+      >
+        <div>
+          <button />
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`EuiDataGridCell renders 1`] = `
 <EuiDataGridCell
   colIndex={0}
@@ -168,37 +204,3 @@ exports[`EuiDataGridCell renders 1`] = `
   </div>
 </EuiDataGridCell>
 `;
-
-exports[`EuiDataGridCell componentDidUpdate handles the cell popover by forwarding the cell's DOM node and contents to the parent popover context 1`] = `
-Array [
-  <div
-    class="euiText euiText--medium"
-  >
-    <div>
-      <button
-        data-datagrid-interactable="true"
-      >
-        hello
-      </button>
-      <button
-        data-datagrid-interactable="true"
-      >
-        world
-      </button>
-    </div>
-  </div>,
-  <div
-    class="euiPopoverFooter"
-  >
-    <div
-      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--wrap"
-    >
-      <div
-        class="euiFlexItem"
-      >
-        <button />
-      </div>
-    </div>
-  </div>,
-]
-`;