Design changes

Author: kowalczyk-krzysztof

src/platform/plugins/shared/navigation/public/top_nav_menu/create_top_nav_menu.tsx

@@ -49,7 +49,12 @@ export function createTopNav(
                     ...(props.config as TopNavMenuPropsBeta<QT>['config'])!.items,
                     ...relevantConfig,
                   ],
-                  actionItem: (props.config as TopNavMenuPropsBeta<QT>['config'])!.actionItem,
+                  primaryActionItem: (props.config as TopNavMenuPropsBeta<QT>['config'])!
+                    .primaryActionItem,
+                  secondaryActionItem: (props.config as TopNavMenuPropsBeta<QT>['config'])!
+                    .secondaryActionItem,
+                  enableShowMoreButton: (props.config as TopNavMenuPropsBeta<QT>['config'])!
+                    .enableShowMoreButton,
                 }
               : { items: relevantConfig }
           }

src/platform/plugins/shared/navigation/public/top_nav_menu/top_nav_menu_data.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { EuiButtonProps, EuiBetaBadgeProps, IconType } from '@elastic/eui';
+import type { EuiButtonProps, EuiBetaBadgeProps, IconType, EuiButtonColor } from '@elastic/eui';
 import type { InjectedIntl } from '@kbn/i18n-react';
 import type { SplitButtonProps } from '@kbn/split-button';
 
@@ -52,7 +52,6 @@ export type TopNavMenuSplitButtonProps = Pick<
   | 'secondaryButtonAriaLabel'
   | 'secondaryButtonTitle'
   | 'iconType'
-  | 'iconOnly'
 > & {
   run: TopNavMenuAction;
 };
@@ -67,20 +66,21 @@ export interface TopNavMenuItemCommonBeta {
   isLoading?: boolean;
   target?: string;
   href?: string;
+  iconType?: IconType;
 }
 
