[EuiTableRow] Convert to Emotion (#7628)

elastic · Apr 5, 2024 · 5d6e644 · 5d6e644
1 parent c4be988
commit 5d6e644
Show file tree

Hide file tree

Showing 14 changed files with 400 additions and 193 deletions.
diff --git a/changelogs/upcoming/TBD.md b/changelogs/upcoming/TBD.md
@@ -0,0 +1,11 @@
+**CSS-in-JS conversions**
+
+- Removed the following `EuiTable` Sass variables:
+  - `$euiTableHoverColor`
+  - `$euiTableSelectedColor`
+  - `$euiTableHoverSelectedColor`
+  - `$euiTableActionsBorderColor`
+  - `$euiTableHoverClickableColor`
+  - `$euiTableFocusClickableColor`
+- Removed the following `EuiTable` Sass mixins:
+  - `euiTableActionsBackgroundMobile`
diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
       class="css-0"
     >
       <tr
-        class="euiTableRow"
+        class="euiTableRow emotion-euiTableRow-desktop"
       >
         <td
           class="euiTableRowCell euiTableRowCell--middle"
@@ -66,7 +66,7 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
         </td>
       </tr>
       <tr
-        class="euiTableRow"
+        class="euiTableRow emotion-euiTableRow-desktop"
       >
         <td
           class="euiTableRowCell euiTableRowCell--middle"
@@ -88,7 +88,7 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
         </td>
       </tr>
       <tr
-        class="euiTableRow"
+        class="euiTableRow emotion-euiTableRow-desktop"
       >
         <td
           class="euiTableRowCell euiTableRowCell--middle"
@@ -251,7 +251,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
       class="css-0"
     >
       <tr
-        class="euiTableRow euiTableRow-isSelectable euiTableRow-hasActions"
+        class="euiTableRow euiTableRow-isSelectable euiTableRow-hasActions emotion-euiTableRow-desktop"
       >
         <td
           class="euiTableRowCellCheckbox"
@@ -372,7 +372,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
         </td>
       </tr>
       <tr
-        class="euiTableRow euiTableRow-isSelectable euiTableRow-hasActions"
+        class="euiTableRow euiTableRow-isSelectable euiTableRow-hasActions emotion-euiTableRow-desktop"
       >
         <td
           class="euiTableRowCellCheckbox"
@@ -493,7 +493,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
         </td>
       </tr>
       <tr
-        class="euiTableRow euiTableRow-isSelectable euiTableRow-hasActions"
+        class="euiTableRow euiTableRow-isSelectable euiTableRow-hasActions emotion-euiTableRow-desktop"
       >
         <td
           class="euiTableRowCellCheckbox"

diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
@@ -192,7 +192,7 @@ exports[`EuiInMemoryTable empty array 1`] = `
       class="css-0"
     >
       <tr
-        class="euiTableRow"
+        class="euiTableRow emotion-euiTableRow-desktop"
       >
         <td
           class="euiTableRowCell euiTableRowCell--middle"
@@ -285,7 +285,7 @@ exports[`EuiInMemoryTable with items 1`] = `
       class="css-0"
     >
       <tr
-        class="euiTableRow"
+        class="euiTableRow emotion-euiTableRow-desktop"
       >
         <td
           class="euiTableRowCell euiTableRowCell--middle"
@@ -307,7 +307,7 @@ exports[`EuiInMemoryTable with items 1`] = `
         </td>
       </tr>
       <tr
-        class="euiTableRow"
+        class="euiTableRow emotion-euiTableRow-desktop"
       >
         <td
           class="euiTableRowCell euiTableRowCell--middle"
@@ -329,7 +329,7 @@ exports[`EuiInMemoryTable with items 1`] = `
         </td>
       </tr>
       <tr
-        class="euiTableRow"
+        class="euiTableRow emotion-euiTableRow-desktop"
       >
         <td
           class="euiTableRowCell euiTableRowCell--middle"

diff --git a/src/components/table/__snapshots__/table.test.tsx.snap b/src/components/table/__snapshots__/table.test.tsx.snap
@@ -45,7 +45,7 @@ exports[`EuiTable renders 1`] = `
   </thead>
   <tbody>
     <tr
-      class="euiTableRow"
+      class="euiTableRow emotion-euiTableRow-desktop"
     >
       <td
         class="euiTableRowCell euiTableRowCell--middle"
@@ -62,7 +62,7 @@ exports[`EuiTable renders 1`] = `
       </td>
     </tr>
     <tr
-      class="euiTableRow"
+      class="euiTableRow emotion-euiTableRow-desktop"
     >
       <td
         class="euiTableRowCell euiTableRowCell--middle"

diff --git a/src/components/table/__snapshots__/table_row.test.tsx.snap b/src/components/table/__snapshots__/table_row.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`isSelected renders true when specified 1`] = `
 <table>
   <tbody>
     <tr
-      class="euiTableRow euiTableRow-isSelected"
+      class="euiTableRow euiTableRow-isSelected emotion-euiTableRow-desktop-selected"
     >
       <td
         class="euiTableRowCell euiTableRowCell--middle"
@@ -27,7 +27,7 @@ exports[`renders EuiTableRow 1`] = `
   <tbody>
     <tr
       aria-label="aria-label"
