[EuiTable EuiBasicTable] Fix nested content alignment when selection …

…is enabled (#7895)
elastic · Jul 22, 2024 · e220343 · e220343
1 parent 2beb7e8
commit e220343
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 4 deletions.
diff --git a/...eference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png b/...eference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png
diff --git a/...ome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png b/...ome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png
diff --git a/...reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png b/...reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png
diff --git a/...rome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png b/...rome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png
diff --git a/packages/eui/changelogs/upcoming/7895.md b/packages/eui/changelogs/upcoming/7895.md
@@ -0,0 +1,5 @@
+**Bug fixes**
+
+- Fixed overlapping content in  `EuiBasicTable` for expanded and selectable table rows
+- Fixed the alignment of `EuiBasicTable` mobile actions
+
diff --git a/packages/eui/src/components/basic_table/basic_table.stories.tsx b/packages/eui/src/components/basic_table/basic_table.stories.tsx
@@ -12,6 +12,7 @@ import { action } from '@storybook/addon-actions';
 import { faker } from '@faker-js/faker';
 import { moveStorybookControlsToCategory } from '../../../.storybook/utils';
 
+import { useEuiTheme } from '../../services';
 import { EuiLink } from '../link';
 import { EuiHealth } from '../health';
 
@@ -20,6 +21,7 @@ import type {
   EuiBasicTableColumn,
 } from './basic_table';
 import { EuiBasicTable, EuiBasicTableProps } from './basic_table';
+import { EuiIcon } from '../icon';
 
 // Set static seed so that the generated faker data is consistent between page loads
 faker.seed(8_02_2010);
@@ -148,7 +150,7 @@ const columns: Array<EuiBasicTableColumn<User>> = [
         'data-test-subj': 'action-outboundlink',
       },
       {
-        name: <>Clone</>,
+        name: 'Clone',
         description: 'Clone this user',
         icon: 'copy',
         type: 'icon',
@@ -263,6 +265,61 @@ export const ExpandedRow: Story = {
   },
 };
 
+const NestedTable = ({
+  hasLeadingIcon = false,
+}: {
+  hasLeadingIcon?: boolean;
+}) => {
+  const { euiTheme } = useEuiTheme();
+
+  const _items = users.slice(0, 3);
+  const _columns = hasLeadingIcon
+    ? [
+        {
+          name: '',
+          render: () => <EuiIcon type="warning" />,
+          width: euiTheme.size.xl,
+        },
+        ...columns,
+      ]
+    : columns;
+
+  return (
+    <EuiBasicTable
+      tableCaption="EuiBasicTable playground"
+      items={_items}
+      itemId="id"
+      rowHeader="firstName"
+      columns={_columns}
+    />
+  );
+};
+
+export const ExpandedNestedTable: Story = {
+  parameters: {
+    controls: {
+      include: ['columns', 'items', 'itemIdToExpandedRowMap'],
+    },
+  },
+  args: {
+    tableCaption: 'EuiBasicTable playground',
+    items: users,
+    itemId: 'id',
+    rowHeader: 'firstName',
+    columns,
+    itemIdToExpandedRowMap: {
+      1: <NestedTable />,
+      3: <NestedTable hasLeadingIcon />,
+    },
+    selection: {
+      selectable: (user) => user.online,
+      selectableMessage: (selectable) =>
+        !selectable ? 'User is currently offline' : '',
+      onSelectionChange: action('onSelectionChange'),
+    },
+  },
+};
+
 const StatefulPlayground = ({
   items,
   pagination,

diff --git a/packages/eui/src/components/table/table_row.styles.ts b/packages/eui/src/components/table/table_row.styles.ts
@@ -64,7 +64,7 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => {
       // Offset expanded & selectable rows by the checkbox width to line up content with the 2nd column
       // Set on the `<td>` because padding can't be applied to `<tr>` elements directly
       checkboxOffset: css`
-        .euiTableRowCell:first-child {
+        & > .euiTableRowCell:first-child {
           ${logicalCSS('padding-left', checkboxSize)}
         }
       `,
@@ -124,7 +124,7 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => {
         ${logicalCSS('border-top-left-radius', 0)}
         ${logicalCSS('border-top-right-radius', 0)}
 
-        .euiTableRowCell {
+        > .euiTableRowCell {
           ${logicalCSS('width', '100%')}
         }
 

diff --git a/packages/eui/src/components/table/table_row_cell.stories.tsx b/packages/eui/src/components/table/table_row_cell.stories.tsx
@@ -28,7 +28,9 @@ const meta: Meta<EuiTableRowCellProps> = {
       <EuiTable>
         <EuiTableBody>
           <EuiTableRow hasActions={args.hasActions}>
-            <EuiTableRowCell>Cell 1</EuiTableRowCell>
+            {(args.hasActions || args.isExpander) && (
+              <EuiTableRowCell>Cell 1</EuiTableRowCell>
+            )}
             <Story {...args} />
           </EuiTableRow>
         </EuiTableBody>