Convert expanded row animation + mobile styles

- note: the `_` prefix before the animation util fn prevents it from getting a label in Emotion's className logic
elastic · Mar 27, 2024 · a78d04a · a78d04a
1 parent a4dc17b
commit a78d04a
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 44 deletions.
diff --git a/src/components/table/_responsive.scss b/src/components/table/_responsive.scss
@@ -43,28 +43,6 @@
           top: $euiSizeXS;
         }
       }
-
-      &.euiTableRow-isExpandedRow {
-        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
@@ -152,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/table_row.styles.ts b/src/components/table/table_row.styles.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { css } from '@emotion/react';
+import { css, keyframes } from '@emotion/react';
 
 import { UseEuiTheme, tint, shade, transparentize } from '../../services';
 import {
@@ -20,6 +20,7 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
 
   const rowColors = _rowColorVariables(euiThemeContext);
+  const expandedAnimationCss = _expandedRowAnimation(euiThemeContext);
 
   const cellContentPadding = euiTheme.size.s;
   const mobileColumns = {
@@ -47,6 +48,7 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => {
       `,
       expanded: css`
         background-color: ${rowColors.hover};
+        ${expandedAnimationCss}
       `,
       clickable: css`
         &:hover {
@@ -150,13 +152,50 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => {
         `;
       },
       /**
-       * TODO: next
+       * Bottom of card - expanded rows
        */
-      expanded: css``,
+      expanded: css`
+        ${logicalCSS('margin-top', `-${mobileColumns.actions.offset}`)}
+        /* Padding accounting for the checkbox is already applied via the content */
+        ${logicalCSS('padding-left', cellContentPadding)}
+
+        ${logicalCSS('border-top', euiTheme.border.thin)}
+        ${logicalCSS('border-top-left-radius', 0)}
+        ${logicalCSS('border-top-right-radius', 0)}
+
+        .euiTableRowCell {
+          ${logicalCSS('width', '100%')}
+        }
+
+        ${expandedAnimationCss}
+      `,
     },
   };
 };
 
+const _expandedRowAnimation = ({ euiTheme }: UseEuiTheme) => {
+  // Do not attempt to animate to height auto - down that road dragons lie
+  // @see https://github.com/elastic/eui/pull/6826
+  const expandRow = keyframes`
+    0% {
+      opacity: 0;
+      transform: translateY(-${euiTheme.size.m});
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  `;
+
+  // Animation must be on the contents div inside, not the row itself
+  return css`
+    .euiTableCellContent {
+      animation: ${euiTheme.animation.fast} ${euiTheme.animation.resistance} 1
+        normal none ${expandRow};
+    }
+  `;
+};
+
 const _rowColorVariables = ({ euiTheme, colorMode }: UseEuiTheme) => ({
   hover:
     colorMode === 'DARK'