[Discover] Replace font awesome icons with Eui (#103503)

* [Discover] replace font awesome icons with eui * [Discover] fix eslint * [Discover] fix tests, update icon styles * [Discover] fix eslint * [Discover] fix functional related to awe icons * [Discover] add empty line for scss file * [Discover] fix eslint * [Discover] simplify testSubjects * Update src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.tsx Co-authored-by: Andrea Del Rio <delrio.andre@gmail.com> * Update src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.tsx Co-authored-by: Andrea Del Rio <delrio.andre@gmail.com> * [Discover] fix icons appearing problem * [Discover] update test * [Discover] remove redundant styles * [Discover] update test snapshot * Update src/plugins/discover/public/application/angular/doc_table/components/table_header/table_header_column.tsx Co-authored-by: Tim Roes <mail@timroes.de> * [Discover] change tool bar text size * [Discover] update test * [Discover] replace button with EuiButton Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Andrea Del Rio <delrio.andre@gmail.com> Co-authored-by: Tim Roes <mail@timroes.de>
2025-04-24 09:48:58 -04:00 · 2021-07-22 12:09:28 +03:00 · 2021-07-22 12:09:28 +03:00 · 484998c0e8
commit 484998c0e8
parent a09fcf017d
16 changed files with 307 additions and 162 deletions
--- a/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss
+++ b/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss
@ -33,10 +33,6 @@ doc-table {
  th {
    white-space: nowrap;
    padding-right: $euiSizeS;
-
-    .fa {
-      font-size: 1.1em;
-    }
  }
 }

@ -134,25 +130,3 @@ doc-table {
    }
  }
 }
-
-table {
-  th {
-    i.fa-sort {
-      color: $euiColorLightShade;
-    }
-
-    button.fa-sort-asc,
-    button.fa-sort-down,
-    i.fa-sort-asc,
-    i.fa-sort-down {
-      color: $euiColorPrimary;
-    }
-
-    button.fa-sort-desc,
-    button.fa-sort-up,
-    i.fa-sort-desc,
-    i.fa-sort-up {
-      color: $euiColorPrimary;
-    }
-  }
-}
--- a/src/plugins/discover/public/application/angular/doc_table/components/_table_header.scss
+++ b/src/plugins/discover/public/application/angular/doc_table/components/_table_header.scss
@ -2,7 +2,7 @@
  white-space: nowrap;
 }
 .kbnDocTableHeader button {
-  margin-left: $euiSizeXS;
+  margin-left: $euiSizeXS * .5;
 }
 .kbnDocTableHeader__move,
 .kbnDocTableHeader__sortChange {
@ -12,3 +12,7 @@
    opacity: 1;
  }
 }
+.kbnDocTableHeader__actions {
+  display: flex;
+  align-items: center;
+}
--- a/src/plugins/discover/public/application/angular/doc_table/components/pager/snapshots/tool_bar_pager_buttons.test.tsx.snap
+++ b/src/plugins/discover/public/application/angular/doc_table/components/pager/snapshots/tool_bar_pager_buttons.test.tsx.snap
@ -1,30 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`it renders ToolBarPagerButtons 1`] = `
-<div
-  className="kuiButtonGroup"
+<EuiFlexGroup
+  alignItems="center"
+  gutterSize="s"
+  responsive={false}
 >
-  <button
-    aria-label="Previous page in table"
-    className="kuiButton kuiButton--basic kuiButton--icon"
-    data-test-subj="btnPrevPage"
-    disabled={false}
-    onClick={[Function]}
+  <EuiFlexItem
+    grow={false}
  >
-    <span
-      className="kuiButton__icon kuiIcon fa-chevron-left"
+    <EuiButtonIcon
+      aria-label="Previous page in table"
+      data-test-subj="btnPrevPage"
+      display="base"
+      iconSize="m"
+      iconType="arrowLeft"
+      isDisabled={false}
+      onClick={[Function]}
+      size="xs"
    />
-  </button>
-  <button
-    aria-label="Next page in table"
-    className="kuiButton kuiButton--basic kuiButton--icon"
-    data-test-subj="btnNextPage"
-    disabled={false}
-    onClick={[Function]}
+  </EuiFlexItem>
+  <EuiFlexItem
+    grow={false}
  >
-    <span
-      className="kuiButton__icon kuiIcon fa-chevron-right"
+    <EuiButtonIcon
+      aria-label="Next page in table"
+      data-test-subj="btnNextPage"
+      display="base"
+      iconSize="m"
+      iconType="arrowRight"
+      isDisabled={false}
+      onClick={[Function]}
+      size="xs"
    />
-  </button>
-</div>
+  </EuiFlexItem>
+</EuiFlexGroup>
 `;
