From 3f4282e81afc5b3521be9ac289d187cb05cd9efd Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 11 Jan 2022 14:15:54 -0800
Subject: [PATCH 1/2] Expose `setIsFullScreen` to ref API

---
 src/components/datagrid/data_grid.test.tsx | 1 +
 src/components/datagrid/data_grid.tsx      | 1 +
 src/components/datagrid/data_grid_types.ts | 4 ++++
 3 files changed, 6 insertions(+)

diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
index a4200aab0ad..66bd8cba928 100644
--- a/src/components/datagrid/data_grid.test.tsx
+++ b/src/components/datagrid/data_grid.test.tsx
@@ -2744,6 +2744,7 @@ describe('EuiDataGrid', () => {
     );
 
     expect(gridRef.current).toEqual({
+      setIsFullScreen: expect.any(Function),
       setFocusedCell: expect.any(Function),
     });
   });
diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index f5688219b83..d350c50c919 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -290,6 +290,7 @@ export const EuiDataGrid = forwardRef<EuiDataGridRefProps, EuiDataGridProps>(
     useImperativeHandle(
       ref,
       () => ({
+        setIsFullScreen,
         setFocusedCell: ({ rowIndex, colIndex }) => {
           focusContext.setFocusedCell([colIndex, rowIndex]);
         },
diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
index ba23040dba9..cf788d29b88 100644
--- a/src/components/datagrid/data_grid_types.ts
+++ b/src/components/datagrid/data_grid_types.ts
@@ -284,6 +284,10 @@ export type EuiDataGridProps = OneOf<
 >;
 
 export interface EuiDataGridRefProps {
+  /**
+   * Allows manually controlling the full-screen state of the grid.
+   */
+  setIsFullScreen: (isFullScreen: boolean) => void;
   /**
    * Allows manually focusing the specified cell in the grid.
    *

From 4064ded2bcd18b91d9a593a831d9f81157fba8aa Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 11 Jan 2022 14:16:18 -0800
Subject: [PATCH 2/2] Update documentation/examples

---
 src-docs/src/views/datagrid/datagrid_ref_example.js | 10 ++++++++++
 src-docs/src/views/datagrid/ref.js                  |  8 ++++++++
 2 files changed, 18 insertions(+)

diff --git a/src-docs/src/views/datagrid/datagrid_ref_example.js b/src-docs/src/views/datagrid/datagrid_ref_example.js
index 9345f4d75c0..d3ab45bf471 100644
--- a/src-docs/src/views/datagrid/datagrid_ref_example.js
+++ b/src-docs/src/views/datagrid/datagrid_ref_example.js
@@ -14,6 +14,9 @@ const dataGridRefSource = require('!!raw-loader!./ref');
 const dataGridRefSnippet = `const dataGridRef = useRef();
 <EuiDataGrid ref={dataGridRef} {...props} />
 
+// Mnaually toggle the data grid's full screen state
+dataGridRef.current.setIsFullScreen(true);
+
 // Mnaually focus a specific cell within the data grid
 dataGridRef.current.setFocusedCell({ rowIndex, colIndex });
 `;
@@ -37,6 +40,13 @@ export const DataGridRefExample = {
             the <EuiCode>ref</EuiCode> prop of EuiDataGrid. These methods are:
           </p>
           <ul>
+            <li>
+              <p>
+                <EuiCode>setIsFullScreen(isFullScreen)</EuiCode> - controls the
+                full screen state of the data grid. Accepts a true/false boolean
+                flag.
+              </p>
+            </li>
             <li>
               <EuiCode>setFocusedCell({'{ rowIndex, colIndex }'})</EuiCode> -
               focuses the specified cell in the grid.
diff --git a/src-docs/src/views/datagrid/ref.js b/src-docs/src/views/datagrid/ref.js
index e043abcedc9..62a0f64b807 100644
--- a/src-docs/src/views/datagrid/ref.js
+++ b/src-docs/src/views/datagrid/ref.js
@@ -148,6 +148,14 @@ export default () => {
             Set cell focus
           </EuiButton>
         </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiButton
+            size="s"
+            onClick={() => dataGridRef.current.setIsFullScreen(true)}
+          >
+            Set grid to full screen
+          </EuiButton>
+        </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer />