[No QA] MenuItem decomposition - usages with avatars

src/components/DelegatorList.tsx

@@ -6,7 +6,9 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 import React from 'react';
+import {View} from 'react-native';
 
+import UserAvatar from './Avatar/UserAvatar';
 import MenuItem from './MenuItem';
 import Text from './Text';
 
@@ -27,25 +29,30 @@ function DelegatorList({delegators, message}: DelegatorListProps) {
     return (
         <>
             <Text style={[styles.mh5, styles.mb4]}>{message}</Text>
-            {delegators?.map((delegatorEmail) => {
-                const delegatorDetails = personalDetailsByLogin[delegatorEmail.toLowerCase()];
-                const formattedLogin = formatPhoneNumber(delegatorDetails?.login ?? '');
-                const displayLogin = formattedLogin || delegatorEmail;
-
-                return (
-                    <MenuItem
-                        key={delegatorEmail}
-                        title={delegatorDetails?.displayName ?? displayLogin}
-                        description={displayLogin}
-                        avatarID={delegatorDetails?.accountID ?? CONST.DEFAULT_NUMBER_ID}
-                        icon={delegatorDetails?.avatar ?? icons.FallbackAvatar}
-                        iconType={CONST.ICON_TYPE_AVATAR}
-                        numberOfLinesDescription={1}
-                        containerStyle={[styles.pr2, styles.mt1]}
-                        interactive={false}
-                    />
-                );
-            })}
+            <View style={[styles.mt1, styles.gap1]}>
+                {delegators?.map((delegatorEmail) => {
+                    const delegatorDetails = personalDetailsByLogin[delegatorEmail.toLowerCase()];
+                    const formattedLogin = formatPhoneNumber(delegatorDetails?.login ?? '');
+                    const displayLogin = formattedLogin || delegatorEmail;
+
+                    return (
+                        <MenuItem.Root key={delegatorEmail}>
+                            <MenuItem.Row>
+                                <MenuItem.Leading>
+                                    <UserAvatar
+                                        source={delegatorDetails?.avatar ?? icons.FallbackAvatar}
+                                        accountID={delegatorDetails?.accountID ?? CONST.DEFAULT_NUMBER_ID}
+                                    />
+                                </MenuItem.Leading>
+                                <MenuItem.Content>
+                                    <MenuItem.Title>{delegatorDetails?.displayName ?? displayLogin}</MenuItem.Title>
+                                    <MenuItem.Description numberOfLines={1}>{displayLogin}</MenuItem.Description>
+                                </MenuItem.Content>
+                            </MenuItem.Row>
+                        </MenuItem.Root>
+                    );
+                })}
+            </View>
         </>
     );
 }

src/components/MenuItem/index.ts

@@ -13,7 +13,9 @@
  *
  * <MenuItem.Root onPress={onNavigate}>
  *     <MenuItem.Row>
- *         <MenuItem.Icon src={icons.Gear} />
+ *         <MenuItem.Leading>
+ *             <MenuItem.Icon src={icons.Gear} />
+ *         </MenuItem.Leading>
  *         <MenuItem.Content>
  *             <MenuItem.Title>{translate('common.settings')}</MenuItem.Title>
  *         </MenuItem.Content>