--- a/src/plugins/discover/public/application/angular/doc_table/components/pager/snapshots/tool_bar_pager_text.test.tsx.snap
+++ b/src/plugins/discover/public/application/angular/doc_table/components/pager/snapshots/tool_bar_pager_text.test.tsx.snap
@ -2,7 +2,7 @@

 exports[`it renders ToolBarPagerText without crashing 1`] = `
 <div
-  class="kuiToolBarText"
+  class="kbnDocTable__toolBarText"
  data-test-subj="toolBarPagerText"
 >
  1–2 of 3
--- a/src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.tsx
+++ b/src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.tsx
@ -8,6 +8,7 @@

 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';

 interface Props {
  hasPreviousPage: boolean;
@ -18,35 +19,41 @@ interface Props {

 export function ToolBarPagerButtons(props: Props) {
  return (
-    <div className="kuiButtonGroup">
-      <button
-        className="kuiButton kuiButton--basic kuiButton--icon"
-        onClick={() => props.onPagePrevious()}
-        disabled={!props.hasPreviousPage}
-        data-test-subj="btnPrevPage"
-        aria-label={i18n.translate(
-          'discover.docTable.pager.toolbarPagerButtons.previousButtonAriaLabel',
-          {
-            defaultMessage: 'Previous page in table',
-          }
-        )}
-      >
-        <span className="kuiButton__icon kuiIcon fa-chevron-left" />
-      </button>
-      <button
-        className="kuiButton kuiButton--basic kuiButton--icon"
-        onClick={() => props.onPageNext()}
-        disabled={!props.hasNextPage}
-        data-test-subj="btnNextPage"
-        aria-label={i18n.translate(
-          'discover.docTable.pager.toolbarPagerButtons.nextButtonAriaLabel',
-          {
-            defaultMessage: 'Next page in table',
-          }
-        )}
-      >
-        <span className="kuiButton__icon kuiIcon fa-chevron-right" />
-      </button>
-    </div>
+    <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          display="base"
+          iconType="arrowLeft"
+          iconSize="m"
+          size="xs"
+          onClick={() => props.onPagePrevious()}
+          isDisabled={!props.hasPreviousPage}
+          data-test-subj="btnPrevPage"
+          aria-label={i18n.translate(
+            'discover.docTable.pager.toolbarPagerButtons.previousButtonAriaLabel',
+            {
+              defaultMessage: 'Previous page in table',
+            }
+          )}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          display="base"
+          iconType="arrowRight"
+          iconSize="m"
+          size="xs"
+          onClick={() => props.onPageNext()}
+          isDisabled={!props.hasNextPage}
+          data-test-subj="btnNextPage"
+          aria-label={i18n.translate(
+            'discover.docTable.pager.toolbarPagerButtons.nextButtonAriaLabel',
+            {
+              defaultMessage: 'Next page in table',
+            }
+          )}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
  );
 }
--- a/src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_text.scss
+++ b/src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_text.scss
@ -0,0 +1,5 @@
+.kbnDocTable__toolBarText {
+  line-height: $euiLineHeight;
+  color: #69707D;
+  white-space: nowrap;
+}
--- a/src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_text.tsx
+++ b/src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_text.tsx
@ -7,6 +7,7 @@
 */

 import React from 'react';
+import './tool_bar_pager_text.scss';
 import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';

 interface Props {
@ -18,7 +19,7 @@ interface Props {
 export function ToolBarPagerText({ startItem, endItem, totalItems }: Props) {
  return (
    <I18nProvider>
-      <div className="kuiToolBarText" data-test-subj="toolBarPagerText">
+      <div className="kbnDocTable__toolBarText" data-test-subj="toolBarPagerText">
        <FormattedMessage
          id="discover.docTable.pagerControl.pagesCountLabel"
          defaultMessage="{startItem}&ndash;{endItem} of {totalItems}"
--- a/src/plugins/discover/public/application/angular/doc_table/components/table_header/snapshots/table_header.test.tsx.snap
+++ b/src/plugins/discover/public/application/angular/doc_table/components/table_header/snapshots/table_header.test.tsx.snap
@ -12,6 +12,7 @@ exports[`TableHeader with time column renders correctly 1`] = `
    data-test-subj="docTableHeaderField"
  >
    <span
