From 3d36b088002b4ee48f104259aee5634318b75251 Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Wed, 27 Mar 2024 11:47:55 -0700 Subject: [PATCH] [EuiTable] New `responsiveBreakpoint` prop + initial setup for mobile vs desktop styles (#7625) --- changelogs/upcoming/7625.md | 7 + .../provider/provider_component_defaults.tsx | 1 + src-docs/src/views/tables/mobile/mobile.tsx | 2 +- .../src/views/tables/mobile/mobile_section.js | 25 +- .../__snapshots__/basic_table.test.tsx.snap | 1175 ++++++++--------- .../in_memory_table.test.tsx.snap | 364 ++--- src/components/basic_table/basic_table.tsx | 53 +- .../basic_table/in_memory_table.test.tsx | 54 +- .../component_defaults/component_defaults.tsx | 8 +- .../table/__snapshots__/table.test.tsx.snap | 4 +- src/components/table/_index.scss | 2 - src/components/table/_responsive.scss | 28 - src/components/table/_table.scss | 4 - .../table_header_mobile.test.tsx.snap | 4 +- .../table_sort_mobile.test.tsx.snap | 2 +- src/components/table/mobile/_index.scss | 1 - src/components/table/mobile/_mobile.scss | 17 - .../table/mobile/responsive_context.ts | 45 + .../mobile/table_header_mobile.styles.ts | 20 + .../table/mobile/table_header_mobile.test.tsx | 29 +- .../table/mobile/table_header_mobile.tsx | 20 +- .../table/mobile/table_sort_mobile.tsx | 17 +- src/components/table/table.styles.ts | 23 + src/components/table/table.test.tsx | 83 +- src/components/table/table.tsx | 29 +- src/components/table/table_row_cell.tsx | 4 +- 26 files changed, 1087 insertions(+), 934 deletions(-) create mode 100644 changelogs/upcoming/7625.md delete mode 100644 src/components/table/mobile/_index.scss delete mode 100644 src/components/table/mobile/_mobile.scss create mode 100644 src/components/table/mobile/responsive_context.ts create mode 100644 src/components/table/mobile/table_header_mobile.styles.ts diff --git a/changelogs/upcoming/7625.md b/changelogs/upcoming/7625.md new file mode 100644 index 00000000000..c22e06a2608 --- /dev/null +++ b/changelogs/upcoming/7625.md @@ -0,0 +1,7 @@ +- 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** + +- 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-docs/src/views/provider/provider_component_defaults.tsx b/src-docs/src/views/provider/provider_component_defaults.tsx index f2561c5a6f1..bcfd198dcd7 100644 --- a/src-docs/src/views/provider/provider_component_defaults.tsx +++ b/src-docs/src/views/provider/provider_component_defaults.tsx @@ -12,6 +12,7 @@ export const EuiComponentDefaultsProps: FunctionComponent< // Exported in one place for DRYness export const euiProviderComponentDefaultsSnippet = ` { selection={selection} isSelectable={true} hasActions={true} - responsive={isResponsive} + 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 1575e5c81da..ee5e2629c7b 100644 --- a/src-docs/src/views/tables/mobile/mobile_section.js +++ b/src-docs/src/views/tables/mobile/mobile_section.js @@ -1,4 +1,5 @@ import React from 'react'; +import { Link } from 'react-router-dom'; import { GuideSectionTypes } from '../../../components'; import Table from './mobile'; @@ -32,14 +33,26 @@ export const section = { text: ( <>

- Allowing a table to be responsive means breaking each row down into its - own section and individually displaying each table header above the cell - contents. There are few times when you may want to exclude this behavior - from your table, for instance, when the table has very few columns or - the table does not break down easily into this format. For these use - cases, you may set responsive=false. + Tables will be mobile-responsive by default, breaking down each row into + its own card section and individually displaying each table header above + the cell contents. The default breakpoint at which the table will + responsively shift into cards is the{' '} + + m window size + + , which can be customized with the{' '} + responsiveBreakpoint prop (e.g.,{' '} + {'responsiveBreakpoint="s"'}).

+ To never render your table responsively (e.g. for tables with very few + columns), you may set{' '} + {'responsiveBreakpoint={false}'}. + 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{' '} 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 17104f245e4..d5b80dc5add 100644 --- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap @@ -6,127 +6,111 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = ` class="euiBasicTable testClass1 testClass2 emotion-euiTestCss" data-test-subj="test subject string" > -

-
-
-
-
-
-
- - - - + + - - - + description + + + + + + + - - - - + + + + + - - + + + + + - - -
-
+
+
+ - - Name - - - description - + Name -
-
- Name -
-
+
+ - - name1 - -
-
- -
- Name -
-
+
+ - - name2 - -
-
- -
- Name -
-
+
+ - - name3 - -
-
-
+ name3 + +
+ + + +
`; @@ -134,630 +118,567 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
-
-
-
-
-
- -
- -
-
-
+ + + +
- -
-
-
-
-
- - - - - - + - + - + - - - + your age + + + + + + + + - - - + - - + + - + - - + + + + + + + - + - - + + - + - - + + + + + + + - + - - + + - + - - - - - + + + + + - + - + - + - + - - -
-
-
+
- -
-
+ class="euiCheckbox__square" + />
-
- - + + + + - - Age - - - your age - + ID + + + your id - + + - - Actions - + Age -
+ + + Actions + + +
+
- -
-
+ class="euiCheckbox__square" + />
-
+ +
-
- Name -
-
- NAME1 -
-
+
-
- ID -
-
- - 1 - -
-
+ +
-
+
+ - Age -
-
+
+
+
+ Age +
+
+ - - 20 - -
- 		+ + +
-
- - - - + + + + - -
-
-
+
- -
-
+ class="euiCheckbox__square" + />
-
+ +
-
- Name -
-
- NAME2 -
-
+
-
- ID -
-
- - 2 - -
-
+ +
-
+
+ - Age -
-
+
+
+
+ Age +
+
+ - - 21 - -
- 		+ + +
-
- - - - + + + + - -
-
-
+
- -
-
+ class="euiCheckbox__square" + />
-
+ +
-
- Name -
-
- NAME3 -
-
+
-
- ID -
-
- - 3 - -
-
+ +
-
+
+ - Age -
-
+
+
+
+ Age +
+
+ - - 22 - -
- 		+ + +
-
- - - - + + + + - -
-
+ + + +
+
-
- -
-
+ + +
-
- -
-
+ + +
-
- - - Total items: - 5 - - -
-
+ Total items: + 5 + + + + +
-
- -
-
+ + +
-
- -
-
-
+ +
+ + + +
+
+ +
+ +
+
+
+ +
+
+
+`; + exports[`EuiInMemoryTable behavior pagination 1`] = `