[Emotion] Convert EuiDataGrid (Part 1)

packages/eui/changelogs/upcoming/7998.md

@@ -0,0 +1,5 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiDataGrid` to Emotion
+  - Removed `$euiZDataGrid`
+  - Removed `$euiZHeaderBelowDataGrid`

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,14 +576,14 @@ 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"
         tabindex="0"
       >
         <div
-          class="euiDataGrid__virtualized"
+          class="euiDataGrid__virtualized emotion-euiDataGridBody-virtualized"
           style="position: relative; height: 9007199254740991px; width: 9007199254740991px; overflow: auto; will-change: transform; direction: ltr;"
         >
           <div
@@ -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,14 +985,14 @@ 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"
         tabindex="0"
       >
         <div
-          class="euiDataGrid__virtualized"
+          class="euiDataGrid__virtualized emotion-euiDataGridBody-virtualized"
           style="position: relative; height: 9007199254740991px; width: 9007199254740991px; overflow: auto; will-change: transform; direction: ltr;"
         >
           <div
@@ -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,14 +1585,14 @@ 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"
         tabindex="0"
       >
         <div
-          class="euiDataGrid__virtualized"
+          class="euiDataGrid__virtualized emotion-euiDataGridBody-virtualized"
           style="position: relative; height: 9007199254740991px; width: 9007199254740991px; overflow: auto; will-change: transform; direction: ltr;"
         >
           <div
@@ -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,14 +1993,14 @@ 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"
         tabindex="0"
       >
         <div
-          class="euiDataGrid__virtualized"
+          class="euiDataGrid__virtualized emotion-euiDataGridBody-virtualized"
           style="position: relative; height: 9007199254740991px; width: 9007199254740991px; overflow: auto; will-change: transform; direction: ltr;"
         >
           <div

packages/eui/src/components/datagrid/_index.scss

@@ -1,6 +1,5 @@
 @import 'variables';
 @import 'mixins';
-@import 'data_grid';
 @import 'body/header/data_grid_header_row';
 @import 'body/footer/data_grid_footer_row';
 @import 'body/header/data_grid_column_resizer';

packages/eui/src/components/datagrid/_variables.scss

@@ -1,5 +1,3 @@
-$euiZDataGrid: $euiZHeader - 1;
-$euiZHeaderBelowDataGrid: $euiZHeader - 2;
 $euiZDataGridCellPopover: $euiZHeader; // Same z-index as EuiFlyout mask overlays - cell popovers should be under both modal and flyout overlays
 
 $euiDataGridColumnResizerWidth: 3px; // Odd number because it straddles a border

packages/eui/src/components/datagrid/body/data_grid_body.styles.ts

@@ -0,0 +1,27 @@
+/*
+ * 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 { euiScrollBarStyles, logicalSizeCSS } from '../../../global_styling';
+
+export const euiDataGridBodyStyles = (euiThemeContext: UseEuiTheme) => {
+  return {
+    euiDataGridBody: css`
+      ${euiScrollBarStyles(euiThemeContext)}
+    `,
+    virtualized: css`
+      scroll-padding: 0;
+    `,
+    customRender: css`
+      ${logicalSizeCSS('100%')}
+      overflow: auto;
+    `,
+  };
+};

packages/eui/src/components/datagrid/body/data_grid_body.tsx

@@ -8,9 +8,11 @@
 
 import React, { FunctionComponent } from 'react';
 
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiDataGridBodyProps } from '../data_grid_types';
 import { EuiDataGridBodyVirtualized } from './data_grid_body_virtualized';
 import { EuiDataGridBodyCustomRender } from './data_grid_body_custom';
+import { euiDataGridBodyStyles } from './data_grid_body.styles';
 
 export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = ({
   renderCustomGridBody,
@@ -21,12 +23,19 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = ({
    * + virtualization library for rendering content, or if consumers have
    * passed their own custom renderer
    */
+  const styles = useEuiMemoizedStyles(euiDataGridBodyStyles);
+  const cssStyles = [
+    styles.euiDataGridBody,
+    renderCustomGridBody ? styles.customRender : styles.virtualized,
+  ];
+
   return renderCustomGridBody ? (
     <EuiDataGridBodyCustomRender
       renderCustomGridBody={renderCustomGridBody}
+      css={cssStyles}
       {...props}
     />
   ) : (
-    <EuiDataGridBodyVirtualized {...props} />
+    <EuiDataGridBodyVirtualized css={cssStyles} {...props} />
   );
 };

packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx

@@ -50,6 +50,7 @@ export const EuiDataGridBodyCustomRender: FunctionComponent<
   rowHeightsOptions,
   gridWidth,
   gridStyles,
+  className,
 }) => {
   /**
    * Columns & widths
@@ -187,6 +188,7 @@ export const EuiDataGridBodyCustomRender: FunctionComponent<
       {...customGridBodyProps}
       className={classNames(
         'euiDataGrid__customRenderBody',
+        className,
         customGridBodyProps?.className
       )}
     >

packages/eui/src/components/datagrid/body/data_grid_body_virtualized.tsx

@@ -140,6 +140,7 @@ export const EuiDataGridBodyVirtualized: FunctionComponent<EuiDataGridBodyProps>
       gridRef,
       gridItemsRendered,
       wrapperRef,
+      className,
     }) => {
       /**
        * Grid refs & observers
@@ -367,6 +368,7 @@ export const EuiDataGridBodyVirtualized: FunctionComponent<EuiDataGridBodyProps>
             ref={gridRef}
             className={classNames(
               'euiDataGrid__virtualized',
+              className,
               virtualizationOptions?.className
             )}
             onItemsRendered={onItemsRendered}