diff --git a/changelogs/upcoming/7632.md b/changelogs/upcoming/7632.md new file mode 100644 index 00000000000..4bcdfa32ca4 --- /dev/null +++ b/changelogs/upcoming/7632.md @@ -0,0 +1,10 @@ +**Breaking changes** + +- The following props are no longer needed by `EuiBasicTable` or `EuiInMemoryTable` for responsive table behavior to work correctly, and can be removed: + - `isSelectable` + - `isExpandable` + - `hasActions` + +**DOM changes** + +- `EuiTableRow`s rendered by basic and memory tables now only render a `.euiTableRow-isSelectable` className if the selection checkbox is not disabled diff --git a/changelogs/upcoming/TBD.md b/changelogs/upcoming/TBD.md index 4cf75777eba..485a1d0f246 100644 --- a/changelogs/upcoming/TBD.md +++ b/changelogs/upcoming/TBD.md @@ -1,6 +1,9 @@ **CSS-in-JS conversions** - Removed the following `EuiTable` Sass variables: + - `$euiTableCellContentPadding` + - `$euiTableCellContentPaddingCompressed` + - `$euiTableCellCheckboxWidth` - `$euiTableHoverColor` - `$euiTableSelectedColor` - `$euiTableHoverSelectedColor` diff --git a/src-docs/src/views/tables/actions/actions.tsx b/src-docs/src/views/tables/actions/actions.tsx index b58480ada7a..38e6befa478 100644 --- a/src-docs/src/views/tables/actions/actions.tsx +++ b/src-docs/src/views/tables/actions/actions.tsx @@ -396,7 +396,6 @@ export default () => { pagination={pagination} sorting={sorting} selection={selection} - hasActions={customAction ? false : true} onChange={onTableChange} /> diff --git a/src-docs/src/views/tables/custom/custom.tsx b/src-docs/src/views/tables/custom/custom.tsx index aad9499ad03..b9c33df3588 100644 --- a/src-docs/src/views/tables/custom/custom.tsx +++ b/src-docs/src/views/tables/custom/custom.tsx @@ -686,7 +686,7 @@ export default class extends Component<{}, State> { {cells} diff --git a/src-docs/src/views/tables/expanding_rows/expanding_rows.tsx b/src-docs/src/views/tables/expanding_rows/expanding_rows.tsx index 5bc6b62a6bd..faa1f019178 100644 --- a/src-docs/src/views/tables/expanding_rows/expanding_rows.tsx +++ b/src-docs/src/views/tables/expanding_rows/expanding_rows.tsx @@ -260,12 +260,9 @@ export default () => { items={pageOfItems} itemId="id" itemIdToExpandedRowMap={itemIdToExpandedRowMap} - isExpandable={true} - hasActions={true} columns={columnsWithExpandingRowToggle} pagination={pagination} sorting={sorting} - isSelectable={true} selection={selection} onChange={onTableChange} /> diff --git a/src-docs/src/views/tables/footer/footer.tsx b/src-docs/src/views/tables/footer/footer.tsx index f6c2aec479a..8e34806d9b3 100644 --- a/src-docs/src/views/tables/footer/footer.tsx +++ b/src-docs/src/views/tables/footer/footer.tsx @@ -221,7 +221,6 @@ export default () => { columns={columns} pagination={pagination} sorting={sorting} - isSelectable={true} selection={selection} onChange={onTableChange} /> diff --git a/src-docs/src/views/tables/in_memory/in_memory_selection_controlled.tsx b/src-docs/src/views/tables/in_memory/in_memory_selection_controlled.tsx index 6fb5fe5f0b7..171b004b1e1 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_selection_controlled.tsx +++ b/src-docs/src/views/tables/in_memory/in_memory_selection_controlled.tsx @@ -258,7 +258,6 @@ export default () => { pagination={pagination} sorting={true} selection={selectionValue} - isSelectable={true} /> ); diff --git a/src-docs/src/views/tables/in_memory/in_memory_selection_uncontrolled.tsx b/src-docs/src/views/tables/in_memory/in_memory_selection_uncontrolled.tsx index 6b497e46b14..df4c723c6fe 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_selection_uncontrolled.tsx +++ b/src-docs/src/views/tables/in_memory/in_memory_selection_uncontrolled.tsx @@ -250,7 +250,6 @@ export default () => { pagination={pagination} sorting={true} selection={selectionValue} - isSelectable={true} /> ); }; diff --git a/src-docs/src/views/tables/mobile/mobile.tsx b/src-docs/src/views/tables/mobile/mobile.tsx index ee9fa68def2..ec9f757bf0d 100644 --- a/src-docs/src/views/tables/mobile/mobile.tsx +++ b/src-docs/src/views/tables/mobile/mobile.tsx @@ -300,8 +300,6 @@ export default () => { pagination={pagination} sorting={sorting} selection={selection} - isSelectable={true} - hasActions={true} responsiveBreakpoint={isResponsive} onChange={onTableChange} /> diff --git a/src-docs/src/views/tables/mobile/mobile_section.js b/src-docs/src/views/tables/mobile/mobile_section.js index ee5e2629c7b..0e475070d88 100644 --- a/src-docs/src/views/tables/mobile/mobile_section.js +++ b/src-docs/src/views/tables/mobile/mobile_section.js @@ -3,7 +3,6 @@ import { Link } from 'react-router-dom'; import { GuideSectionTypes } from '../../../components'; import Table from './mobile'; -import { EuiTextColor } from '../../../../../src/components/text'; import { EuiCode, EuiCodeBlock } from '../../../../../src/components/code'; const source = require('!!raw-loader!./mobile'); import { EuiTableRowCellMobileOptionsShape } from '../props/props'; @@ -51,26 +50,6 @@ export const section = { Inversely, if you always want your table to render in a mobile-friendly manner, pass true.

-

- {/* TODO: This shouldn't be true by the end of the Emotion conversion */} - To make your table work responsively, please make sure you add the - following additional props - to the top level table component (EuiBasicTable or{' '} - EuiInMemoryTable): -

-

The mobileOptions object can be passed to the{' '} EuiTableRowCell directly or with each column item diff --git a/src-docs/src/views/tables/selection/selection_controlled.tsx b/src-docs/src/views/tables/selection/selection_controlled.tsx index b7b544d7ba8..6d68541f596 100644 --- a/src-docs/src/views/tables/selection/selection_controlled.tsx +++ b/src-docs/src/views/tables/selection/selection_controlled.tsx @@ -236,7 +236,6 @@ export default () => { columns={columns} pagination={pagination} sorting={sorting} - isSelectable={true} selection={selection} onChange={onTableChange} rowHeader="firstName" diff --git a/src-docs/src/views/tables/selection/selection_uncontrolled.tsx b/src-docs/src/views/tables/selection/selection_uncontrolled.tsx index 9358b7ffa35..c954f958758 100644 --- a/src-docs/src/views/tables/selection/selection_uncontrolled.tsx +++ b/src-docs/src/views/tables/selection/selection_uncontrolled.tsx @@ -226,7 +226,6 @@ export default () => { columns={columns} pagination={pagination} sorting={sorting} - isSelectable={true} selection={selection} onChange={onTableChange} rowHeader="firstName" 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 e1016742f79..42549e0c5a5 100644 --- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap @@ -44,7 +44,7 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = ` class="css-0" > { itemIdToExpandedRowMap: { '1':

Expanded row
, }, - isExpandable: true, }; const { getByText } = render(); diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx index 4f14ff0742e..75b9e6b542f 100644 --- a/src/components/basic_table/basic_table.tsx +++ b/src/components/basic_table/basic_table.tsx @@ -241,9 +241,6 @@ interface BasicTableProps * Indicates which column should be used as the identifying cell in each row. Should match a "field" prop in FieldDataColumn */ rowHeader?: string; - hasActions?: boolean; - isExpandable?: boolean; - isSelectable?: boolean; /** * Provides an infinite loading indicator */ @@ -523,9 +520,6 @@ export class EuiBasicTable extends Component< compressed, itemIdToExpandedRowMap, responsiveBreakpoint, - isSelectable, - isExpandable, - hasActions, rowProps, cellProps, tableCaption, @@ -965,15 +959,8 @@ export class EuiBasicTable extends Component< } renderItemRow(item: T, rowIndex: number) { - const { - columns, - selection, - isSelectable, - hasActions, - rowHeader, - itemIdToExpandedRowMap = {}, - isExpandable, - } = this.props; + const { columns, selection, rowHeader, itemIdToExpandedRowMap } = + this.props; const cells = []; @@ -990,13 +977,18 @@ export class EuiBasicTable extends Component< getItemId(selectedItem, itemIdCallback) === itemId ); - let calculatedHasSelection; + let rowSelectionDisabled = false; if (selection) { - cells.push(this.renderItemSelectionCell(itemId, item, selected)); - calculatedHasSelection = true; + const [checkboxCell, isDisabled] = this.renderItemSelectionCell( + itemId, + item, + selected + ); + cells.push(checkboxCell); + rowSelectionDisabled = !!isDisabled; } - let calculatedHasActions; + let hasActions; columns.forEach((column: EuiBasicTableColumn, columnIndex: number) => { if ((column as EuiTableActionsColumnType).actions) { cells.push( @@ -1007,7 +999,7 @@ export class EuiBasicTable extends Component< columnIndex ) ); - calculatedHasActions = true; + hasActions = true; } else if ((column as EuiTableFieldDataColumnType).field) { const fieldDataColumn = column as EuiTableFieldDataColumnType; cells.push( @@ -1043,7 +1035,7 @@ export class EuiBasicTable extends Component< expandedRowColSpan = expandedRowColSpan - mobileOnlyCols; // We'll use the ID to associate the expanded row with the original. - const hasExpandedRow = itemIdToExpandedRowMap.hasOwnProperty(itemId); + const hasExpandedRow = itemIdToExpandedRowMap?.hasOwnProperty(itemId); const expandedRowId = hasExpandedRow ? `row_${itemId}_expansion` : undefined; @@ -1051,10 +1043,10 @@ export class EuiBasicTable extends Component< - {itemIdToExpandedRowMap[itemId]} + {itemIdToExpandedRowMap![itemId]} ) : undefined; @@ -1064,12 +1056,11 @@ export class EuiBasicTable extends Component< const row = ( {cells} @@ -1107,7 +1098,7 @@ export class EuiBasicTable extends Component< ); } }; - return ( + return [ {(selectThisRow: string) => ( @@ -1123,8 +1114,9 @@ export class EuiBasicTable extends Component< /> )} - - ); + , + disabled, + ]; } renderItemActionsCell( diff --git a/src/components/basic_table/in_memory_table.tsx b/src/components/basic_table/in_memory_table.tsx index 7c07569fd3a..c85fefba32d 100644 --- a/src/components/basic_table/in_memory_table.tsx +++ b/src/components/basic_table/in_memory_table.tsx @@ -677,8 +677,6 @@ export class EuiInMemoryTable extends Component< message, error, selection, - isSelectable, - hasActions, compressed, pagination: hasPagination, sorting: hasSorting, @@ -747,8 +745,6 @@ export class EuiInMemoryTable extends Component< pagination={pagination} sorting={sorting} selection={selection} - isSelectable={isSelectable} - hasActions={hasActions} onChange={this.onTableChange} error={error} loading={loading} diff --git a/src/components/table/_index.scss b/src/components/table/_index.scss index 00863122993..4d492b77e2f 100644 --- a/src/components/table/_index.scss +++ b/src/components/table/_index.scss @@ -1,4 +1,2 @@ -@import 'variables'; - @import 'table'; @import 'responsive'; diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 1ca5707cd8b..6ef3c9a0c98 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -1,9 +1,3 @@ -.euiTableRow-isExpandedRow { - &.euiTableRow-isSelectable .euiTableCellContent { - padding-left: $euiTableCellCheckboxWidth + $euiTableCellContentPadding; - } -} - /** * 1. Vertically align all children. * 4. Prevent very long single words (e.g. the name of a field in a document) from overflowing diff --git a/src/components/table/_variables.scss b/src/components/table/_variables.scss deleted file mode 100644 index 33263775db1..00000000000 --- a/src/components/table/_variables.scss +++ /dev/null @@ -1,6 +0,0 @@ -// Spacing - -$euiTableCellContentPadding: $euiSizeS; -$euiTableCellContentPaddingCompressed: $euiSizeXS; - -$euiTableCellCheckboxWidth: $euiSizeXL; diff --git a/src/components/table/table_row.styles.ts b/src/components/table/table_row.styles.ts index e93dae2c919..4cae6bdc6a8 100644 --- a/src/components/table/table_row.styles.ts +++ b/src/components/table/table_row.styles.ts @@ -20,7 +20,7 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => { const rowColors = _rowColorVariables(euiThemeContext); const expandedAnimationCss = _expandedRowAnimation(euiThemeContext); - const { cellContentPadding, mobileSizes } = + const { cellContentPadding, mobileSizes, checkboxSize } = euiTableVariables(euiThemeContext); return { @@ -57,6 +57,13 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => { background-color: ${rowColors.selected.hover}; } `, + // 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 { + ${logicalCSS('padding-left', checkboxSize)} + } + `, }, mobile: { @@ -82,7 +89,7 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => { * Left column offset (no border) * Used for selection checkbox, which will be absolutely positioned */ - selectable: css` + hasLeftColumn: css` ${logicalCSS('padding-left', mobileSizes.checkbox.width)} `, /** diff --git a/src/components/table/table_row.tsx b/src/components/table/table_row.tsx index 5c933429429..95840f0384f 100644 --- a/src/components/table/table_row.tsx +++ b/src/components/table/table_row.tsx @@ -23,7 +23,11 @@ import { euiTableRowStyles } from './table_row.styles'; export interface EuiTableRowProps { /** * Indicates if the table has a single column of checkboxes for selecting - * rows (affects mobile only) + * rows (used for mobile styling) + */ + hasSelection?: boolean; + /** + * Indicates that the current row's checkbox is selectable / not disabled */ isSelectable?: boolean; /** @@ -32,7 +36,7 @@ export interface EuiTableRowProps { isSelected?: boolean; /** * Indicates if the table has a dedicated column for icon-only actions - * (affects mobile only) + * (used for mobile styling) */ hasActions?: boolean; /** @@ -54,6 +58,7 @@ type Props = CommonProps & export const EuiTableRow: FunctionComponent = ({ children, className, + hasSelection, isSelected, isSelectable, hasActions, @@ -69,10 +74,10 @@ export const EuiTableRow: FunctionComponent = ({ styles.euiTableRow, styles.mobile.mobile, isSelected && styles.mobile.selected, - isSelectable && styles.mobile.selectable, isExpandedRow && styles.mobile.expanded, (hasActions || isExpandable || isExpandedRow) && styles.mobile.hasRightColumn, + hasSelection && styles.mobile.hasLeftColumn, ] : [ styles.euiTableRow, @@ -80,6 +85,7 @@ export const EuiTableRow: FunctionComponent = ({ isSelected && styles.desktop.selected, isExpandedRow && styles.desktop.expanded, onClick && styles.desktop.clickable, + isExpandedRow && hasSelection && styles.desktop.checkboxOffset, ]; const classes = classNames('euiTableRow', className, {