From e45bdcdf6a5af8fac85a619b85f4fe0b39685a9c Mon Sep 17 00:00:00 2001 From: Samran Ahmed Date: Wed, 13 Aug 2025 20:05:23 +0500 Subject: [PATCH 1/5] fix: add styling to right icon in menu item --- src/components/MenuItem.tsx | 7 +++++++ src/components/PopoverMenu.tsx | 1 + 2 files changed, 8 insertions(+) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 5f0c700404f6..9aa8870aeab4 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -377,6 +377,9 @@ type MenuItemBaseProps = { /** Report ID for the avatar on the right */ rightIconReportID?: string; + + /** Whether the menu item contains nested submenu items. */ + hasSubMenuItems?: boolean; }; type MenuItemProps = (IconProps | AvatarProps | NoIcon) & MenuItemBaseProps; @@ -498,6 +501,7 @@ function MenuItem( shouldTeleportPortalToModalLayer, copyValue, plaidUrl, + hasSubMenuItems = false, }: MenuItemProps, ref: PressableRef, ) { @@ -936,11 +940,14 @@ function MenuItem( styles.pointerEventsAuto, StyleUtils.getMenuItemIconStyle(isCompact), disabled && !shouldUseDefaultCursorWhenDisabled && styles.cursorDisabled, + hasSubMenuItems && styles.opacitySemiTransparent, ]} > )} diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index a48b5325ad1b..7cc78b82e1e1 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -340,6 +340,7 @@ function BasePopoverMenu({ titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])} // Spread other props dynamically {...menuItemProps} + hasSubMenuItems={!!subMenuItems?.length} shouldShowLoadingSpinnerIcon={shouldShowLoadingSpinnerIcon} /> From 85469a5909af1e0775b50da6eaaa0f890f0a78c8 Mon Sep 17 00:00:00 2001 From: Samran Ahmed Date: Thu, 14 Aug 2025 10:06:51 +0500 Subject: [PATCH 2/5] add padding --- src/components/MenuItem.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 9aa8870aeab4..76ac17329bbf 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -941,6 +941,7 @@ function MenuItem( StyleUtils.getMenuItemIconStyle(isCompact), disabled && !shouldUseDefaultCursorWhenDisabled && styles.cursorDisabled, hasSubMenuItems && styles.opacitySemiTransparent, + hasSubMenuItems && styles.pl6, ]} > Date: Thu, 14 Aug 2025 19:36:39 +0500 Subject: [PATCH 3/5] fix styling on back button --- src/components/PopoverMenu.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 7cc78b82e1e1..312eecc53442 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -16,6 +16,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import {isSafari} from '@libs/Browser'; import getPlatform from '@libs/getPlatform'; +import variables from '@styles/variables'; import {close} from '@userActions/Modal'; import CONST from '@src/CONST'; import type {AnchorPosition} from '@src/styles'; @@ -292,6 +293,7 @@ function BasePopoverMenu({ icon={Expensicons.BackArrow} iconFill={theme.icon} style={hasBackButtonText ? styles.pv0 : undefined} + additionalIconStyles={[{width: variables.iconSizeSmall, height: variables.iconSizeSmall}, styles.opacitySemiTransparent, styles.mr1]} title={hasBackButtonText ? previouslySelectedItem?.backButtonText : previouslySelectedItem?.text} titleStyle={hasBackButtonText ? styles.createMenuHeaderText : undefined} shouldShowBasicTitle={hasBackButtonText} From 86226661b730dae9fff01888e6eaa6fb682f1f16 Mon Sep 17 00:00:00 2001 From: Samran Ahmed Date: Fri, 15 Aug 2025 01:04:19 +0500 Subject: [PATCH 4/5] add hover icon fill to back button item --- src/components/MenuItem.tsx | 16 +++++++++------- src/components/PopoverMenu.tsx | 2 +- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 76ac17329bbf..eefdf4454e53 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -104,7 +104,7 @@ type MenuItemBaseProps = { descriptionTextStyle?: StyleProp; /** The fill color to pass into the icon. */ - iconFill?: string; + iconFill?: string | ((isHovered: boolean) => string); /** Secondary icon to display on the left side of component, right of the icon */ secondaryIcon?: IconAsset; @@ -761,12 +761,14 @@ function MenuItem( fill={ displayInDefaultIconColor ? undefined - : (iconFill ?? - StyleUtils.getIconFillColor( - getButtonState(focused || isHovered, pressed, success, disabled, interactive), - true, - isPaneMenu, - )) + : typeof iconFill === 'function' + ? iconFill(isHovered) + : (iconFill ?? + StyleUtils.getIconFillColor( + getButtonState(focused || isHovered, pressed, success, disabled, interactive), + true, + isPaneMenu, + )) } additionalStyles={additionalIconStyles} /> diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 312eecc53442..e5b5af48e345 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -291,7 +291,7 @@ function BasePopoverMenu({ (isHovered ? theme.iconHovered : theme.icon)} style={hasBackButtonText ? styles.pv0 : undefined} additionalIconStyles={[{width: variables.iconSizeSmall, height: variables.iconSizeSmall}, styles.opacitySemiTransparent, styles.mr1]} title={hasBackButtonText ? previouslySelectedItem?.backButtonText : previouslySelectedItem?.text} From 1ce10fdb986877e8f20c47c3a3f810389dd5d261 Mon Sep 17 00:00:00 2001 From: Samran Ahmed Date: Fri, 15 Aug 2025 01:32:38 +0500 Subject: [PATCH 5/5] fix lint --- src/components/MenuItem.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index eefdf4454e53..6bf8f20c18f5 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -759,6 +759,7 @@ function MenuItem( width={iconWidth} height={iconHeight} fill={ + // eslint-disable-next-line no-nested-ternary displayInDefaultIconColor ? undefined : typeof iconFill === 'function'