[EuiTable] New responsiveBreakpoint prop + initial setup for mobile vs desktop styles

src/components/basic_table/__snapshots__/basic_table.test.tsx.snap

@@ -7,20 +7,6 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
   data-test-subj="test subject string"
 >
   <div>
-    <div
-      class="euiTableHeaderMobile"
-    >
-      <div
-        class="euiFlexGroup emotion-euiFlexGroup-l-spaceBetween-baseline-row"
-      >
-        <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
-        />
-        <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
-        />
-      </div>
-    </div>
     <table
       class="euiTable euiTable--responsive emotion-euiTable-fixed-uncompressed"
       id="__table_generated-id"
@@ -135,67 +121,6 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
   class="euiBasicTable"
 >
   <div>
-    <div
-      class="euiTableHeaderMobile"
-    >
-      <div
-        class="euiFlexGroup emotion-euiFlexGroup-l-spaceBetween-baseline-row"
-      >
-        <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
-        >
-          <div
-            class="euiCheckbox emotion-euiCheckbox"
-          >
-            <input
-              aria-label="Select all rows"
-              class="euiCheckbox__input"
-              id="_selection_column-checkbox_generated-id_mobile"
-              type="checkbox"
-            />
-            <div
-              class="euiCheckbox__square"
-            />
-            <label
-              class="euiCheckbox__label"
-              for="_selection_column-checkbox_generated-id_mobile"
-            >
-              Select all rows
-            </label>
-          </div>
-        </div>
-        <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
-        >
-          <div
-            class="euiTableSortMobile"
-          >
-            <div
-              class="euiPopover emotion-euiPopover-inline-block"
-            >
-              <button
-                class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-flush-right"
-                type="button"
-              >
-                <span
-                  class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
-                >
-                  <span
-                    class="eui-textTruncate euiButtonEmpty__text"
-                  >
-                    Sorting
-                  </span>
-                  <span
-                    color="inherit"
-                    data-euiicon-type="arrowDown"
-                  />
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <table
       class="euiTable euiTable--responsive emotion-euiTable-fixed-uncompressed"
       id="__table_generated-id"

src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap

@@ -1,5 +1,57 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiInMemoryTable behavior mobile header 1`] = `
+<div
+  class="euiTableHeaderMobile emotion-euiTableHeaderMobile"
+>
+  <div
+    class="euiCheckbox emotion-euiCheckbox"
+  >
+    <input
+      aria-label="Select all rows"
+      class="euiCheckbox__input"
+      id="_selection_column-checkbox_generated-id_mobile"
+      type="checkbox"
+    />
+    <div
+      class="euiCheckbox__square"
+    />
+    <label
+      class="euiCheckbox__label"
+      for="_selection_column-checkbox_generated-id_mobile"
+    >
+      Select all rows
+    </label>
+  </div>
+  <div
+    class="euiTableSortMobile"
+  >
+    <div
+      class="euiPopover emotion-euiPopover-inline-block"
+    >
+      <button
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-flush-right"
+        type="button"
+      >
+        <span
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+        >
+          <span
+            class="eui-textTruncate euiButtonEmpty__text"
+          >
+            Sorting
+          </span>
+          <span
+            color="inherit"
+            data-euiicon-type="arrowDown"
+          />
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiInMemoryTable behavior pagination 1`] = `
 <nav
   aria-label="Pagination for table: "
@@ -103,20 +155,6 @@ exports[`EuiInMemoryTable empty array 1`] = `
   data-test-subj="test subject string"
 >
   <div>
-    <div
-      class="euiTableHeaderMobile"
-    >
-      <div
-        class="euiFlexGroup emotion-euiFlexGroup-l-spaceBetween-baseline-row"
-      >
-        <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
-        />
-        <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
-        />
-      </div>
-    </div>
     <table
       class="euiTable euiTable--responsive emotion-euiTable-fixed-uncompressed"
       id="__table_generated-id"
@@ -212,20 +250,6 @@ exports[`EuiInMemoryTable with items 1`] = `
   data-test-subj="test subject string"
 >
   <div>
-    <div
-      class="euiTableHeaderMobile"
-    >
-      <div
-        class="euiFlexGroup emotion-euiFlexGroup-l-spaceBetween-baseline-row"
-      >
-        <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
-        />
-        <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
-        />
-      </div>
-    </div>
     <table
       class="euiTable euiTable--responsive emotion-euiTable-fixed-uncompressed"
       id="__table_generated-id"

src/components/basic_table/basic_table.tsx

@@ -30,7 +30,6 @@ import {
 import { CommonProps } from '../common';
 import { isFunction } from '../../services/predicate';
 import { get } from '../../services/objects';
-import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiCheckbox } from '../form';
 
 import { EuiComponentDefaultsContext } from '../provider/component_defaults';
@@ -564,15 +563,9 @@ export class EuiBasicTable<T extends object = any> extends Component<
     } = this.props;
 
     const mobileHeader = responsive ? (
-      <EuiTableHeaderMobile>
-        <EuiFlexGroup
-          responsive={false}
-          justifyContent="spaceBetween"
-          alignItems="baseline"
-        >
-          <EuiFlexItem grow={false}>{this.renderSelectAll(true)}</EuiFlexItem>
-          <EuiFlexItem grow={false}>{this.renderTableMobileSort()}</EuiFlexItem>
-        </EuiFlexGroup>
+      <EuiTableHeaderMobile responsiveBreakpoint={responsiveBreakpoint}>
+        {this.renderSelectAll(true)}
+        {this.renderTableMobileSort()}
       </EuiTableHeaderMobile>
     ) : undefined;
     const caption = this.renderTableCaption();