-      class="euiTableRow testClass1 testClass2 emotion-euiTestCss"
+      class="euiTableRow testClass1 testClass2 emotion-euiTableRow-desktop-euiTestCss"
       data-test-subj="test subject string"
     >
       <td

diff --git a/src/components/table/_mixins.scss b/src/components/table/_mixins.scss
@@ -11,10 +11,3 @@
   width: $euiTableCellCheckboxWidth;
   vertical-align: middle;
 }
-
-@mixin euiTableActionsBackgroundMobile {
-  background-image: linear-gradient(to right, $euiTableActionsBorderColor 0, $euiTableActionsBorderColor 1px, transparent 1px, transparent 100%);
-  background-size: $euiTableActionsAreaWidth 100%;
-  background-position-x: right;
-  background-repeat: no-repeat;
-}
diff --git a/src/components/table/_responsive.scss b/src/components/table/_responsive.scss
@@ -24,51 +24,7 @@
       @include euiFontSizeM;
     }
 
-    // Make each row a Panel
-    @include euiPanel($selector: '.euiTableRow');
-
     .euiTableRow {
-      @include euiBottomShadowSmall;
-      background-color: map-get($euiPanelBackgroundColorModifiers, 'plain');
-      border-radius: $euiBorderRadius;
-      display: flex;
-      flex-wrap: wrap;
-      padding: $euiTableCellContentPadding;
-      margin-bottom: $euiTableCellContentPadding;
-
-      &:hover {
-        background-color: map-get($euiPanelBackgroundColorModifiers, 'plain');
-      }
-
-      &.euiTableRow-isExpandable,
-      &.euiTableRow-hasActions {
-        @include euiTableActionsBackgroundMobile;
-        padding-right: $euiSizeXXL;
-        position: relative;
-      }
-
-      &.euiTableRow-isExpandable .euiTableRowCell--isExpander,
-      &.euiTableRow-hasActions .euiTableRowCell--hasActions {
-        min-width: 0;
-        width: $euiSizeL;
-        position: absolute;
-        top: $euiTableCellContentPadding + (($euiTableCellContentPadding * $euiLineHeight) - $euiTableCellContentPadding) + $euiSizeXS; // same as row padding-top + cell padding + 1/2 line height
-        right: $euiTableCellContentPadding;
-
-        &::before {
-          display: none; // Don't display table headers
-        }
-
-        .euiTableCellContent {
-          flex-direction: column;
-          padding: 0;
-
-          .euiLink {
-            padding: $euiSizeXS;
-          }
-        }
-      }
-
       // Custom actions
       &:not(.euiTableRow-hasActions) .euiTableRowCell--hasActions:last-child {
         width: 100%;
@@ -79,67 +35,14 @@
           left: 0;
           right: 0;
           height: $euiBorderWidthThin;
-          background-color: $euiTableActionsBorderColor;
+          background-color: $euiBorderColor;
         }
 
         .euiTableCellContent {
           position: relative;
           top: $euiSizeXS;
         }
       }
-
-      &.euiTableRow-hasActions.euiTableRow-isExpandable {
-        .euiTableRowCell--isExpander {
-          top: auto;
-          bottom: $euiSize; // same as row padding-bottom
-          right: 0;
-        }
-      }
-
-      &.euiTableRow-isSelectable {
-        padding-left: $euiTableCellCheckboxWidth + ($euiTableCellContentPadding / 2);
-        position: relative;
-
-        .euiTableRowCellCheckbox {
-          position: absolute;
-          left: $euiTableCellContentPadding / 2;
-          top: $euiSizeS;
-        }
-      }
-
-      // override hover & selected colors
-      &.euiTableRow-isSelected {
-        &,
-        &:hover,
-        + .euiTableRow.euiTableRow-isExpandedRow,
-        &:hover + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell {
-          background-color: $euiTableSelectedColor;
-        }
-      }
-
-      &.euiTableRow-isExpandedRow {
-        @include euiTableActionsBackgroundMobile;
-        @include euiBottomShadowSmall;
-        margin-top: -$euiTableCellContentPadding * 2;
-        position: relative;
-        z-index: 2; // on top of its parent/previous row
-        border-top: none;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        padding-left: $euiSizeS; // override selectable as the padding is already applied via the contents
-
-        &:hover {
-          background-color: $euiColorEmptyShade; // keep white background to cover triggering row's border
-        }
-
-        .euiTableRowCell {
-          width: calc(100% - #{$euiSizeXXL});
-
-          &::before {
-            display: none;
-          }
-        }
-      }
     }
 
     .euiTableRowCell {

diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss
@@ -48,41 +48,9 @@
   border: none;
 }
 
