Merge pull request #749 from devtron-labs/fix/action-menu-click

refactor: ActionMenuItem - improve layout for consistent click on menu item

Author: AbhishekA1509

src/Shared/Components/ActionMenu/ActionMenuItem.tsx

@@ -7,6 +7,8 @@ import { Icon } from '../Icon'
 import { getTooltipProps } from '../SelectPicker/common'
 import { ActionMenuItemProps } from './types'
 
+const COMMON_ACTION_MENU_ITEM_CLASS = 'flex-grow-1 flex left top dc__gap-8 py-6 px-8'
+
 export const ActionMenuItem = <T extends string | number>({
     item,
     itemRef,
@@ -52,19 +54,25 @@ export const ActionMenuItem = <T extends string | number>({
 
     const renderContent = () => (
         <>
-            <Tooltip content={label} placement="right">
-                <span className={`m-0 fs-13 fw-4 lh-20 dc__truncate ${isNegativeType ? 'cr-5' : 'cn-9'}`}>{label}</span>
-            </Tooltip>
-            {description &&
-                (typeof description === 'string' ? (
-                    <span
-                        className={`m-0 fs-12 fw-4 lh-18 cn-7 ${!disableDescriptionEllipsis ? 'dc__ellipsis-right__2nd-line' : 'dc__word-break'}`}
-                    >
-                        {description}
+            {renderIcon(startIcon)}
+            <span>
+                <Tooltip content={label} placement="right">
+                    <span className={`m-0 fs-13 fw-4 lh-20 dc__truncate ${isNegativeType ? 'cr-5' : 'cn-9'}`}>
+                        {label}
                     </span>
-                ) : (
-                    description
-                ))}
+                </Tooltip>
+                {description &&
+                    (typeof description === 'string' ? (
+                        <span
+                            className={`m-0 fs-12 fw-4 lh-18 cn-7 ${!disableDescriptionEllipsis ? 'dc__ellipsis-right__2nd-line' : 'dc__word-break'}`}
+                        >
+                            {description}
+                        </span>
+                    ) : (
+                        description
+                    ))}
+            </span>
+            {renderIcon(endIcon)}
         </>
     )
 
@@ -74,7 +82,7 @@ export const ActionMenuItem = <T extends string | number>({
                 return (
                     <a
                         ref={itemRef as LegacyRef<HTMLAnchorElement>}
-                        className="flex-grow-1"
+                        className={COMMON_ACTION_MENU_ITEM_CLASS}
                         href={item.href}
                         target="_blank"
                         rel="noreferrer"
@@ -84,7 +92,11 @@ export const ActionMenuItem = <T extends string | number>({
                 )
             case 'link':
                 return (
-                    <Link ref={itemRef as Ref<HTMLAnchorElement>} className="flex-grow-1" to={item.to}>
+                    <Link
+                        ref={itemRef as Ref<HTMLAnchorElement>}
+                        className={COMMON_ACTION_MENU_ITEM_CLASS}
+                        to={item.to}
+                    >
                         {renderContent()}
                     </Link>
                 )
@@ -94,7 +106,7 @@ export const ActionMenuItem = <T extends string | number>({
                     <button
                         ref={itemRef as LegacyRef<HTMLButtonElement>}
                         type="button"
-                        className="dc__transparent p-0 flex-grow-1"
+                        className={`dc__transparent ${COMMON_ACTION_MENU_ITEM_CLASS}`}
                     >
                         {renderContent()}
                     </button>
@@ -111,13 +123,11 @@ export const ActionMenuItem = <T extends string | number>({
                 onMouseEnter={onMouseEnter}
                 tabIndex={-1}
                 // Intentionally added margin to the left and right to have the gap on the edges of the options
-                className={`action-menu__option br-4 flex left top dc__gap-8 mr-4 ml-4 py-6 px-8 ${isDisabled ? 'dc__disabled' : 'cursor'} ${isNegativeType ? 'dc__hover-r50' : 'dc__hover-n50'} ${isFocused ? `action-menu__option--focused${isNegativeType ? '-negative' : ''}` : ''}`}
+                className={`action-menu__option br-4 mr-4 ml-4 ${isDisabled ? 'dc__disabled' : 'cursor'} ${isNegativeType ? 'dc__hover-r50' : 'dc__hover-n50'} ${isFocused ? `action-menu__option--focused${isNegativeType ? '-negative' : ''}` : ''}`}
                 onClick={!isDisabled ? handleClick : undefined}
                 aria-disabled={isDisabled}
             >
-                {renderIcon(startIcon)}
                 {renderComponent()}
-                {renderIcon(endIcon)}
             </li>
         </Tooltip>
     )