+      class="kbnDocTableHeader__actions"
      data-test-subj="docTableHeader-time"
    >
      Time
@ -20,9 +21,18 @@ exports[`TableHeader with time column renders correctly 1`] = `
      >
        <button
          aria-label="Sort time descending"
-          class="fa fa-sort-up"
+          class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
          data-test-subj="docTableHeaderFieldSort_time"
-        />
+          style="width: 12px; height: 12px;"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="sortUp"
+          />
+        </button>
      </span>
    </span>
  </th>
@ -30,6 +40,7 @@ exports[`TableHeader with time column renders correctly 1`] = `
    data-test-subj="docTableHeaderField"
  >
    <span
+      class="kbnDocTableHeader__actions"
      data-test-subj="docTableHeader-first"
    >
      first
@ -38,18 +49,36 @@ exports[`TableHeader with time column renders correctly 1`] = `
      >
        <button
          aria-label="Remove first column"
-          class="fa fa-remove kbnDocTableHeader__move"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall kbnDocTableHeader__move"
          data-test-subj="docTableRemoveHeader-first"
-        />
+          style="width: 12px; height: 12px;"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="cross"
+          />
+        </button>
      </span>
      <span
        class="euiToolTipAnchor"
      >
        <button
          aria-label="Move first column to the right"
-          class="fa fa-angle-double-right kbnDocTableHeader__move"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall kbnDocTableHeader__move"
          data-test-subj="docTableMoveRightHeader-first"
-        />
+          style="width: 12px; height: 12px;"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="sortRight"
+          />
+        </button>
      </span>
    </span>
  </th>
@ -57,6 +86,7 @@ exports[`TableHeader with time column renders correctly 1`] = `
    data-test-subj="docTableHeaderField"
  >
    <span
+      class="kbnDocTableHeader__actions"
      data-test-subj="docTableHeader-middle"
    >
      middle
@ -65,27 +95,54 @@ exports[`TableHeader with time column renders correctly 1`] = `
      >
        <button
          aria-label="Remove middle column"
-          class="fa fa-remove kbnDocTableHeader__move"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall kbnDocTableHeader__move"
          data-test-subj="docTableRemoveHeader-middle"
-        />
+          style="width: 12px; height: 12px;"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="cross"
+          />
+        </button>
      </span>
      <span
        class="euiToolTipAnchor"
      >
        <button
          aria-label="Move middle column to the left"
-          class="fa fa-angle-double-left kbnDocTableHeader__move"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall kbnDocTableHeader__move"
          data-test-subj="docTableMoveLeftHeader-middle"
-        />
+          style="width: 12px; height: 12px;"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="sortLeft"
+          />
+        </button>
      </span>
      <span
        class="euiToolTipAnchor"
      >
        <button
          aria-label="Move middle column to the right"
-          class="fa fa-angle-double-right kbnDocTableHeader__move"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall kbnDocTableHeader__move"
          data-test-subj="docTableMoveRightHeader-middle"
-        />
+          style="width: 12px; height: 12px;"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="sortRight"
+          />
+        </button>
      </span>
    </span>
  </th>
@ -93,6 +150,7 @@ exports[`TableHeader with time column renders correctly 1`] = `
    data-test-subj="docTableHeaderField"
  >
    <span
+      class="kbnDocTableHeader__actions"
      data-test-subj="docTableHeader-last"
    >
      last
