Convert grid body styles to Emotion

- Emotion `css` prop actually requires `className` under the hood to merge classes
elastic · Sep 4, 2024 · 00c91de · 00c91de
1 parent e0df28d
commit 00c91de
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 16 deletions.
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
@@ -583,7 +583,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
         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
@@ -992,7 +992,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
         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
@@ -1592,7 +1592,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
         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
@@ -2000,7 +2000,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
         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

diff --git a/packages/eui/src/components/datagrid/_data_grid.scss b/packages/eui/src/components/datagrid/_data_grid.scss
@@ -1,11 +0,0 @@
-.euiDataGrid__customRenderBody {
-  @include euiScrollBar($euiColorDarkShade, $euiColorEmptyShade);
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-}
-
-.euiDataGrid__virtualized {
-  @include euiScrollBar($euiColorDarkShade, $euiColorEmptyShade);
-  scroll-padding: 0;
-}

diff --git a/packages/eui/src/components/datagrid/body/data_grid_body.styles.ts b/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;
+    `,
+  };
+};
diff --git a/packages/eui/src/components/datagrid/body/data_grid_body.tsx b/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} />
   );
 };
diff --git a/packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx b/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
       )}
     >

diff --git a/packages/eui/src/components/datagrid/body/data_grid_body_virtualized.tsx b/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}

diff --git a/packages/eui/src/components/datagrid/data_grid_types.ts b/packages/eui/src/components/datagrid/data_grid_types.ts
@@ -471,6 +471,7 @@ export interface EuiDataGridBodyProps {
   gridRef: MutableRefObject<Grid | null>;
   gridItemsRendered: MutableRefObject<GridOnItemsRenderedProps | null>;
   wrapperRef: MutableRefObject<HTMLDivElement | null>;
+  className?: string;
 }
 
 export interface EuiDataGridCustomBodyProps {