🔥 Clean up cell content CSS classes

- remove extremely confusing `__expand` class names in favor of using the height type (that determines the kind of behavior the content has, e.g. flex vs absolutely positioned, etc) - Make sure only the heights that need certain CSS have that CSS (the non-default-height cells don't need display flex)
elastic · Oct 4, 2023 · 2247d9f · 2247d9f
1 parent 2f6a07b
commit 2247d9f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 63 deletions.
diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
@@ -46,7 +46,7 @@
      *
      * TODO: Remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=258539 is resolved
      */
-    .euiDataGridRowCell__expandContent {
+    .euiDataGridRowCell__defaultHeight .euiDataGridRowCell__content {
       animation-name: euiDataGridCellActionsSafariWorkaround;
       animation-duration: 1000ms; // I don't know why the duration matters or why it being longer works more consistently 🥲
       animation-delay: $euiAnimSpeedNormal + $euiAnimSpeedExtraFast; // Wait for above animation to finish
@@ -95,11 +95,6 @@
   &.euiDataGridRowCell--capitalize {
     text-transform: capitalize;
   }
-
-  .euiDataGridRowCell__numericalHeight {
-    height: 100%;
-    overflow: hidden;
-  }
 }
 
 .euiDataGridRowCell__popover {
@@ -118,28 +113,27 @@
   @include euiBottomShadow; // TODO: Convert to euiShadowMedium() in Emotion
 }
 
-.euiDataGridRowCell__expandFlex {
-  position: relative; // for positioning expand button
+.euiDataGridRowCell__contentWrapper {
+  position: relative; // Needed for .euiDataGridRowCell__actions--overlay
+  height: 100%;
+  overflow: hidden;
+}
+
+.euiDataGridRowCell__defaultHeight {
   display: flex;
   align-items: baseline;
-  height: 100%;
+  max-width: 100%;
+
+  .euiDataGridRowCell__content {
+    flex-grow: 1;
+  }
 
   .euiDataGridRowCell--controlColumn & {
+    height: 100%;
     align-items: center;
   }
 }
 
-.euiDataGridRowCell__expandContent {
-  flex-grow: 1;
-  max-width: 100%;
-  overflow: hidden;
-}
-
-.euiDataGridRowCell__contentByHeight {
-  flex-grow: 1;
-  height: 100%;
-}
-
 // Cell actions
 .euiDataGridRowCell__actions {
   display: flex;

diff --git a/src/components/datagrid/body/data_grid_cell.test.tsx b/src/components/datagrid/body/data_grid_cell.test.tsx
@@ -727,19 +727,9 @@ describe('EuiDataGridCell', () => {
       );
 
       expect(
-        component.find('.euiDataGridRowCell__expandContent').exists()
+        component.find('.euiDataGridRowCell__defaultHeight').exists()
       ).toBe(true);
-      expect(
-        component.find('.euiDataGridRowCell__contentByHeight').exists()
-      ).not.toBe(true);
-
-      expect(component.find('.euiDataGridRowCell__defaultHeight').render())
-        .toMatchInlineSnapshot(`
-        <div
-          class="euiDataGridRowCell__defaultHeight eui-textTruncate"
-          data-datagrid-cellcontent="true"
-        />
-      `);
+      expect(component.find('.eui-textTruncate').exists()).toBe(true);
     });
 
     test('auto', () => {
@@ -750,20 +740,10 @@ describe('EuiDataGridCell', () => {
         />
       );
 
-      expect(
-        component.find('.euiDataGridRowCell__expandContent').exists()
-      ).not.toBe(true);
-      expect(
-        component.find('.euiDataGridRowCell__contentByHeight').exists()
-      ).toBe(true);
-
-      expect(component.find('.euiDataGridRowCell__autoHeight').render())
-        .toMatchInlineSnapshot(`
-        <div
-          class="euiDataGridRowCell__autoHeight eui-textBreakWord"
-          data-datagrid-cellcontent="true"
-        />
-      `);
+      expect(component.find('.euiDataGridRowCell__autoHeight').exists()).toBe(
+        true
+      );
+      expect(component.find('.eui-textBreakWord').exists()).toBe(true);
     });
 
     test('numerical', () => {
@@ -774,13 +754,10 @@ describe('EuiDataGridCell', () => {
         />
       );
 
-      expect(component.find('.euiDataGridRowCell__numericalHeight').render())
-        .toMatchInlineSnapshot(`
-        <div
-          class="euiDataGridRowCell__numericalHeight eui-textBreakWord"
-          data-datagrid-cellcontent="true"
-        />
-      `);
+      expect(
+        component.find('.euiDataGridRowCell__numericalHeight').exists()
+      ).toBe(true);
+      expect(component.find('.eui-textBreakWord').exists()).toBe(true);
     });
 
     test('lineCount', () => {
@@ -791,13 +768,11 @@ describe('EuiDataGridCell', () => {
         />
       );
 
-      expect(component.find('div.euiDataGridRowCell__lineCountHeight').render())
-        .toMatchInlineSnapshot(`
-        <div
-          class="euiDataGridRowCell__lineCountHeight eui-textBreakWord euiTextBlockTruncate emotion-euiTextBlockTruncate"
-          data-datagrid-cellcontent="true"
-        />
-      `);
+      expect(
+        component.find('.euiDataGridRowCell__lineCountHeight').exists()
+      ).toBe(true);
+      expect(component.find('.eui-textBreakWord').exists()).toBe(true);
+      expect(component.find('.euiTextBlockTruncate').exists()).toBe(true);
     });
   });
 });
diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx
@@ -79,11 +79,13 @@ const EuiDataGridCellContent: FunctionComponent<
     const CellElement =
       renderCellValue as JSXElementConstructor<EuiDataGridCellValueElementProps>;
 
-    // TODO: Clean up expand/content by height shenanigans
-    const wrapperClasses = classNames();
+    const wrapperClasses = classNames(
+      'euiDataGridRowCell__contentWrapper',
+      `euiDataGridRowCell__${cellHeightType}Height`
+    );
 
     const classes = classNames(
-      `euiDataGridRowCell__${cellHeightType}Height`,
+      'euiDataGridRowCell__content',
       !isControlColumn && {
         'eui-textBreakWord': cellHeightType !== 'default',
         'eui-textTruncate': cellHeightType === 'default',