@ -101,18 +159,36 @@ exports[`TableHeader with time column renders correctly 1`] = `
      >
        <button
          aria-label="Remove last column"
-          class="fa fa-remove kbnDocTableHeader__move"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall kbnDocTableHeader__move"
          data-test-subj="docTableRemoveHeader-last"
-        />
+          style="width: 12px; height: 12px;"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="cross"
+          />
+        </button>
      </span>
      <span
        class="euiToolTipAnchor"
      >
        <button
          aria-label="Move last column to the left"
-          class="fa fa-angle-double-left kbnDocTableHeader__move"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall kbnDocTableHeader__move"
          data-test-subj="docTableMoveLeftHeader-last"
-        />
+          style="width: 12px; height: 12px;"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="sortLeft"
+          />
+        </button>
      </span>
    </span>
  </th>
@ -131,6 +207,7 @@ exports[`TableHeader without time column renders correctly 1`] = `
    data-test-subj="docTableHeaderField"
  >
    <span
+      class="kbnDocTableHeader__actions"
      data-test-subj="docTableHeader-first"
    >
      first
@ -139,18 +216,36 @@ exports[`TableHeader without time column renders correctly 1`] = `
      >
        <button
          aria-label="Remove first column"
-          class="fa fa-remove kbnDocTableHeader__move"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall kbnDocTableHeader__move"
          data-test-subj="docTableRemoveHeader-first"
-        />
+          style="width: 12px; height: 12px;"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="cross"
+          />
+        </button>
      </span>
      <span
        class="euiToolTipAnchor"
      >
        <button
          aria-label="Move first column to the right"
-          class="fa fa-angle-double-right kbnDocTableHeader__move"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall kbnDocTableHeader__move"
          data-test-subj="docTableMoveRightHeader-first"
-        />
+          style="width: 12px; height: 12px;"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="sortRight"
+          />
+        </button>
      </span>
    </span>
  </th>
@ -158,6 +253,7 @@ exports[`TableHeader without time column renders correctly 1`] = `
    data-test-subj="docTableHeaderField"
  >
    <span
+      class="kbnDocTableHeader__actions"
      data-test-subj="docTableHeader-middle"
    >
      middle
@ -166,27 +262,54 @@ exports[`TableHeader without time column renders correctly 1`] = `
      >
        <button
          aria-label="Remove middle column"
-          class="fa fa-remove kbnDocTableHeader__move"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall kbnDocTableHeader__move"
          data-test-subj="docTableRemoveHeader-middle"
-        />
+          style="width: 12px; height: 12px;"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="cross"
+          />
+        </button>
      </span>
      <span
        class="euiToolTipAnchor"
      >
        <button
          aria-label="Move middle column to the left"
-          class="fa fa-angle-double-left kbnDocTableHeader__move"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall kbnDocTableHeader__move"
          data-test-subj="docTableMoveLeftHeader-middle"
-        />
+          style="width: 12px; height: 12px;"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="sortLeft"
+          />
+        </button>
      </span>
      <span
        class="euiToolTipAnchor"
      >
        <button
          aria-label="Move middle column to the right"
-          class="fa fa-angle-double-right kbnDocTableHeader__move"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall kbnDocTableHeader__move"
          data-test-subj="docTableMoveRightHeader-middle"
-        />
+          style="width: 12px; height: 12px;"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="sortRight"
+          />
+        </button>
      </span>
    </span>
  </th>
@ -194,6 +317,7 @@ exports[`TableHeader without time column renders correctly 1`] = `
    data-test-subj="docTableHeaderField"
  >
    <span
+      class="kbnDocTableHeader__actions"
      data-test-subj="docTableHeader-last"
    >
      last