-.euiTableRow {
-  &:hover {
-    background-color: $euiTableHoverColor;
-  }
-
-  &.euiTableRow-isClickable {
-    &:hover {
-      background-color: $euiTableHoverClickableColor;
-      cursor: pointer;
-    }
-
-    &:focus {
-      background-color: $euiTableFocusClickableColor;
-    }
-  }
-
-  &.euiTableRow-isExpandedRow {
-    background-color: $euiTableHoverColor;
-
-    &.euiTableRow-isSelectable .euiTableCellContent {
-      padding-left: $euiTableCellCheckboxWidth + $euiTableCellContentPadding;
-    }
-  }
-
-  &.euiTableRow-isSelected {
-    background-color: $euiTableSelectedColor;
-
-    + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell {
-      background-color: $euiTableSelectedColor;
-    }
-
-    &:hover,
-    &:hover + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell {
-      background-color: $euiTableHoverSelectedColor;
-    }
+.euiTableRow-isExpandedRow {
+  &.euiTableRow-isSelectable .euiTableCellContent {
+    padding-left: $euiTableCellCheckboxWidth + $euiTableCellContentPadding;
   }
 }
 
@@ -184,22 +152,3 @@
     }
   }
 }
-
-// Animate expanded row must be on the contents div inside
-// This adds a quick pop in animation, but does not attempt to animate to height auto
-// - down that road dragons lie. @see https://github.com/elastic/eui/issues/6770
-.euiTableRow-isExpandedRow .euiTableCellContent {
-  animation: $euiAnimSpeedFast $euiAnimSlightResistance 1 normal none growExpandedRow;
-}
-
-@keyframes growExpandedRow {
-  0% {
-    opacity: 0;
-    transform: translateY(-$euiSizeM);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
diff --git a/src/components/table/_variables.scss b/src/components/table/_variables.scss
@@ -4,14 +4,3 @@ $euiTableCellContentPadding: $euiSizeS;
 $euiTableCellContentPaddingCompressed: $euiSizeXS;
 
 $euiTableCellCheckboxWidth: $euiSizeXL;
-
-$euiTableActionsAreaWidth: $euiSizeXXL;
-
-// Colors
-
-$euiTableHoverColor: tintOrShade($euiColorLightestShade, 50%, 20%);
-$euiTableSelectedColor: tintOrShade($euiFocusBackgroundColor, 30%, 0%);
-$euiTableHoverSelectedColor: tintOrShade($euiFocusBackgroundColor, 0, 10%);
-$euiTableActionsBorderColor: transparentize($euiColorMediumShade, .9);
-$euiTableHoverClickableColor: transparentize($euiColorPrimary, .95);
-$euiTableFocusClickableColor: transparentize($euiColorPrimary, .9);
diff --git a/src/components/table/table.styles.ts b/src/components/table/table.styles.ts
@@ -9,13 +9,43 @@
 import { css } from '@emotion/react';
 
 import { UseEuiTheme } from '../../services';
-import { euiFontSize, euiNumberFormat, logicalCSS } from '../../global_styling';
+import {
+  euiFontSize,
+  euiNumberFormat,
+  logicalCSS,
+  mathWithUnits,
+} from '../../global_styling';
+
+export const euiTableVariables = ({ euiTheme }: UseEuiTheme) => {
+  const cellContentPadding = euiTheme.size.s;
+  const compressedCellContentPadding = euiTheme.size.xs;
+
+  const mobileSizes = {
+    actions: {
+      width: euiTheme.size.xxl,
+      offset: mathWithUnits(cellContentPadding, (x) => x * 2),
+    },
+    checkbox: {
+      width: mathWithUnits(
+        [euiTheme.size.xl, euiTheme.size.xs],
+        (x, y) => x + y
+      ),
+      offset: mathWithUnits(cellContentPadding, (x) => x / 2),
+    },
+  };
+
+  return {
+    cellContentPadding,
+    compressedCellContentPadding,
+    mobileSizes,
+  };
+};
 
 export const euiTableStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
 
-  const cellContentPadding = euiTheme.size.s;
-  const compressedCellContentPadding = euiTheme.size.xs;
+  const { cellContentPadding, compressedCellContentPadding } =
+    euiTableVariables(euiThemeContext);
 
   return {
     euiTable: css`