[EuiTable] Add optional transparent table via hasBackground prop

packages/eui-theme-borealis/changelogs/upcoming/9224.md

@@ -0,0 +1,2 @@
+- Added component token `components.tableFooterBackground`
+

packages/eui-theme-borealis/src/variables/_components.ts

@@ -343,6 +343,7 @@ const component_colors: _EuiThemeComponentColors = {
     ([backgroundFilledText]) => backgroundFilledText,
     ['colors.backgroundFilledText']
   ),
+  tableFooterBackground: SEMANTIC_COLORS.shade15,
 
   tooltipBackground: dark_background_colors.backgroundBaseSubdued,
   tooltipBorder: dark_border_colors.borderBaseSubdued,
@@ -419,5 +420,6 @@ export const components: _EuiThemeComponents = {
     ),
     tableRowBackgroundMarked: SEMANTIC_COLORS.warning140,
     tableRowBackgroundMarkedHover: SEMANTIC_COLORS.warning130,
+    tableFooterBackground: SEMANTIC_COLORS.shade135,
   },
 };

packages/eui-theme-common/changelogs/upcoming/9224.md

@@ -0,0 +1,2 @@
+- Added type for component token `components.tableFooterBackground`
+

packages/eui-theme-common/src/global_styling/variables/components.ts

