From bfa31db205f5e896a96c1731f9c53b124065a281 Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Mon, 21 Oct 2024 15:50:07 +0530 Subject: [PATCH 01/10] changed sectionMenuItem height from 56px to 52px --- src/styles/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 71e8e0259bab..46e1501c5b4c 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -2892,7 +2892,7 @@ const styles = (theme: ThemeColors) => sectionMenuItem: { borderRadius: 8, paddingHorizontal: 8, - height: 56, + height: 52, alignItems: 'center', }, From 92954fb814ca557658660d993f6916b088fc658e Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Tue, 22 Oct 2024 15:04:52 +0530 Subject: [PATCH 02/10] removed default width(40) and used widthAuto for popoverMenuIcon --- src/components/MenuItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index f530e1781034..b6632ef018c6 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -626,7 +626,7 @@ function MenuItem( )} {icon && !Array.isArray(icon) && ( - + {typeof icon !== 'string' && iconType === CONST.ICON_TYPE_ICON && (!shouldShowLoadingSpinnerIcon ? ( From 34aa9cd206415d7446499ca40d090bba159cf30a Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Tue, 22 Oct 2024 15:08:37 +0530 Subject: [PATCH 03/10] increased sectionMenuItem horizontal padding from 8px to 16px --- src/styles/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 9e15bd450a87..2b39d6df9af8 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -2891,7 +2891,7 @@ const styles = (theme: ThemeColors) => sectionMenuItem: { borderRadius: 8, - paddingHorizontal: 8, + paddingHorizontal: 16, height: 52, alignItems: 'center', }, From 41d2deb42475dee536cff5d21765a3b056e16c72 Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Tue, 22 Oct 2024 15:09:34 +0530 Subject: [PATCH 04/10] increased popoverMenuItem vertical padding to 16px --- src/styles/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 2b39d6df9af8..12a6a310e86b 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1776,7 +1776,7 @@ const styles = (theme: ThemeColors) => flexDirection: 'row', borderRadius: 0, paddingHorizontal: 20, - paddingVertical: 12, + paddingVertical: 16, justifyContent: 'space-between', width: '100%', }, From e15fe53c9a2d30b59f4b99be97d0a96a1f878b8b Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Tue, 22 Oct 2024 17:55:11 +0530 Subject: [PATCH 05/10] added shouldUseAutoWidth prop for handling the default 40 width for the Icon container on MenuItem --- src/components/MenuItem.tsx | 8 ++++++-- src/pages/Search/SearchTypeMenu.tsx | 2 ++ src/pages/settings/InitialSettingsPage.tsx | 2 ++ src/pages/workspace/WorkspaceInitialPage.tsx | 2 ++ src/styles/index.ts | 2 +- 5 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index b6632ef018c6..9f2eb65178b9 100644 --- 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. */ + shouldUseAutoWidth?: boolean; }; type MenuItemProps = (IconProps | AvatarProps | NoIcon) & MenuItemBaseProps; @@ -432,6 +435,7 @@ function MenuItem( renderTooltipContent, shouldShowSelectedItemCheck = false, onHideTooltip, + shouldUseAutoWidth = false, }: MenuItemProps, ref: PressableRef, ) { @@ -623,10 +627,10 @@ function MenuItem( /> )} {!icon && shouldPutLeftPaddingWhenNoIcon && ( - + )} {icon && !Array.isArray(icon) && ( - + {typeof icon !== 'string' && iconType === CONST.ICON_TYPE_ICON && (!shouldShowLoadingSpinnerIcon ? ( diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx index 70e7c20fee13..ab06c1864532 100644 --- a/src/pages/Search/SearchTypeMenu.tsx +++ b/src/pages/Search/SearchTypeMenu.tsx @@ -254,6 +254,8 @@ function SearchTypeMenu({queryJSON, searchName}: SearchTypeMenuProps) { wrapperStyle={styles.sectionMenuItem} focused={index === activeItemIndex} onPress={onPress} + shouldUseAutoWidth={true} + style={styles.pv4} /> ); })} diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx index 9ffac3e49e41..41a81ff1ee1f 100755 --- a/src/pages/settings/InitialSettingsPage.tsx +++ b/src/pages/settings/InitialSettingsPage.tsx @@ -332,6 +332,8 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr } iconRight={item.iconRight} shouldShowRightIcon={item.shouldShowRightIcon} + shouldUseAutoWidth={true} + style={styles.pv4} /> ); })} diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx index 6cfc66466da4..7cf3113f626c 100644 --- a/src/pages/workspace/WorkspaceInitialPage.tsx +++ b/src/pages/workspace/WorkspaceInitialPage.tsx @@ -414,6 +414,8 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac highlighted={enabledItem?.routeName === item.routeName} focused={!!(item.routeName && activeRoute?.startsWith(item.routeName))} badgeText={item.badgeText} + shouldUseAutoWidth={true} + style={styles.pv4} /> ))} diff --git a/src/styles/index.ts b/src/styles/index.ts index 12a6a310e86b..2b39d6df9af8 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1776,7 +1776,7 @@ const styles = (theme: ThemeColors) => flexDirection: 'row', borderRadius: 0, paddingHorizontal: 20, - paddingVertical: 16, + paddingVertical: 12, justifyContent: 'space-between', width: '100%', }, From 78c15332d3223e39a0ce3582e42167af896caef5 Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Tue, 22 Oct 2024 17:57:50 +0530 Subject: [PATCH 06/10] prettier fix --- src/components/MenuItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 9f2eb65178b9..80b5cefbce88 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -333,7 +333,7 @@ type MenuItemBaseProps = { /** Handles what to do when hiding the tooltip */ onHideTooltip?: () => void; - + /** Should use auto width for the icon container. */ shouldUseAutoWidth?: boolean; }; From 7d877c285afb1cdcb77dfe38cf330833b88a4eb7 Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Tue, 22 Oct 2024 18:22:09 +0530 Subject: [PATCH 07/10] fixed lint --- src/pages/Search/SearchTypeMenu.tsx | 2 +- src/pages/settings/InitialSettingsPage.tsx | 16 ++++++++++++++-- src/pages/workspace/WorkspaceInitialPage.tsx | 2 +- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx index ab06c1864532..64082b0837f5 100644 --- a/src/pages/Search/SearchTypeMenu.tsx +++ b/src/pages/Search/SearchTypeMenu.tsx @@ -254,7 +254,7 @@ function SearchTypeMenu({queryJSON, searchName}: SearchTypeMenuProps) { wrapperStyle={styles.sectionMenuItem} focused={index === activeItemIndex} onPress={onPress} - shouldUseAutoWidth={true} + shouldUseAutoWidth style={styles.pv4} /> ); diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx index 41a81ff1ee1f..f6515ab2c10f 100755 --- a/src/pages/settings/InitialSettingsPage.tsx +++ b/src/pages/settings/InitialSettingsPage.tsx @@ -332,7 +332,7 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr } iconRight={item.iconRight} shouldShowRightIcon={item.shouldShowRightIcon} - shouldUseAutoWidth={true} + shouldUseAutoWidth style={styles.pv4} /> ); @@ -340,7 +340,19 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr ); }, - [styles.pb4, styles.mh3, styles.sectionTitle, styles.sectionMenuItem, translate, userWallet?.currentBalance, isExecuting, singleExecution, activeCentralPaneRoute, waitForNavigate], + [ + styles.pb4, + styles.mh3, + styles.pv4, + styles.sectionTitle, + styles.sectionMenuItem, + translate, + userWallet?.currentBalance, + isExecuting, + singleExecution, + activeCentralPaneRoute, + waitForNavigate, + ], ); const accountMenuItems = useMemo(() => getMenuItemsSection(accountMenuItemsData), [accountMenuItemsData, getMenuItemsSection]); diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx index 7cf3113f626c..4bca39903e89 100644 --- a/src/pages/workspace/WorkspaceInitialPage.tsx +++ b/src/pages/workspace/WorkspaceInitialPage.tsx @@ -414,7 +414,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac highlighted={enabledItem?.routeName === item.routeName} focused={!!(item.routeName && activeRoute?.startsWith(item.routeName))} badgeText={item.badgeText} - shouldUseAutoWidth={true} + shouldUseAutoWidth style={styles.pv4} /> ))} From ec4ad1058e0ae60a66db4d6a49fe448306588ca8 Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Wed, 23 Oct 2024 23:53:50 +0530 Subject: [PATCH 08/10] changed prop for default width to shouldIconUseAutoWidthStyle --- src/components/MenuItem.tsx | 8 ++++---- src/pages/Search/SearchTypeMenu.tsx | 2 +- src/pages/settings/InitialSettingsPage.tsx | 2 +- src/pages/workspace/WorkspaceInitialPage.tsx | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 80b5cefbce88..4f9cc9052011 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -335,7 +335,7 @@ type MenuItemBaseProps = { onHideTooltip?: () => void; /** Should use auto width for the icon container. */ - shouldUseAutoWidth?: boolean; + shouldIconUseAutoWidthStyle?: boolean; }; type MenuItemProps = (IconProps | AvatarProps | NoIcon) & MenuItemBaseProps; @@ -435,7 +435,7 @@ function MenuItem( renderTooltipContent, shouldShowSelectedItemCheck = false, onHideTooltip, - shouldUseAutoWidth = false, + shouldIconUseAutoWidthStyle = false, }: MenuItemProps, ref: PressableRef, ) { @@ -627,10 +627,10 @@ function MenuItem( /> )} {!icon && shouldPutLeftPaddingWhenNoIcon && ( - + )} {icon && !Array.isArray(icon) && ( - + {typeof icon !== 'string' && iconType === CONST.ICON_TYPE_ICON && (!shouldShowLoadingSpinnerIcon ? ( diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx index d3a7810be590..e68642c2124c 100644 --- a/src/pages/Search/SearchTypeMenu.tsx +++ b/src/pages/Search/SearchTypeMenu.tsx @@ -255,7 +255,7 @@ function SearchTypeMenu({queryJSON, searchName}: SearchTypeMenuProps) { wrapperStyle={styles.sectionMenuItem} focused={index === activeItemIndex} onPress={onPress} - shouldUseAutoWidth + shouldIconUseAutoWidthStyle style={styles.pv4} /> ); diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx index f6515ab2c10f..9dfbe87b706a 100755 --- a/src/pages/settings/InitialSettingsPage.tsx +++ b/src/pages/settings/InitialSettingsPage.tsx @@ -332,7 +332,7 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr } iconRight={item.iconRight} shouldShowRightIcon={item.shouldShowRightIcon} - shouldUseAutoWidth + shouldIconUseAutoWidthStyle style={styles.pv4} /> ); diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx index 4bca39903e89..a084c9743093 100644 --- a/src/pages/workspace/WorkspaceInitialPage.tsx +++ b/src/pages/workspace/WorkspaceInitialPage.tsx @@ -414,7 +414,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac highlighted={enabledItem?.routeName === item.routeName} focused={!!(item.routeName && activeRoute?.startsWith(item.routeName))} badgeText={item.badgeText} - shouldUseAutoWidth + shouldIconUseAutoWidthStyle style={styles.pv4} /> ))} From b2d14a13b2dac82be60c79b6959bda14741e01f1 Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Thu, 24 Oct 2024 00:24:56 +0530 Subject: [PATCH 09/10] changed paddingVertical to 8 for sectionMenuItem --- src/components/MenuItem.tsx | 16 ++++++++++++++-- src/pages/Search/SearchTypeMenu.tsx | 2 +- src/pages/settings/InitialSettingsPage.tsx | 15 +-------------- src/pages/workspace/WorkspaceInitialPage.tsx | 1 - src/styles/index.ts | 1 + 5 files changed, 17 insertions(+), 18 deletions(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 4f9cc9052011..526a090afb73 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -627,10 +627,22 @@ function MenuItem( /> )} {!icon && shouldPutLeftPaddingWhenNoIcon && ( - + )} {icon && !Array.isArray(icon) && ( - + {typeof icon !== 'string' && iconType === CONST.ICON_TYPE_ICON && (!shouldShowLoadingSpinnerIcon ? ( diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx index e68642c2124c..babc0fea14a5 100644 --- 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) { @@ -256,7 +257,6 @@ function SearchTypeMenu({queryJSON, searchName}: SearchTypeMenuProps) { focused={index === activeItemIndex} onPress={onPress} shouldIconUseAutoWidthStyle - style={styles.pv4} /> ); })} diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx index 9dfbe87b706a..d4455b54ffcb 100755 --- a/src/pages/settings/InitialSettingsPage.tsx +++ b/src/pages/settings/InitialSettingsPage.tsx @@ -333,26 +333,13 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr iconRight={item.iconRight} shouldShowRightIcon={item.shouldShowRightIcon} shouldIconUseAutoWidthStyle - style={styles.pv4} /> ); })} ); }, - [ - styles.pb4, - styles.mh3, - styles.pv4, - styles.sectionTitle, - styles.sectionMenuItem, - translate, - userWallet?.currentBalance, - isExecuting, - singleExecution, - activeCentralPaneRoute, - waitForNavigate, - ], + [styles.pb4, styles.mh3, styles.sectionTitle, styles.sectionMenuItem, translate, userWallet?.currentBalance, isExecuting, singleExecution, activeCentralPaneRoute, waitForNavigate], ); const accountMenuItems = useMemo(() => getMenuItemsSection(accountMenuItemsData), [accountMenuItemsData, getMenuItemsSection]); diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx index a084c9743093..b69cbc966761 100644 --- a/src/pages/workspace/WorkspaceInitialPage.tsx +++ b/src/pages/workspace/WorkspaceInitialPage.tsx @@ -415,7 +415,6 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac focused={!!(item.routeName && activeRoute?.startsWith(item.routeName))} badgeText={item.badgeText} shouldIconUseAutoWidthStyle - style={styles.pv4} /> ))} diff --git a/src/styles/index.ts b/src/styles/index.ts index 5201665b8171..1bd77a7974e5 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -2903,6 +2903,7 @@ const styles = (theme: ThemeColors) => sectionMenuItem: { borderRadius: 8, paddingHorizontal: 16, + paddingVertical: 8, height: 52, alignItems: 'center', }, From 7a506fa6782ce7b3d1149a9e4224709130f9cda0 Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Thu, 24 Oct 2024 23:30:57 +0530 Subject: [PATCH 10/10] added auto width to search three dot menu --- src/pages/Search/SavedSearchItemThreeDotMenu.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/Search/SavedSearchItemThreeDotMenu.tsx b/src/pages/Search/SavedSearchItemThreeDotMenu.tsx index bd7a94bc1840..50bfee7976e1 100644 --- 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} /> );