[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`
elastic · Jul 12, 2021 · 42c743b · 42c743b
1 parent eae975e
commit 42c743b
Show file tree

Hide file tree

Showing 27 changed files with 134 additions and 194 deletions.
diff --git 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" />}

diff --git 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"

diff --git a/...ns/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx b/...ns/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;

diff --git 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>
   );

diff --git 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>
   );
 }
diff --git a/...k/plugins/apm/public/components/shared/apm_header_action_menu/alerting_popover_flyout.tsx b/...k/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"

diff --git a/...gins/apm/public/components/shared/apm_header_action_menu/anomaly_detection_setup_link.tsx b/...gins/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' }}

diff --git 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',
         })}

diff --git a/...ns/canvas/public/components/function_reference_generator/function_reference_generator.tsx b/...ns/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>
   );

diff --git 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}

diff --git a/...components/workpad_header/edit_menu/__stories__/__snapshots__/edit_menu.stories.storyshot b/...components/workpad_header/edit_menu/__stories__/__snapshots__/edit_menu.stories.storyshot
diff --git 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"

diff --git a/...mponents/workpad_header/share_menu/__stories__/__snapshots__/share_menu.stories.storyshot b/...mponents/workpad_header/share_menu/__stories__/__snapshots__/share_menu.stories.storyshot
diff --git 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"

diff --git a/...components/workpad_header/view_menu/__stories__/__snapshots__/view_menu.stories.storyshot b/...components/workpad_header/view_menu/__stories__/__snapshots__/view_menu.stories.storyshot
diff --git 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>
   );

diff --git a/...ication/file_data_visualizer/components/file_data_visualizer_view/file_error_callouts.tsx b/...ication/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"

diff --git 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}