Merge pull request #6 from cchaos/cchaos-search-header

Use EuiHeaderLink(s) for TopNavMenu
elastic · Sep 10, 2020 · 302eb79 · 302eb79
2 parents 5bd40cf + d4fe0c3
commit 302eb79
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 39 deletions.
diff --git a/src/plugins/navigation/public/top_nav_menu/_index.scss b/src/plugins/navigation/public/top_nav_menu/_index.scss
@@ -1,15 +1,4 @@
-.kbnTopNavMenu__wrapper {
-  z-index: 5;
-
-  .kbnTopNavMenu {
-    padding: $euiSizeS 0;
-
-    .kbnTopNavItemEmphasized {
-      padding: 0 $euiSizeS;
-    }
-  }
-
-  .kbnTopNavMenu-isFullScreen {
-    padding: 0;
-  }
+.kbnTopNavMenu > * > * {
+  // TEMP fix to adjust spacing between EuiHeaderList__list items
+  margin: 0 $euiSizeXS;
 }
diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
@@ -18,7 +18,7 @@
  */
 
 import React, { ReactElement } from 'react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiHeaderLinks } from '@elastic/eui';
 import classNames from 'classnames';
 
 import { MountPoint } from '../../../../core/public';
@@ -81,31 +81,16 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
   function renderItems(): ReactElement[] | null {
     if (!config || config.length === 0) return null;
     return config.map((menuItem: TopNavMenuData, i: number) => {
-      return (
-        <EuiFlexItem
-          grow={false}
-          key={`nav-menu-${i}`}
-          className={menuItem.emphasize ? 'kbnTopNavItemEmphasized' : ''}
-        >
-          <TopNavMenuItem {...menuItem} />
-        </EuiFlexItem>
-      );
+      return <TopNavMenuItem key={`nav-menu-${i}`} {...menuItem} />;
     });
   }
 
   function renderMenu(className: string): ReactElement | null {
     if (!config || config.length === 0) return null;
     return (
-      <EuiFlexGroup
-        data-test-subj="top-nav"
-        justifyContent="flexStart"
-        alignItems="center"
-        gutterSize="none"
-        className={className}
-        responsive={false}
-      >
+      <EuiHeaderLinks data-test-subj="top-nav" className={className}>
         {renderItems()}
-      </EuiFlexGroup>
+      </EuiHeaderLinks>
     );
   }
 

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
@@ -19,9 +19,7 @@
 
 import { upperFirst, isFunction } from 'lodash';
 import React, { MouseEvent } from 'react';
-import { EuiButtonEmpty, EuiToolTip } from '@elastic/eui';
-
-import { EuiButton } from '@elastic/eui';
+import { EuiToolTip, EuiButton, EuiHeaderLink } from '@elastic/eui';
 import { TopNavMenuData } from './top_nav_menu_data';
 
 export function TopNavMenuItem(props: TopNavMenuData) {
@@ -50,13 +48,13 @@ export function TopNavMenuItem(props: TopNavMenuData) {
   };
 
   const btn = props.emphasize ? (
-    <EuiButton {...commonButtonProps} size="s" fill>
+    <EuiButton size="s" fill {...commonButtonProps}>
       {upperFirst(props.label || props.id!)}
     </EuiButton>
   ) : (
-    <EuiButtonEmpty {...commonButtonProps} size="xs">
+    <EuiHeaderLink size="xs" isActive {...commonButtonProps}>
       {upperFirst(props.label || props.id!)}
-    </EuiButtonEmpty>
+    </EuiHeaderLink>
   );
 
   const tooltip = getTooltip();