diff --git a/changelogs/upcoming/7631.md b/changelogs/upcoming/7631.md new file mode 100644 index 00000000000..f2647c0b2d3 --- /dev/null +++ b/changelogs/upcoming/7631.md @@ -0,0 +1,3 @@ +**DOM changes** + +- `EuiTableRowCell` now applies passed `className`s to the parent `` element, instead of to the inner cell content `
`. diff --git a/changelogs/upcoming/TBD.md b/changelogs/upcoming/TBD.md index 14e262d98d2..4cf75777eba 100644 --- a/changelogs/upcoming/TBD.md +++ b/changelogs/upcoming/TBD.md @@ -9,3 +9,5 @@ - `$euiTableFocusClickableColor` - Removed the following `EuiTable` Sass mixins: - `euiTableActionsBackgroundMobile` + - `euiTableCellCheckbox` + - `euiTableCell` diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap index f7c7e222ae1..1a0bfd7b09a 100644 --- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap @@ -17,7 +17,7 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
Name
@@ -69,10 +69,10 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = ` class="euiTableRow emotion-euiTableRow-desktop" >
Name
@@ -91,10 +91,10 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = ` class="euiTableRow emotion-euiTableRow-desktop" >
Name
@@ -129,7 +129,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
@@ -254,7 +254,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin class="euiTableRow euiTableRow-isSelectable euiTableRow-hasActions emotion-euiTableRow-desktop" >
Name
@@ -291,10 +291,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
ID
@@ -309,10 +309,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
Age
@@ -327,10 +327,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
Name
@@ -412,10 +412,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
ID
@@ -430,10 +430,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
Age
@@ -448,10 +448,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
Name
@@ -533,10 +533,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
ID
@@ -551,10 +551,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
Age
@@ -569,10 +569,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
Name
@@ -310,10 +310,10 @@ exports[`EuiInMemoryTable with items 1`] = ` class="euiTableRow emotion-euiTableRow-desktop" >
Name
@@ -332,10 +332,10 @@ exports[`EuiInMemoryTable with items 1`] = ` class="euiTableRow emotion-euiTableRow-desktop" >
Name
diff --git a/src/components/basic_table/basic_table.test.tsx b/src/components/basic_table/basic_table.test.tsx index bf9513474ff..6239fdf69f1 100644 --- a/src/components/basic_table/basic_table.test.tsx +++ b/src/components/basic_table/basic_table.test.tsx @@ -692,6 +692,40 @@ describe('EuiBasicTable', () => { ); }); + test('custom item actions', () => { + const props: EuiBasicTableProps = { + items: basicItems, + columns: [ + ...basicColumns, + { + name: 'Actions', + actions: [ + { + render: ({ id }) => ( + + ), + available: ({ id }) => id !== '3', + }, + ], + }, + ], + responsiveBreakpoint: true, // Needs to be in mobile to render customAction cell CSS + }; + const { queryByTestSubject, container } = render( + + ); + + expect(queryByTestSubject('customAction-1')).toBeInTheDocument(); + expect(queryByTestSubject('customAction-2')).toBeInTheDocument(); + expect(queryByTestSubject('customAction-3')).not.toBeInTheDocument(); + + expect( + container.querySelector('.euiTableRowCell--hasActions')!.className + ).toContain('-customActions'); + }); + describe('are disabled on selection', () => { test('single action', () => { const props: EuiBasicTableProps = { diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx index f3aeec4c963..d91076abe44 100644 --- a/src/components/basic_table/basic_table.tsx +++ b/src/components/basic_table/basic_table.tsx @@ -61,7 +61,7 @@ import { EuiI18n } from '../i18n'; import { EuiDelayRender } from '../delay_render'; import { htmlIdGenerator } from '../../services/accessibility'; -import { Action } from './action_types'; +import { Action, CustomItemAction } from './action_types'; import { EuiTableActionsColumnType, EuiTableComputedColumnType, @@ -1147,6 +1147,10 @@ export class EuiBasicTable extends Component< // Disable all actions if any row(s) are selected const allDisabled = this.state.selection.length > 0; + const hasCustomActions = column.actions.some( + (action: Action) => !!(action as CustomItemAction).render + ); + let actualActions = column.actions.filter( (action: Action) => !action.available || action.available(item) ); @@ -1181,15 +1185,6 @@ export class EuiBasicTable extends Component< }); } - const tools = ( - - ); - const key = `record_actions_${itemId}_${columnIndex}`; return ( extends Component< key={key} align="right" textOnly={false} - hasActions={true} + hasActions={hasCustomActions ? 'custom' : true} css={euiBasicTableActionsWrapper} > - {tools} + ); } diff --git a/src/components/table/__snapshots__/table.test.tsx.snap b/src/components/table/__snapshots__/table.test.tsx.snap index 8fa9470b448..a62b8b6a99a 100644 --- a/src/components/table/__snapshots__/table.test.tsx.snap +++ b/src/components/table/__snapshots__/table.test.tsx.snap @@ -10,7 +10,7 @@ exports[`EuiTable renders 1`] = ` @@ -26,7 +26,7 @@ exports[`EuiTable renders 1`] = ` @@ -48,7 +48,7 @@ exports[`EuiTable renders 1`] = ` class="euiTableRow emotion-euiTableRow-desktop" >
@@ -120,7 +120,7 @@ exports[`sorting does not render a button with readOnly 1`] = ` @@ -151,7 +151,7 @@ exports[`sorting is rendered with isSortAscending 1`] = ` @@ -182,7 +182,7 @@ exports[`sorting is rendered with isSorted 1`] = ` @@ -213,12 +213,12 @@ exports[`sorting renders a button with onSort 1`] = `