From ad457a679337c831f07e720e3a95d8c3ec103a81 Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Fri, 29 Mar 2024 16:18:06 -0700 Subject: [PATCH] [EuiTable][EuiBasicTable][EuiInMemoryTable] Remove `responsive` prop completely in favor of `responsiveBreakpoint` (#7633) --- changelogs/upcoming/7625.md | 7 ++++-- .../__snapshots__/basic_table.test.tsx.snap | 4 ++-- .../in_memory_table.test.tsx.snap | 5 ++-- src/components/basic_table/basic_table.tsx | 23 +++++-------------- .../basic_table/in_memory_table.tsx | 1 - .../table/__snapshots__/table.test.tsx.snap | 2 +- src/components/table/table.tsx | 12 ++-------- 7 files changed, 18 insertions(+), 36 deletions(-) diff --git a/changelogs/upcoming/7625.md b/changelogs/upcoming/7625.md index c22e06a2608..359270b08d7 100644 --- a/changelogs/upcoming/7625.md +++ b/changelogs/upcoming/7625.md @@ -1,7 +1,10 @@ - Updated `EuiTable`, `EuiBasicTable`, and `EuiInMemoryTable` with a new `responsiveBreakpoint` prop, which allows customizing the point at which the table collapses into a mobile-friendly view with cards - Updated `EuiProvider`'s `componentDefaults` prop to allow configuring `EuiTable.responsiveBreakpoint` -**Deprecations** +**Breaking changes** + +- Removed the `responsive` prop from `EuiTable`, `EuiBasicTable`, and `EuiInMemoryTable`. Use the new `responsiveBreakpoint` prop instead + +**DOM changes** -- Deprecated the `responsive` prop from `EuiTable`, `EuiBasicTable`, and `EuiInMemoryTable`. Use the new `responsiveBreakpoint` prop instead - `EuiTable` mobile headers no longer render in the DOM when not visible (previously rendered with `display: none`). This may affect DOM testing assertions. 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 1a0bfd7b09a..e1016742f79 100644 --- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap @@ -7,7 +7,7 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = ` data-test-subj="test subject string" > @@ -119,7 +119,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin class="euiBasicTable" >
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 index 64c1d011447..1046fde7d9d 100644 --- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap @@ -155,7 +155,7 @@ exports[`EuiInMemoryTable empty array 1`] = ` data-test-subj="test subject string" >
@@ -236,7 +236,6 @@ exports[`EuiInMemoryTable with executeQueryOptions 1`] = ` /> } onChange={[Function]} - responsive={true} tableLayout="fixed" /> `; @@ -248,7 +247,7 @@ exports[`EuiInMemoryTable with items 1`] = ` data-test-subj="test subject string" >
diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx index d91076abe44..4f14ff0742e 100644 --- a/src/components/basic_table/basic_table.tsx +++ b/src/components/basic_table/basic_table.tsx @@ -324,7 +324,6 @@ export class EuiBasicTable extends Component< declare context: ContextType; static defaultProps = { - responsive: true, tableLayout: 'fixed', noItemsMessage: ( @@ -523,7 +522,6 @@ export class EuiBasicTable extends Component< noItemsMessage, compressed, itemIdToExpandedRowMap, - responsive, responsiveBreakpoint, isSelectable, isExpandable, @@ -554,28 +552,19 @@ export class EuiBasicTable extends Component< } renderTable() { - const { - compressed, - responsive, - responsiveBreakpoint, - tableLayout, - loading, - } = this.props; + const { compressed, responsiveBreakpoint, tableLayout, loading } = + this.props; return ( <> - {/* TODO: Remove conditional once `responsive` prop is deprecated */} - {responsive && ( - - {this.renderSelectAll(true)} - {this.renderTableMobileSort()} - - )} + + {this.renderSelectAll(true)} + {this.renderTableMobileSort()} + diff --git a/src/components/basic_table/in_memory_table.tsx b/src/components/basic_table/in_memory_table.tsx index a1c63ff2d25..7c07569fd3a 100644 --- a/src/components/basic_table/in_memory_table.tsx +++ b/src/components/basic_table/in_memory_table.tsx @@ -299,7 +299,6 @@ export class EuiInMemoryTable extends Component< static contextType = EuiComponentDefaultsContext; static defaultProps = { - responsive: true, tableLayout: 'fixed', searchFormat: 'eql', }; diff --git a/src/components/table/__snapshots__/table.test.tsx.snap b/src/components/table/__snapshots__/table.test.tsx.snap index a62b8b6a99a..537abe6e504 100644 --- a/src/components/table/__snapshots__/table.test.tsx.snap +++ b/src/components/table/__snapshots__/table.test.tsx.snap @@ -3,7 +3,7 @@ exports[`EuiTable renders 1`] = `
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx index 53fd65b1c18..4289adbee17 100644 --- a/src/components/table/table.tsx +++ b/src/components/table/table.tsx @@ -22,10 +22,6 @@ export interface EuiTableProps extends CommonProps, TableHTMLAttributes { compressed?: boolean; - /** - * @deprecated - use `responsiveBreakpoint` instead - */ - responsive?: boolean; /** * Named breakpoint. Below this size, the table will collapse * into responsive cards. @@ -48,15 +44,11 @@ export const EuiTable: FunctionComponent = ({ compressed, tableLayout = 'fixed', responsiveBreakpoint, // Default handled by `useIsEuiTableResponsive` - responsive = true, ...rest }) => { - const isResponsive = - useIsEuiTableResponsive(responsiveBreakpoint) && responsive; + const isResponsive = useIsEuiTableResponsive(responsiveBreakpoint); - const classes = classNames('euiTable', className, { - 'euiTable--responsive': responsive, - }); + const classes = classNames('euiTable', className); const styles = useEuiMemoizedStyles(euiTableStyles); const cssStyles = [