Skip to content

Follow up fixes for compact menu rows: fix bank account rows, Copilot rows, and QAB row #89156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Julesssss merged 6 commits into from
Apr 29, 2026
Merged

Follow up fixes for compact menu rows: fix bank account rows, Copilot rows, and QAB row #89156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2eea1e1
Add shouldIgnoreCompactStyle prop to exempt bank account rows from co…
shawnborton Apr 29, 2026
3b30fd1
Add shouldIgnoreCompactStyle to SettlementButton bank account rows
shawnborton Apr 29, 2026
5f247d4
Exempt account switcher delegate rows from compact menu styling
shawnborton Apr 29, 2026
a1518cd
Add minHeight to compact menu rows and reduce description margin in c…
shawnborton Apr 29, 2026
5feb64a
Fix nested ternary lint error in MenuItem description margin
shawnborton Apr 29, 2026
0d418e5
Fix TS error by widening descriptionVerticalMargin type to ViewStyle
shawnborton Apr 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/AccountSwitcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,7 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) {
icon: personalDetails?.avatar ?? '',
iconType: CONST.ICON_TYPE_AVATAR,
outerWrapperStyle: shouldUseNarrowLayout ? {} : styles.accountSwitcherPopover,
shouldIgnoreCompactStyle: true,
numberOfLinesDescription: 1,
errorText: error ?? '',
shouldShowRedDotIndicator: !!error,
Expand Down
3 changes: 3 additions & 0 deletions src/components/ButtonWithDropdownMenu/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,9 @@ type DropdownOption<TValueType> = WithSentryLabel & {
shouldShowLoadingSpinnerIcon?: boolean;
/** The type of brick road indicator to show */
brickRoadIndicator?: ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS>;

/** Whether to ignore compact popover menu styling for this item */
shouldIgnoreCompactStyle?: boolean;
};

type ButtonWithDropdownMenuProps<TValueType> = WithSentryLabel & {
Expand Down
13 changes: 11 additions & 2 deletions src/components/MenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -458,6 +458,9 @@ type MenuItemBaseProps = ForwardedFSClassProps &

/** Additional styles for the right icon wrapper */
rightIconWrapperStyle?: StyleProp<ViewStyle>;

/** Whether to ignore compact popover menu styling for this item */
shouldIgnoreCompactStyle?: boolean;
};

type MenuItemProps = (IconProps | AvatarProps | NoIcon) & MenuItemBaseProps;
Expand Down Expand Up @@ -606,6 +609,7 @@ function MenuItem({
tabIndex = 0,
rightIconWrapperStyle,
titleAccessibilityRole,
shouldIgnoreCompactStyle = false,
}: MenuItemProps) {
const icons = useMemoizedLazyExpensifyIcons(['ArrowRight', 'FallbackAvatar', 'DotIndicator', 'Checkmark', 'NewWindow']);
const {translate} = useLocalize();
Expand All @@ -620,11 +624,16 @@ function MenuItem({
const popoverAnchor = useRef<View>(null);
const deviceHasHoverSupport = hasHoverSupport();
const isCompactMenu = useIsCompactMenu();
const isCompactPopoverItem = isCompactMenu && !isSmallScreenWidth;
const isCompactPopoverItem = isCompactMenu && !isSmallScreenWidth && !shouldIgnoreCompactStyle;
const compactIconStyle = isCompactPopoverItem && iconType === CONST.ICON_TYPE_ICON && {width: variables.iconSizeNormal};
const isCompact = viewMode === CONST.OPTION_MODE.COMPACT;
const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedbackDeleted) : false;
const descriptionVerticalMargin = shouldShowDescriptionOnTop ? styles.mb1 : styles.mt1;
let descriptionVerticalMargin: ViewStyle = styles.mt1;
if (shouldShowDescriptionOnTop) {
descriptionVerticalMargin = styles.mb1;
} else if (isCompactPopoverItem) {
descriptionVerticalMargin = styles.mt0Half;
}
const menuItemLoadingReasonAttributes: SkeletonSpanReasonAttributes = {
context: 'MenuItem',
};
Expand Down
1 change: 1 addition & 0 deletions src/components/SettlementButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -330,6 +330,7 @@ function SettlementButton({
iconHeight: typeof account.icon === 'number' ? undefined : account.iconSize,
value: CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT,
description: account.description,
shouldIgnoreCompactStyle: true,
onSelected: () => {
if (checkForNecessaryAction(CONST.IOU.PAYMENT_TYPE.VBBA)) {
return;
Expand Down
1 change: 1 addition & 0 deletions src/hooks/useBulkPayOptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,7 @@ function useBulkPayOptions({
iconHeight: typeof account.icon === 'number' ? undefined : account.iconSize,
key: CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT,
shouldIgnoreKeyForRendering: true,
shouldIgnoreCompactStyle: true,
additionalData: {
bankAccountID: account.methodID,
paymentMethod: CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT,
Expand Down
1 change: 1 addition & 0 deletions src/styles/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,6 +265,7 @@ const webViewStyles = (theme: ThemeColors) =>
const compactPopoverMenuItemBaseStyle = {
...spacing.ph5,
...spacing.pv1,
minHeight: variables.componentSizeLarge,
alignItems: 'center' as const,
};

Expand Down
Loading