[EuiBasicTable][EuiInMemoryTable] Remove need for isSelectable, `is…

…Expandable`, and `hasActions` props (#7632)
elastic · Apr 1, 2024 · 0679edf · 0679edf
1 parent ad457a6
commit 0679edf
Show file tree

Hide file tree

Showing 22 changed files with 61 additions and 94 deletions.
diff --git a/changelogs/upcoming/7632.md 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
@@ -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
@@ -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
@@ -686,7 +686,7 @@ export default class extends Component<{}, State> {
         <EuiTableRow
           key={item.id}
           isSelected={this.isItemSelected(item.id)}
-          isSelectable={true}
+          hasSelection={true}
           hasActions={true}
         >
           {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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 <EuiCode>true</EuiCode>.
       </p>
-      <p>
-        {/* 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 <EuiTextColor color="danger">additional</EuiTextColor> props
-        to the top level table component (<strong>EuiBasicTable</strong> or{' '}
-        <strong>EuiInMemoryTable</strong>):
-      </p>
-      <ul>
-        <li>
-          <EuiCode>isSelectable</EuiCode>: if the table has a single column of
-          checkboxes for selecting rows
-        </li>
-        <li>
-          <EuiCode>isExpandable</EuiCode>: if the table has rows that can expand
-        </li>
-        <li>
-          <EuiCode>hasActions</EuiCode>: if the table has a column for actions
-          which may/may not be hidden in hover
-        </li>
-      </ul>
       <p>
         The <EuiCode>mobileOptions</EuiCode> object can be passed to the{' '}
         <strong>EuiTableRowCell</strong> 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
@@ -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
@@ -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
@@ -44,7 +44,7 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
       class="css-0"
     >
       <tr
-        class="euiTableRow emotion-euiTableRow-desktop"
+        class="euiTableRow euiTableRow-isSelectable emotion-euiTableRow-desktop"
       >
         <td
           class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
@@ -66,7 +66,7 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
         </td>
       </tr>
       <tr
-        class="euiTableRow emotion-euiTableRow-desktop"
+        class="euiTableRow euiTableRow-isSelectable emotion-euiTableRow-desktop"
       >
         <td
           class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
@@ -88,7 +88,7 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
         </td>
       </tr>
       <tr
-        class="euiTableRow emotion-euiTableRow-desktop"
+        class="euiTableRow euiTableRow-isSelectable emotion-euiTableRow-desktop"
       >
         <td
           class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"

diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
@@ -284,7 +284,7 @@ exports[`EuiInMemoryTable with items 1`] = `
       class="css-0"
     >
       <tr
-        class="euiTableRow emotion-euiTableRow-desktop"
+        class="euiTableRow euiTableRow-isSelectable emotion-euiTableRow-desktop"
       >
         <td
           class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
@@ -306,7 +306,7 @@ exports[`EuiInMemoryTable with items 1`] = `
         </td>
       </tr>
       <tr
-        class="euiTableRow emotion-euiTableRow-desktop"
+        class="euiTableRow euiTableRow-isSelectable emotion-euiTableRow-desktop"
       >
         <td
           class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
@@ -328,7 +328,7 @@ exports[`EuiInMemoryTable with items 1`] = `
         </td>
       </tr>
       <tr
-        class="euiTableRow emotion-euiTableRow-desktop"
+        class="euiTableRow euiTableRow-isSelectable emotion-euiTableRow-desktop"
       >
         <td
           class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"

diff --git 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': <div>Expanded row</div>,
       },
-      isExpandable: true,
     };
     const { getByText } = render(<EuiBasicTable {...props} />);
 

diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx
@@ -241,9 +241,6 @@ interface BasicTableProps<T extends object>
    * 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<T extends object = any> extends Component<
       compressed,
       itemIdToExpandedRowMap,
       responsiveBreakpoint,
-      isSelectable,
-      isExpandable,
-      hasActions,
       rowProps,
       cellProps,
       tableCaption,
@@ -965,15 +959,8 @@ export class EuiBasicTable<T extends object = any> 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<T extends object = any> 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<T>, columnIndex: number) => {
       if ((column as EuiTableActionsColumnType<T>).actions) {
         cells.push(
@@ -1007,7 +999,7 @@ export class EuiBasicTable<T extends object = any> extends Component<
             columnIndex
           )
         );
-        calculatedHasActions = true;
+        hasActions = true;
       } else if ((column as EuiTableFieldDataColumnType<T>).field) {
         const fieldDataColumn = column as EuiTableFieldDataColumnType<T>;
         cells.push(
@@ -1043,18 +1035,18 @@ export class EuiBasicTable<T extends object = any> 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;
     const expandedRow = hasExpandedRow ? (
       <EuiTableRow
         id={expandedRowId}
         isExpandedRow={true}
-        isSelectable={isSelectable}
+        hasSelection={!!selection}
       >
         <EuiTableRowCell colSpan={expandedRowColSpan} textOnly={false}>
-          {itemIdToExpandedRowMap[itemId]}
+          {itemIdToExpandedRowMap![itemId]}
         </EuiTableRowCell>
       </EuiTableRow>
     ) : undefined;
@@ -1064,12 +1056,11 @@ export class EuiBasicTable<T extends object = any> extends Component<
     const row = (
       <EuiTableRow
         aria-owns={expandedRowId}
-        isSelectable={
-          isSelectable == null ? calculatedHasSelection : isSelectable
-        }
+        hasSelection={!!selection}
+        isSelectable={!rowSelectionDisabled}
         isSelected={selected}
-        hasActions={hasActions == null ? calculatedHasActions : hasActions}
-        isExpandable={isExpandable}
+        hasActions={hasActions}
+        isExpandable={hasExpandedRow}
         {...rowProps}
       >
         {cells}
@@ -1107,7 +1098,7 @@ export class EuiBasicTable<T extends object = any> extends Component<
         );
       }
     };
-    return (
+    return [
       <EuiTableRowCellCheckbox key={key}>
         <EuiI18n token="euiBasicTable.selectThisRow" default="Select this row">
           {(selectThisRow: string) => (
@@ -1123,8 +1114,9 @@ export class EuiBasicTable<T extends object = any> extends Component<
             />
           )}
         </EuiI18n>
-      </EuiTableRowCellCheckbox>
-    );
+      </EuiTableRowCellCheckbox>,
+      disabled,
+    ];
   }
 
   renderItemActionsCell(

diff --git 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<T extends object = object> extends Component<
       message,
       error,
       selection,
-      isSelectable,
-      hasActions,
       compressed,
       pagination: hasPagination,
       sorting: hasSorting,
@@ -747,8 +745,6 @@ export class EuiInMemoryTable<T extends object = object> 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
@@ -1,4 +1,2 @@
-@import 'variables';
-
 @import 'table';
 @import 'responsive';
diff --git 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
diff --git 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 `<td>` because padding can't be applied to `<tr>` 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)}
       `,
       /**