@ -202,18 +326,36 @@ exports[`TableHeader without time column renders correctly 1`] = `
      >
        <button
          aria-label="Remove last column"
-          class="fa fa-remove kbnDocTableHeader__move"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall kbnDocTableHeader__move"
          data-test-subj="docTableRemoveHeader-last"
-        />
+          style="width: 12px; height: 12px;"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="cross"
+          />
+        </button>
      </span>
      <span
        class="euiToolTipAnchor"
      >
        <button
          aria-label="Move last column to the left"
-          class="fa fa-angle-double-left kbnDocTableHeader__move"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall kbnDocTableHeader__move"
          data-test-subj="docTableMoveLeftHeader-last"
-        />
+          style="width: 12px; height: 12px;"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="sortLeft"
+          />
+        </button>
      </span>
    </span>
  </th>
--- a/src/plugins/discover/public/application/angular/doc_table/components/table_header/table_header_column.tsx
+++ b/src/plugins/discover/public/application/angular/doc_table/components/table_header/table_header_column.tsx
@ -8,7 +8,7 @@

 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiToolTip } from '@elastic/eui';
+import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import { SortOrder } from './helpers';

 interface Props {
@ -24,12 +24,29 @@ interface Props {
  sortOrder: SortOrder[];
 }

-const sortDirectionToIcon: Record<string, string> = {
-  desc: 'fa fa-sort-down',
-  asc: 'fa fa-sort-up',
-  '': 'fa fa-sort',
+interface IconProps {
+  iconType: string;
+  color: 'primary' | 'text';
+}
+
+interface IconButtonProps {
+  active: boolean;
+  ariaLabel: string;
+  className: string;
+  iconProps: IconProps;
+  onClick: () => void | undefined;
+  testSubject: string;
+  tooltip: string;
+}
+
+const sortDirectionToIcon: Record<string, IconProps> = {
+  desc: { iconType: 'sortDown', color: 'primary' },
+  asc: { iconType: 'sortUp', color: 'primary' },
+  '': { iconType: 'sortable', color: 'text' },
 };

+const ICON_BUTTON_STYLE = { width: 12, height: 12 };
+
 export function TableHeaderColumn({
  colLeftIdx,
  colRightIdx,
@ -43,28 +60,24 @@ export function TableHeaderColumn({
  sortOrder,
 }: Props) {
  const [, sortDirection = ''] = sortOrder.find((sortPair) => name === sortPair[0]) || [];
-  const currentSortWithoutColumn = sortOrder.filter((pair) => pair[0] !== name);
-  const currentColumnSort = sortOrder.find((pair) => pair[0] === name);
-  const currentColumnSortDirection = (currentColumnSort && currentColumnSort[1]) || '';
-
-  const btnSortIcon = sortDirectionToIcon[sortDirection];
-  const btnSortClassName =
-    sortDirection !== '' ? btnSortIcon : `kbnDocTableHeader__sortChange ${btnSortIcon}`;
+  const curSortWithoutCol = sortOrder.filter((pair) => pair[0] !== name);
+  const curColSort = sortOrder.find((pair) => pair[0] === name);
+  const curColSortDir = (curColSort && curColSort[1]) || '';

  const handleChangeSortOrder = () => {
    if (!onChangeSortOrder) return;

    // Cycle goes Unsorted -> Asc -> Desc -> Unsorted
-    if (currentColumnSort === undefined) {
-      onChangeSortOrder([...currentSortWithoutColumn, [name, 'asc']]);
-    } else if (currentColumnSortDirection === 'asc') {
-      onChangeSortOrder([...currentSortWithoutColumn, [name, 'desc']]);
-    } else if (currentColumnSortDirection === 'desc' && currentSortWithoutColumn.length === 0) {
+    if (curColSort === undefined) {
+      onChangeSortOrder([...curSortWithoutCol, [name, 'asc']]);
+    } else if (curColSortDir === 'asc') {
+      onChangeSortOrder([...curSortWithoutCol, [name, 'desc']]);
+    } else if (curColSortDir === 'desc' && curSortWithoutCol.length === 0) {
      // If we're at the end of the cycle and this is the only existing sort, we switch
      // back to ascending sort instead of removing it.
      onChangeSortOrder([[name, 'asc']]);
    } else {
-      onChangeSortOrder(currentSortWithoutColumn);
+      onChangeSortOrder(curSortWithoutCol);
    }
  };

@ -91,11 +104,11 @@ export function TableHeaderColumn({
      }
    );

-    if (currentColumnSort === undefined) {
+    if (curColSort === undefined) {
      return sortAscendingMessage;
    } else if (sortDirection === 'asc') {
      return sortDescendingMessage;
-    } else if (sortDirection === 'desc' && currentSortWithoutColumn.length === 0) {
+    } else if (sortDirection === 'desc' && curSortWithoutCol.length === 0) {
      return sortAscendingMessage;
    } else {
      return stopSortingMessage;
@ -103,12 +116,13 @@ export function TableHeaderColumn({
  };

  // action buttons displayed on the right side of the column name
-  const buttons = [
+  const buttons: IconButtonProps[] = [
    // Sort Button
    {
      active: isSortable && typeof onChangeSortOrder === 'function',
      ariaLabel: getSortButtonAriaLabel(),
-      className: btnSortClassName,
+      className: !sortDirection ? 'kbnDocTableHeader__sortChange' : '',
+      iconProps: sortDirectionToIcon[sortDirection],
      onClick: handleChangeSortOrder,
      testSubject: `docTableHeaderFieldSort_${name}`,
      tooltip: getSortButtonAriaLabel(),
@ -120,7 +134,8 @@ export function TableHeaderColumn({
        defaultMessage: 'Remove {columnName} column',
        values: { columnName: name },
      }),
-      className: 'fa fa-remove kbnDocTableHeader__move',
+      className: 'kbnDocTableHeader__move',
+      iconProps: { iconType: 'cross', color: 'text' },
      onClick: () => onRemoveColumn && onRemoveColumn(name),
      testSubject: `docTableRemoveHeader-${name}`,
      tooltip: i18n.translate('discover.docTable.tableHeader.removeColumnButtonTooltip', {
@ -134,7 +149,8 @@ export function TableHeaderColumn({
        defaultMessage: 'Move {columnName} column to the left',
        values: { columnName: name },
      }),
-      className: 'fa fa-angle-double-left kbnDocTableHeader__move',
+      className: 'kbnDocTableHeader__move',
+      iconProps: { iconType: 'sortLeft', color: 'text' },
      onClick: () => onMoveColumn && onMoveColumn(name, colLeftIdx),
      testSubject: `docTableMoveLeftHeader-${name}`,
      tooltip: i18n.translate('discover.docTable.tableHeader.moveColumnLeftButtonTooltip', {
@ -148,7 +164,8 @@ export function TableHeaderColumn({
        defaultMessage: 'Move {columnName} column to the right',
        values: { columnName: name },
      }),
-      className: 'fa fa-angle-double-right kbnDocTableHeader__move',
+      className: 'kbnDocTableHeader__move',
+      iconProps: { iconType: 'sortRight', color: 'text' },
      onClick: () => onMoveColumn && onMoveColumn(name, colRightIdx),
      testSubject: `docTableMoveRightHeader-${name}`,
      tooltip: i18n.translate('discover.docTable.tableHeader.moveColumnRightButtonTooltip', {
@ -159,7 +176,7 @@ export function TableHeaderColumn({

  return (
    <th data-test-subj="docTableHeaderField">
-      <span data-test-subj={`docTableHeader-${name}`}>
+      <span data-test-subj={`docTableHeader-${name}`} className="kbnDocTableHeader__actions">
        {displayName}
        {buttons
          .filter((button) => button.active)
@ -169,11 +186,14 @@ export function TableHeaderColumn({
              content={button.tooltip}
              key={`button-${idx}`}
            >
-              <button
+              <EuiButtonIcon
                aria-label={button.ariaLabel}
                className={button.className}
                data-test-subj={button.testSubject}
                onClick={button.onClick}
+                iconSize="s"
+                style={ICON_BUTTON_STYLE}
+                {...button.iconProps}
              />
            </EuiToolTip>
          ))}
--- a/src/plugins/discover/public/application/application.ts
+++ b/src/plugins/discover/public/application/application.ts
@ -8,14 +8,11 @@

 import './index.scss';
 import angular from 'angular';
-import { getServices } from '../kibana_services';

 /**
 * Here's where Discover's inner angular is mounted and rendered
 */
 export async function renderApp(moduleName: string, element: HTMLElement) {
-  // do not wait for fontawesome
-  getServices().kibanaLegacy.loadFontAwesome();
  await import('./angular');
  const $injector = mountDiscoverApp(moduleName, element);
  return () => $injector.get('$rootScope').$destroy();
--- a/src/plugins/discover/public/application/apps/main/components/skip_bottom_button/skip_bottom_button.scss
+++ b/src/plugins/discover/public/application/apps/main/components/skip_bottom_button/skip_bottom_button.scss
@ -0,0 +1,3 @@
+.dscSkipButton {
+  z-index: $euiZLevel1;
+}
--- a/src/plugins/discover/public/application/apps/main/components/skip_bottom_button/skip_bottom_button.tsx
+++ b/src/plugins/discover/public/application/apps/main/components/skip_bottom_button/skip_bottom_button.tsx
@ -7,6 +7,7 @@
 */

 import React from 'react';
+import './skip_bottom_button.scss';
 import { EuiSkipLink } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';

--- a/src/plugins/discover/public/plugin.tsx
+++ b/src/plugins/discover/public/plugin.tsx
@ -475,7 +475,6 @@ export class DiscoverPlugin
      }
      const { core, plugins } = await this.initializeServices();
      await getServices().kibanaLegacy.loadAngularBootstrap();
-      getServices().kibanaLegacy.loadFontAwesome();
      const { getInnerAngularModuleEmbeddable } = await import(
        './application/angular/get_inner_angular'
      );
--- a/test/functional/apps/discover/_field_data.ts
+++ b/test/functional/apps/discover/_field_data.ts
@ -19,6 +19,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
  const browser = getService('browser');
  const PageObjects = getPageObjects(['common', 'header', 'discover', 'visualize', 'timePicker']);
  const find = getService('find');
+  const testSubjects = getService('testSubjects');

  describe('discover tab', function describeIndexTests() {
    this.tags('includeFirefox');
@ -107,7 +108,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
          await kibanaServer.uiSettings.replace({});
        });
        it('doc view should show Time and _source columns', async function () {
-          const expectedHeader = 'Time _source';
+          const expectedHeader = 'Time\n_source';
          const docHeader = await find.byCssSelector('thead > tr:nth-child(1)');
          const docHeaderText = await docHeader.getVisibleText();
          expect(docHeaderText).to.be(expectedHeader);
@ -115,7 +116,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {

        it('doc view should sort ascending', async function () {
          const expectedTimeStamp = 'Sep 20, 2015 @ 00:00:00.000';
-          await find.clickByCssSelector('.fa-sort-down');
+          await testSubjects.click('docTableHeaderFieldSort_@timestamp');

          // we don't technically need this sleep here because the tryForTime will retry and the
          // results will match on the 2nd or 3rd attempt, but that debug output is huge in this
--- a/test/functional/apps/discover/_field_data_with_fields_api.ts
+++ b/test/functional/apps/discover/_field_data_with_fields_api.ts
@ -19,6 +19,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
  const browser = getService('browser');
  const PageObjects = getPageObjects(['common', 'header', 'discover', 'visualize', 'timePicker']);
  const find = getService('find');
+  const testSubjects = getService('testSubjects');

  describe('discover tab with new fields API', function describeIndexTests() {
    this.tags('includeFirefox');
@ -114,7 +115,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {

        it('doc view should sort ascending', async function () {
          const expectedTimeStamp = 'Sep 20, 2015 @ 00:00:00.000';
-          await find.clickByCssSelector('.fa-sort-down');
+          await testSubjects.click('docTableHeaderFieldSort_@timestamp');

          // we don't technically need this sleep here because the tryForTime will retry and the
          // results will match on the 2nd or 3rd attempt, but that debug output is huge in this
--- a/test/functional/page_objects/discover_page.ts
+++ b/test/functional/page_objects/discover_page.ts
@ -267,24 +267,6 @@ export class DiscoverPageObject extends FtrService {
    return await this.testSubjects.find('discoverDocTableFooter');
  }

-  public async clickDocSortDown() {
-    const isLegacyDefault = await this.useLegacyTable();
-    if (isLegacyDefault) {
-      await this.find.clickByCssSelector('.fa-sort-down');
-    } else {
-      await this.dataGrid.clickDocSortAsc();
-    }
-  }
-
-  public async clickDocSortUp() {
-    const isLegacyDefault = await this.useLegacyTable();
-    if (isLegacyDefault) {
-      await this.find.clickByCssSelector('.fa-sort-up');
-    } else {
-      await this.dataGrid.clickDocSortDesc();
-    }
-  }
-
  public async isShowingDocViewer() {
    return await this.testSubjects.exists('kbnDocViewer');
  }