-export interface TopNavMenuItemBeta extends TopNavMenuItemCommonBeta {
-  isExternalLink?: boolean;
-}
+export type TopNavMenuItemBeta = TopNavMenuItemCommonBeta;
 
 export interface TopNavMenuActionItemBeta extends TopNavMenuItemCommonBeta {
   splitButtonProps?: TopNavMenuSplitButtonProps;
-  iconType?: IconType;
+  color?: EuiButtonColor;
 }
 
 export interface TopNavMenuDataBeta {
   items: TopNavMenuItemBeta[];
-  actionItem?: TopNavMenuActionItemBeta;
+  enableShowMoreButton?: boolean;
+  secondaryActionItem?: TopNavMenuActionItemBeta;
+  primaryActionItem?: TopNavMenuActionItemBeta;
 }
 
 export interface RegisteredTopNavMenuDataBeta extends TopNavMenuItemBeta {

src/platform/plugins/shared/navigation/public/top_nav_menu_beta/top_nav_menu_action_button.tsx

@@ -20,16 +20,18 @@ interface TopNavMenuActionButtonProps extends TopNavMenuActionItemBeta {
 }
 
 export const TopNavMenuActionButton = ({
+  run,
+  htmlId,
   label,
+  testId,
+  iconType,
   disableButton,
-  isMobileMenu,
   href,
-  splitButtonProps,
-  htmlId,
-  testId,
-  isLoading,
   target,
-  run,
+  isLoading,
+  color,
+  splitButtonProps,
+  isMobileMenu,
   closePopover,
 }: TopNavMenuActionButtonProps) => {
   const itemText = upperFirst(label);
@@ -58,16 +60,18 @@ export const TopNavMenuActionButton = ({
   };
 
   const commonProps = {
-    size: 's' as const,
     onClick: href ? undefined : handleClick,
-    isDisabled: isDisabled(),
     id: htmlId,
     'data-test-subj': testId,
-    isLoading,
-    fill: false,
-    color: 'text' as const,
+    iconType,
+    isDisabled: isDisabled(),
     href,
     target: href ? target : undefined,
+    isLoading,
+    color,
+    size: 's' as const,
+    iconSize: 'm' as const,
+    fill: false,
   };
 
   if (splitButtonProps) {

src/platform/plugins/shared/navigation/public/top_nav_menu_beta/top_nav_menu_beta.stories.tsx

@@ -71,50 +71,45 @@ const createEditModeConfig = (): TopNavMenuDataBeta => {
   return {
     items: [
       {
-        id: 'settings',
-        label: 'Settings',
-        run: action('settings-clicked'),
-        testId: 'settingsButton',
-        disableButton: false,
-      },
-      {
-        id: 'cancel',
-        label: 'Exit edit',
-        run: action('switch-to-view-clicked'),
-        testId: 'switchToViewButton',
-        disableButton: false,
+        run: action('exit-edit-clicked'),
+        id: 'exitEdit',
+        label: 'exit edit',
+        testId: 'exitEditButton',
+        iconType: 'exit', // use 'logOut' when added to EUI
       },
       {
+        run: action('export-clicked'),
         id: 'export',
         label: 'export',
-        run: action('export-clicked'),
         testId: 'exportButton',
-        disableButton: false,
+        iconType: 'download',
       },
       {
+        run: action('share-clicked'),
         id: 'share',
         label: 'share',
-        run: action('share-clicked'),
         testId: 'shareButton',
-        disableButton: false,
-      },
-      {
-        id: 'add',
-        label: 'add',
-        run: action('share-clicked'),
-        testId: 'shareButton',
-        disableButton: false,
+        iconType: 'share',
       },
     ],
-    actionItem: {
-      id: 'save',
-      label: 'Save',
+    secondaryActionItem: {
       run: action('add-clicked'),
+      id: 'add',
+      label: 'add',
       testId: 'addButton',
+      iconType: 'plusInCircle',
+      color: 'success',
+    },
+    primaryActionItem: {
+      run: action('save-clicked'),
+      id: 'save',
+      label: 'save',
+      testId: 'saveButton',
+      iconType: 'save',
+      color: 'text',
       splitButtonProps: {
         run: action('add-split-clicked'),
-        secondaryButtonAriaLabel: 'Add options',
-        isMainButtonDisabled: true,
+        secondaryButtonAriaLabel: 'Save options',
       },
     },
   };
@@ -126,7 +121,7 @@ const unsavedChangesBadge: TopNavMenuBadgeProps = {
   color: '#F6E58D',
   toolTipProps: {
     content:
-      ' You have unsaved changes in this dashboard. To remove this label, save the dashboard.',
+      'You have unsaved changes in this dashboard. To remove this label, save the dashboard.',
     position: 'bottom',
   } as EuiToolTipProps,
 };

src/platform/plugins/shared/navigation/public/top_nav_menu_beta/top_nav_menu_item_beta.tsx

@@ -18,16 +18,16 @@ export interface TopNavMenuItemBetaProps extends TopNavMenuItemBetaInterface {
 }
 
 export const TopNavMenuItemBeta = ({
+  run,
+  htmlId,
   label,
+  testId,
+  iconType,
   disableButton,
-  isMobileMenu,
   href,
   target,
-  htmlId,
-  testId,
   isLoading,
-  isExternalLink,
-  run,
+  isMobileMenu,
   closePopover,
 }: TopNavMenuItemBetaProps) => {
   const itemText = upperFirst(label);
@@ -46,17 +46,17 @@ export const TopNavMenuItemBeta = ({
 
   return (
     <EuiHeaderLink
-      size="s"
       onClick={href ? undefined : handleClick}
-      isDisabled={isDisabled()}
       id={htmlId}
       data-test-subj={testId}
-      isLoading={isLoading}
-      iconSide="right"
+      iconType={iconType}
+      isDisabled={isDisabled()}
       href={href}
       target={href ? target : undefined}
-      iconSize="s"
-      iconType={isExternalLink ? 'popout' : undefined}
+      isLoading={isLoading}
+      size="s"
+      iconSide="left"
+      iconSize="m"
     >
       {itemText}
     </EuiHeaderLink>

src/platform/plugins/shared/navigation/public/top_nav_menu_beta/top_nav_menu_items_beta.tsx

@@ -52,9 +52,16 @@ export const TopNavMenuItemsBeta = ({
               />
             );
           })}
-          {config.actionItem && (
+          {config.secondaryActionItem && (
             <TopNavMenuActionButton
-              {...config.actionItem}
+              {...config.secondaryActionItem}
+              closePopover={closePopover}
+              isMobileMenu={isMobileMenu}
+            />
+          )}
+          {config.primaryActionItem && (
+            <TopNavMenuActionButton
+              {...config.primaryActionItem}
               closePopover={closePopover}
               isMobileMenu={isMobileMenu}
             />