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

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); }

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

@@ -1,49 +1,3 @@
-$euiDataGridPrefix: '.euiDataGrid--';
-
-// Things can get nesty so it's nice to have an approved list that match our typings
-$euiDataGridStyles: (
-  'bordersAll'
-  'bordersNone'
-  'bordersHorizontal'
-  'paddingSmall'
-  'paddingMedium'
-  'paddingLarge'
-  'stripes'
-  'rowHoverNone'
-  'rowHoverHighlight'
-  'headerShade'
-  'headerUnderline'
-  'footerShade'
-  'footerOverline'
-  'fontSizeSmall'
-  'fontSizeLarge'
-  'noControls'
-  'stickyFooter'
-);
-
-// All this does is take some of the above and make a sibling selector
-// selector(headerShade, fontSizeLarge)
-// will produce `.euiDataGrid--headerShade.euiDataGrid--fontSizeLarge
-@function euiDataGridSelector($selectorKeys...) {
-  $selectorList: '';
-  @each $selector in $selectorKeys {
-    // Spit out warnings when you make typos!
-    @if (index($euiDataGridStyles, $selector != true)) {
-      @error '#{$selector} is not an allowed value in the euiDataGridStyles() mixin';
-    }
-    $selctorValue: #{$euiDataGridPrefix}#{$selector};
-    $selectorList: str-insert($selectorList, $selctorValue, 1000);
-  }
-
-  @return $selectorList;
-}
-
-@mixin euiDataGridStyles($selectorKeys...) {
-  #{euiDataGridSelector($selectorKeys...)} {
-    @content;
-  }
-}
-
 @mixin euiDataGridHeaderCell {
   .euiDataGridHeaderCell {
     @content;

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

@@ -1,8 +1,3 @@
 $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
-
-$euiDataGridCellPaddingS: $euiSizeXS;
-$euiDataGridCellPaddingM: $euiSizeM / 2;
-$euiDataGridCellPaddingL: $euiSizeS;
-$euiDataGridVerticalBorder: solid 1px tintOrShade($euiBorderColor, 60%, 30%);

packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
   class="euiDataGrid__customRenderBody"
 >
   <div
-    class="euiDataGridHeader"
+    class="euiDataGridHeader emotion-euiDataGridHeader"
     data-test-subj="dataGridHeader"
     role="row"
   >

packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
     style="height: 34px; width: 200px;"
   >
     <div
-      class="euiDataGridHeader"
+      class="euiDataGridHeader emotion-euiDataGridHeader"
       data-test-subj="dataGridHeader"
       role="row"
     >