@@ -25,24 +27,30 @@
  * ```
  */
 import MenuItemContent from './layout/MenuItemContent';
+import MenuItemLeading from './layout/MenuItemLeading';
 import MenuItemRoot from './layout/MenuItemRoot';
 import MenuItemRow from './layout/MenuItemRow';
 import MenuItemTrailing from './layout/MenuItemTrailing';
 import MenuItemIcon from './leaves/leading/MenuItemIcon';
-import MenuItemDescription from './leaves/text/MenuItemDescription';
+import MenuItemDescription from './leaves/text/description/MenuItemDescription';
+import MenuItemDescriptionPlaceholder from './leaves/text/description/MenuItemDescriptionPlaceholder';
 import MenuItemTitle from './leaves/text/MenuItemTitle';
 import MenuItemChevron from './leaves/trailing/MenuItemChevron';
+import MenuItemRightLabel from './leaves/trailing/MenuItemRightLabel';
 import LegacyMenuItem from './MenuItem';
 
 const MenuItem = Object.assign(LegacyMenuItem, {
     Root: MenuItemRoot,
     Row: MenuItemRow,
+    Leading: MenuItemLeading,
     Content: MenuItemContent,
     Trailing: MenuItemTrailing,
     Icon: MenuItemIcon,
     Title: MenuItemTitle,
     Description: MenuItemDescription,
+    DescriptionPlaceholder: MenuItemDescriptionPlaceholder,
     Chevron: MenuItemChevron,
+    RightLabel: MenuItemRightLabel,
 });
 
 export default MenuItem;

src/components/MenuItem/layout/MenuItemLeading.tsx

@@ -0,0 +1,17 @@
+import useThemeStyles from '@hooks/useThemeStyles';
+
+import type {PropsWithChildren} from 'react';
+
+import React from 'react';
+import {View} from 'react-native';
+
+type MenuItemLeadingProps = PropsWithChildren;
+
+/** The leading cell of a `MenuItem.Row`. Sets no width of its own — it centers and sizes to its content */
+function MenuItemLeading({children}: MenuItemLeadingProps) {
+    const styles = useThemeStyles();
+
+    return <View style={styles.menuItemLeading}>{children}</View>;
+}
+
+export default MenuItemLeading;

src/components/MenuItem/layout/MenuItemRoot.tsx

@@ -14,6 +14,7 @@ import variables from '@styles/variables';
 
 import CONST from '@src/CONST';
 import type WithSentryLabel from '@src/types/utils/SentryLabel';
+import type WithTestID from '@src/types/utils/TestID';
 
 import type {PropsWithChildren} from 'react';
 import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native';
@@ -22,7 +23,8 @@ import React, {useRef} from 'react';
 import {View} from 'react-native';
 
 type MenuItemRootProps = PropsWithChildren &
-    WithSentryLabel & {
+    WithSentryLabel &
+    WithTestID & {
         /** Function to fire when the row is pressed */
         onPress?: (event: GestureResponderEvent | KeyboardEvent) => void | Promise<void>;
 
@@ -37,7 +39,7 @@ type MenuItemRootProps = PropsWithChildren &
         accessibilityLabel?: string;
     };
 
-function MenuItemRoot({children, onPress, isDisabled = false, sentryLabel, accessibilityLabel}: MenuItemRootProps) {
+function MenuItemRoot({children, onPress, isDisabled = false, sentryLabel, testID, accessibilityLabel}: MenuItemRootProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const pressableRef = useRef<View>(null);
@@ -89,6 +91,7 @@ function MenuItemRoot({children, onPress, isDisabled = false, sentryLabel, acces
                         accessible
                         tabIndex={isInteractive ? 0 : -1}
                         sentryLabel={sentryLabel}
+                        testID={testID}
                     >
                         {({pressed}) => (
                             <MenuItemAccessibilityContext.Provider value={accessibilityLabel === undefined ? accessibilityActions : undefined}>
@@ -110,3 +113,4 @@ function MenuItemRoot({children, onPress, isDisabled = false, sentryLabel, acces
 }
 
 export default MenuItemRoot;
+export type {MenuItemRootProps};

src/components/MenuItem/leaves/leading/MenuItemIcon.tsx

@@ -10,14 +10,13 @@ import getButtonState from '@libs/getButtonState';
 import type IconAsset from '@src/types/utils/IconAsset';
 
 import React from 'react';
-import {View} from 'react-native';
 
 type MenuItemIconProps = {
     /** Icon to display */
     src: IconAsset;
 };
 
-/** The leading icon cell of a `MenuItem.Row` */
+/** An icon glyph, filled from the row's interaction state */
 function MenuItemIcon({src}: MenuItemIconProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -32,15 +31,14 @@ function MenuItemIcon({src}: MenuItemIconProps) {
     });
 
     return (
-        <View style={[styles.popoverMenuIcon, isCompactPopover && styles.wAuto]}>
-            <Icon
-                contentFit="cover"
-                hovered={isHovered}
-                pressed={isPressed}
-                src={src}
-                fill={iconFill}
-            />
-        </View>
+        <Icon
+            contentFit="cover"
+            hovered={isHovered}
+            pressed={isPressed}
+            src={src}
+            fill={iconFill}
+            additionalStyles={[styles.popoverMenuIcon, isCompactPopover && styles.wAuto]}
+        />
     );
 }
 

src/components/MenuItem/leaves/text/MenuItemTitle.tsx

@@ -8,19 +8,30 @@ import convertToLTR from '@libs/convertToLTR';
 
 import CONST from '@src/CONST';
 
+import type {ReactElement} from 'react';
+
 import React from 'react';
 
-type MenuItemTitleProps = {
-    /** Text to render as the title */
-    children: string | number;
-};
+type MenuItemTitleProps =
+    | {
+          /** Text to render as the title */
+          children: string | number;
+
+          accessibilityLabel?: never;
+      }
+    | {
+          /** Element to render in place of plain text, e.g. a `DisplayNames` with per-name tooltips */
+          children: ReactElement;
+
+          accessibilityLabel: string;
+      };
 
 /** The title block of a `MenuItem.Content`. Bold, single line */
-function MenuItemTitle({children}: MenuItemTitleProps) {
+function MenuItemTitle({children, accessibilityLabel}: MenuItemTitleProps) {
     const styles = useThemeStyles();
     const {isDisabled, isInteractive} = useMenuItemConfig();
 
-    useMenuItemAccessibilityLabel('title', String(children));
+    useMenuItemAccessibilityLabel('title', accessibilityLabel ?? String(children));
 
     return (
         <Text

src/components/MenuItem/leaves/text/MenuItemDescription.tsx → src/components/MenuItem/leaves/text/description/MenuItemDescription.tsx

@@ -5,21 +5,18 @@ import useThemeStyles from '@hooks/useThemeStyles';
 
 import React from 'react';
 
-type MenuItemDescriptionProps = {
-    /** Text to render as the description */
-    children: string | number;
-};
+import type MenuItemDescriptionProps from './types';
 
-/** The supporting text block of a `MenuItem.Content` */
-function MenuItemDescription({children}: MenuItemDescriptionProps) {
+/** The small supporting-label description of a `MenuItem.Content`, for a description that sits under a title */
+function MenuItemDescription({children, numberOfLines = 2}: MenuItemDescriptionProps) {
     const styles = useThemeStyles();
 
     useMenuItemAccessibilityLabel('description', String(children));
 
     return (
         <Text
             style={[styles.textLabelSupporting, styles.textLineHeightNormal, styles.breakWord]}
-            numberOfLines={2}
+            numberOfLines={numberOfLines}
         >
             {children}
         </Text>

src/components/MenuItem/leaves/text/description/MenuItemDescriptionPlaceholder.tsx

@@ -0,0 +1,30 @@
+import {useMenuItemAccessibilityLabel} from '@components/MenuItem/MenuItemAccessibilityContext';
+import Text from '@components/Text';
+
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+import variables from '@styles/variables';
+
+import React from 'react';
+
+import type MenuItemDescriptionProps from './types';
+
+/** The normal-size description of a `MenuItem.Content`, for a description-only row */
+function MenuItemDescriptionPlaceholder({children, numberOfLines = 2}: MenuItemDescriptionProps) {
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+
+    useMenuItemAccessibilityLabel('description', String(children));
+
+    return (
+        <Text
+            style={[styles.textLabelSupporting, StyleUtils.getFontSizeStyle(variables.fontSizeNormal), StyleUtils.getLineHeightStyle(variables.fontSizeNormalHeight), styles.breakWord]}
+            numberOfLines={numberOfLines}
+        >
+            {children}
+        </Text>
+    );
+}
+
+export default MenuItemDescriptionPlaceholder;

src/components/MenuItem/leaves/text/description/types.ts

@@ -0,0 +1,10 @@
+/** Props shared by every description leaf of a `MenuItem.Content` */
+type MenuItemDescriptionProps = {
+    /** Text to render as the description */
+    children: string | number;
+
+    /** Maximum number of lines to render before the text is truncated */
+    numberOfLines?: number;
+};
+
+export default MenuItemDescriptionProps;

src/components/MenuItem/leaves/trailing/MenuItemRightLabel.tsx

@@ -0,0 +1,19 @@
+import Text from '@components/Text';
+
+import useThemeStyles from '@hooks/useThemeStyles';
+
+import React from 'react';
+
+type MenuItemRightLabelProps = {
+    /** Text to render as the label */
+    children: string;
+};
+
+/** A short trailing hint of a `MenuItem.Row`, such as a `Required` marker */
+function MenuItemRightLabel({children}: MenuItemRightLabelProps) {
+    const styles = useThemeStyles();
+
+    return <Text style={styles.rightLabelMenuItem}>{children}</Text>;
+}
+
+export default MenuItemRightLabel;

src/components/MenuItem/presets/MenuItemAction.tsx

@@ -1,4 +1,5 @@
 import MenuItemContent from '@components/MenuItem/layout/MenuItemContent';
+import MenuItemLeading from '@components/MenuItem/layout/MenuItemLeading';
 import MenuItemRoot from '@components/MenuItem/layout/MenuItemRoot';
 import MenuItemRow from '@components/MenuItem/layout/MenuItemRow';
 import MenuItemIcon from '@components/MenuItem/leaves/leading/MenuItemIcon';
@@ -8,39 +9,44 @@ import {callFunctionIfActionIsAllowed} from '@userActions/Session';
 
 import type IconAsset from '@src/types/utils/IconAsset';
 import type WithSentryLabel from '@src/types/utils/SentryLabel';
+import type WithTestID from '@src/types/utils/TestID';
 
 import type {GestureResponderEvent} from 'react-native';
 
 import React from 'react';
 
-type MenuItemActionProps = WithSentryLabel & {
-    /** The title text of the row */
-    title: string;
+type MenuItemActionProps = WithSentryLabel &
+    WithTestID & {
+        /** The title text of the row */
+        title: string;
 
-    /** Leading icon to display */
-    icon: IconAsset;
+        /** Leading icon to display */
+        icon: IconAsset;
 
-    /** Function to fire when the row is pressed */
-    onPress: (event: GestureResponderEvent | KeyboardEvent) => void | Promise<void>;
+        /** Function to fire when the row is pressed */
+        onPress: (event: GestureResponderEvent | KeyboardEvent) => void | Promise<void>;
 
-    /** Whether the menu item is disabled */
-    isDisabled?: boolean;
-};
+        /** Whether the menu item is disabled */
+        isDisabled?: boolean;
+    };
 
 /**
  * The action MenuItem preset — a tappable row with a leading icon and a title that performs an
  * action in place (delete, select, add, etc.)
  */
-function MenuItemAction({title, icon, onPress, isDisabled = false, sentryLabel}: MenuItemActionProps) {
+function MenuItemAction({title, icon, onPress, isDisabled = false, sentryLabel, testID}: MenuItemActionProps) {
     return (
         <MenuItemRoot
             onPress={callFunctionIfActionIsAllowed(onPress)}
             isDisabled={isDisabled}
             sentryLabel={sentryLabel}
+            testID={testID}
             accessibilityLabel={title}
         >
             <MenuItemRow>
-                <MenuItemIcon src={icon} />
+                <MenuItemLeading>
+                    <MenuItemIcon src={icon} />
+                </MenuItemLeading>
                 <MenuItemContent>
                     <MenuItemTitle>{title}</MenuItemTitle>
                 </MenuItemContent>