Merge pull request #57375 from mkzie2/mkzie2-issue/57180

Fix visual feedback on To field
Expensify · Feb 25, 2025 · e2efe1e · e2efe1e
2 parents 6410259 + c9bf1ef
commit e2efe1e
Show file tree

Hide file tree

Showing 12 changed files with 39 additions and 36 deletions.
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -17,7 +17,7 @@ import HapticFeedback from '@libs/HapticFeedback';
 import CONST from '@src/CONST';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import type IconAsset from '@src/types/utils/IconAsset';
-import {getButtonRole, getButtonStyle} from './utils';
+import {getButtonRole} from './utils';
 import validateSubmitShortcut from './validateSubmitShortcut';
 
 type ButtonProps = Partial<ChildrenProps> & {
@@ -422,8 +422,8 @@ function Button(
                     text && shouldShowRightIcon ? styles.alignItemsStretch : undefined,
                     innerStyles,
                     link && styles.bgTransparent,
-                    getButtonStyle(styles, isNested),
                 ]}
+                isNested={isNested}
                 hoverStyle={[
                     shouldUseDefaultHover && !isDisabled ? styles.buttonDefaultHovered : undefined,
                     success && !isDisabled ? styles.buttonSuccessHovered : undefined,

diff --git a/src/components/Button/utils/index.ts b/src/components/Button/utils/index.ts
@@ -1,6 +1,7 @@
 import CONST from '@src/CONST';
-import type {GetButtonRole, GetButtonStyle} from './types';
+import type {GetButtonRole} from './types';
 
-const getButtonStyle: GetButtonStyle = () => undefined;
 const getButtonRole: GetButtonRole = () => CONST.ROLE.BUTTON;
-export {getButtonStyle, getButtonRole};
+
+// eslint-disable-next-line import/prefer-default-export
+export {getButtonRole};
diff --git a/src/components/Button/utils/index.web.ts b/src/components/Button/utils/index.web.ts
@@ -1,7 +1,7 @@
 import CONST from '@src/CONST';
-import type {GetButtonRole, GetButtonStyle} from './types';
+import type {GetButtonRole} from './types';
 
-const getButtonStyle: GetButtonStyle = (styles, isNested) => (isNested ? styles.cursorPointer : undefined);
 const getButtonRole: GetButtonRole = (isNested) => (isNested ? CONST.ROLE.PRESENTATION : CONST.ROLE.BUTTON);
 
-export {getButtonStyle, getButtonRole};
+// eslint-disable-next-line import/prefer-default-export
+export {getButtonRole};
diff --git a/src/components/Button/utils/types.ts b/src/components/Button/utils/types.ts
@@ -1,7 +1,6 @@
-import type {Role, StyleProp, ViewStyle} from 'react-native';
-
-type GetButtonStyle = (styles: {cursorPointer: ViewStyle}, isNested: boolean) => StyleProp<ViewStyle> | undefined;
+import type {Role} from 'react-native';
 
 type GetButtonRole = (isNested: boolean) => Role | undefined;
 
-export type {GetButtonStyle, GetButtonRole};
+// eslint-disable-next-line import/prefer-default-export
+export type {GetButtonRole};
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
@@ -3,7 +3,7 @@ import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {CustomRendererProps, TBlock} from 'react-native-render-html';
 import {AttachmentContext} from '@components/AttachmentContext';
-import {getButtonRole, getButtonStyle} from '@components/Button/utils';
+import {getButtonRole} from '@components/Button/utils';
 import {isDeletedNode} from '@components/HTMLEngineProvider/htmlEngineUtils';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithoutFocus from '@components/Pressable/PressableWithoutFocus';
@@ -104,7 +104,7 @@ function ImageRenderer({tnode}: ImageRendererProps) {
                 <AttachmentContext.Consumer>
                     {({reportID, accountID, type}) => (
                         <PressableWithoutFocus
-                            style={[styles.noOutline, getButtonStyle(styles, true)]}
+                            style={[styles.noOutline]}
                             onPress={() => {
                                 if (!source || !type) {
                                     return;
@@ -120,6 +120,7 @@ function ImageRenderer({tnode}: ImageRendererProps) {
                                 }
                                 showContextMenuForReport(event, anchor, report?.reportID, action, checkIfContextMenuActive, isArchivedNonExpenseReport(report, reportNameValuePairs));
                             }}
+                            isNested
                             shouldUseHapticsOnLongPress
                             role={getButtonRole(true)}
                             accessibilityLabel={translate('accessibilityHints.viewAttachment')}

diff --git a/src/components/Pressable/GenericPressable/implementation/BaseGenericPressable.tsx b/src/components/Pressable/GenericPressable/implementation/BaseGenericPressable.tsx
@@ -37,6 +37,7 @@ function GenericPressable(
         accessible = true,
         fullDisabled = false,
         interactive = true,
+        isNested = false,
         ...rest
     }: PressableProps,
     ref: PressableRef,
@@ -74,11 +75,11 @@ function GenericPressable(
         if (shouldUseDisabledCursor) {
             return styles.cursorDisabled;
         }
-        if ([rest.accessibilityRole, rest.role].includes(CONST.ROLE.PRESENTATION)) {
+        if ([rest.accessibilityRole, rest.role].includes(CONST.ROLE.PRESENTATION) && !isNested) {
             return styles.cursorText;
         }
         return styles.cursorPointer;
-    }, [styles, shouldUseDisabledCursor, rest.accessibilityRole, rest.role, interactive]);
+    }, [interactive, shouldUseDisabledCursor, rest.accessibilityRole, rest.role, isNested, styles.cursorPointer, styles.cursorDefault, styles.cursorDisabled, styles.cursorText]);
 
     const onLongPressHandler = useCallback(
         (event: GestureResponderEvent) => {

diff --git a/src/components/Pressable/GenericPressable/types.ts b/src/components/Pressable/GenericPressable/types.ts
@@ -148,6 +148,11 @@ type PressableProps = RNPressableProps &
          * e.g., show disabled cursor when disabled
          */
         interactive?: boolean;
+
+        /**
+         * Whether the pressable is nested in another one.
+         */
+        isNested?: boolean;
     };
 
 type PressableRef = ForwardedRef<HTMLDivElement | View | RNText | undefined>;

diff --git a/src/components/ReferralProgramCTA.tsx b/src/components/ReferralProgramCTA.tsx
@@ -7,7 +7,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import Navigation from '@src/libs/Navigation/Navigation';
 import ROUTES from '@src/ROUTES';
-import {getButtonRole, getButtonStyle} from './Button/utils';
+import {getButtonRole} from './Button/utils';
 import Icon from './Icon';
 import {Close} from './Icon/Expensicons';
 import {PressableWithoutFeedback} from './Pressable';
@@ -53,17 +53,8 @@ function ReferralProgramCTA({referralContentType, style, onDismiss}: ReferralPro
             onPress={() => {
                 Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(referralContentType, Navigation.getActiveRouteWithoutParams()));
             }}
-            style={[
-                styles.br2,
-                styles.highlightBG,
-                styles.flexRow,
-                styles.justifyContentBetween,
-                styles.alignItemsCenter,
-                {gap: 10, padding: 10},
-                styles.pl5,
-                getButtonStyle(styles, true),
-                style,
-            ]}
+            style={[styles.br2, styles.highlightBG, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, {gap: 10, padding: 10}, styles.pl5, style]}
+            isNested
             accessibilityLabel="referral"
             role={getButtonRole(true)}
         >

diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx
@@ -5,7 +5,7 @@ import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Animated, {useAnimatedStyle, useSharedValue, withDelay, withSpring, withTiming} from 'react-native-reanimated';
 import Button from '@components/Button';
-import {getButtonRole, getButtonStyle} from '@components/Button/utils';
+import {getButtonRole} from '@components/Button/utils';
 import DelegateNoAccessModal from '@components/DelegateNoAccessModal';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -539,8 +539,9 @@ function ReportPreview({
                     onLongPress={(event) => showContextMenuForReport(event, contextMenuAnchor, chatReportID, action, checkIfContextMenuActive)}
                     shouldUseHapticsOnLongPress
                     // This is added to omit console error about nested buttons as its forbidden on web platform
-                    style={[styles.flexRow, styles.justifyContentBetween, styles.reportPreviewBox, getButtonStyle(styles, true)]}
+                    style={[styles.flexRow, styles.justifyContentBetween, styles.reportPreviewBox]}
                     role={getButtonRole(true)}
+                    isNested
                     accessibilityLabel={translate('iou.viewDetails')}
                 >
                     <View style={[styles.reportPreviewBox, isHovered || isScanning || isWhisper ? styles.reportPreviewBoxHoverBorder : undefined]}>

diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx
@@ -1,6 +1,6 @@
 import React, {useRef} from 'react';
 import {View} from 'react-native';
-import {getButtonRole, getButtonStyle} from '@components/Button/utils';
+import {getButtonRole} from '@components/Button/utils';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
@@ -11,6 +11,7 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useSyncFocus from '@hooks/useSyncFocus';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {BaseListItemProps, ListItem} from './types';
 
@@ -96,15 +97,16 @@ function BaseListItem<TItem extends ListItem>({
                 interactive={item.isInteractive}
                 accessibilityLabel={item.text ?? ''}
                 role={getButtonRole(true)}
+                isNested
                 hoverDimmingValue={1}
+                pressDimmingValue={item.isInteractive === false ? 1 : variables.pressDimValue}
                 hoverStyle={[!item.isDisabled && item.isInteractive !== false && styles.hoveredComponentBG, hoverStyle]}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true, [CONST.INNER_BOX_SHADOW_ELEMENT]: shouldShowBlueBorderOnFocus}}
                 onMouseDown={(e) => e.preventDefault()}
                 id={keyForList ?? ''}
                 style={[
                     pressableStyle,
                     isFocused && StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
-                    getButtonStyle(styles, true),
                 ]}
                 onFocus={onFocus}
                 onMouseLeave={handleMouseLeave}

diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -2,7 +2,7 @@ import {Str} from 'expensify-common';
 import React from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
-import {getButtonRole, getButtonStyle} from '@components/Button/utils';
+import {getButtonRole} from '@components/Button/utils';
 import Checkbox from '@components/Checkbox';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -302,7 +302,8 @@ function TransactionListItemRow({
                             role={getButtonRole(true)}
                             disabled={isDisabled}
                             onPress={onCheckboxPress}
-                            style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle(), item.isDisabledCheckbox && styles.cursorDisabled, styles.mr1, getButtonStyle(styles, true)]}
+                            isNested
+                            style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle(), item.isDisabledCheckbox && styles.cursorDisabled, styles.mr1]}
                         >
                             <View style={[StyleUtils.getCheckboxContainerStyle(20), StyleUtils.getMultiselectListStyles(!!item.isSelected, !!isDisabled)]}>
                                 {!!item.isSelected && (

diff --git a/src/components/ThreeDotsMenu/index.tsx b/src/components/ThreeDotsMenu/index.tsx
@@ -1,7 +1,7 @@
 import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import {getButtonRole, getButtonStyle} from '@components/Button/utils';
+import {getButtonRole} from '@components/Button/utils';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PopoverMenu from '@components/PopoverMenu';
@@ -106,8 +106,9 @@ function ThreeDotsMenu({
                             e.preventDefault();
                         }}
                         ref={buttonRef}
-                        style={[styles.touchableButtonImage, iconStyles, getButtonStyle(styles, isNested)]}
+                        style={[styles.touchableButtonImage, iconStyles]}
                         role={getButtonRole(isNested)}
+                        isNested={isNested}
                         accessibilityLabel={translate(iconTooltip)}
                     >
                         <Icon