From 18a8e61869bf2a636094704353c7ac3e026412d0 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Fri, 18 Mar 2022 11:04:04 -0700
Subject: [PATCH] Improve documentation copy for main cell actions

- prop clarity, organization, etc.
---
 .../cells_popovers/datagrid_cells_example.js  | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src-docs/src/views/datagrid/cells_popovers/datagrid_cells_example.js b/src-docs/src/views/datagrid/cells_popovers/datagrid_cells_example.js
index ed256015992..718d2106093 100644
--- a/src-docs/src/views/datagrid/cells_popovers/datagrid_cells_example.js
+++ b/src-docs/src/views/datagrid/cells_popovers/datagrid_cells_example.js
@@ -66,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 />