[Emotion] Convert EuiDataGrid gridStyles to Emotion (Part 3)

packages/eui/.storybook/addons/code-snippet/constants.ts

@@ -38,8 +38,6 @@ export const EXCLUDED_PROPS = new Set([
   EMOTION_LABEL_KEY,
   'key',
 ]);
-// props with 'false' value that should not be removed but shown in the code snippet
-export const PRESERVED_FALSE_VALUE_PROPS = new Set(['grow']);
 
 /** ERRORS */
 export const ADDON_ERROR =

packages/eui/.storybook/addons/code-snippet/decorators/jsx_decorator.tsx

@@ -126,11 +126,11 @@ export const customJsxDecorator = (
 
     for (const key of Object.keys(context.args)) {
       // checks story args for:
-      //   - remove if no value
-      //   - remove if `chidlren`
+      //   - remove if no value (but allow `false`)
+      //   - remove if `children`
       //   - remove if arg is a default prop
       if (
-        !context.args[key] ||
+        context.args[key] == null ||
         key === 'children' ||
         defaultProps?.includes(key)
       ) {

packages/eui/.storybook/addons/code-snippet/decorators/render_jsx.tsx

@@ -20,11 +20,7 @@ import { getDocgenSection } from '@storybook/docs-tools';
 import { logger } from '@storybook/client-logger';
 
 import { UseEuiTheme } from '../../../../src/services';
-import {
-  ADDON_PARAMETER_KEY,
-  EXCLUDED_PROPS,
-  PRESERVED_FALSE_VALUE_PROPS,
-} from '../constants';
+import { ADDON_PARAMETER_KEY, EXCLUDED_PROPS } from '../constants';
 import {
   getStoryComponentDisplayName,
   getEmotionComponentDisplayName,
@@ -135,6 +131,7 @@ export const renderJsx = (
     sortProps: true,
     // using any type here as component props can have any type
     filterProps: (value: any, key: string) => {
+      // Note that false values should be allowed, and handled by `removeDefaultProps`
       if (
         EXCLUDED_PROPS.has(key) ||
         value == null ||
@@ -145,12 +142,6 @@ export const renderJsx = (
         return false;
       }
 
-      // manually filter props with `false` values as this allows us to preserve
-      // `false` values where required e.g. grow={false}
-      if (value === false && !PRESERVED_FALSE_VALUE_PROPS.has(key)) {
-        return false;
-      }
-
       return true;
     },
   };

packages/eui/changelogs/upcoming/8006.md

@@ -0,0 +1,11 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiDataGrid`'s `gridStyle`s to Emotion; Removed the following Sass variables and mixins:
+  - `$euiDataGridCellPaddingS`
+  - `$euiDataGridCellPaddingM`
+  - `$euiDataGridCellPaddingL`
+  - `$euiDataGridVerticalBorder`
+  - `$euiDataGridPrefix`
+  - `$euiDataGridStyles`
+  - `@euiDataGridSelector`
+  - `@euiDataGridStyles`

packages/eui/scripts/compile-eui.js

@@ -14,6 +14,8 @@ const IGNORE_TESTS = [
   '**/*.spec.tsx',
   '**/*.stories.ts',
   '**/*.stories.tsx',
+  '**/**.stories.utils.ts',
+  '**/**.stories.utils.tsx',
   '**/*.mdx',
   '**/test/internal/**/*.ts',
   '**/test/internal/**/*.tsx',
@@ -24,9 +26,7 @@ const IGNORE_TESTENV = [
   '**/*.testenv.tsx',
   '**/*.testenv.ts',
 ];
-const IGNORE_PACKAGES = [
-  '**/react-datepicker/test/**/*.js',
-];
+const IGNORE_PACKAGES = ['**/react-datepicker/test/**/*.js'];
 
 function compileLib() {
   shell.mkdir('-p', 'lib/services', 'lib/test');

packages/eui/src-docs/src/views/datagrid/schema_columns/footer_row.js

@@ -6,8 +6,7 @@ import {
   EuiCheckbox,
   EuiButtonIcon,
   EuiSwitch,
-  EuiFlexGroup,
-  EuiFlexItem,
+  EuiSpacer,
 } from '../../../../../src';
 
 const raw_data = [];
@@ -151,44 +150,41 @@ export default () => {
   );
 
   // Footer row
-  const [showFooterRow, setShowFooterRow] = useState(true);
+  const [stickyFooter, setStickyFooter] = useState(true);
 
   return (
-    <EuiFlexGroup direction="column">
-      <EuiFlexItem>
-        <EuiSwitch
-          label="Show footer row"
-          checked={showFooterRow}
-          onChange={(e) => setShowFooterRow(e.target.checked)}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiDataGrid
-          aria-label="Data grid footer row demo"
-          columns={columns}
-          columnVisibility={{ visibleColumns, setVisibleColumns }}
-          leadingControlColumns={leadingControlColumns}
-          trailingControlColumns={trailingControlColumns}
-          rowCount={raw_data.length}
-          renderCellValue={RenderCellValue}
-          renderFooterCellValue={
-            showFooterRow ? RenderFooterCellValue : undefined
-          }
-          pagination={{
-            ...pagination,
-            onChangeItemsPerPage: onChangeItemsPerPage,
-            onChangePage: onChangePage,
-          }}
-          onColumnResize={(eventData) => {
-            console.log(eventData);
-          }}
-          gridStyle={{
-            border: 'horizontal',
-            rowHover: 'highlight',
-            header: 'underline',
-          }}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <>
+      <EuiSwitch
+        label="Sticky footer"
+        checked={stickyFooter}
+        onChange={(e) => setStickyFooter(e.target.checked)}
+      />
+      <EuiSpacer />
+      <EuiDataGrid
+        height={400}
+        aria-label="Data grid footer row demo"
+        columns={columns}
+        columnVisibility={{ visibleColumns, setVisibleColumns }}
+        leadingControlColumns={leadingControlColumns}
+        trailingControlColumns={trailingControlColumns}
+        rowCount={raw_data.length}
+        renderCellValue={RenderCellValue}
+        renderFooterCellValue={RenderFooterCellValue}
+        pagination={{
+          ...pagination,
+          onChangeItemsPerPage: onChangeItemsPerPage,
+          onChangePage: onChangePage,
+        }}
+        onColumnResize={(eventData) => {
+          console.log(eventData);
+        }}
+        gridStyle={{
+          stickyFooter,
+          border: 'none',
+          rowHover: 'highlight',
+          header: 'underline',
+        }}
+      />
+    </>
   );
 };

packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap

@@ -461,7 +461,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
     data-focus-lock-disabled="disabled"
   >
     <div
-      class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiDataGrid-euiTestCss"
+      class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiDataGrid-cellPadding-m-fontSize-m-borders-all-euiTestCss"
       data-test-subj="test subject string"
     >
       <div
@@ -590,7 +590,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
             style="height: 202px; width: 200px;"
           >
             <div
-              class="euiDataGridHeader"
+              class="euiDataGridHeader emotion-euiDataGridHeader-shade"
               data-test-subj="dataGridHeader"
               role="row"
             >
@@ -870,7 +870,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
     data-focus-lock-disabled="disabled"
   >
     <div
-      class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiDataGrid-euiTestCss"
+      class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiDataGrid-cellPadding-m-fontSize-m-borders-all-euiTestCss"
       data-test-subj="test subject string"
     >
       <div
@@ -999,7 +999,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
             style="height: 202px; width: 300px;"
           >
             <div
-              class="euiDataGridHeader"
+              class="euiDataGridHeader emotion-euiDataGridHeader-shade"
               data-test-subj="dataGridHeader"
               role="row"
             >
@@ -1473,7 +1473,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
     data-focus-lock-disabled="disabled"
   >
     <div
-      class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiDataGrid-euiTestCss"
+      class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiDataGrid-cellPadding-m-fontSize-m-borders-all-euiTestCss"
       data-test-subj="test subject string"
     >
       <div
@@ -1599,7 +1599,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
             style="height: 202px; width: 200px;"
           >
             <div
-              class="euiDataGridHeader"
+              class="euiDataGridHeader emotion-euiDataGridHeader-shade"
               data-test-subj="dataGridHeader"
               role="row"
             >
@@ -1881,7 +1881,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
     data-focus-lock-disabled="disabled"
   >
     <div
-      class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiDataGrid-euiTestCss"
+      class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiDataGrid-cellPadding-m-fontSize-m-borders-all-euiTestCss"
       data-test-subj="test subject string"
     >
       <div
@@ -2007,7 +2007,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
             style="height: 202px; width: 200px;"
           >
             <div
-              class="euiDataGridHeader"
+              class="euiDataGridHeader emotion-euiDataGridHeader-shade"
               data-test-subj="dataGridHeader"
               role="row"
             >

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

@@ -1,42 +1,20 @@
-.euiDataGridRow {
-  background-color: $euiColorEmptyShade;
-}
-
 @include euiDataGridRowCell {
   position: relative; // Needed for .euiDataGridRowCell__actions
-  border-right: $euiDataGridVerticalBorder;
-  border-bottom: $euiBorderThin;
 
   .euiDataGridRowCell__content {
-    @include euiFontSizeS;
-    padding: $euiDataGridCellPaddingM;
     height: 100%;
     overflow: hidden;
 
     &--autoHeight {
       height: auto;
     }
-
-    // Workaround to trim line-clamp and padding - @see https://github.com/elastic/eui/issues/7780
-    &--lineCountHeight {
-      padding-bottom: 0;
-      border-bottom: $euiDataGridCellPaddingM solid transparent;
-    }
   }
 
   // Hack to allow focus trap to still stretch to full row height on defined heights
   > [data-focus-lock-disabled] {
     height: 100%;
   }
 
-  &.euiDataGridRowCell--firstColumn {
-    border-left: $euiBorderThin;
-  }
-
-  &.euiDataGridRowCell--lastColumn {
-    border-right-color: $euiBorderColor;
-  }
-
   --euiDataGridCellOutlineColor: #{$euiColorPrimary};
 
   &:hover,
@@ -220,78 +198,6 @@
   }
 }
 
-// Row stripes
-@include euiDataGridStyles(stripes) {
-  .euiDataGridRow--striped {
-    background-color: $euiColorLightestShade;
-  }
-}
-
-// Row highlights
-@include euiDataGridStyles(rowHoverHighlight) {
-  .euiDataGridRow:hover {
-    background-color: $euiColorHighlight;
-  }
-}
-
-// Border alternates
-@include euiDataGridStyles(bordersNone) {
-  @include euiDataGridRowCell {
-    border-color: transparent !important; // stylelint-disable-line declaration-no-important
-  }
-}
-
-@include euiDataGridStyles(bordersHorizontal) {
-  @include euiDataGridRowCell {
-    border-right-color: transparent;
-    border-left-color: transparent;
-  }
-}
-
-// Font alternates
-@include euiDataGridStyles(fontSizeSmall) {
-  @include euiDataGridRowCell {
-    .euiDataGridRowCell__content {
-      @include euiFontSizeXS;
-    }
-  }
-}
-
-@include euiDataGridStyles(fontSizeLarge) {
-  @include euiDataGridRowCell {
-    .euiDataGridRowCell__content {
-      @include euiFontSize;
-    }
-  }
-}
-
-// Padding alternates
-@include euiDataGridStyles(paddingSmall) {
-  @include euiDataGridRowCell {
-    .euiDataGridRowCell__content {
-      padding: $euiDataGridCellPaddingS;
-
-      &--lineCountHeight {
-        padding-bottom: 0;
-        border-bottom: $euiDataGridCellPaddingS solid transparent;
-      }
-    }
-  }
-}
-
-@include euiDataGridStyles(paddingLarge) {
-  @include euiDataGridRowCell {
-    .euiDataGridRowCell__content {
-      padding: $euiDataGridCellPaddingL;
-
-      &--lineCountHeight {
-        padding-bottom: 0;
-        border-bottom: $euiDataGridCellPaddingL solid transparent;
-      }
-    }
-  }
-}
-
 @keyframes euiDataGridCellActionsSlideIn {
   from { transform: scaleY(0); }
   to { transform: scaleY(1); }