From e0df28d45d0b0cbbcf2b1153c64894de1cd5b7c7 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 30 Aug 2024 12:06:43 -0700
Subject: [PATCH] Convert datagrid wrapper styles

---
 .../__snapshots__/data_grid.test.tsx.snap     | 24 +++++------
 .../src/components/datagrid/_data_grid.scss   | 24 -----------
 .../components/datagrid/data_grid.styles.ts   | 41 +++++++++++++++++++
 .../eui/src/components/datagrid/data_grid.tsx |  8 +++-
 4 files changed, 60 insertions(+), 37 deletions(-)
 create mode 100644 packages/eui/src/components/datagrid/data_grid.styles.ts

diff --git a/packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index f197ca1bf0b..cc6c8c465c9 100644
--- a/packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -457,11 +457,11 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
     tabindex="-1"
   />
   <div
-    class="euiDataGrid__focusWrap"
+    class="euiDataGrid__focusWrap emotion-euiDataGrid__focusWrap"
     data-focus-lock-disabled="disabled"
   >
     <div
-      class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiTestCss"
+      class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiDataGrid-euiTestCss"
       data-test-subj="test subject string"
     >
       <div
@@ -576,7 +576,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
       <div
         aria-label="aria-label"
         aria-rowcount="3"
-        class="euiDataGrid__content"
+        class="euiDataGrid__content emotion-euiDataGrid__content"
         data-test-subj="euiDataGridBody"
         id="generated-id"
         role="grid"
@@ -866,11 +866,11 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
     tabindex="-1"
   />
   <div
-    class="euiDataGrid__focusWrap"
+    class="euiDataGrid__focusWrap emotion-euiDataGrid__focusWrap"
     data-focus-lock-disabled="disabled"
   >
     <div
-      class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiTestCss"
+      class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiDataGrid-euiTestCss"
       data-test-subj="test subject string"
     >
       <div
@@ -985,7 +985,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
       <div
         aria-label="aria-label"
         aria-rowcount="3"
-        class="euiDataGrid__content"
+        class="euiDataGrid__content emotion-euiDataGrid__content"
         data-test-subj="euiDataGridBody"
         id="generated-id"
         role="grid"
@@ -1469,11 +1469,11 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
     tabindex="-1"
   />
   <div
-    class="euiDataGrid__focusWrap"
+    class="euiDataGrid__focusWrap emotion-euiDataGrid__focusWrap"
     data-focus-lock-disabled="disabled"
   >
     <div
-      class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiTestCss"
+      class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiDataGrid-euiTestCss"
       data-test-subj="test subject string"
     >
       <div
@@ -1585,7 +1585,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
       <div
         aria-label="aria-label"
         aria-rowcount="3"
-        class="euiDataGrid__content"
+        class="euiDataGrid__content emotion-euiDataGrid__content"
         data-test-subj="euiDataGridBody"
         id="generated-id"
         role="grid"
@@ -1877,11 +1877,11 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
     tabindex="-1"
   />
   <div
-    class="euiDataGrid__focusWrap"
+    class="euiDataGrid__focusWrap emotion-euiDataGrid__focusWrap"
     data-focus-lock-disabled="disabled"
   >
     <div
-      class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiTestCss"
+      class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiDataGrid-euiTestCss"
       data-test-subj="test subject string"
     >
       <div
@@ -1993,7 +1993,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
       <div
         aria-label="aria-label"
         aria-rowcount="3"
-        class="euiDataGrid__content"
+        class="euiDataGrid__content emotion-euiDataGrid__content"
         data-test-subj="euiDataGridBody"
         id="generated-id"
         role="grid"
