[setup] DRY out new euiTableVariables util

- table cells will use these shortly, so we might as well make it now
elastic · Mar 27, 2024 · fa55991 · fa55991
1 parent 6b9ef79
commit fa55991
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 30 deletions.
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`

diff --git a/src/components/table/table_row.styles.ts b/src/components/table/table_row.styles.ts
@@ -9,33 +9,19 @@
 import { css, keyframes } from '@emotion/react';
 
 import { UseEuiTheme, tint, shade, transparentize } from '../../services';
-import {
-  euiBackgroundColor,
-  logicalCSS,
-  mathWithUnits,
-} from '../../global_styling';
+import { euiBackgroundColor, logicalCSS } from '../../global_styling';
 import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
 
+import { euiTableVariables } from './table.styles';
+
 export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
 
   const rowColors = _rowColorVariables(euiThemeContext);
   const expandedAnimationCss = _expandedRowAnimation(euiThemeContext);
 
-  const cellContentPadding = euiTheme.size.s;
-  const mobileColumns = {
-    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),
-    },
-  };
+  const { cellContentPadding, mobileSizes } =
+    euiTableVariables(euiThemeContext);
 
   return {
     euiTableRow: css``,
@@ -97,26 +83,26 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => {
        * Used for selection checkbox
        */
       selectable: css`
-        ${logicalCSS('padding-left', mobileColumns.checkbox.width)}
+        ${logicalCSS('padding-left', mobileSizes.checkbox.width)}
 
         .euiTableRowCellCheckbox {
           position: absolute;
           ${logicalCSS('top', cellContentPadding)}
-          ${logicalCSS('left', mobileColumns.checkbox.offset)}
+          ${logicalCSS('left', mobileSizes.checkbox.offset)}
         }
       `,
       /**
        * Right column styles + border
        * Used for cell actions and row expander arrow
        */
       hasRightColumn: css`
-        ${logicalCSS('padding-right', mobileColumns.actions.width)}
+        ${logicalCSS('padding-right', mobileSizes.actions.width)}
 
         &::after {
           content: '';
           position: absolute;
           ${logicalCSS('vertical', 0)}
-          ${logicalCSS('right', mobileColumns.actions.width)}
+          ${logicalCSS('right', mobileSizes.actions.width)}
           ${logicalCSS('width', euiTheme.border.width.thin)}
           background-color: ${euiTheme.border.color};
         }
@@ -126,7 +112,7 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => {
         ${logicalCSS('right', 0)}
         /* TODO: remove !important once euiTableRowCell is converted to Emotion */
         ${logicalCSS('min-width', '0 !important')}
-        ${logicalCSS('width', mobileColumns.actions.width)}
+        ${logicalCSS('width', mobileSizes.actions.width)}
 
         .euiTableCellContent {
           display: flex;
@@ -140,23 +126,23 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => {
         return css`
           .euiTableRowCell--hasActions {
             ${this.rightColumnContent}
-            ${logicalCSS('top', mobileColumns.actions.offset)}
+            ${logicalCSS('top', mobileSizes.actions.offset)}
           }
         `;
       },
       get expandable() {
         return css`
           .euiTableRowCell--isExpander {
             ${this.rightColumnContent}
-            ${logicalCSS('bottom', mobileColumns.actions.offset)}
+            ${logicalCSS('bottom', mobileSizes.actions.offset)}
           }
         `;
       },
       /**
        * Bottom of card - expanded rows
        */
       expanded: css`
-        ${logicalCSS('margin-top', `-${mobileColumns.actions.offset}`)}
+        ${logicalCSS('margin-top', `-${mobileSizes.actions.offset}`)}
         /* Padding accounting for the checkbox is already applied via the content */
         ${logicalCSS('padding-left', cellContentPadding)}