[Emotion] Convert EuiDataGrid toolbar control styles to Emotion (#7997)

packages/eui/.storybook/test.ts

@@ -0,0 +1,46 @@
+/*
+ * 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 { queries, within, waitFor, fireEvent, expect } from '@storybook/test';
+import * as dataTestSubjQueries from '../src/test/rtl/data_test_subj_queries';
+
+/**
+ * Custom Storybook within util with EUI query helpers
+ * + additional chained async/waitFor component utils
+ *
+ * @see https://storybook.js.org/docs/writing-stories/play-function#writing-stories-with-the-play-function
+ * @see https://testing-library.com/docs/dom-testing-library/api-within/
+ */
+const customWithin = (canvasElement: HTMLElement) => {
+  const canvas = within<typeof queries & typeof dataTestSubjQueries>(
+    canvasElement,
+    { ...queries, ...dataTestSubjQueries }
+  );
+
+  return {
+    ...canvas,
+
+    /**
+     * 1. Loki doesn't like userEvent, only fireEvent
+     * 2. Storybook fires fireEvents too early (esp. on page load), so we add a waitFor
+     */
+    waitForAndClick: async (testSubject: string) => {
+      await waitFor(() =>
+        expect(canvas.getByTestSubject(testSubject)).toBeInTheDocument()
+      );
+      await fireEvent.click(canvas.getByTestSubject(testSubject));
+    },
+
+    waitForEuiPopoverVisible: async () =>
+      await waitFor(() =>
+        expect(canvasElement.querySelector('[data-popover-open]')).toBeVisible()
+      ),
+  };
+};
+
+export { customWithin as within };

packages/eui/changelogs/upcoming/7997.md

@@ -0,0 +1,4 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiDataGrid`'s toolbar controls to Emotion
+  - Removed `$euiDataGridPopoverMaxHeight`

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

@@ -465,18 +465,18 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
       data-test-subj="test subject string"
     >
       <div
-        class="euiDataGrid__controls"
+        class="euiDataGrid__controls emotion-euiDataGrid__controls"
         data-test-subj="dataGridControls"
       >
         <div
-          class="euiDataGrid__leftControls"
+          class="euiDataGrid__leftControls emotion-euiDataGrid__leftControls"
         >
           <div
             class="euiPopover emotion-euiPopover-inline-block"
             data-test-subj="dataGridColumnSelectorPopover"
           >
             <button
-              class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-EuiDataGridToolbarControl"
+              class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-underlineStyles"
               data-test-subj="dataGridColumnSelectorButton"
               type="button"
             >
@@ -494,7 +494,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
                 </span>
                 <span
                   aria-label="- Active: 2"
-                  class="euiNotificationBadge euiDataGridToolbarControl__badge emotion-euiNotificationBadge-s-subdued-EuiDataGridToolbarControl"
+                  class="euiNotificationBadge euiDataGridToolbarControl__badge emotion-euiNotificationBadge-s-subdued-badgeStyles"
                   role="marquee"
                 >
                   2
@@ -507,7 +507,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
           </button>
         </div>
         <div
-          class="euiDataGrid__rightControls"
+          class="euiDataGrid__rightControls emotion-euiDataGrid__rightControls"
         >
           <div
             class="euiPopover emotion-euiPopover-inline-block"
@@ -874,18 +874,18 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
       data-test-subj="test subject string"
     >
       <div
-        class="euiDataGrid__controls"
+        class="euiDataGrid__controls emotion-euiDataGrid__controls"
         data-test-subj="dataGridControls"
       >
         <div
-          class="euiDataGrid__leftControls"
+          class="euiDataGrid__leftControls emotion-euiDataGrid__leftControls"
         >
           <div
             class="euiPopover emotion-euiPopover-inline-block"
             data-test-subj="dataGridColumnSelectorPopover"
           >
             <button
-              class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-EuiDataGridToolbarControl"
+              class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-underlineStyles"
               data-test-subj="dataGridColumnSelectorButton"
               type="button"
             >
@@ -903,7 +903,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                 </span>
                 <span
                   aria-label="- Active: 2"
-                  class="euiNotificationBadge euiDataGridToolbarControl__badge emotion-euiNotificationBadge-s-subdued-EuiDataGridToolbarControl"
+                  class="euiNotificationBadge euiDataGridToolbarControl__badge emotion-euiNotificationBadge-s-subdued-badgeStyles"
                   role="marquee"
                 >
                   2
@@ -916,7 +916,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
           </button>
         </div>
         <div
-          class="euiDataGrid__rightControls"
+          class="euiDataGrid__rightControls emotion-euiDataGrid__rightControls"
         >
           <div
             class="euiPopover emotion-euiPopover-inline-block"
@@ -1477,18 +1477,18 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
       data-test-subj="test subject string"
     >
       <div
-        class="euiDataGrid__controls"
+        class="euiDataGrid__controls emotion-euiDataGrid__controls"
         data-test-subj="dataGridControls"
       >
         <div
-          class="euiDataGrid__leftControls"
+          class="euiDataGrid__leftControls emotion-euiDataGrid__leftControls"
         >
           <div
             class="euiPopover emotion-euiPopover-inline-block"
             data-test-subj="dataGridColumnSelectorPopover"
           >
             <button
-              class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-EuiDataGridToolbarControl"
+              class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-underlineStyles"
               data-test-subj="dataGridColumnSelectorButton"
               type="button"
             >
@@ -1506,7 +1506,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
                 </span>
                 <span
                   aria-label="- Active: 2"
-                  class="euiNotificationBadge euiDataGridToolbarControl__badge emotion-euiNotificationBadge-s-subdued-EuiDataGridToolbarControl"
+                  class="euiNotificationBadge euiDataGridToolbarControl__badge emotion-euiNotificationBadge-s-subdued-badgeStyles"
                   role="marquee"
                 >
                   2
@@ -1516,7 +1516,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
           </div>
         </div>
         <div
-          class="euiDataGrid__rightControls"
+          class="euiDataGrid__rightControls emotion-euiDataGrid__rightControls"
         >
           <div
             class="euiPopover emotion-euiPopover-inline-block"
@@ -1885,18 +1885,18 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
       data-test-subj="test subject string"
     >
       <div
-        class="euiDataGrid__controls"
+        class="euiDataGrid__controls emotion-euiDataGrid__controls"
         data-test-subj="dataGridControls"
       >
         <div
-          class="euiDataGrid__leftControls"
+          class="euiDataGrid__leftControls emotion-euiDataGrid__leftControls"
         >
           <div
             class="euiPopover emotion-euiPopover-inline-block"
             data-test-subj="dataGridColumnSelectorPopover"
           >
             <button
-              class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-EuiDataGridToolbarControl"
+              class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-underlineStyles"
               data-test-subj="dataGridColumnSelectorButton"
               type="button"
             >
@@ -1914,7 +1914,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
                 </span>
                 <span
                   aria-label="- Active: 2"
-                  class="euiNotificationBadge euiDataGridToolbarControl__badge emotion-euiNotificationBadge-s-subdued-EuiDataGridToolbarControl"
+                  class="euiNotificationBadge euiDataGridToolbarControl__badge emotion-euiNotificationBadge-s-subdued-badgeStyles"
                   role="marquee"
                 >
                   2
@@ -1924,7 +1924,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
           </div>
         </div>
         <div
-          class="euiDataGrid__rightControls"
+          class="euiDataGrid__rightControls emotion-euiDataGrid__rightControls"
         >
           <div
             class="euiPopover emotion-euiPopover-inline-block"

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

@@ -4,8 +4,3 @@
 @import 'body/footer/data_grid_footer_row';
 @import 'body/header/data_grid_column_resizer';
 @import 'data_grid_data_row';
-@import 'controls/data_grid_toolbar';
-@import 'controls/data_grid_column_selector';
-@import 'controls/data_grid_column_sorting';
-@import 'controls/data_grid_display';
-@import 'controls/data_grid_keyboard_shortcuts';

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

@@ -1,7 +1,6 @@
 $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
-$euiDataGridPopoverMaxHeight: $euiSize * 25;
 
 $euiDataGridCellPaddingS: $euiSizeXS;
 $euiDataGridCellPaddingM: $euiSizeM / 2;