[Top Menu] Increase size of top menu links to s (#103144)

* Increased non-emphasized header links size from `xs` to `s` * [Observability] Updating header links to use EuiHeaderLink * [Spaces Menu] Larger spinner * [Help Menu] Increase size of links * [Canvas] Increase size to `s`
2025-04-23 17:28:26 -04:00 · 2021-07-12 12:50:41 -04:00 · 2021-07-12 12:50:41 -04:00 · 42c743be88
commit 42c743be88
parent eae975e91b
27 changed files with 134 additions and 194 deletions
--- a/src/core/public/chrome/ui/header/header_help_menu.tsx
+++ b/src/core/public/chrome/ui/header/header_help_menu.tsx
@ -211,7 +211,7 @@ export class HeaderHelpMenu extends Component<Props, State> {

    return (
      <Fragment>
-        <EuiButtonEmpty href={kibanaDocLink} target="_blank" size="xs" flush="left">
+        <EuiButtonEmpty href={kibanaDocLink} target="_blank" size="s" flush="left">
          <FormattedMessage
            id="core.ui.chrome.headerGlobalNav.helpMenuKibanaDocumentationTitle"
            defaultMessage="Kibana documentation"
@ -220,7 +220,7 @@ export class HeaderHelpMenu extends Component<Props, State> {

        <EuiSpacer size="xs" />

-        <EuiButtonEmpty href={helpSupportUrl} target="_blank" size="xs" flush="left">
+        <EuiButtonEmpty href={helpSupportUrl} target="_blank" size="s" flush="left">
          <FormattedMessage
            id="core.ui.chrome.headerGlobalNav.helpMenuAskElasticTitle"
            defaultMessage="Ask Elastic"
@ -229,7 +229,7 @@ export class HeaderHelpMenu extends Component<Props, State> {

        <EuiSpacer size="xs" />

-        <EuiButtonEmpty href={KIBANA_FEEDBACK_LINK} target="_blank" size="xs" flush="left">
+        <EuiButtonEmpty href={KIBANA_FEEDBACK_LINK} target="_blank" size="s" flush="left">
          <FormattedMessage
            id="core.ui.chrome.headerGlobalNav.helpMenuGiveFeedbackTitle"
            defaultMessage="Give feedback"
@ -241,7 +241,7 @@ export class HeaderHelpMenu extends Component<Props, State> {
        <EuiButtonEmpty
          href={GITHUB_CREATE_ISSUE_LINK}
          target="_blank"
-          size="xs"
+          size="s"
          iconType="logoGithub"
          flush="left"
        >
@ -330,7 +330,7 @@ export class HeaderHelpMenu extends Component<Props, State> {
        {customLinks}
        {content && (
          <>
-            {customLinks && <EuiSpacer size="s" />}
+            {customLinks && <EuiSpacer size="xs" />}
            <HeaderExtension extension={content} />
          </>
        )}
@ -383,7 +383,7 @@ const createCustomLink = (
 ) => {
  return (
    <Fragment key={`helpButton${index}`}>
-      <EuiButtonEmpty {...buttonProps} size="xs" flush="left">
+      <EuiButtonEmpty {...buttonProps} size="s" flush="left">
        {text}
      </EuiButtonEmpty>
      {addSpacer && <EuiSpacer size="xs" />}
--- a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
@ -77,7 +77,7 @@ function FilterBarUI(props: Props) {

    const button = (
      <EuiButtonEmpty
-        size="xs"
+        size="s"
        onClick={() => setIsAddFilterPopoverOpen(true)}
        data-test-subj="addFilter"
        className="globalFilterBar__addButton"
--- a/src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx
+++ b/src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx
@ -132,7 +132,7 @@ export const IndexPatternTable = ({ canSave, history }: Props) => {
        }
      ) => (
        <>
-          <EuiButtonEmpty size="xs" {...reactRouterNavigate(history, `patterns/${index.id}`)}>
+          <EuiButtonEmpty size="s" {...reactRouterNavigate(history, `patterns/${index.id}`)}>
            {name}
          </EuiButtonEmpty>
          &emsp;
--- a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx
+++ b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx
@ -42,7 +42,7 @@ export function TopNavMenuItem(props: TopNavMenuData) {
      {upperFirst(props.label || props.id!)}
    </EuiButton>
  ) : (
-    <EuiHeaderLink size="xs" color="primary" {...commonButtonProps}>
+    <EuiHeaderLink size="s" color="primary" {...commonButtonProps}>
      {upperFirst(props.label || props.id!)}
    </EuiHeaderLink>
  );
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/ActionMenu/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/ActionMenu/index.tsx
@ -6,12 +6,7 @@
 */

 import React from 'react';
-import {
-  EuiButtonEmpty,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiToolTip,
-} from '@elastic/eui';
+import { EuiHeaderLinks, EuiHeaderLink, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import {
  createExploratoryViewUrl,
@ -62,38 +57,29 @@ export function UXActionMenu({
    <HeaderMenuPortal
      setHeaderActionMenu={appMountParameters.setHeaderActionMenu}
    >
-      <EuiFlexGroup
-        alignItems="center"
-        gutterSize="s"
-        responsive={false}
-        style={{ paddingRight: 20 }}
-      >
-        <EuiFlexItem>
-          <EuiToolTip position="top" content={<p>{ANALYZE_MESSAGE}</p>}>
-            <EuiButtonEmpty
-              size="xs"
-              color="text"
-              href={uxExploratoryViewLink}
-              iconType="visBarVerticalStacked"
-            >
-              {ANALYZE_DATA}
-            </EuiButtonEmpty>
-          </EuiToolTip>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiButtonEmpty
-            iconType="indexOpen"
-            iconSide="left"
-            href={kibana.services?.application?.getUrlForApp(
-              '/home#/tutorial/apm'
-            )}
+      <EuiHeaderLinks gutterSize="xs">
+        <EuiToolTip position="top" content={<p>{ANALYZE_MESSAGE}</p>}>
+          <EuiHeaderLink
+            color="text"
+            href={uxExploratoryViewLink}
+            iconType="visBarVerticalStacked"
          >
-            {i18n.translate('xpack.apm.addDataButtonLabel', {
-              defaultMessage: 'Add data',
-            })}
-          </EuiButtonEmpty>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+            {ANALYZE_DATA}
+          </EuiHeaderLink>
+        </EuiToolTip>
+        <EuiHeaderLink
+          color="primary"
+          iconType="indexOpen"
+          iconSide="left"
+          href={kibana.services?.application?.getUrlForApp(
+            '/home#/tutorial/apm'
+          )}
+        >
+          {i18n.translate('xpack.apm.addDataButtonLabel', {
+            defaultMessage: 'Add data',
+          })}
+        </EuiHeaderLink>
+      </EuiHeaderLinks>
    </HeaderMenuPortal>
  );
 }
--- a/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/alerting_popover_flyout.tsx
+++ b/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/alerting_popover_flyout.tsx
@ -66,7 +66,6 @@ export function AlertingPopoverAndFlyout({

  const button = (
    <EuiHeaderLink
-      size="xs"
      color="text"
      iconType="arrowDown"
      iconSide="right"
--- a/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/anomaly_detection_setup_link.tsx
+++ b/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/anomaly_detection_setup_link.tsx
@ -43,7 +43,6 @@ export function AnomalyDetectionSetupLink() {

  return (
    <EuiHeaderLink
-      size="xs"
      color="text"
      href={getAPMHref({ basePath, path: '/settings/anomaly-detection' })}
      style={{ whiteSpace: 'nowrap' }}
--- a/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/index.tsx
@ -41,7 +41,7 @@ export function ApmHeaderActionMenu() {

  return (
    <EuiHeaderLinks gutterSize="xs">
-      <EuiHeaderLink size="xs" color="text" href={apmHref('/settings')}>
+      <EuiHeaderLink color="text" href={apmHref('/settings')}>
        {i18n.translate('xpack.apm.settingsLinkLabel', {
          defaultMessage: 'Settings',
        })}
--- a/x-pack/plugins/canvas/public/components/function_reference_generator/function_reference_generator.tsx
+++ b/x-pack/plugins/canvas/public/components/function_reference_generator/function_reference_generator.tsx
@ -29,7 +29,7 @@ export const FunctionReferenceGenerator: FC<Props> = ({ functionRegistry }) => {
  };

  return (
-    <EuiButtonEmpty color="danger" flush="left" size="xs" iconType="beaker" onClick={copyDocs}>
+    <EuiButtonEmpty color="danger" flush="left" size="s" iconType="beaker" onClick={copyDocs}>
      Generate function reference
    </EuiButtonEmpty>
  );
--- a/x-pack/plugins/canvas/public/components/help_menu/help_menu.tsx
+++ b/x-pack/plugins/canvas/public/components/help_menu/help_menu.tsx
@ -46,13 +46,13 @@ export const HelpMenu: FC<Props> = ({ functionRegistry }) => {

  return (
    <>
-      <EuiButtonEmpty size="xs" flush="left" iconType="keyboardShortcut" onClick={showFlyout}>
+      <EuiButtonEmpty size="s" flush="left" iconType="keyboardShortcut" onClick={showFlyout}>
        {strings.getKeyboardShortcutsLinkLabel()}
      </EuiButtonEmpty>

      {FunctionReferenceGenerator ? (
        <Suspense fallback={null}>
-          <EuiSpacer size="s" />
+          <EuiSpacer size="xs" />
          <FunctionReferenceGenerator functionRegistry={functionRegistry} />
        </Suspense>
      ) : null}
--- a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/stories/snapshots/edit_menu.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/stories/snapshots/edit_menu.stories.storyshot
@ -9,7 +9,7 @@ exports[`Storyshots components/WorkpadHeader/EditMenu 2 elements selected 1`] =
  >
    <button
      aria-label="Edit options"
-      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
      data-test-subj="canvasWorkpadEditMenuButton"
      disabled={false}
      onClick={[Function]}
@ -38,7 +38,7 @@ exports[`Storyshots components/WorkpadHeader/EditMenu 3+ elements selected 1`] =
  >
    <button
      aria-label="Edit options"
-      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
      data-test-subj="canvasWorkpadEditMenuButton"
      disabled={false}
      onClick={[Function]}
@ -67,7 +67,7 @@ exports[`Storyshots components/WorkpadHeader/EditMenu clipboard data exists 1`]
  >
    <button
      aria-label="Edit options"
-      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
      data-test-subj="canvasWorkpadEditMenuButton"
      disabled={false}
      onClick={[Function]}
@ -96,7 +96,7 @@ exports[`Storyshots components/WorkpadHeader/EditMenu default 1`] = `
  >
    <button
      aria-label="Edit options"
-      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
      data-test-subj="canvasWorkpadEditMenuButton"
      disabled={false}
      onClick={[Function]}
@ -125,7 +125,7 @@ exports[`Storyshots components/WorkpadHeader/EditMenu single element selected 1`
  >
    <button
      aria-label="Edit options"
-      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
      data-test-subj="canvasWorkpadEditMenuButton"
      disabled={false}
      onClick={[Function]}
@ -154,7 +154,7 @@ exports[`Storyshots components/WorkpadHeader/EditMenu single grouped element sel
  >
    <button
      aria-label="Edit options"
-      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
      data-test-subj="canvasWorkpadEditMenuButton"
      disabled={false}
      onClick={[Function]}
--- a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.component.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.component.tsx
@ -248,7 +248,7 @@ export const EditMenu: FunctionComponent<Props> = ({

  const editControl = (togglePopover: React.MouseEventHandler<any>) => (
    <EuiButtonEmpty
-      size="xs"
+      size="s"
      aria-label={strings.getEditMenuLabel()}
      onClick={togglePopover}
      data-test-subj="canvasWorkpadEditMenuButton"
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/stories/snapshots/share_menu.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/stories/snapshots/share_menu.stories.storyshot
@ -10,7 +10,7 @@ exports[`Storyshots components/WorkpadHeader/ShareMenu minimal 1`] = `
    >
      <button
        aria-label="Share this workpad"
-        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
        data-test-subj="shareTopNavButton"
        disabled={false}
        onClick={[Function]}
@ -41,7 +41,7 @@ exports[`Storyshots components/WorkpadHeader/ShareMenu with Reporting 1`] = `
    >
      <button
        aria-label="Share this workpad"
-        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
        data-test-subj="shareTopNavButton"
        disabled={false}
        onClick={[Function]}
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.component.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.component.tsx
@ -125,7 +125,7 @@ export const ShareMenu: FunctionComponent<Props> = ({

  const shareControl = (togglePopover: React.MouseEventHandler<any>) => (
    <EuiButtonEmpty
-      size="xs"
+      size="s"
      aria-label={strings.getShareWorkpadMessage()}
      onClick={togglePopover}
      data-test-subj="shareTopNavButton"
--- a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/stories/snapshots/view_menu.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/stories/snapshots/view_menu.stories.storyshot
@ -9,7 +9,7 @@ exports[`Storyshots components/WorkpadHeader/ViewMenu edit mode 1`] = `
  >
    <button
      aria-label="View options"
-      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
      disabled={false}
      onClick={[Function]}
      type="button"
@ -37,7 +37,7 @@ exports[`Storyshots components/WorkpadHeader/ViewMenu read only mode 1`] = `
  >
    <button
      aria-label="View options"
-      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
      disabled={false}
      onClick={[Function]}
      type="button"
@ -65,7 +65,7 @@ exports[`Storyshots components/WorkpadHeader/ViewMenu with autoplay enabled 1`]
  >
    <button
      aria-label="View options"
-      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
      disabled={false}
      onClick={[Function]}
      type="button"
@ -93,7 +93,7 @@ exports[`Storyshots components/WorkpadHeader/ViewMenu with refresh enabled 1`] =
  >
    <button
      aria-label="View options"
-      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
      disabled={false}
      onClick={[Function]}
      type="button"
--- a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.component.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.component.tsx
@ -177,7 +177,7 @@ export const ViewMenu: FunctionComponent<Props> = ({
  };

  const viewControl = (togglePopover: React.MouseEventHandler<any>) => (
-    <EuiButtonEmpty size="xs" aria-label={strings.getViewMenuLabel()} onClick={togglePopover}>
+    <EuiButtonEmpty size="s" aria-label={strings.getViewMenuLabel()} onClick={togglePopover}>
      {strings.getViewMenuButtonLabel()}
    </EuiButtonEmpty>
  );
--- a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/file_data_visualizer_view/file_error_callouts.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/file_data_visualizer_view/file_error_callouts.tsx
@ -107,7 +107,7 @@ export const FileCouldNotBeRead: FC<FileCouldNotBeReadProps> = ({
              defaultMessage="If you know something about this data, such as the file format or timestamp format, adding initial overrides may help us to infer the rest of the structure."
            />
            <br />
-            <EuiButtonEmpty onClick={showEditFlyout} flush="left" size="xs">
+            <EuiButtonEmpty onClick={showEditFlyout} flush="left" size="s">
              <FormattedMessage
                id="xpack.dataVisualizer.file.fileErrorCallouts.overrideButton"
                defaultMessage="Apply override settings"
--- a/x-pack/plugins/infra/public/alerting/common/components/metrics_alert_dropdown.tsx
+++ b/x-pack/plugins/infra/public/alerting/common/components/metrics_alert_dropdown.tsx
@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
 import React, { useState, useCallback, useMemo } from 'react';
 import {
  EuiPopover,
-  EuiButtonEmpty,
+  EuiHeaderLink,
  EuiContextMenu,
  EuiContextMenuPanelDescriptor,
 } from '@elastic/eui';
@ -134,8 +134,7 @@ export const MetricsAlertDropdown = () => {
        panelPaddingSize="none"
        anchorPosition="downLeft"
        button={
-          <EuiButtonEmpty
-            size="xs"
+          <EuiHeaderLink
            color="text"
            iconSide={'right'}
            iconType={'arrowDown'}
@ -145,7 +144,7 @@ export const MetricsAlertDropdown = () => {
              id="xpack.infra.alerting.alertsButton"
              defaultMessage="Alerts and rules"
            />
-          </EuiButtonEmpty>
+          </EuiHeaderLink>
        }
        isOpen={popoverOpen}
        closePopover={closePopover}
--- a/x-pack/plugins/infra/public/alerting/log_threshold/components/alert_dropdown.tsx
+++ b/x-pack/plugins/infra/public/alerting/log_threshold/components/alert_dropdown.tsx
@ -7,7 +7,7 @@

 import React, { useState, useCallback, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiPopover, EuiButtonEmpty, EuiContextMenuItem, EuiContextMenuPanel } from '@elastic/eui';
+import { EuiPopover, EuiContextMenuItem, EuiContextMenuPanel, EuiHeaderLink } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { AlertFlyout } from './alert_flyout';
 import { useLinkProps } from '../../../hooks/use_link_props';
@ -83,8 +83,7 @@ export const AlertDropdown = () => {
      <EuiPopover
        panelPaddingSize="none"
        button={
-          <EuiButtonEmpty
-            size="xs"
+          <EuiHeaderLink
            color="text"
            iconSide={'right'}
            iconType={'arrowDown'}
@ -94,7 +93,7 @@ export const AlertDropdown = () => {
              id="xpack.infra.alerting.logs.alertsButton"
              defaultMessage="Alerts and rules"
            />
-          </EuiButtonEmpty>
+          </EuiHeaderLink>
        }
        isOpen={popoverOpen}
        closePopover={closePopover}
--- a/x-pack/plugins/infra/public/pages/logs/page_content.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/page_content.tsx
@ -5,7 +5,7 @@
 * 2.0.
 */

-import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
+import { EuiHeaderLinks, EuiHeaderLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useContext } from 'react';
 import { Route, Switch } from 'react-router-dom';
@ -78,28 +78,19 @@ export const LogsPageContent: React.FunctionComponent = () => {

      {setHeaderActionMenu && (
        <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu}>
-          <EuiFlexGroup gutterSize={'xs'} alignItems={'center'} responsive={false}>
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty size={'xs'} color={'text'} {...settingsLinkProps}>
-                {settingsTabTitle}
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <AlertDropdown />
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                href={kibana.services?.application?.getUrlForApp(
-                  '/home#/tutorial_directory/logging'
-                )}
-                size="s"
-                color="primary"
-                iconType="indexOpen"
-              >
-                {ADD_DATA_LABEL}
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          </EuiFlexGroup>
+          <EuiHeaderLinks gutterSize="xs">
+            <EuiHeaderLink color={'text'} {...settingsLinkProps}>
+              {settingsTabTitle}
+            </EuiHeaderLink>
+            <AlertDropdown />
+            <EuiHeaderLink
+              href={kibana.services?.application?.getUrlForApp('/home#/tutorial_directory/logging')}
+              color="primary"
+              iconType="indexOpen"
+            >
+              {ADD_DATA_LABEL}
+            </EuiHeaderLink>
+          </EuiHeaderLinks>
        </HeaderMenuPortal>
      )}

--- a/x-pack/plugins/infra/public/pages/metrics/index.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/index.tsx
@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n';
 import React, { useContext } from 'react';
 import { Route, RouteComponentProps, Switch } from 'react-router-dom';

-import { EuiErrorBoundary, EuiFlexItem, EuiFlexGroup, EuiButtonEmpty } from '@elastic/eui';
+import { EuiErrorBoundary, EuiHeaderLinks, EuiHeaderLink } from '@elastic/eui';
 import { IIndexPattern } from 'src/plugins/data/common';
 import { MetricsSourceConfigurationProperties } from '../../../common/metrics_sources';
 import { DocumentTitle } from '../../components/document_title';
@ -86,31 +86,22 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {

                  {setHeaderActionMenu && (
                    <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu}>
-                      <EuiFlexGroup alignItems="center" gutterSize={'xs'} responsive={false}>
-                        <EuiFlexItem grow={false}>
-                          <EuiButtonEmpty size={'xs'} color={'text'} {...settingsLinkProps}>
-                            {settingsTabTitle}
-                          </EuiButtonEmpty>
-                        </EuiFlexItem>
-                        <EuiFlexItem grow={false}>
-                          <Route path={'/inventory'} component={AnomalyDetectionFlyout} />
-                        </EuiFlexItem>
-                        <EuiFlexItem grow={false}>
-                          <MetricsAlertDropdown />
-                        </EuiFlexItem>
-                        <EuiFlexItem grow={false}>
-                          <EuiButtonEmpty
-                            href={kibana.services?.application?.getUrlForApp(
-                              '/home#/tutorial_directory/metrics'
-                            )}
-                            size="s"
-                            color="primary"
-                            iconType="indexOpen"
-                          >
-                            {ADD_DATA_LABEL}
-                          </EuiButtonEmpty>
-                        </EuiFlexItem>
-                      </EuiFlexGroup>
+                      <EuiHeaderLinks gutterSize="xs">
+                        <EuiHeaderLink color={'text'} {...settingsLinkProps}>
+                          {settingsTabTitle}
+                        </EuiHeaderLink>
+                        <Route path={'/inventory'} component={AnomalyDetectionFlyout} />
+                        <MetricsAlertDropdown />
+                        <EuiHeaderLink
+                          href={kibana.services?.application?.getUrlForApp(
+                            '/home#/tutorial_directory/metrics'
+                          )}
+                          color="primary"
+                          iconType="indexOpen"
+                        >
+                          {ADD_DATA_LABEL}
+                        </EuiHeaderLink>
+                      </EuiHeaderLinks>
                    </HeaderMenuPortal>
                  )}
                  <Switch>
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/anomaly_detection_flyout.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/anomaly_detection_flyout.tsx
@ -6,7 +6,7 @@
 */

 import React, { useState, useCallback } from 'react';
-import { EuiButtonEmpty, EuiFlyout } from '@elastic/eui';
+import { EuiHeaderLink, EuiFlyout } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { FlyoutHome } from './flyout_home';
 import { JobSetupScreen } from './job_setup_screen';
@ -50,8 +50,7 @@ export const AnomalyDetectionFlyout = () => {

  return (
    <>
-      <EuiButtonEmpty
-        size="xs"
+      <EuiHeaderLink
        color="text"
        iconSide={'left'}
        iconType={'inspect'}
@ -62,7 +61,7 @@ export const AnomalyDetectionFlyout = () => {
          id="xpack.infra.ml.anomalyDetectionButton"
          defaultMessage="Anomaly detection"
        />
-      </EuiButtonEmpty>
+      </EuiHeaderLink>
      {showFlyout && (
        <MetricHostsModuleProvider
          indexPattern={source?.configuration.metricAlias ?? ''}
--- a/x-pack/plugins/spaces/public/nav_control/nav_control_popover.tsx
+++ b/x-pack/plugins/spaces/public/nav_control/nav_control_popover.tsx
@ -140,7 +140,7 @@ export class NavControlPopover extends Component<Props, State> {
    }

    return this.getButton(
-      <Suspense fallback={<EuiLoadingSpinner />}>
+      <Suspense fallback={<EuiLoadingSpinner size="m" />}>
        <LazySpaceAvatar space={activeSpace} size={'s'} />
      </Suspense>,
      (activeSpace as Space).name
--- a/x-pack/plugins/uptime/public/components/common/header/action_menu_content.tsx
+++ b/x-pack/plugins/uptime/public/components/common/header/action_menu_content.tsx
@ -6,7 +6,7 @@
 */

 import React from 'react';
-import { EuiButtonEmpty, EuiHeaderLinks, EuiHeaderSectionItem, EuiToolTip } from '@elastic/eui';
+import { EuiHeaderLinks, EuiToolTip, EuiHeaderLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { useHistory } from 'react-router-dom';
@ -51,53 +51,45 @@ export function ActionMenuContent(): React.ReactElement {

  return (
    <EuiHeaderLinks gutterSize="xs">
-      <EuiHeaderSectionItem>
-        <EuiButtonEmpty
-          size="xs"
-          aria-label={i18n.translate('xpack.uptime.page_header.settingsLink.label', {
-            defaultMessage: 'Navigate to the Uptime settings page',
+      <EuiHeaderLink
+        aria-label={i18n.translate('xpack.uptime.page_header.settingsLink.label', {
+          defaultMessage: 'Navigate to the Uptime settings page',
+        })}
+        color="text"
+        data-test-subj="settings-page-link"
+        href={history.createHref({
+          pathname: SETTINGS_ROUTE,
+          search: stringifyUrlParams(params, true),
+        })}
+      >
+        <FormattedMessage id="xpack.uptime.page_header.settingsLink" defaultMessage="Settings" />
+      </EuiHeaderLink>
+
+      <ToggleAlertFlyoutButton />
+
+      <EuiToolTip position="top" content={<p>{ANALYZE_MESSAGE}</p>}>
+        <EuiHeaderLink
+          aria-label={i18n.translate('xpack.uptime.page_header.analyzeData.label', {
+            defaultMessage: 'Navigate to the "Analyze Data" view to visualize Synthetics/User data',
          })}
+          href={syntheticExploratoryViewLink}
          color="text"
-          data-test-subj="settings-page-link"
-          href={history.createHref({
-            pathname: SETTINGS_ROUTE,
-            search: stringifyUrlParams(params, true),
-          })}
+          iconType="visBarVerticalStacked"
        >
-          <FormattedMessage id="xpack.uptime.page_header.settingsLink" defaultMessage="Settings" />
-        </EuiButtonEmpty>
-      </EuiHeaderSectionItem>
-      <EuiHeaderSectionItem>
-        <ToggleAlertFlyoutButton />
-      </EuiHeaderSectionItem>
-      <EuiHeaderSectionItem>
-        <EuiToolTip position="top" content={<p>{ANALYZE_MESSAGE}</p>}>
-          <EuiButtonEmpty
-            size="xs"
-            aria-label={i18n.translate('xpack.uptime.page_header.analyzeData.label', {
-              defaultMessage:
-                'Navigate to the "Analyze Data" view to visualize Synthetics/User data',
-            })}
-            href={syntheticExploratoryViewLink}
-            color="text"
-            iconType="visBarVerticalStacked"
-          >
-            {ANALYZE_DATA}
-          </EuiButtonEmpty>
-        </EuiToolTip>
-      </EuiHeaderSectionItem>
-      <EuiHeaderSectionItem>
-        <EuiButtonEmpty
-          aria-label={i18n.translate('xpack.uptime.page_header.addDataLink.label', {
-            defaultMessage: 'Navigate to a tutorial about adding Uptime data',
-          })}
-          href={kibana.services?.application?.getUrlForApp('/home#/tutorial/uptimeMonitors')}
-          color="primary"
-          iconType="indexOpen"
-        >
-          {ADD_DATA_LABEL}
-        </EuiButtonEmpty>
-      </EuiHeaderSectionItem>
+          {ANALYZE_DATA}
+        </EuiHeaderLink>
+      </EuiToolTip>
+
+      <EuiHeaderLink
+        aria-label={i18n.translate('xpack.uptime.page_header.addDataLink.label', {
+          defaultMessage: 'Navigate to a tutorial about adding Uptime data',
+        })}
+        href={kibana.services?.application?.getUrlForApp('/home#/tutorial/uptimeMonitors')}
+        color="primary"
+        iconType="indexOpen"
+      >
+        {ADD_DATA_LABEL}
+      </EuiHeaderLink>
    </EuiHeaderLinks>
  );
 }
--- a/x-pack/plugins/uptime/public/components/overview/alerts/toggle_alert_flyout_button.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/alerts/toggle_alert_flyout_button.tsx
@ -6,7 +6,7 @@
 */

 import {
-  EuiButtonEmpty,
+  EuiHeaderLink,
  EuiContextMenu,
  EuiContextMenuPanelDescriptor,
  EuiContextMenuPanelItemDescriptor,
@ -123,8 +123,7 @@ export const ToggleAlertFlyoutButtonComponent: React.FC<Props> = ({
  return (
    <EuiPopover
      button={
-        <EuiButtonEmpty
-          size="xs"
+        <EuiHeaderLink
          color="text"
          aria-label={ToggleFlyoutTranslations.toggleButtonAriaLabel}
          data-test-subj="xpack.uptime.alertsPopover.toggleButton"
@ -136,7 +135,7 @@ export const ToggleAlertFlyoutButtonComponent: React.FC<Props> = ({
            id="xpack.uptime.alerts.toggleAlertFlyoutButtonText"
            defaultMessage="Alerts and rules"
          />
-        </EuiButtonEmpty>
+        </EuiHeaderLink>
      }
      closePopover={() => setIsOpen(false)}
      isOpen={isOpen}
--- a/x-pack/plugins/uptime/public/components/overview/synthetics_callout.test.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/synthetics_callout.test.tsx
@ -67,9 +67,6 @@ describe('SyntheticsCallout', () => {
            </EuiFlexItem>
          </EuiFlexGroup>
        </EuiCallOut>
-        <EuiSpacer
-          size="s"
-        />
      </Fragment>
    `);
  });
@ -128,9 +125,6 @@ describe('SyntheticsCallout', () => {
            </EuiFlexItem>
          </EuiFlexGroup>
        </EuiCallOut>
-        <EuiSpacer
-          size="s"
-        />
      </Fragment>
    `);
    wrapper.find('EuiButton').simulate('click');
--- a/x-pack/plugins/uptime/public/components/overview/synthetics_callout.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/synthetics_callout.tsx
@ -5,14 +5,7 @@
 * 2.0.
 */

-import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiCallOut,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-} from '@elastic/eui';
+import { EuiButton, EuiButtonEmpty, EuiCallOut, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@ -74,7 +67,6 @@ export const SyntheticsCallout = () => {
          </EuiFlexItem>
        </EuiFlexGroup>
      </EuiCallOut>
-      <EuiSpacer size="s" />
    </>
  );
 };