Merge pull request #50925 from Nodebrute/tooltip

remove tooltip
Expensify · Oct 17, 2024 · b773e57 · b773e57
2 parents 47b6811 + eb6db2e
commit b773e57
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 101 deletions.
diff --git a/src/components/FloatingActionButton.tsx b/src/components/FloatingActionButton.tsx
@@ -5,12 +5,10 @@ import type {GestureResponderEvent, Role, Text, View} from 'react-native';
 import {Platform} from 'react-native';
 import Animated, {createAnimatedPropAdapter, Easing, interpolateColor, processColor, useAnimatedProps, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import Svg, {Path} from 'react-native-svg';
-import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import {PressableWithoutFeedback} from './Pressable';
-import Tooltip from './Tooltip/PopoverAnchorTooltip';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 AnimatedPath.displayName = 'AnimatedPath';
@@ -57,7 +55,6 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role}: Flo
     const {success, buttonDefaultBG, textLight, textDark} = useTheme();
     const styles = useThemeStyles();
     const borderRadius = styles.floatingActionButton.borderRadius;
-    const {translate} = useLocalize();
     const fabPressable = useRef<HTMLDivElement | View | Text | null>(null);
     const sharedValue = useSharedValue(isActive ? 1 : 0);
     const buttonRef = ref;
@@ -99,34 +96,32 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role}: Flo
     };
 
     return (
-        <Tooltip text={translate('common.create')}>
-            <PressableWithoutFeedback
-                ref={(el) => {
-                    fabPressable.current = el ?? null;
-                    if (buttonRef && 'current' in buttonRef) {
-                        buttonRef.current = el ?? null;
-                    }
-                }}
-                style={[styles.h100, styles.bottomTabBarItem]}
-                accessibilityLabel={accessibilityLabel}
-                onPress={toggleFabAction}
-                onLongPress={() => {}}
-                role={role}
-                shouldUseHapticsOnLongPress={false}
-            >
-                <Animated.View style={[styles.floatingActionButton, animatedStyle]}>
-                    <Svg
-                        width={variables.iconSizeNormal}
-                        height={variables.iconSizeNormal}
-                    >
-                        <AnimatedPath
-                            d="M12,3c0-1.1-0.9-2-2-2C8.9,1,8,1.9,8,3v5H3c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2h5v5c0,1.1,0.9,2,2,2c1.1,0,2-0.9,2-2v-5h5c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2h-5V3z"
-                            animatedProps={animatedProps}
-                        />
-                    </Svg>
-                </Animated.View>
-            </PressableWithoutFeedback>
-        </Tooltip>
+        <PressableWithoutFeedback
+            ref={(el) => {
+                fabPressable.current = el ?? null;
+                if (buttonRef && 'current' in buttonRef) {
+                    buttonRef.current = el ?? null;
+                }
+            }}
+            style={[styles.h100, styles.bottomTabBarItem]}
+            accessibilityLabel={accessibilityLabel}
+            onPress={toggleFabAction}
+            onLongPress={() => {}}
+            role={role}
+            shouldUseHapticsOnLongPress={false}
+        >
+            <Animated.View style={[styles.floatingActionButton, animatedStyle]}>
+                <Svg
+                    width={variables.iconSizeNormal}
+                    height={variables.iconSizeNormal}
+                >
+                    <AnimatedPath
+                        d="M12,3c0-1.1-0.9-2-2-2C8.9,1,8,1.9,8,3v5H3c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2h5v5c0,1.1,0.9,2,2,2c1.1,0,2-0.9,2-2v-5h5c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2h-5V3z"
+                        animatedProps={animatedProps}
+                    />
+                </Svg>
+            </Animated.View>
+        </PressableWithoutFeedback>
     );
 }
 

diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx
@@ -6,7 +6,6 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import {PressableWithFeedback} from '@components/Pressable';
 import type {SearchQueryString} from '@components/Search/types';
 import Text from '@components/Text';
-import Tooltip from '@components/Tooltip';
 import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
