feat: add secondary button in menu item

src/components/Menu/Menu.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Stories } from '@storybook/addon-docs';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Menu, MenuItemType, MenuProps, MenuSize, MenuVariant } from './';
+import { Menu, MenuItemType, MenuSize, MenuVariant } from './';
 import { Dropdown } from '../Dropdown';
 import { DefaultButton } from '../Button';
 import { RadioGroup } from '../RadioButton';
@@ -59,6 +59,14 @@ const BasicOverlay = (args: any) => (
         text: 'Date',
         value: 'date 1',
         counter: '8',
+        secondaryButtonProps: {
+          iconProps: {
+            path: IconName.mdiTrashCan,
+          },
+          onClick: () => {
+            console.log('Delete clicked');
+          },
+        },
       },
       {
         text: 'Thumbs up',

src/components/Menu/MenuItem/MenuItem.types.ts

@@ -3,6 +3,7 @@ import { MenuSize, MenuVariant } from '../Menu.types';
 import { OcBaseProps } from '../../OcBase';
 import { IconProps } from '../../Icon';
 import { LinkProps } from '../../Link';
+import { ButtonProps } from '../../Button';
 
 export enum MenuItemType {
   button = 'button',
@@ -68,6 +69,10 @@ export interface MenuItemButtonProps
    * Display sub text of the menu item
    */
   subText?: string;
+  /**
+   * Secondary action button for the menu item
+   */
+  secondaryButtonProps?: Omit<ButtonProps, 'text' | 'shape'>;
 }
 
 export interface MenuItemLinkProps

src/components/Menu/MenuItem/MenuItemButton/MenuItemButton.tsx

@@ -3,6 +3,7 @@ import { MenuItemButtonProps } from '../MenuItem.types';
 import { MenuSize, MenuVariant } from '../../Menu.types';
 import { mergeClasses } from '../../../../shared/utilities';
 import { Icon } from '../../../Icon';
+import { ButtonShape, ButtonSize, NeutralButton } from '../../../Button';
 
 import styles from '../menuItem.module.scss';
 
@@ -19,6 +20,7 @@ export const MenuItemButton: FC<MenuItemButtonProps> = ({
   active,
   counter,
   type,
+  secondaryButtonProps,
   ...rest
 }) => {
   const menuItemClasses: string = mergeClasses([
@@ -44,7 +46,35 @@ export const MenuItemButton: FC<MenuItemButtonProps> = ({
     },
   ]);
 
-  return (
+  return secondaryButtonProps ? (
+    <li role="menuitem" tabIndex={tabIndex} className={menuItemClasses}>
+      <span className={styles.menuSecondaryWrapper}>
+        <button
+          className={styles.menuInnerButton}
+          {...rest}
+          onClick={() => onClick?.(value)}
+        >
+          {iconProps && <Icon {...iconProps} />}
+          <span className={styles.menuItemWrapper}>
+            <span className={styles.itemText}>
+              <span className={styles.label}>{text}</span>
+            </span>
+          </span>
+        </button>
+        <span className={styles.menuInnerButton}>
+          {counter && <span>{counter}</span>}
+          {secondaryButtonProps && (
+            <NeutralButton
+              size={ButtonSize.Small}
+              shape={ButtonShape.Round}
+              {...secondaryButtonProps}
+            />
+          )}
+        </span>
+      </span>
+      {subText && <span className={itemSubTextClasses}>{subText}</span>}
+    </li>
+  ) : (
     <button
       onClick={() => onClick?.(value)}
       tabIndex={tabIndex}

src/components/Menu/MenuItem/menuItem.module.scss

@@ -24,6 +24,18 @@
     flex: 1;
   }
 
+  .menu-secondary-wrapper {
+    display: flex;
+    justify-content: space-between;
+    flex: 1;
+
+    .menu-inner-button {
+      align-items: center;
+      display: flex;
+      gap: $space-xs;
+    }
+  }
+
   .item-text {
     display: flex;
     align-items: center;
@@ -120,6 +132,12 @@
     align-content: flex-start;
   }
 
+  .action-wrapper {
+    align-items: center;
+    display: flex;
+    gap: $space-xxs;
+  }
+
   &:first-child {
     margin-top: $space-xs;
   }