[EuiTable][EuiBasicTable][EuiInMemoryTable] Convert to Emotion + styl…

…e-related updates & cleanups (#7654)

Co-authored-by: Jason Stoltzfus <[email protected]>

changelogs/upcoming/7621.md

@@ -0,0 +1,3 @@
+**Breaking changes**
+
+- Removed unused `EuiTableHeaderButton` component

changelogs/upcoming/7625.md

@@ -0,0 +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`
+
+**Breaking changes**
+
+- Removed the `responsive` prop from `EuiTable`, `EuiBasicTable`, and `EuiInMemoryTable`. Use the new `responsiveBreakpoint` prop instead
+
+**DOM changes**
+
+- `EuiTable` mobile headers no longer render in the DOM when not visible (previously rendered with `display: none`). This may affect DOM testing assertions.

changelogs/upcoming/7631.md

@@ -0,0 +1,3 @@
+**DOM changes**
+
+- `EuiTableRowCell` now applies passed `className`s to the parent `<td>` element, instead of to the inner cell content `<div>`.

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

changelogs/upcoming/7640.md

@@ -0,0 +1,7 @@
+**Bug fixes**
+
+- `EuiBasicTable` & `EuiInMemoryTable` `isPrimary` actions are now correctly shown on mobile views
+
+**Breaking changes**
+
+- Removed the `showOnHover` prop from `EuiTableRowCell` / `EuiBasicTable`/`EuiInMemoryTable`'s `columns` API. Use the new actions `columns[].actions[].showOnHover` API instead.

changelogs/upcoming/7641.md

@@ -0,0 +1,3 @@
+**DOM changes**
+
+- `EuiTableRowCell`s with `textOnly` set to `false` will no longer attempt to apply the `.euiTableCellContent__text` className to child elements.

changelogs/upcoming/7642.md

@@ -0,0 +1,15 @@
+**Bug fixes**
+
+- Table `mobileOptions`:
+  - `mobileOptions.align` is now respected instead of all cells being forced to left alignment
+  - `textTruncate` and `textOnly` are now respected even if a `render` function is not passed
+
+**Breaking changes**
+
+- Removed top-level `textOnly` prop from `EuiBasicTable` and `EuiInMemoryTable`. Use `columns[].textOnly` instead.
+
+**DOM changes**
+
+- `EuiTableRowCell` no longer renders mobile headers to the DOM unless the current table is displaying its responsive view.
+- `EuiTableHeaderCell` and `EuiTableRowCell` will no longer render in the DOM at all on mobile if their columns' `mobileOptions.show` is set to `false`.
+- `EuiTableHeaderCell` and `EuiTableRowCell` will no longer render in the DOM at all on desktop if their columns' `mobileOptions.only` is set to `true`.

changelogs/upcoming/7654.md

@@ -0,0 +1,17 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiTable`, `EuiTableRow`, `EuiTableRowCell`, and all other table subcomponents to Emotion
+- Removed the following `EuiTable` Sass variables:
+  - `$euiTableCellContentPadding`
+  - `$euiTableCellContentPaddingCompressed`
+  - `$euiTableCellCheckboxWidth`
+  - `$euiTableHoverColor`
+  - `$euiTableSelectedColor`
+  - `$euiTableHoverSelectedColor`
+  - `$euiTableActionsBorderColor`
+  - `$euiTableHoverClickableColor`
+  - `$euiTableFocusClickableColor`
+- Removed the following `EuiTable` Sass mixins:
+  - `euiTableActionsBackgroundMobile`
+  - `euiTableCellCheckbox`
+  - `euiTableCell`

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 = `<EuiProvider
   componentDefaults={{
+    EuiTable: { responsiveBreakpoint: 's', },
     EuiTablePagination: { itemsPerPage: 20, },
     EuiFocusTrap: { crossFrame: true },
     EuiPortal: { insert },

src-docs/src/views/tables/actions/actions.tsx

@@ -74,9 +74,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
     sortable: true,
     mobileOptions: {
       render: (user: User) => (
-        <span>
+        <>
           {user.firstName} {user.lastName}
-        </span>
+        </>
       ),
       header: false,
       truncateText: false,
@@ -162,6 +162,11 @@ export default () => {
       ];
       if (multiAction) {
         actions = [
+          {
+            ...actions[0],
+            isPrimary: true,
+            showOnHover: true,
+          },
           {
             render: (user: User) => {
               return (
@@ -176,7 +181,6 @@ export default () => {
               return <EuiLink onClick={() => {}}>Edit</EuiLink>;
             },
           },
-          ...actions,
         ];
       }
       return actions;
@@ -198,7 +202,7 @@ export default () => {
       if (multiAction) {
         actions = [
           {
-            name: <span>Clone</span>,
+            name: <>Clone</>,
             description: 'Clone this user',
             icon: 'copy',
             type: 'icon',
@@ -396,7 +400,6 @@ export default () => {
         pagination={pagination}
         sorting={sorting}
         selection={selection}
-        hasActions={customAction ? false : true}
         onChange={onTableChange}
       />
     </>

src-docs/src/views/tables/auto/auto.tsx

@@ -46,9 +46,9 @@ const columns: Array<EuiTableFieldDataColumnType<User>> = [
     truncateText: true,
     mobileOptions: {
       render: (user: User) => (
-        <span>
+        <>
           {user.firstName} {user.lastName}
-        </span>
+        </>
       ),
       header: false,
       truncateText: false,

src-docs/src/views/tables/basic/basic.tsx

@@ -48,9 +48,9 @@ export default () => {
       'data-test-subj': 'firstNameCell',
       mobileOptions: {
         render: (user: User) => (
-          <span>
+          <>
             {user.firstName} {user.lastName}
-          </span>
+          </>
         ),
         header: false,
         truncateText: false,

src-docs/src/views/tables/basic/basic_section.js

@@ -10,13 +10,15 @@ import {
 import { Pagination } from '../paginated/_props';
 import {
   EuiTableFieldDataColumnType,
-  EuiTableComputedColumnType,
-  EuiTableActionsColumnType,
   EuiTableSelectionType,
   EuiTableSortingType,
 } from '!!prop-loader!../../../../../src/components/basic_table/table_types';
 import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types';
-import { DefaultItemActionProps as DefaultItemAction } from '../props/props';
+import {
+  EuiTableComputedColumnType,
+  EuiTableActionsColumnType,
+  DefaultItemActionProps as DefaultItemAction,
+} from '../props/props';
 
 const source = require('!!raw-loader!./basic');
 

src-docs/src/views/tables/custom/custom.tsx

@@ -113,10 +113,10 @@ export default class extends Component<{}, State> {
     {
       id: 2,
       title: (
-        <span>
+        <>
           A very long line in an ELEMENT which will wrap on narrower screens and
           NOT become truncated and replaced by an ellipsis
-        </span>
+        </>
       ),
       type: 'user',
       dateCreated: 'Tue Dec 01 2016',
@@ -127,11 +127,11 @@ export default class extends Component<{}, State> {
       id: 3,
       title: {
         value: (
-          <span>
+          <>
             A very long line in an ELEMENT which will not wrap on narrower
             screens and instead will become truncated and replaced by an
             ellipsis
-          </span>
+          </>
         ),
         truncateText: true,
       },
@@ -290,14 +290,14 @@ export default class extends Component<{}, State> {
         width: '100%',
       },
       render: (title: DataItem['title'], item: DataItem) => (
-        <span>
+        <>
           <EuiIcon
             type={item.type}
             size="m"
             style={{ verticalAlign: 'text-top' }}
           />{' '}
           {title as ReactNode}
-        </span>
+        </>
       ),
     },
     {
@@ -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}

src-docs/src/views/tables/custom/custom_section.js

@@ -29,7 +29,7 @@ export const section = {
     },
   ],
   text: (
-    <div>
+    <>
       <p>
         As an alternative to <strong>EuiBasicTable</strong> you can instead
         construct a table from individual{' '}
@@ -58,7 +58,7 @@ export const section = {
         &nbsp;and <strong>EuiTableSortMobileItem</strong> components to supply
         mobile sorting. See demo below.
       </p>
-    </div>
+    </>
   ),
   components: { EuiTable },
   props: {

src-docs/src/views/tables/expanding_rows/expanding_rows.tsx

@@ -52,9 +52,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
     truncateText: true,
     mobileOptions: {
       render: (user: User) => (
-        <span>
+        <>
           {user.firstName} {user.lastName}
-        </span>
+        </>
       ),
       header: false,
       truncateText: false,
@@ -134,9 +134,10 @@ export default () => {
       isExpander: true,
       name: (
         <EuiScreenReaderOnly>
-          <span>Expand rows</span>
+          <span>Expand row</span>
         </EuiScreenReaderOnly>
       ),
+      mobileOptions: { header: false },
       render: (user: User) => {
         const itemIdToExpandedRowMapValues = { ...itemIdToExpandedRowMap };
 
@@ -260,12 +261,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}
     />

src-docs/src/views/tables/footer/footer.tsx

@@ -51,9 +51,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
     truncateText: true,
     mobileOptions: {
       render: (user: User) => (
-        <span>
+        <>
           {user.firstName} {user.lastName}
-        </span>
+        </>
       ),
       header: false,
       truncateText: false,
@@ -72,7 +72,7 @@ const columns: Array<EuiBasicTableColumn<User>> = [
   {
     field: 'github',
     name: 'Github',
-    footer: ({ items }: { items: User[] }) => <span>{items.length} users</span>,
+    footer: ({ items }: { items: User[] }) => <>{items.length} users</>,
     render: (username: User['github']) => (
       <EuiLink href="#" target="_blank">
         {username}
@@ -96,7 +96,7 @@ const columns: Array<EuiBasicTableColumn<User>> = [
       const uniqueCountries = new Set(
         items.map((user) => user.location.country)
       );
-      return <span>{uniqueCountries.size} countries</span>;
+      return <>{uniqueCountries.size} countries</>;
     },
     render: (location: User['location']) => {
       return `${location.city}, ${location.country}`;
@@ -106,9 +106,7 @@ const columns: Array<EuiBasicTableColumn<User>> = [
     field: 'online',
     name: 'Online',
     footer: ({ items }: { items: User[] }) => {
-      return (
-        <span>{items.filter((user: User) => !!user.online).length} online</span>
-      );
+      return <>{items.filter((user: User) => !!user.online).length} online</>;
     },
     dataType: 'boolean',
     render: (online: User['online']) => {
@@ -221,7 +219,6 @@ export default () => {
       columns={columns}
       pagination={pagination}
       sorting={sorting}
-      isSelectable={true}
       selection={selection}
       onChange={onTableChange}
     />

src-docs/src/views/tables/in_memory/in_memory.tsx

@@ -47,9 +47,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
     truncateText: true,
     mobileOptions: {
       render: (user: User) => (
-        <span>
+        <>
           {user.firstName} {user.lastName}
-        </span>
+        </>
       ),
       header: false,
       truncateText: false,

src-docs/src/views/tables/in_memory/in_memory_controlled_pagination.tsx

@@ -49,9 +49,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
     truncateText: true,
     mobileOptions: {
       render: (user: User) => (
-        <span>
+        <>
           {user.firstName} {user.lastName}
-        </span>
+        </>
       ),
       header: false,
       truncateText: false,

src-docs/src/views/tables/in_memory/in_memory_controlled_pagination_section.js

@@ -12,13 +12,13 @@ import {
 import { Pagination } from '../paginated/_props';
 import {
   EuiTableFieldDataColumnType,
-  EuiTableComputedColumnType,
-  EuiTableActionsColumnType,
   EuiTableSelectionType,
   EuiTableSortingType,
 } from '!!prop-loader!../../../../../src/components/basic_table/table_types';
 import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types';
 import {
+  EuiTableComputedColumnType,
+  EuiTableActionsColumnType,
   DefaultItemActionProps as DefaultItemAction,
   SearchProps as Search,
   SearchFilterConfigProps as SearchFilterConfig,
@@ -37,22 +37,22 @@ export const controlledPaginationSection = {
     },
   ],
   text: (
-    <div>
+    <>
       <p>
         By default <EuiCode>EuiInMemoryTable</EuiCode> resets its page index
         when receiving a new <EuiCode>EuiInMemoryTable</EuiCode> array. To avoid
-        this behavior the pagination object optionally takes a
+        this behavior the pagination object optionally takes a{' '}
         <EuiCode>pageIndex</EuiCode> value to control this yourself.
         Additionally, <EuiCode>pageSize</EuiCode> can also be controlled the
-        same way. Both of these are provided to your app during the
+        same way. Both of these are provided to your app during the{' '}
         <EuiCode>onTableChange</EuiCode> callback.
       </p>
       <p>
         The example below updates the array of users every second, randomly
         toggling their online status. Pagination state is maintained by the app,
         preventing it from being reset by the updates.
       </p>
-    </div>
+    </>
   ),
   props: {
     EuiInMemoryTable,