diff --git a/packages/eui/src/components/datagrid/_data_grid.scss b/packages/eui/src/components/datagrid/_data_grid.scss
index 7f7cad9af85..d1e10ca22a5 100644
--- a/packages/eui/src/components/datagrid/_data_grid.scss
+++ b/packages/eui/src/components/datagrid/_data_grid.scss
@@ -1,23 +1,3 @@
-.euiDataGrid {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  overflow: hidden;
-  height: 100%;
-}
-
-.euiDataGrid__content {
-  flex-grow: 1;
-  height: 100%;
-  max-width: 100%;
-  width: 100%;
-  overflow: hidden;
-  z-index: 1; // Sits below the controls above it and pagination below it
-  position: relative;
-  background: $euiPageBackgroundColor;
-  font-feature-settings: 'tnum' 1; // Tabular numbers
-}
-
 .euiDataGrid__customRenderBody {
   @include euiScrollBar($euiColorDarkShade, $euiColorEmptyShade);
   height: 100%;
@@ -25,10 +5,6 @@
   overflow: auto;
 }
 
-.euiDataGrid__focusWrap {
-  height: 100%;
-}
-
 .euiDataGrid__virtualized {
   @include euiScrollBar($euiColorDarkShade, $euiColorEmptyShade);
   scroll-padding: 0;
diff --git a/packages/eui/src/components/datagrid/data_grid.styles.ts b/packages/eui/src/components/datagrid/data_grid.styles.ts
new file mode 100644
index 00000000000..25637454272
--- /dev/null
+++ b/packages/eui/src/components/datagrid/data_grid.styles.ts
@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../services';
+import { logicalCSS, logicalSizeCSS } from '../../global_styling';
+
+export const euiDataGridStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiDataGrid: css`
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      ${logicalCSS('height', '100%')}
+      overflow: hidden;
+    `,
+    // Sits below the controls above it and pagination below it
+    euiDataGrid__content: css`
+      z-index: 1;
+      position: relative;
+      flex-grow: 1;
+      ${logicalSizeCSS('100%')}
+      ${logicalCSS('max-width', '100%')}
+      overflow: hidden;
+      background-color: ${euiTheme.colors.body};
+      font-feature-settings: 'tnum' 1; /* Tabular numbers */
+    `,
+    // Wrapper around EuiDataGrid
+    euiDataGrid__focusWrap: css`
+      ${logicalCSS('height', '100%')}
+    `,
+  };
+};
diff --git a/packages/eui/src/components/datagrid/data_grid.tsx b/packages/eui/src/components/datagrid/data_grid.tsx
index f3c7341df39..89bd611a559 100644
--- a/packages/eui/src/components/datagrid/data_grid.tsx
+++ b/packages/eui/src/components/datagrid/data_grid.tsx
@@ -19,7 +19,7 @@ import {
   VariableSizeGrid as Grid,
   GridOnItemsRenderedProps,
 } from 'react-window';
-import { useGeneratedHtmlId } from '../../services';
+import { useGeneratedHtmlId, useEuiMemoizedStyles } from '../../services';
 import { useEuiTablePaginationDefaults } from '../table/table_pagination';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiI18n, useEuiI18n } from '../i18n';
@@ -67,6 +67,7 @@ import {
   EuiDataGridStyleHeader,
   EuiDataGridStyleRowHover,
 } from './data_grid_types';
+import { euiDataGridStyles } from './data_grid.styles';
 
 // Each gridStyle object above sets a specific CSS select to .euiGrid
 const fontSizesToClassMap: { [size in EuiDataGridStyleFontSizes]: string } = {
@@ -427,6 +428,8 @@ export const EuiDataGrid = memo(
       ]
     );
 
+    const styles = useEuiMemoizedStyles(euiDataGridStyles);
+
     return (
       <DataGridFocusContext.Provider value={focusContext}>
         <DataGridCellPopoverContext.Provider value={cellPopoverContext}>
@@ -434,8 +437,10 @@ export const EuiDataGrid = memo(
             <EuiFocusTrap
               disabled={!isFullScreen}
               className="euiDataGrid__focusWrap"
+              css={styles.euiDataGrid__focusWrap}
             >
               <div
+                css={styles.euiDataGrid}
                 className={classes}
                 onKeyDown={handleGridKeyDown}
                 style={isFullScreen ? undefined : { width, height }}
@@ -475,6 +480,7 @@ export const EuiDataGrid = memo(
                   ref={contentRef}
                   onKeyDown={onKeyDown}
                   data-test-subj="euiDataGridBody"
+                  css={styles.euiDataGrid__content}
                   className="euiDataGrid__content"
                   role="grid"
                   aria-rowcount={rowCount}