Merge pull request #17741 from Expensify/OSBotify-cherry-pick-staging…

…-17739

🍒 Cherry pick PR #17739 to staging 🍒

android/app/build.gradle

@@ -106,8 +106,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001030204
-        versionName "1.3.2-4"
+        versionCode 1001030205
+        versionName "1.3.2-5"
     }
 
     splits {

ios/NewExpensify/Info.plist

@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.2.4</string>
+	<string>1.3.2.5</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.2.4</string>
+	<string>1.3.2.5</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.2-4",
+  "version": "1.3.2-5",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/components/MenuItem.js

@@ -65,7 +65,7 @@ const MenuItem = (props) => {
     const descriptionTextStyle = StyleUtils.combineStyles([
         styles.textLabelSupporting,
         (props.icon ? styles.ml3 : undefined),
-        styles.breakAll,
+        styles.breakWord,
         styles.lineHeightNormal,
         props.title ? descriptionVerticalMargin : undefined,
     ]);
@@ -87,7 +87,6 @@ const MenuItem = (props) => {
                 props.style,
                 StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive), true),
                 ..._.isArray(props.wrapperStyle) ? props.wrapperStyle : [props.wrapperStyle],
-                styles.popoverMaxWidth,
             ])}
             disabled={props.disabled}
         >

src/pages/home/report/ContextMenu/ContextMenuActions.js

@@ -14,6 +14,7 @@ import CONST from '../../../../CONST';
 import getAttachmentDetails from '../../../../libs/fileDownload/getAttachmentDetails';
 import fileDownload from '../../../../libs/fileDownload';
 import addEncryptedAuthTokenToURL from '../../../../libs/addEncryptedAuthTokenToURL';
+import * as ContextMenuUtils from './ContextMenuUtils';
 import * as Environment from '../../../../libs/Environment/Environment';
 import Permissions from '../../../../libs/Permissions';
 import QuickEmojiReactions from '../../../../components/Reactions/QuickEmojiReactions';
@@ -118,7 +119,7 @@ export default [
             Clipboard.setString(selection);
             hideContextMenu(true, ReportActionComposeFocusManager.focus);
         },
-        getDescription: selection => selection,
+        getDescription: ContextMenuUtils.getPopoverDescription,
     },
     {
         textTranslateKey: 'reportActionContextMenu.copyEmailToClipboard',

src/pages/home/report/ContextMenu/ContextMenuUtils/index.js

@@ -0,0 +1,17 @@
+/* eslint-disable import/prefer-default-export */
+
+/**
+ * The popover description will be an empty string on anything but mobile web
+ * because we show link in tooltip instead of popover on web
+ *
+ * @param {String} selection
+ * @param {Boolean} isSmallScreenWidth
+ * @returns {String}
+ */
+function getPopoverDescription(selection, isSmallScreenWidth) {
+    return isSmallScreenWidth ? selection : '';
+}
+
+export {
+    getPopoverDescription,
+};

src/pages/home/report/ContextMenu/ContextMenuUtils/index.native.js

@@ -0,0 +1,15 @@
+/* eslint-disable import/prefer-default-export */
+
+/**
+ * Always show popover description on native platforms
+ *
+ * @param {String} selection
+ * @returns {String}
+ */
+function getPopoverDescription(selection) {
+    return selection;
+}
+
+export {
+    getPopoverDescription,
+};

src/styles/styles.js

@@ -3130,8 +3130,8 @@ const styles = {
         textAlign: 'center',
     },
 
-    popoverMaxWidth: {
-        maxWidth: 375,
+    whisper: {
+        backgroundColor: themeColors.cardBG,
     },
 };