[EuiTable] Initial table styles setup (#7622)

src/components/basic_table/__snapshots__/basic_table.test.tsx.snap

@@ -22,12 +22,12 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
       </div>
     </div>
     <table
-      class="euiTable css-0 euiTable--responsive"
+      class="euiTable euiTable--responsive emotion-euiTable-fixed-uncompressed"
       id="__table_generated-id"
       tabindex="-1"
     >
       <caption
-        class="euiTableCaption emotion-euiScreenReaderOnly"
+        class="euiTableCaption emotion-euiTableCaptionStyles-euiScreenReaderOnly"
       />
       <thead>
         <tr>
@@ -197,12 +197,12 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
       </div>
     </div>
     <table
-      class="euiTable css-0 euiTable--responsive"
+      class="euiTable euiTable--responsive emotion-euiTable-fixed-uncompressed"
       id="__table_generated-id"
       tabindex="-1"
     >
       <caption
-        class="euiTableCaption emotion-euiScreenReaderOnly"
+        class="euiTableCaption emotion-euiTableCaptionStyles-euiScreenReaderOnly"
       />
       <thead>
         <tr>

src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap

@@ -118,12 +118,12 @@ exports[`EuiInMemoryTable empty array 1`] = `
       </div>
     </div>
     <table
-      class="euiTable css-0 euiTable--responsive"
+      class="euiTable euiTable--responsive emotion-euiTable-fixed-uncompressed"
       id="__table_generated-id"
       tabindex="-1"
     >
       <caption
-        class="euiTableCaption emotion-euiScreenReaderOnly"
+        class="euiTableCaption emotion-euiTableCaptionStyles-euiScreenReaderOnly"
       />
       <thead>
         <tr>
@@ -227,12 +227,12 @@ exports[`EuiInMemoryTable with items 1`] = `
       </div>
     </div>
     <table
-      class="euiTable css-0 euiTable--responsive"
+      class="euiTable euiTable--responsive emotion-euiTable-fixed-uncompressed"
       id="__table_generated-id"
       tabindex="-1"
     >
       <caption
-        class="euiTableCaption emotion-euiScreenReaderOnly"
+        class="euiTableCaption emotion-euiTableCaptionStyles-euiScreenReaderOnly"
       />
       <thead>
         <tr>

src/components/basic_table/basic_table.tsx

@@ -50,6 +50,7 @@ import {
   EuiTableRowCellCheckbox,
   EuiTableSortMobile,
 } from '../table';
+import { euiTableCaptionStyles } from '../table/table.styles';
 
 import { CollapsedItemActions } from './collapsed_item_actions';
 import { ExpandedItemActions } from './expanded_item_actions';
@@ -694,7 +695,7 @@ export class EuiBasicTable<T extends object = any> extends Component<
     }
     return (
       <EuiScreenReaderOnly>
-        <caption className="euiTableCaption">
+        <caption css={euiTableCaptionStyles} className="euiTableCaption">
           <EuiDelayRender>{captionElement}</EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>

src/components/table/__snapshots__/table.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`renders EuiTable 1`] = `
 <table
   aria-label="aria-label"
-  class="euiTable testClass1 testClass2 emotion-euiTestCss euiTable--responsive"
+  class="euiTable testClass1 testClass2 euiTable--responsive emotion-euiTable-fixed-uncompressed-euiTestCss"
   data-test-subj="test subject string"
   tabindex="-1"
 >

src/components/table/_responsive.scss

@@ -22,8 +22,6 @@
 
 @include euiBreakpoint('xs', 's') {
   .euiTable.euiTable--responsive {
-    // Not allowing compressed styles in mobile view (for now)
-
     thead {
       display: none; // Use mobile versions of selecting and filtering instead
     }

src/components/table/_table.scss

@@ -1,32 +1,3 @@
-.euiTable {
-  @include euiFontSizeS;
-  @include euiNumberFormat;
-
-  width: 100%;
-  table-layout: fixed;
-  border: none;
-  border-collapse: collapse;
-  background-color: $euiColorEmptyShade;
-
-  &.euiTable--auto {
-    table-layout: auto;
-  }
-}
-
-.euiTableCaption {
-  position: relative;
-}
-
-// Compressed styles not for mobile
-@include euiBreakpoint('m', 'l', 'xl') {
-  .euiTable--compressed {
-    .euiTableCellContent {
-      @include euiFontSizeXS;
-      padding: $euiTableCellContentPaddingCompressed;
-    }
-  }
-}
-
 .euiTableFooterCell,
 .euiTableHeaderCell {
   @include euiTableCell;
@@ -146,16 +117,13 @@
 
 /**
  * 1. Vertically align all children.
- * 2. The padding on this div allows the ellipsis to show if the content is truncated. If
- *    the padding was on the cell, the ellipsis would be cropped.
  * 4. Prevent very long single words (e.g. the name of a field in a document) from overflowing
  *    the cell.
  */
 .euiTableCellContent {
   overflow: hidden; /* 4 */
   display: flex;
   align-items: center; /* 1 */
-  padding: $euiTableCellContentPadding; /* 2 */
 }
 
 .euiTableCellContent__text {

src/components/table/table.styles.ts

@@ -0,0 +1,68 @@
+/*
+ * 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 { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../services';
+import { euiFontSize, euiNumberFormat, logicalCSS } from '../../global_styling';
+
+export const euiTableStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  const cellContentPadding = euiTheme.size.s;
+  const compressedCellContentPadding = euiTheme.size.xs;
+
+  return {
+    euiTable: css`
+      ${euiNumberFormat(euiThemeContext)}
+      ${logicalCSS('width', '100%')}
+      border: none;
+      border-collapse: collapse;
+      background-color: ${euiTheme.colors.emptyShade};
+    `,
+    layout: {
+      fixed: css`
+        table-layout: fixed;
+      `,
+      auto: css`
+        table-layout: auto;
+      `,
+    },
+    /**
+     * 1. The padding on the `.euiTableCellContent` div allows the ellipsis to show if the
+     * content is truncated. If the padding was on the cell, the ellipsis would be cropped.
+     * 2. The `:where()` selector sets the specificity to 0, allowing consumers to more easily
+     * override our CSS if needed
+     */
+    uncompressed: css`
+      font-size: ${euiFontSize(euiThemeContext, 's').fontSize};
+      line-height: ${euiFontSize(euiThemeContext, 'm').lineHeight};
+
+      /* 1 & 2 */
+      & :where(.euiTableCellContent) {
+        padding: ${cellContentPadding};
+      }
+    `,
+    compressed: css`
+      ${euiFontSize(euiThemeContext, 'xs')}
+
+      /* 1 & 2 */
+      & :where(.euiTableCellContent) {
+        padding: ${compressedCellContentPadding};
+      }
+    `,
+  };
+};
+
+// The table caption needs to not be absolutely positioned, because for some reason
+// it causes weird layout issues/double borders when used within a <table>
+// Also needs to be !important to override euiScreenReaderOnly absolute positioning
+export const euiTableCaptionStyles = css`
+  /* stylelint-disable declaration-no-important */
+  position: relative !important;
+`;

src/components/table/table.tsx

@@ -8,8 +8,12 @@
 
 import React, { FunctionComponent, TableHTMLAttributes } from 'react';
 import classNames from 'classnames';
+
+import { useEuiMemoizedStyles, useIsWithinMaxBreakpoint } from '../../services';
 import { CommonProps } from '../common';
 
+import { euiTableStyles } from './table.styles';
+
 export interface EuiTableProps
   extends CommonProps,
     TableHTMLAttributes<HTMLTableElement> {
@@ -21,11 +25,6 @@ export interface EuiTableProps
   tableLayout?: 'fixed' | 'auto';
 }
 
-const tableLayoutToClassMap: { [tableLayout: string]: string | null } = {
-  fixed: null,
-  auto: 'euiTable--auto',
-};
-
 export const EuiTable: FunctionComponent<EuiTableProps> = ({
   children,
   className,
@@ -34,18 +33,23 @@ export const EuiTable: FunctionComponent<EuiTableProps> = ({
   responsive = true,
   ...rest
 }) => {
-  const classes = classNames(
-    'euiTable',
-    className,
-    {
-      'euiTable--compressed': compressed,
-      'euiTable--responsive': responsive,
-    },
-    tableLayoutToClassMap[tableLayout]
-  );
+  // TODO: Make the table responsive breakpoint customizable via prop
+  const isResponsive = useIsWithinMaxBreakpoint('s') && responsive;
+
+  const classes = classNames('euiTable', className, {
+    'euiTable--responsive': responsive,
+  });
+
+  const styles = useEuiMemoizedStyles(euiTableStyles);
+  const cssStyles = [
+    styles.euiTable,
+    styles.layout[tableLayout],
+    (!compressed || isResponsive) && styles.uncompressed,
+    compressed && !isResponsive && styles.compressed,
+  ];
 
   return (
-    <table tabIndex={-1} className={classes} {...rest}>
+    <table tabIndex={-1} css={cssStyles} className={classes} {...rest}>
       {children}
     </table>
   );