@@ -110,61 +109,53 @@ function BottomTabBar({selectedTab}: BottomTabBarProps) {
 
     return (
         <View style={styles.bottomTabBarContainer}>
-            <Tooltip text={translate('common.inbox')}>
-                <PressableWithFeedback
-                    onPress={navigateToChats}
-                    role={CONST.ROLE.BUTTON}
-                    accessibilityLabel={translate('common.inbox')}
-                    wrapperStyle={styles.flex1}
-                    style={styles.bottomTabBarItem}
+            <PressableWithFeedback
+                onPress={navigateToChats}
+                role={CONST.ROLE.BUTTON}
+                accessibilityLabel={translate('common.inbox')}
+                wrapperStyle={styles.flex1}
+                style={styles.bottomTabBarItem}
+            >
+                <View>
+                    <Icon
+                        src={Expensicons.Inbox}
+                        fill={selectedTab === SCREENS.HOME ? theme.iconMenu : theme.icon}
+                        width={variables.iconBottomBar}
+                        height={variables.iconBottomBar}
+                    />
+                    {chatTabBrickRoad && <View style={styles.bottomTabStatusIndicator(chatTabBrickRoad === CONST.BRICK_ROAD_INDICATOR_STATUS.INFO ? theme.iconSuccessFill : theme.danger)} />}
+                </View>
+                <Text style={[styles.textSmall, styles.textAlignCenter, styles.mt1Half, selectedTab === SCREENS.HOME ? styles.textBold : styles.textSupporting, styles.bottomTabBarLabel]}>
+                    {translate('common.inbox')}
+                </Text>
+            </PressableWithFeedback>
+            <PressableWithFeedback
+                onPress={navigateToSearch}
+                role={CONST.ROLE.BUTTON}
+                accessibilityLabel={translate('common.search')}
+                wrapperStyle={styles.flex1}
+                style={styles.bottomTabBarItem}
+            >
+                <View>
+                    <Icon
+                        src={Expensicons.MoneySearch}
+                        fill={selectedTab === SCREENS.SEARCH.BOTTOM_TAB ? theme.iconMenu : theme.icon}
+                        width={variables.iconBottomBar}
+                        height={variables.iconBottomBar}
+                    />
+                </View>
+                <Text
+                    style={[
+                        styles.textSmall,
+                        styles.textAlignCenter,
+                        styles.mt1Half,
+                        selectedTab === SCREENS.SEARCH.BOTTOM_TAB ? styles.textBold : styles.textSupporting,
+                        styles.bottomTabBarLabel,
+                    ]}
                 >
-                    <View>
-                        <Icon
-                            src={Expensicons.Inbox}
-                            fill={selectedTab === SCREENS.HOME ? theme.iconMenu : theme.icon}
-                            width={variables.iconBottomBar}
-                            height={variables.iconBottomBar}
-                        />
-                        {chatTabBrickRoad && (
-                            <View style={styles.bottomTabStatusIndicator(chatTabBrickRoad === CONST.BRICK_ROAD_INDICATOR_STATUS.INFO ? theme.iconSuccessFill : theme.danger)} />
-                        )}
-                    </View>
-                    <Text
-                        style={[styles.textSmall, styles.textAlignCenter, styles.mt1Half, selectedTab === SCREENS.HOME ? styles.textBold : styles.textSupporting, styles.bottomTabBarLabel]}
-                    >
-                        {translate('common.inbox')}
-                    </Text>
-                </PressableWithFeedback>
-            </Tooltip>
-            <Tooltip text={translate('common.search')}>
-                <PressableWithFeedback
-                    onPress={navigateToSearch}
-                    role={CONST.ROLE.BUTTON}
-                    accessibilityLabel={translate('common.search')}
-                    wrapperStyle={styles.flex1}
-                    style={styles.bottomTabBarItem}
-                >
-                    <View>
-                        <Icon
-                            src={Expensicons.MoneySearch}
-                            fill={selectedTab === SCREENS.SEARCH.BOTTOM_TAB ? theme.iconMenu : theme.icon}
-                            width={variables.iconBottomBar}
-                            height={variables.iconBottomBar}
-                        />
-                    </View>
-                    <Text
-                        style={[
-                            styles.textSmall,
-                            styles.textAlignCenter,
-                            styles.mt1Half,
-                            selectedTab === SCREENS.SEARCH.BOTTOM_TAB ? styles.textBold : styles.textSupporting,
-                            styles.bottomTabBarLabel,
-                        ]}
-                    >
-                        {translate('common.search')}
-                    </Text>
-                </PressableWithFeedback>
-            </Tooltip>
+                    {translate('common.search')}
+                </Text>
+            </PressableWithFeedback>
             <BottomTabAvatar isSelected={selectedTab === SCREENS.SETTINGS.ROOT} />
             <View style={[styles.flex1, styles.bottomTabBarItem]}>
                 <BottomTabBarFloatingActionButton />

diff --git a/src/pages/home/sidebar/BottomTabAvatar.tsx b/src/pages/home/sidebar/BottomTabAvatar.tsx
@@ -2,7 +2,6 @@ import React, {useCallback} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import {PressableWithFeedback} from '@components/Pressable';
 import Text from '@components/Text';
-import Tooltip from '@components/Tooltip';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -68,20 +67,18 @@ function BottomTabAvatar({isCreateMenuOpen = false, isSelected = false}: BottomT
     }
 
     return (
-        <Tooltip text={translate('initialSettingsPage.accountSettings')}>
-            <PressableWithFeedback
-                onPress={showSettingsPage}
-                role={CONST.ROLE.BUTTON}
-                accessibilityLabel={translate('sidebarScreen.buttonMySettings')}
-                wrapperStyle={styles.flex1}
-                style={[styles.bottomTabBarItem]}
-            >
-                {children}
-                <Text style={[styles.textSmall, styles.textAlignCenter, isSelected ? styles.textBold : styles.textSupporting, styles.mt0Half, styles.bottomTabBarLabel]}>
-                    {translate('common.settings')}
-                </Text>
-            </PressableWithFeedback>
-        </Tooltip>
+        <PressableWithFeedback
+            onPress={showSettingsPage}
+            role={CONST.ROLE.BUTTON}
+            accessibilityLabel={translate('sidebarScreen.buttonMySettings')}
+            wrapperStyle={styles.flex1}
+            style={[styles.bottomTabBarItem]}
+        >
+            {children}
+            <Text style={[styles.textSmall, styles.textAlignCenter, isSelected ? styles.textBold : styles.textSupporting, styles.mt0Half, styles.bottomTabBarLabel]}>
+                {translate('common.settings')}
+            </Text>
+        </PressableWithFeedback>
     );
 }