Description
As part of the Emotion conversion for EUI table components (PR), there was a change made to improve alignment of nested table content which seems to causes overlapping content issues.
🔗 reported Kibana issue: elastic/kibana#188374
ℹ The issue only appears when selection is set as there is additional padding set for expanded rows when the table is selectable.
This is reproducible in EUI, e.g. locally in Storybook by nesting EuiBasicTable.
// Storybook reproduction example
const testColumns = [
{
name: '',
render: () => <EuiIcon type="warning" />,
width: '32px',
},
...columns,
];
export const ExpandedRow: Story = {
parameters: {
controls: {
include: ['columns', 'items', 'itemIdToExpandedRowMap'],
},
},
args: {
tableCaption: 'EuiBasicTable playground',
items: users,
itemId: 'id',
rowHeader: 'firstName',
columns: testColumns,
itemIdToExpandedRowMap: {
1: (
<EuiBasicTable
tableCaption="EuiBasicTable playground"
items={users}
itemId="id"
rowHeader="firstName"
columns={testColumns}
/>
),
},
selection: {
selectable: (user) => user.online,
selectableMessage: (selectable) =>
!selectable ? 'User is currently offline' : '',
onSelectionChange: action('onSelectionChange'),
},
},
};
Description
As part of the Emotion conversion for EUI table components (PR), there was a change made to improve alignment of nested table content which seems to causes overlapping content issues.
🔗 reported Kibana issue: elastic/kibana#188374
ℹ The issue only appears when
selectionis set as there is additional padding set for expanded rows when the table is selectable.This is reproducible in EUI, e.g. locally in Storybook by nesting
EuiBasicTable.