diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 5f0c700404f6..6bf8f20c18f5 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; @@ -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, ) { @@ -755,14 +759,17 @@ function MenuItem( width={iconWidth} height={iconHeight} fill={ + // eslint-disable-next-line no-nested-ternary 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} /> @@ -936,11 +943,15 @@ function MenuItem( styles.pointerEventsAuto, StyleUtils.getMenuItemIconStyle(isCompact), disabled && !shouldUseDefaultCursorWhenDisabled && styles.cursorDisabled, + hasSubMenuItems && styles.opacitySemiTransparent, + hasSubMenuItems && styles.pl6, ]} > )} diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index a48b5325ad1b..e5b5af48e345 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'; @@ -290,8 +291,9 @@ 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} titleStyle={hasBackButtonText ? styles.createMenuHeaderText : undefined} shouldShowBasicTitle={hasBackButtonText} @@ -340,6 +342,7 @@ function BasePopoverMenu({ titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])} // Spread other props dynamically {...menuItemProps} + hasSubMenuItems={!!subMenuItems?.length} shouldShowLoadingSpinnerIcon={shouldShowLoadingSpinnerIcon} />