src/components/basic_table/in_memory_table.test.tsx

@@ -638,7 +638,9 @@ describe('EuiInMemoryTable', () => {
         onSelectionChange: () => undefined,
       },
     };
-    const { getByText } = render(<EuiInMemoryTable {...props} />);
+    const { getByText } = render(
+      <EuiInMemoryTable responsiveBreakpoint={true} {...props} />
+    );
 
     expect(getByText('Page 1 of 1')).toBeTruthy();
     expect(getByText('Select all rows')).toBeTruthy();
@@ -667,7 +669,9 @@ describe('EuiInMemoryTable', () => {
         onSelectionChange: () => undefined,
       },
     };
-    const { getByText } = render(<EuiInMemoryTable {...props} />);
+    const { getByText } = render(
+      <EuiInMemoryTable responsiveBreakpoint={true} {...props} />
+    );
 
     expect(getByText('Page 1 of 1')).toBeTruthy();
     expect(getByText('Select all rows')).toBeTruthy();
@@ -700,7 +704,9 @@ describe('EuiInMemoryTable', () => {
         onSelectionChange: () => undefined,
       },
     };
-    const { getByText } = render(<EuiInMemoryTable {...props} />);
+    const { getByText } = render(
+      <EuiInMemoryTable responsiveBreakpoint={true} {...props} />
+    );
 
     expect(getByText('Page 1 of 2')).toBeTruthy();
     expect(getByText('Select all rows')).toBeTruthy();
@@ -741,7 +747,9 @@ describe('EuiInMemoryTable', () => {
         onSelectionChange: () => undefined,
       },
     };
-    const { getByText } = render(<EuiInMemoryTable {...props} />);
+    const { getByText } = render(
+      <EuiInMemoryTable responsiveBreakpoint={true} {...props} />
+    );
 
     expect(getByText('Page 1 of 1')).toBeTruthy();
     expect(getByText('Select all rows')).toBeTruthy();
@@ -784,7 +792,7 @@ describe('EuiInMemoryTable', () => {
       },
     };
     const { getByText, getByPlaceholderText } = render(
-      <EuiInMemoryTable {...props} />
+      <EuiInMemoryTable responsiveBreakpoint={true} {...props} />
     );
 
     expect(getByText('Page 1 of 1')).toBeTruthy();
@@ -881,7 +889,9 @@ describe('EuiInMemoryTable', () => {
         onSelectionChange: () => undefined,
       },
     };
-    const { container, queryByText } = render(<EuiInMemoryTable {...props} />);
+    const { container, queryByText } = render(
+      <EuiInMemoryTable responsiveBreakpoint={true} {...props} />
+    );
 
     expect(queryByText('Page 1 of 1')).toBeTruthy();
     expect(queryByText('Select all rows')).toBeTruthy();
@@ -1088,6 +1098,38 @@ describe('EuiInMemoryTable', () => {
   });
 
   describe('behavior', () => {
+    test('mobile header', () => {
+      const props: EuiInMemoryTableProps<BasicItem> = {
+        ...requiredProps,
+        items: [
+          { id: '1', name: 'name1' },
+          { id: '2', name: 'name2' },
+          { id: '3', name: 'name3' },
+        ],
+        itemId: 'id',
+        columns: [
+          {
+            field: 'name',
+            name: 'Name',
+            description: 'description',
+            sortable: true,
+          },
+        ],
+        pagination: true,
+        sorting: true,
+        selection: {
+          onSelectionChange: () => undefined,
+        },
+      };
+      const { container } = render(
+        <EuiInMemoryTable responsiveBreakpoint={true} {...props} />
+      );
+
+      expect(
+        container.querySelector('.euiTableHeaderMobile')
+      ).toMatchSnapshot();
+    });
+
     test('pagination', async () => {
       const props: EuiInMemoryTableProps<BasicItem> = {
         ...requiredProps,

src/components/table/mobile/__snapshots__/table_header_mobile.test.tsx.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiTableHeaderMobile is rendered 1`] = `
+exports[`EuiTableHeaderMobile renders when below the responsive breakpoint 1`] = `
 <div
   aria-label="aria-label"
-  class="euiTableHeaderMobile testClass1 testClass2 emotion-euiTestCss"
+  class="euiTableHeaderMobile testClass1 testClass2 emotion-euiTableHeaderMobile-euiTestCss"
   data-test-subj="test subject string"
 />
 `;

src/components/table/mobile/_mobile.scss

@@ -1,17 +1,4 @@
 // Hide mobile-only elements by default
-.euiTableHeaderMobile,
 .euiTableHeaderCell--hideForDesktop {
   display: none;
 }
-
-@include euiBreakpoint('xs', 's') {
-  .euiTableHeaderMobile {
-    display: flex;
-    justify-content: flex-end;
-    padding: $euiTableCellContentPadding 0;
-  }
-
-  .euiTableSortMobile {
-    display: block;
-  }
-}

src/components/table/mobile/table_header_mobile.styles.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../../services';
+
+export const euiTableHeaderMobileStyles = ({ euiTheme }: UseEuiTheme) => ({
+  euiTableHeaderMobile: css`
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    padding-block: ${euiTheme.size.s};
+  `,
+});