@@ -142,6 +142,7 @@ export type _EuiThemeComponentColors = {
   tableRowBackgroundMarked: ColorModeSwitch;
   tableRowBackgroundMarkedHover: ColorModeSwitch;
   tableCellSortableIconColor: ColorModeSwitch;
+  tableFooterBackground: ColorModeSwitch;
 
   tooltipBackground: ColorModeSwitch;
   tooltipBorder: ColorModeSwitch;

packages/eui/changelogs/upcoming/9224.md

@@ -0,0 +1,8 @@
+- Added `hasBackground` prop on `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable`
+- Added component token `components.tableFooterBackground`
+- Updated the color of mobile table header cells to use `colors.textSubdued`
+
+**Bug fixes**
+
+- Fixed a visual bug for mobile table action buttons that causes shifting positions when changing color mode ([#8231](https://github.com/elastic/eui/issues/8231))
+

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

@@ -2,7 +2,7 @@
 
 exports[`EuiBasicTable actions custom item actions 1`] = `
 <tr
-  class="euiTableRow euiTableRow-isSelectable euiTableRow-hasActions emotion-euiTableRow-mobile"
+  class="euiTableRow euiTableRow-isSelectable euiTableRow-hasActions emotion-euiTableRow-mobile-hasBackground"
 >
   <td
     class="euiTableRowCell euiTableRowCell--hasActions emotion-euiTableRowCell-hasActions-middle-mobile-customActions"
@@ -45,7 +45,7 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
     𐘂𐘂
   </span>
   <table
-    class="euiTable emotion-euiTable-fixed-uncompressed-desktop"
+    class="euiTable emotion-euiTable-fixed-uncompressed-hasBackground-desktop"
     id="__table_generated-id"
     tabindex="-1"
   >
@@ -199,7 +199,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
     𐘂𐘂
   </span>
   <table
-    class="euiTable emotion-euiTable-fixed-uncompressed-desktop"
+    class="euiTable emotion-euiTable-fixed-uncompressed-hasBackground-desktop"
     id="__table_generated-id"
     tabindex="-1"
   >
@@ -831,7 +831,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
     <tfoot>
       <tr>
         <td
-          class="euiTableFooterCell emotion-euiTableFooterCell"
+          class="euiTableFooterCell emotion-euiTableFooterCell-hasBackground"
         >
           <div
             class="euiTableCellContent emotion-euiTableCellContent-truncateText"
@@ -842,7 +842,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </div>
         </td>
         <td
-          class="euiTableFooterCell emotion-euiTableFooterCell"
+          class="euiTableFooterCell emotion-euiTableFooterCell-hasBackground"
         >
           <div
             class="euiTableCellContent emotion-euiTableCellContent-truncateText"
@@ -853,7 +853,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </div>
         </td>
         <td
-          class="euiTableFooterCell emotion-euiTableFooterCell"
+          class="euiTableFooterCell emotion-euiTableFooterCell-hasBackground"
         >
           <div
             class="euiTableCellContent emotion-euiTableCellContent-truncateText"
@@ -869,7 +869,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </div>
         </td>
         <td
-          class="euiTableFooterCell emotion-euiTableFooterCell"
+          class="euiTableFooterCell emotion-euiTableFooterCell-hasBackground"
         >
           <div
             class="euiTableCellContent emotion-euiTableCellContent-truncateText"
@@ -880,7 +880,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </div>
         </td>
         <td
-          class="euiTableFooterCell emotion-euiTableFooterCell"
+          class="euiTableFooterCell emotion-euiTableFooterCell-hasBackground"
         >
           <div
             class="euiTableCellContent emotion-euiTableCellContent-truncateText"

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

@@ -168,7 +168,7 @@ exports[`EuiInMemoryTable empty array 1`] = `
     𐘂𐘂
   </span>
   <table
-    class="euiTable emotion-euiTable-fixed-uncompressed-desktop"
+    class="euiTable emotion-euiTable-fixed-uncompressed-hasBackground-desktop"
     id="__table_generated-id"
     tabindex="-1"
   >
@@ -270,7 +270,7 @@ exports[`EuiInMemoryTable with items 1`] = `
     𐘂𐘂
   </span>
   <table
-    class="euiTable emotion-euiTable-fixed-uncompressed-desktop"
+    class="euiTable emotion-euiTable-fixed-uncompressed-hasBackground-desktop"
     id="__table_generated-id"
     tabindex="-1"
   >

packages/eui/src/components/basic_table/basic_table.stories.tsx

@@ -23,6 +23,7 @@ import type {
 } from './basic_table';
 import { EuiBasicTable, EuiBasicTableProps } from './basic_table';
 import { EuiIcon } from '../icon';
+import { Pagination } from './pagination_bar';
 
 // Set static seed so that the generated faker data is consistent between page loads
 faker.seed(8_02_2010);
@@ -40,6 +41,7 @@ const meta: Meta<EuiBasicTableProps<User>> = {
     // Inherited from EuiTable
     responsiveBreakpoint: 'm',
     tableLayout: 'fixed',
+    hasBackground: true,
     // set up for easier testing/QA
     cellProps: {
       'data-test-subj': `basic-table-cell`,
@@ -52,7 +54,7 @@ const meta: Meta<EuiBasicTableProps<User>> = {
 };
 moveStorybookControlsToCategory(
   meta,
-  ['responsiveBreakpoint', 'tableLayout'],
+  ['responsiveBreakpoint', 'tableLayout', 'hasBackground'],
   'EuiTable props'
 );
 
@@ -259,7 +261,7 @@ export const MarkedRow: Story = {
       })}  />`,
     },
     controls: {
-      include: ['rowProps', 'columns', 'items'],
+      include: ['rowProps', 'columns', 'items', 'hasBackground'],
     },
   },
   args: {
@@ -275,7 +277,7 @@ export const MarkedRow: Story = {
 export const ExpandedRow: Story = {
   parameters: {
     controls: {
-      include: ['columns', 'items', 'itemIdToExpandedRowMap'],
+      include: ['columns', 'items', 'itemIdToExpandedRowMap', 'hasBackground'],
     },
   },
   args: {
@@ -295,11 +297,15 @@ export const ExpandedRow: Story = {
   },
 };
 
+type NestedTableProps = {
+  hasLeadingIcon?: boolean;
+  hasBackground?: boolean;
+};
+
 const NestedTable = ({
   hasLeadingIcon = false,
-}: {
-  hasLeadingIcon?: boolean;
-}) => {
+  hasBackground = true,
+}: NestedTableProps) => {
   const { euiTheme } = useEuiTheme();
 
   const _items = users.slice(0, 3);
@@ -321,14 +327,15 @@ const NestedTable = ({
       itemId="id"
       rowHeader="firstName"
       columns={_columns}
+      hasBackground={hasBackground}
     />
   );
 };
 
 export const ExpandedNestedTable: Story = {
   parameters: {
     controls: {
-      include: ['columns', 'items', 'itemIdToExpandedRowMap'],
+      include: ['columns', 'items', 'itemIdToExpandedRowMap', 'hasBackground'],
     },
   },
   args: {
@@ -348,6 +355,32 @@ export const ExpandedNestedTable: Story = {
       onSelectionChange: action('onSelectionChange'),
     },
   },
+  render: function Render({
+    itemIdToExpandedRowMap,
+    hasBackground,
+    ...rest
+  }: EuiBasicTableProps<User>) {
+    // story-only logic to inject hasBackground into nested tables
+    // do not use in consumer code, set hasBackground directly on the nested table instead
+    const _itemIdToExpandedRowMap = Object.fromEntries(
+      Object.entries(itemIdToExpandedRowMap || {}).map(([key, value]) => [
+        key,
+        React.isValidElement(value)
+          ? React.cloneElement(value, { hasBackground } as NestedTableProps)
+          : value,
+      ])
+    );
+
+    return (
+      <StatefulPlayground
+        // only passed to ensure same base size, casting to prevent showing the pagination controls
+        pagination={{ pageSize: 5 } as Pagination}
+        hasBackground={hasBackground}
+        itemIdToExpandedRowMap={_itemIdToExpandedRowMap}
+        {...rest}
+      />
+    );
+  },
 };
 
 export const DarkMode: Story = {
@@ -394,6 +427,18 @@ export const LargeExpandedRow: Story = {
   },
 };
 
+export const ExpandedNestedTableWithoutBackground: Story = {
+  tags: ['vrt-only'],
+  args: {
+    ...ExpandedNestedTable.args,
+    hasBackground: false,
+    itemIdToExpandedRowMap: {
+      1: <NestedTable hasBackground={false} />,
+      3: <NestedTable hasBackground={false} hasLeadingIcon />,
+    },
+  },
+};
+
 const StatefulPlayground = ({
   items,
   pagination,

packages/eui/src/components/basic_table/basic_table.tsx

@@ -520,6 +520,7 @@ export class EuiBasicTable<T extends object = any> extends Component<
       tableCaption,
       rowHeader,
       tableLayout,
+      hasBackground,
       ...rest
     } = this.props;
 
@@ -541,8 +542,13 @@ export class EuiBasicTable<T extends object = any> extends Component<
   }
 
   renderTable() {
-    const { compressed, responsiveBreakpoint, tableLayout, loading } =
-      this.props;
+    const {
+      compressed,
+      responsiveBreakpoint,
+      tableLayout,
+      hasBackground,
+      loading,
+    } = this.props;
 
     return (
       <>
@@ -556,6 +562,7 @@ export class EuiBasicTable<T extends object = any> extends Component<
             tableLayout={tableLayout}
             responsiveBreakpoint={responsiveBreakpoint}
             compressed={compressed}
+            hasBackground={hasBackground}
             css={loading && safariLoadingWorkaround}
           >
             {this.renderTableCaption()}

packages/eui/src/components/basic_table/in_memory_table.stories.tsx

@@ -35,11 +35,12 @@ const meta: Meta<EuiInMemoryTableProps> = {
     // Inherited from EuiTable
     responsiveBreakpoint: 'm',
     tableLayout: 'fixed',
+    hasBackground: true,
   },
 };
 moveStorybookControlsToCategory(
   meta,
-  ['responsiveBreakpoint', 'tableLayout'],
+  ['responsiveBreakpoint', 'tableLayout', 'hasBackground'],
   'EuiTable props'
 );
 

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

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

packages/eui/src/components/table/__snapshots__/table_footer_cell.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`EuiTableFooterCell align defaults to left 1`] = `
   <tfoot>
     <tr>
       <td
-        class="euiTableFooterCell emotion-euiTableFooterCell"
+        class="euiTableFooterCell emotion-euiTableFooterCell-hasBackground"
       >
         <div
           class="euiTableCellContent emotion-euiTableCellContent-truncateText"
@@ -25,7 +25,7 @@ exports[`EuiTableFooterCell align renders center when specified 1`] = `
   <tfoot>
     <tr>
       <td
-        class="euiTableFooterCell emotion-euiTableFooterCell"
+        class="euiTableFooterCell emotion-euiTableFooterCell-hasBackground"
       >
         <div
           class="euiTableCellContent emotion-euiTableCellContent-center-truncateText"
@@ -45,7 +45,7 @@ exports[`EuiTableFooterCell align renders right when specified 1`] = `
   <tfoot>
     <tr>
       <td
-        class="euiTableFooterCell emotion-euiTableFooterCell"
+        class="euiTableFooterCell emotion-euiTableFooterCell-hasBackground"
       >
         <div
           class="euiTableCellContent emotion-euiTableCellContent-right-truncateText"
@@ -66,7 +66,7 @@ exports[`EuiTableFooterCell is rendered 1`] = `
     <tr>
       <td
         aria-label="aria-label"
-        class="euiTableFooterCell testClass1 testClass2 emotion-euiTableFooterCell-euiTestCss"
+        class="euiTableFooterCell testClass1 testClass2 emotion-euiTableFooterCell-hasBackground-euiTestCss"
         data-test-subj="test subject string"
       >
         <div
@@ -89,7 +89,7 @@ exports[`EuiTableFooterCell width and style accepts style attribute 1`] = `
   <tfoot>
     <tr>
       <td
-        class="euiTableFooterCell emotion-euiTableFooterCell"
+        class="euiTableFooterCell emotion-euiTableFooterCell-hasBackground"
         style="width: 20%;"
       >
         <div
@@ -112,7 +112,7 @@ exports[`EuiTableFooterCell width and style accepts width attribute 1`] = `
   <tfoot>
     <tr>
       <td
-        class="euiTableFooterCell emotion-euiTableFooterCell"
+        class="euiTableFooterCell emotion-euiTableFooterCell-hasBackground"
         style="width: 10%;"
       >
         <div
@@ -135,7 +135,7 @@ exports[`EuiTableFooterCell width and style accepts width attribute as number 1`
   <tfoot>
     <tr>
       <td
-        class="euiTableFooterCell emotion-euiTableFooterCell"
+        class="euiTableFooterCell emotion-euiTableFooterCell-hasBackground"
         style="width: 100px;"
       >
         <div
@@ -158,7 +158,7 @@ exports[`EuiTableFooterCell width and style resolves style and width attribute 1
   <tfoot>
     <tr>
       <td
-        class="euiTableFooterCell emotion-euiTableFooterCell"
+        class="euiTableFooterCell emotion-euiTableFooterCell-hasBackground"
         style="width: 10%;"
       >
         <div

packages/eui/src/components/table/_table_cell_content.styles.ts

@@ -56,7 +56,6 @@ export const euiTableCellContentStyles = ({ euiTheme }: UseEuiTheme) => ({
     `,
     mobile: css`
       flex-direction: column;
-      padding: 0;
     `,
   },
 });