Merge pull request #51169 from jayeshmangwani/sectionMenuItemHeightTo…

…52px Updated the height of the LHN navigation items from 56px to 52px.
Expensify · Oct 24, 2024 · 26e1d2d · 26e1d2d
2 parents 8807b2b + 7a506fa
commit 26e1d2d
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 4 deletions.
diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
@@ -333,6 +333,9 @@ type MenuItemBaseProps = {
 
     /** Handles what to do when hiding the tooltip */
     onHideTooltip?: () => void;
+
+    /** Should use auto width for the icon container. */
+    shouldIconUseAutoWidthStyle?: boolean;
 };
 
 type MenuItemProps = (IconProps | AvatarProps | NoIcon) & MenuItemBaseProps;
@@ -432,6 +435,7 @@ function MenuItem(
         renderTooltipContent,
         shouldShowSelectedItemCheck = false,
         onHideTooltip,
+        shouldIconUseAutoWidthStyle = false,
     }: MenuItemProps,
     ref: PressableRef,
 ) {
@@ -623,10 +627,22 @@ function MenuItem(
                                                         />
                                                     )}
                                                     {!icon && shouldPutLeftPaddingWhenNoIcon && (
-                                                        <View style={[styles.popoverMenuIcon, iconStyles, StyleUtils.getAvatarWidthStyle(avatarSize)]} />
+                                                        <View
+                                                            style={[
+                                                                styles.popoverMenuIcon,
+                                                                iconStyles,
+                                                                shouldIconUseAutoWidthStyle ? styles.wAuto : StyleUtils.getAvatarWidthStyle(avatarSize),
+                                                            ]}
+                                                        />
                                                     )}
                                                     {icon && !Array.isArray(icon) && (
-                                                        <View style={[styles.popoverMenuIcon, iconStyles, StyleUtils.getAvatarWidthStyle(avatarSize)]}>
+                                                        <View
+                                                            style={[
+                                                                styles.popoverMenuIcon,
+                                                                iconStyles,
+                                                                shouldIconUseAutoWidthStyle ? styles.wAuto : StyleUtils.getAvatarWidthStyle(avatarSize),
+                                                            ]}
+                                                        >
                                                             {typeof icon !== 'string' &&
                                                                 iconType === CONST.ICON_TYPE_ICON &&
                                                                 (!shouldShowLoadingSpinnerIcon ? (

diff --git a/src/pages/Search/SavedSearchItemThreeDotMenu.tsx b/src/pages/Search/SavedSearchItemThreeDotMenu.tsx
@@ -34,6 +34,7 @@ function SavedSearchItemThreeDotMenu({menuItems, isDisabledItem}: SavedSearchIte
                     horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
                     vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
                 }}
+                iconStyles={styles.wAuto}
             />
         </View>
     );

diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx
@@ -139,6 +139,7 @@ function SearchTypeMenu({queryJSON, searchName}: SearchTypeMenuProps) {
             styles: [styles.alignItemsCenter],
             pendingAction: item.pendingAction,
             disabled: item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
+            shouldIconUseAutoWidthStyle: true,
         };
 
         if (!isNarrow) {
@@ -255,6 +256,7 @@ function SearchTypeMenu({queryJSON, searchName}: SearchTypeMenuProps) {
                             wrapperStyle={styles.sectionMenuItem}
                             focused={index === activeItemIndex}
                             onPress={onPress}
+                            shouldIconUseAutoWidthStyle
                         />
                     );
                 })}

diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx
@@ -332,6 +332,7 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
                                 }
                                 iconRight={item.iconRight}
                                 shouldShowRightIcon={item.shouldShowRightIcon}
+                                shouldIconUseAutoWidthStyle
                             />
                         );
                     })}

diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx
@@ -414,6 +414,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
                                     highlighted={enabledItem?.routeName === item.routeName}
                                     focused={!!(item.routeName && activeRoute?.startsWith(item.routeName))}
                                     badgeText={item.badgeText}
+                                    shouldIconUseAutoWidthStyle
                                 />
                             ))}
                         </View>

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -2902,8 +2902,9 @@ const styles = (theme: ThemeColors) =>
 
         sectionMenuItem: {
             borderRadius: 8,
-            paddingHorizontal: 8,
-            height: 56,
+            paddingHorizontal: 16,
+            paddingVertical: 8,
+            height: 52,
             alignItems: 'center',
         },
-Original file line number
+Diff line change
@@ Expand Up @@
                         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
                         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
                     }}
+                    iconStyles={styles.wAuto}
                 />
             </View>
         );
@@ Expand Down @@