Refactor App Menu Components and Introduce Split Button with Notification

- Updated `tsconfig.json` to include ambient UI types.
- Refactored imports in `types.ts` and `app_menu_action_button.tsx` to use a local `SplitButtonWithNotification` component instead of the removed `@kbn/split-button`.
- Added a new `split_button_with_notification.tsx` component to handle split button functionality with notification indicators.
- Adjusted `app_menu_popover_action_buttons.tsx` to utilize the new split button component and added a `fullWidth` prop for layout flexibility.
- Removed the old `SplitButtonWithNotification` implementation from the private `kbn-split-button` package, including its tests and stories.

This refactor enhances the modularity and maintainability of the app menu components.

Author: paulinashakirova

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu_action_button.tsx

@@ -8,7 +8,6 @@
  */
 
 import React, { useRef, type MouseEvent } from 'react';
-import { SplitButtonWithNotification } from '@kbn/split-button';
 import { upperFirst } from 'lodash';
 import { EuiButton, EuiHideFor, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
@@ -19,13 +18,15 @@ import {
 } from '../constants';
 import { createReturnFocus, getIsSelectedColor, getTooltip, isDisabled } from '../utils';
 import { AppMenuPopover } from './app_menu_popover';
+import { SplitButtonWithNotification } from './split_button_with_notification';
 import type { AppMenuPrimaryActionItem, AppMenuSplitButtonProps } from '../types';
 
 type AppMenuActionButtonProps = AppMenuPrimaryActionItem & {
   isPopoverOpen: boolean;
   onPopoverToggle: () => void;
   onPopoverClose: () => void;
   onCloseOverflowButton?: () => void;
+  fullWidth?: boolean;
 };
 
 export const AppMenuActionButton = (props: AppMenuActionButtonProps) => {
@@ -51,6 +52,7 @@ export const AppMenuActionButton = (props: AppMenuActionButtonProps) => {
     onPopoverToggle,
     onPopoverClose,
     onCloseOverflowButton,
+    fullWidth,
   } = props;
 
   const itemText = upperFirst(label);
@@ -109,6 +111,7 @@ export const AppMenuActionButton = (props: AppMenuActionButtonProps) => {
     size: 's' as const,
     iconSize: 'm' as const,
     'aria-haspopup': (hasSplitItems ? 'menu' : undefined) as 'menu' | undefined,
+    fullWidth,
   };
 
   // Target the split part of the button for popover behavior.

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu_popover_action_buttons.tsx

@@ -47,12 +47,12 @@ export const AppMenuPopoverActionButtons = ({
       direction="column"
       justifyContent="center"
       gutterSize="m"
-      alignItems="center"
+      alignItems="stretch"
       css={containerCss}
       data-test-subj="app-menu-popover-action-buttons-container"
     >
       {primaryActionItem && (
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem>
           <AppMenuActionButton
             {...primaryActionItem}
             run={(params) => {
@@ -65,6 +65,7 @@ export const AppMenuPopoverActionButtons = ({
             }}
             onPopoverClose={handleOnPopoverClose}
             onCloseOverflowButton={onCloseOverflowButton}
+            fullWidth
           />
         </EuiFlexItem>
       )}

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/split_button_with_notification.test.tsx

@@ -0,0 +1,92 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SplitButtonWithNotification } from './split_button_with_notification';
+
+const setup = (props: Partial<React.ComponentProps<typeof SplitButtonWithNotification>> = {}) => {
+  const onMainButtonClick = jest.fn();
+  const onSecondaryButtonClick = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <SplitButtonWithNotification
+      data-test-subj="split-button"
+      onClick={onMainButtonClick}
+      onSecondaryButtonClick={onSecondaryButtonClick}
+      secondaryButtonIcon="chevronSingleDown"
+      secondaryButtonAriaLabel="More options"
+      {...props}
+    >
+      Save
+    </SplitButtonWithNotification>
+  );
+
+  return { onMainButtonClick, onSecondaryButtonClick, user };
+};
+
+describe('<SplitButtonWithNotification />', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the primary and secondary buttons', () => {
+    setup();
+    expect(screen.getByText('Save')).toBeInTheDocument();
+    expect(screen.getByLabelText('More options')).toBeInTheDocument();
+  });
+
+  it('should call onClick when the primary button is clicked', async () => {
+    const { onMainButtonClick, user } = setup();
+    await user.click(screen.getByText('Save'));
+    expect(onMainButtonClick).toHaveBeenCalledTimes(1);
+    expect(onMainButtonClick).toHaveBeenCalledWith(expect.objectContaining({ type: 'click' }));
+  });
+
+  it('should call onSecondaryButtonClick when the secondary button is clicked', async () => {
+    const { onSecondaryButtonClick, user } = setup();
+    await user.click(screen.getByLabelText('More options'));
+    expect(onSecondaryButtonClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not show the notification indicator by default', () => {
+    setup();
+    expect(screen.queryByTestId('split-button-notification-indicator')).not.toBeInTheDocument();
+  });
+
+  it('should show the notification indicator when showNotificationIndicator is true', () => {
+    setup({ showNotificationIndicator: true });
+    expect(screen.getByTestId('split-button-notification-indicator')).toBeVisible();
+  });
+
+  it('should not trigger onClick via the indicator when disabled', async () => {
+    const onMainButtonClick = jest.fn();
+    // bypass pointer-events: none on the outer wrapper — only the inner icon is interactive
+    const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+    render(
+      <SplitButtonWithNotification
+        onClick={onMainButtonClick}
+        onSecondaryButtonClick={jest.fn()}
+        secondaryButtonIcon="chevronSingleDown"
+        secondaryButtonAriaLabel="More options"
+        showNotificationIndicator={true}
+        isDisabled={true}
+      >
+        Save
+      </SplitButtonWithNotification>
+    );
+
+    const indicator = screen.getByTestId('split-button-notification-indicator');
+    await user.click(indicator);
+    expect(onMainButtonClick).not.toHaveBeenCalled();
+  });
+});

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/split_button_with_notification.tsx

@@ -0,0 +1,191 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { type MouseEventHandler } from 'react';
+import {
+  EuiSplitButton,
+  EuiIconTip,
+  euiButtonSizeMap,
+  useEuiTheme,
+  type EuiButtonProps,
+  type IconColor,
+  type IconSize,
+  type IconType,
+} from '@elastic/eui';
+import { css, type Interpolation, type Theme } from '@emotion/react';
+
+export interface SplitButtonWithNotificationProps {
+  children?: React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+  iconType?: IconType;
+  iconSize?: EuiButtonProps['iconSize'];
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  isMainButtonLoading?: boolean;
+  isMainButtonDisabled?: boolean;
+  isSelected?: boolean;
+  color?: EuiButtonProps['color'];
+  size?: EuiButtonProps['size'];
+  href?: string;
+  target?: string;
+  id?: string;
+  'data-test-subj'?: string;
+  css?: Interpolation<Theme>;
+  fullWidth?: boolean;
+  'aria-haspopup'?: 'menu';
+
+  secondaryButtonIcon: IconType;
+  secondaryButtonAriaLabel?: string;
+  secondaryButtonTitle?: string;
+  onSecondaryButtonClick?: React.MouseEventHandler<HTMLButtonElement>;
+  isSecondaryButtonLoading?: boolean;
+  isSecondaryButtonDisabled?: boolean;
+  /** @deprecated Ignored — EuiSplitButton manages fill state uniformly. Kept for type compatibility. */
+  secondaryButtonFill?: boolean;
+
+  showNotificationIndicator?: boolean;
+  notificationIndicatorColor?: IconColor;
+  notificationIndicatorSize?: IconSize;
+  /** @note Intentional typo kept for backwards compatibility */
+  notifcationIndicatorTooltipContent?: string;
+  notificationIndicatorPosition?: {
+    top?: number;
+    right?: number;
+    left?: number;
+    bottom?: number;
+  };
+  notificationIndicatorHasStroke?: boolean;
+}
+
+export const SplitButtonWithNotification = ({
+  children,
+  onClick,
+  iconType,
+  iconSize,
+  isDisabled = false,
+  isLoading = false,
+  isMainButtonLoading,
+  isMainButtonDisabled,
+  isSelected,
+  color = 'primary',
+  size = 'm',
+  href,
+  target,
+  id,
+  'data-test-subj': dataTestSubj,
+  css: cssProp,
+  fullWidth,
+  'aria-haspopup': ariaHasPopup,
+
+  secondaryButtonIcon,
+  secondaryButtonAriaLabel,
+  secondaryButtonTitle,
+  onSecondaryButtonClick,
+  isSecondaryButtonLoading,
+  isSecondaryButtonDisabled,
+
+  showNotificationIndicator = false,
+  notificationIndicatorColor = 'primary',
+  notificationIndicatorSize = 'l',
+  notifcationIndicatorTooltipContent,
+  notificationIndicatorPosition,
+  notificationIndicatorHasStroke = true,
+}: SplitButtonWithNotificationProps) => {
+  const euiThemeContext = useEuiTheme();
+  const { euiTheme } = euiThemeContext;
+
+  const buttonSizes = euiButtonSizeMap(euiThemeContext);
+  const secondaryButtonWidth = buttonSizes[size]?.height;
+
+  const disableIndicatorOnClick = isDisabled || isLoading;
+
+  return (
+    <div
+      css={{
+        position: 'relative' as const,
+        display: fullWidth ? 'block' : 'inline-block',
+      }}
+    >
+      <EuiSplitButton
+        data-test-subj={dataTestSubj}
+        color={color}
+        size={size}
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+        css={[
+          fullWidth &&
+            css`
+              display: flex;
+              width: 100%;
+            `,
+          cssProp,
+        ]}
+      >
+        <EuiSplitButton.ActionPrimary
+          id={id}
+          onClick={onClick}
+          iconType={iconType}
+          iconSize={iconSize}
+          isDisabled={isMainButtonDisabled}
+          isLoading={isMainButtonLoading}
+          isSelected={isSelected}
+          href={href}
+          target={target}
+          fullWidth={fullWidth}
+          aria-haspopup={ariaHasPopup}
+        >
+          {children}
+        </EuiSplitButton.ActionPrimary>
+        <EuiSplitButton.ActionSecondary
+          iconType={secondaryButtonIcon}
+          aria-label={secondaryButtonAriaLabel ?? ''}
+          title={secondaryButtonTitle}
+          onClick={onSecondaryButtonClick}
+          isDisabled={isSecondaryButtonDisabled}
+          isLoading={isSecondaryButtonLoading}
+        />
+      </EuiSplitButton>
+      {showNotificationIndicator && (
+        <div
+          data-test-subj="split-button-notification-indicator"
+          css={{
+            position: 'absolute' as const,
+            top: notificationIndicatorPosition?.top ?? -10,
+            right: notificationIndicatorPosition?.right ?? secondaryButtonWidth,
+            left: notificationIndicatorPosition?.left,
+            bottom: notificationIndicatorPosition?.bottom,
+            zIndex: euiTheme.levels.flyout,
+            pointerEvents: 'none',
+            ...(notificationIndicatorHasStroke && {
+              '& svg': {
+                stroke: 'white',
+                strokeWidth: '2px',
+                paintOrder: 'stroke fill',
+              },
+            }),
+          }}
+        >
+          <span css={{ pointerEvents: 'auto' }}>
+            <EuiIconTip
+              type="dot"
+              size={notificationIndicatorSize}
+              color={notificationIndicatorColor}
+              content={notifcationIndicatorTooltipContent}
+              iconProps={{
+                onClick: disableIndicatorOnClick
+                  ? undefined
+                  : (onClick as MouseEventHandler<SVGElement> | undefined),
+              }}
+            />
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/types.ts

@@ -8,7 +8,7 @@
  */
 
 import type { EuiHideForProps, IconType } from '@elastic/eui';
-import type { SplitButtonWithNotificationProps } from '@kbn/split-button';
+import type { SplitButtonWithNotificationProps } from './components/split_button_with_notification';
 
 /**
  * Parameters passed to AppMenuRunAction

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/tsconfig.json

@@ -6,6 +6,7 @@
       "jest",
       "node",
       "react",
+      "@kbn/ambient-ui-types",
     ]
   },
   "include": [
@@ -16,7 +17,6 @@
     "target/**/*"
   ],
   "kbn_references": [
-    "@kbn/split-button",
     "@kbn/i18n",
     "@kbn/router-utils"
   ]

src/platform/packages/private/kbn-split-button/index.ts

@@ -9,6 +9,3 @@
 
 export type { SplitButtonProps } from './src/split_button';
 export { SplitButton } from './src/split_button';
-
-export type { SplitButtonWithNotificationProps } from './src/split_button_with_notification';
-export { SplitButtonWithNotification } from './src/split_button_with_notification';