diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png new file mode 100644 index 00000000000..712d47932b7 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png index 4f7e5cb6ebb..2ddeffd08dd 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png new file mode 100644 index 00000000000..e20bb64413f Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png index be96dbc2f67..1980ea112b7 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png differ diff --git a/packages/eui/changelogs/upcoming/7895.md b/packages/eui/changelogs/upcoming/7895.md new file mode 100644 index 00000000000..c35cdb6fc5f --- /dev/null +++ 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 index 7675c9bfac1..b7f1929f78d 100644 --- 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> = [ '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: () => , + width: euiTheme.size.xl, + }, + ...columns, + ] + : columns; + + return ( + + ); +}; + +export const ExpandedNestedTable: Story = { + parameters: { + controls: { + include: ['columns', 'items', 'itemIdToExpandedRowMap'], + }, + }, + args: { + tableCaption: 'EuiBasicTable playground', + items: users, + itemId: 'id', + rowHeader: 'firstName', + columns, + itemIdToExpandedRowMap: { + 1: , + 3: , + }, + 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 index e86e603b93f..14858cfab61 100644 --- 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 `` because padding can't be applied to `` 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 index a0717fb2e66..260f53a232e 100644 --- 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 = { - Cell 1 + {(args.hasActions || args.isExpander) && ( + Cell 1 + )}