[Emotion] Convert final EuiDataGrid cell styles (Part 5) (#8013)

elastic · Sep 12, 2024 · a1a876e · a1a876e
1 parent b736b90
commit a1a876e
Show file tree

Hide file tree

Showing 99 changed files with 975 additions and 1,084 deletions.
diff --git a/...eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png b/...eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png
diff --git a/...reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png b/...reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png
diff --git a/...i/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png b/...i/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png
diff --git a/.../reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png b/.../reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png
diff --git a/...e_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png b/...e_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png
diff --git a/...e_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png b/...e_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png
diff --git a/...s/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png b/...s/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png
diff --git a/...i/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png b/...i/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png
diff --git a/...reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png b/...reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png
diff --git a/...eference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png b/...eference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png
diff --git a/.../chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png b/.../chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png
diff --git a/...reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png b/...reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png
diff --git a/...erence/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png b/...erence/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png
diff --git a/...ence/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png b/...ence/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png
diff --git a/...sktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png b/...sktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png
diff --git a/...sktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png b/...sktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png
diff --git a/...hrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png b/...hrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png
diff --git a/...me_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png b/...me_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png
diff --git a/..._desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png b/..._desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png
diff --git a/...e_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png b/...e_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png
diff --git a/...desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png b/...desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png
diff --git a/...sktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png b/...sktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png
diff --git a/...sktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png b/...sktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png
diff --git a/...hrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png b/...hrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png
diff --git a/...op_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png b/...op_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png
diff --git a/...bular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png b/...bular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png
diff --git a/.../eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png b/.../eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png
diff --git a/.../reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png b/.../reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png
diff --git a/...ui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png b/...ui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png
diff --git a/...i/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png b/...i/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png
diff --git a/...me_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png b/...me_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png
diff --git a/...me_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png b/...me_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png
diff --git a/...es/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png b/...es/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png
diff --git a/.../reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png b/.../reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png
diff --git a/...reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png b/...reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png
diff --git a/...e/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png b/...e/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png
diff --git a/.../reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png b/.../reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png
diff --git a/...ference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png b/...ference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png
diff --git a/...e_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png b/...e_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png
diff --git a/...me_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png b/...me_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png
diff --git a/..._mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png b/..._mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png
diff --git a/...obile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png b/...obile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png
diff --git a/...obile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png b/...obile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png
diff --git a/...chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png b/...chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png
diff --git a/...le_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png b/...le_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png
diff --git a/...bular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png b/...bular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png
diff --git a/packages/eui/.storybook/loki.ts b/packages/eui/.storybook/loki.ts
@@ -25,7 +25,7 @@ export const LOKI_SELECTORS = {
   /**
    * Portal element content selector
    */
-  portal: '#storybook-root',
+  portal: '#storybook-root > *',
 } as const;
 
 /**

diff --git a/packages/eui/.storybook/preview.tsx b/packages/eui/.storybook/preview.tsx
@@ -35,11 +35,6 @@ appendIconComponentCache(iconCache);
 import { EuiProvider } from '../src/components/provider';
 import { writingModeStyles } from './writing_mode.styles';
 
-// Import light theme for components still using Sass styling
-// TODO: Remove this import and the `yarn compile-scss &&` command
-// once all EUI components are converted to Emotion
-import '../dist/eui_theme_light.css';
-
 /**
  * Ensure that any provider errors throw & warn us early
  */

diff --git a/packages/eui/changelogs/upcoming/8013.md b/packages/eui/changelogs/upcoming/8013.md
@@ -0,0 +1,7 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiDataGrid`'s row, header, and footer cells to Emotion; Removed the following Sass variables and mixins:
+  - `$euiDataGridColumnResizerWidth`
+  - `@euiDataGridRowCell`
+  - `@euiDataGridHeaderCell`
+  - `@euiDataGridFooterCell`
diff --git a/packages/eui/cypress/support/component.tsx b/packages/eui/cypress/support/component.tsx
@@ -30,5 +30,3 @@ Cypress.on('uncaught:exception', (err) => {
     return false;
   }
 });
-
-require(THEME_IMPORT); // defined by DefinePlugin in the cypress webpack config
diff --git a/packages/eui/cypress/webpack.config.js b/packages/eui/cypress/webpack.config.js
@@ -10,8 +10,6 @@
 
 const { ProvidePlugin, DefinePlugin } = require('webpack');
 
-const THEME_IMPORT = `'../../dist/eui_theme_${process.env.THEME}.css'`;
-
 const alias = {};
 const reactVersion = process.env.REACT_VERSION || '18';
 
@@ -72,7 +70,6 @@ module.exports = {
     }),
 
     new DefinePlugin({
-      THEME_IMPORT, // allow cypress/support/component.tsx to require the correct css file
       'process.env.REACT_VERSION': JSON.stringify(reactVersion),
     }),
   ],

diff --git a/packages/eui/generator-eui/changelog/index.js b/packages/eui/generator-eui/changelog/index.js
@@ -53,12 +53,6 @@ module.exports = class extends Generator {
         type: 'confirm',
         default: false,
       },
-      {
-        message: 'Does your PR contain Emotion conversions?',
-        name: 'emotionConversions',
-        type: 'confirm',
-        default: false,
-      },
       {
         message: 'Does your PR contain dependency updates?',
         name: 'dependencyUpdates',

diff --git a/packages/eui/generator-eui/changelog/templates/changelog.md b/packages/eui/generator-eui/changelog/templates/changelog.md
@@ -25,11 +25,6 @@
 
 - Removed ...
 
-<%_ } -%>
-<%_ if (emotionConversions) { -%>
-**CSS-in-JS conversions**
-
-- Converted `EuiComponent` to Emotion; Removed `$euiComponentSassVariable`
 <%_ } -%>
 <%_ if (dependencyUpdates) { -%>
 **Dependency updates**

diff --git a/packages/eui/package.json b/packages/eui/package.json
@@ -42,8 +42,8 @@
     "release": "node ./scripts/release.js",
     "release-backport": "node ./scripts/release.js --type=backport",
     "release-rc": "node ./scripts/release.js --type=prerelease",
-    "storybook": "yarn compile-scss && storybook dev -p 6006",
-    "build-storybook": "yarn compile-scss && storybook build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "pre-push": "yarn test-staged"
   },
   "repository": {

diff --git a/packages/eui/scripts/test-cypress.js b/packages/eui/scripts/test-cypress.js
@@ -18,7 +18,6 @@ const argv = yargs(hideBin(process.argv))
   })
   .options({
     'node-options': { type: 'string', default: '' },
-    'skip-css': { type: 'boolean' },
     dev: { type: 'boolean' },
     theme: { type: 'string', default: 'light', choices: ['light', 'dark'] },
     a11y: { type: 'boolean' },
@@ -32,23 +31,12 @@ const argv = yargs(hideBin(process.argv))
 const nodeOptions = argv['node-options'];
 const isDev = argv.hasOwnProperty('dev');
 const isA11y = argv.hasOwnProperty('a11y');
-const skipScss = argv.hasOwnProperty('skip-css');
 const theme = argv.theme;
 const reactVersion = argv['react-version'];
 
 const info = chalk.white;
 const log = chalk.grey;
 
-// compile scss -> css so tests can render correctly
-if (!skipScss) {
-  console.log(info('Compiling SCSS'));
-  execSync(`TARGET_THEME=${theme} yarn compile-scss`, {
-    stdio: 'inherit',
-  });
-} else {
-  console.log(info('Not compiling SCSS, disabled by --skip-css'));
-}
-
 // compile dev and a11y options for how to run tests (headless, local UI)
 // and whether to run component tests or axe checks.
 const testParams = isDev
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,5 +30,3 @@ Cypress.on('uncaught:exception', (err) => { @@
         return false;
       }
     });
-    require(THEME_IMPORT); // defined by DefinePlugin in the cypress webpack config