From 935b047835ad92b7d3e710d97ba71abb0664af3d Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 28 Mar 2024 13:12:38 -0700 Subject: [PATCH 1/7] Convert selectable+expanded row CSS to Emotion - we only need to do this for desktop, as mobile already sets a padding to account for the checkbox (which I'm renaming to better match the rightmost CSS) - for desktop offset, remove unnecessary `+` logic - applying the offset to the `` instead of the inner content cell makes it so we don't need the math, and also accounts for compressed cell padding --- src/components/table/_table.scss | 6 ------ src/components/table/table_row.styles.ts | 11 +++++++++-- src/components/table/table_row.tsx | 3 ++- 3 files changed, 11 insertions(+), 9 deletions(-) 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/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..6b2dd3d0bfc 100644 --- a/src/components/table/table_row.tsx +++ b/src/components/table/table_row.tsx @@ -69,10 +69,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, + isSelectable && styles.mobile.hasLeftColumn, ] : [ styles.euiTableRow, @@ -80,6 +80,7 @@ export const EuiTableRow: FunctionComponent = ({ isSelected && styles.desktop.selected, isExpandedRow && styles.desktop.expanded, onClick && styles.desktop.clickable, + isExpandedRow && isSelectable && styles.desktop.checkboxOffset, ]; const classes = classNames('euiTableRow', className, { From 144e70bb8303fb3432c1a52d8e7a97102251c79c Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 28 Mar 2024 13:13:10 -0700 Subject: [PATCH 2/7] Delete variables Sass file --- changelogs/upcoming/TBD.md | 3 +++ src/components/table/_index.scss | 2 -- src/components/table/_variables.scss | 6 ------ 3 files changed, 3 insertions(+), 8 deletions(-) delete mode 100644 src/components/table/_variables.scss 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/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/_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; From 53db0330953aaddbc14766d19ecb178613148fe8 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 28 Mar 2024 13:45:59 -0700 Subject: [PATCH 3/7] Remove `isSelectable` prop from basic/memory tables + replace instead with stateful class that renders depending on whether the selection checkbox is enabled/disabled (feature request) - replace row style/prop with `hasSelection` instead --- src-docs/src/views/tables/mobile/mobile.tsx | 1 - .../__snapshots__/basic_table.test.tsx.snap | 6 ++-- .../in_memory_table.test.tsx.snap | 6 ++-- src/components/basic_table/basic_table.tsx | 28 ++++++++++--------- .../basic_table/in_memory_table.tsx | 2 -- src/components/table/table_row.tsx | 13 ++++++--- 6 files changed, 30 insertions(+), 26 deletions(-) diff --git a/src-docs/src/views/tables/mobile/mobile.tsx b/src-docs/src/views/tables/mobile/mobile.tsx index ee9fa68def2..e59e0bedad4 100644 --- a/src-docs/src/views/tables/mobile/mobile.tsx +++ b/src-docs/src/views/tables/mobile/mobile.tsx @@ -300,7 +300,6 @@ export default () => { pagination={pagination} sorting={sorting} selection={selection} - isSelectable={true} hasActions={true} responsiveBreakpoint={isResponsive} onChange={onTableChange} 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" > rowHeader?: string; hasActions?: boolean; isExpandable?: boolean; - isSelectable?: boolean; /** * Provides an infinite loading indicator */ @@ -523,7 +522,6 @@ export class EuiBasicTable extends Component< compressed, itemIdToExpandedRowMap, responsiveBreakpoint, - isSelectable, isExpandable, hasActions, rowProps, @@ -968,7 +966,6 @@ export class EuiBasicTable extends Component< const { columns, selection, - isSelectable, hasActions, rowHeader, itemIdToExpandedRowMap = {}, @@ -990,10 +987,15 @@ 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; @@ -1051,7 +1053,7 @@ export class EuiBasicTable extends Component< {itemIdToExpandedRowMap[itemId]} @@ -1064,9 +1066,8 @@ export class EuiBasicTable extends Component< const row = ( extends Component< ); } }; - return ( + return [ {(selectThisRow: string) => ( @@ -1123,8 +1124,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..7a68ea02e30 100644 --- a/src/components/basic_table/in_memory_table.tsx +++ b/src/components/basic_table/in_memory_table.tsx @@ -677,7 +677,6 @@ export class EuiInMemoryTable extends Component< message, error, selection, - isSelectable, hasActions, compressed, pagination: hasPagination, @@ -747,7 +746,6 @@ export class EuiInMemoryTable extends Component< pagination={pagination} sorting={sorting} selection={selection} - isSelectable={isSelectable} hasActions={hasActions} onChange={this.onTableChange} error={error} diff --git a/src/components/table/table_row.tsx b/src/components/table/table_row.tsx index 6b2dd3d0bfc..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, @@ -72,7 +77,7 @@ export const EuiTableRow: FunctionComponent = ({ isExpandedRow && styles.mobile.expanded, (hasActions || isExpandable || isExpandedRow) && styles.mobile.hasRightColumn, - isSelectable && styles.mobile.hasLeftColumn, + hasSelection && styles.mobile.hasLeftColumn, ] : [ styles.euiTableRow, @@ -80,7 +85,7 @@ export const EuiTableRow: FunctionComponent = ({ isSelected && styles.desktop.selected, isExpandedRow && styles.desktop.expanded, onClick && styles.desktop.clickable, - isExpandedRow && isSelectable && styles.desktop.checkboxOffset, + isExpandedRow && hasSelection && styles.desktop.checkboxOffset, ]; const classes = classNames('euiTableRow', className, { From fef3d124c486d5253421ff9cf6e4d79c097278b9 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 28 Mar 2024 13:50:50 -0700 Subject: [PATCH 4/7] [docs] Remove/update `isSelectable` usage --- src-docs/src/views/tables/custom/custom.tsx | 2 +- src-docs/src/views/tables/expanding_rows/expanding_rows.tsx | 1 - src-docs/src/views/tables/footer/footer.tsx | 1 - .../views/tables/in_memory/in_memory_selection_controlled.tsx | 1 - .../views/tables/in_memory/in_memory_selection_uncontrolled.tsx | 1 - src-docs/src/views/tables/selection/selection_controlled.tsx | 1 - src-docs/src/views/tables/selection/selection_uncontrolled.tsx | 1 - 7 files changed, 1 insertion(+), 7 deletions(-) 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..3c4397936a4 100644 --- a/src-docs/src/views/tables/expanding_rows/expanding_rows.tsx +++ b/src-docs/src/views/tables/expanding_rows/expanding_rows.tsx @@ -265,7 +265,6 @@ export default () => { 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/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" From 703c7c8a0720ad66ed3c03f73e34bd4720dc8533 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 28 Mar 2024 13:55:46 -0700 Subject: [PATCH 5/7] Remove `hasActions` prop from basic/memory tables - will automatically be calculated if any `column.actions` exists, prop should no longer be needed --- src-docs/src/views/tables/actions/actions.tsx | 1 - .../src/views/tables/expanding_rows/expanding_rows.tsx | 1 - src-docs/src/views/tables/mobile/mobile.tsx | 1 - src/components/basic_table/basic_table.tsx | 9 +++------ src/components/basic_table/in_memory_table.tsx | 2 -- 5 files changed, 3 insertions(+), 11 deletions(-) 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/expanding_rows/expanding_rows.tsx b/src-docs/src/views/tables/expanding_rows/expanding_rows.tsx index 3c4397936a4..b17130aa2d1 100644 --- a/src-docs/src/views/tables/expanding_rows/expanding_rows.tsx +++ b/src-docs/src/views/tables/expanding_rows/expanding_rows.tsx @@ -261,7 +261,6 @@ export default () => { itemId="id" itemIdToExpandedRowMap={itemIdToExpandedRowMap} isExpandable={true} - hasActions={true} columns={columnsWithExpandingRowToggle} pagination={pagination} sorting={sorting} diff --git a/src-docs/src/views/tables/mobile/mobile.tsx b/src-docs/src/views/tables/mobile/mobile.tsx index e59e0bedad4..ec9f757bf0d 100644 --- a/src-docs/src/views/tables/mobile/mobile.tsx +++ b/src-docs/src/views/tables/mobile/mobile.tsx @@ -300,7 +300,6 @@ export default () => { pagination={pagination} sorting={sorting} selection={selection} - hasActions={true} responsiveBreakpoint={isResponsive} onChange={onTableChange} /> diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx index fa452b56efd..82625e686cb 100644 --- a/src/components/basic_table/basic_table.tsx +++ b/src/components/basic_table/basic_table.tsx @@ -241,7 +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; /** * Provides an infinite loading indicator @@ -523,7 +522,6 @@ export class EuiBasicTable extends Component< itemIdToExpandedRowMap, responsiveBreakpoint, isExpandable, - hasActions, rowProps, cellProps, tableCaption, @@ -966,7 +964,6 @@ export class EuiBasicTable extends Component< const { columns, selection, - hasActions, rowHeader, itemIdToExpandedRowMap = {}, isExpandable, @@ -998,7 +995,7 @@ export class EuiBasicTable extends Component< rowSelectionDisabled = !!isDisabled; } - let calculatedHasActions; + let hasActions; columns.forEach((column: EuiBasicTableColumn, columnIndex: number) => { if ((column as EuiTableActionsColumnType).actions) { cells.push( @@ -1009,7 +1006,7 @@ export class EuiBasicTable extends Component< columnIndex ) ); - calculatedHasActions = true; + hasActions = true; } else if ((column as EuiTableFieldDataColumnType).field) { const fieldDataColumn = column as EuiTableFieldDataColumnType; cells.push( @@ -1069,7 +1066,7 @@ export class EuiBasicTable extends Component< hasSelection={!!selection} isSelectable={!rowSelectionDisabled} isSelected={selected} - hasActions={hasActions == null ? calculatedHasActions : hasActions} + hasActions={hasActions} isExpandable={isExpandable} {...rowProps} > diff --git a/src/components/basic_table/in_memory_table.tsx b/src/components/basic_table/in_memory_table.tsx index 7a68ea02e30..c85fefba32d 100644 --- a/src/components/basic_table/in_memory_table.tsx +++ b/src/components/basic_table/in_memory_table.tsx @@ -677,7 +677,6 @@ export class EuiInMemoryTable extends Component< message, error, selection, - hasActions, compressed, pagination: hasPagination, sorting: hasSorting, @@ -746,7 +745,6 @@ export class EuiInMemoryTable extends Component< pagination={pagination} sorting={sorting} selection={selection} - hasActions={hasActions} onChange={this.onTableChange} error={error} loading={loading} From 80fe371c9db540107e3336345545d6b981b905e2 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 28 Mar 2024 14:03:49 -0700 Subject: [PATCH 6/7] Remove `isExpandable` prop from basic/memory tables - will automatically be calculated if `itemIdToExpandedRowMap` exists, prop is no longer needed --- .../tables/expanding_rows/expanding_rows.tsx | 1 - src/components/basic_table/basic_table.test.tsx | 1 - src/components/basic_table/basic_table.tsx | 17 +++++------------ 3 files changed, 5 insertions(+), 14 deletions(-) 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 b17130aa2d1..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,7 +260,6 @@ export default () => { items={pageOfItems} itemId="id" itemIdToExpandedRowMap={itemIdToExpandedRowMap} - isExpandable={true} columns={columnsWithExpandingRowToggle} pagination={pagination} sorting={sorting} diff --git a/src/components/basic_table/basic_table.test.tsx b/src/components/basic_table/basic_table.test.tsx index 6239fdf69f1..8db29197dac 100644 --- a/src/components/basic_table/basic_table.test.tsx +++ b/src/components/basic_table/basic_table.test.tsx @@ -224,7 +224,6 @@ describe('EuiBasicTable', () => { 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 82625e686cb..75b9e6b542f 100644 --- a/src/components/basic_table/basic_table.tsx +++ b/src/components/basic_table/basic_table.tsx @@ -241,7 +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; - isExpandable?: boolean; /** * Provides an infinite loading indicator */ @@ -521,7 +520,6 @@ export class EuiBasicTable extends Component< compressed, itemIdToExpandedRowMap, responsiveBreakpoint, - isExpandable, rowProps, cellProps, tableCaption, @@ -961,13 +959,8 @@ export class EuiBasicTable extends Component< } renderItemRow(item: T, rowIndex: number) { - const { - columns, - selection, - rowHeader, - itemIdToExpandedRowMap = {}, - isExpandable, - } = this.props; + const { columns, selection, rowHeader, itemIdToExpandedRowMap } = + this.props; const cells = []; @@ -1042,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; @@ -1053,7 +1046,7 @@ export class EuiBasicTable extends Component< hasSelection={!!selection} > - {itemIdToExpandedRowMap[itemId]} + {itemIdToExpandedRowMap![itemId]} ) : undefined; @@ -1067,7 +1060,7 @@ export class EuiBasicTable extends Component< isSelectable={!rowSelectionDisabled} isSelected={selected} hasActions={hasActions} - isExpandable={isExpandable} + isExpandable={hasExpandedRow} {...rowProps} > {cells} From 0d250b3e3812bdd291f5172928bf7bfa64742664 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 28 Mar 2024 14:05:08 -0700 Subject: [PATCH 7/7] changelog + remove docs section --- changelogs/upcoming/7632.md | 10 +++++++++ .../src/views/tables/mobile/mobile_section.js | 21 ------------------- 2 files changed, 10 insertions(+), 21 deletions(-) create mode 100644 changelogs/upcoming/7632.md 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/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): -

-
    -
  • - isSelectable: if the table has a single column of - checkboxes for selecting rows -
    • -
  • - isExpandable: if the table has rows that can expand -
    • -
  • - hasActions: if the table has a column for actions - which may/may not be hidden in hover -
    • -

The mobileOptions object can be passed to the{' '} EuiTableRowCell directly or with each column item