From 58a343511209d756f84fa754c19cd5a893e5cac3 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Wed, 12 Apr 2023 05:15:35 +0500 Subject: [PATCH 1/4] feat: added descriptive text for tooltips --- src/components/MenuItem.js | 1 + .../report/ContextMenu/ContextMenuActions.js | 3 +-- .../ContextMenu/ContextMenuUtils/index.js | 17 ----------------- .../ContextMenuUtils/index.native.js | 15 --------------- src/styles/styles.js | 4 ++++ 5 files changed, 6 insertions(+), 34 deletions(-) delete mode 100644 src/pages/home/report/ContextMenu/ContextMenuUtils/index.js delete mode 100644 src/pages/home/report/ContextMenu/ContextMenuUtils/index.native.js diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 8e1e089148db..13eae4229d5e 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -67,6 +67,7 @@ const MenuItem = (props) => { styles.breakWord, styles.lineHeightNormal, props.title ? descriptionVerticalMargin : undefined, + styles.popoverDescriptionText, ], props.style); return ( diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.js b/src/pages/home/report/ContextMenu/ContextMenuActions.js index cab49dcc3c9c..87be01b0b7f1 100644 --- a/src/pages/home/report/ContextMenu/ContextMenuActions.js +++ b/src/pages/home/report/ContextMenu/ContextMenuActions.js @@ -14,7 +14,6 @@ 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'; @@ -119,7 +118,7 @@ export default [ Clipboard.setString(selection); hideContextMenu(true, ReportActionComposeFocusManager.focus); }, - getDescription: ContextMenuUtils.getPopoverDescription, + getDescription: selection => selection, }, { textTranslateKey: 'reportActionContextMenu.copyEmailToClipboard', diff --git a/src/pages/home/report/ContextMenu/ContextMenuUtils/index.js b/src/pages/home/report/ContextMenu/ContextMenuUtils/index.js deleted file mode 100644 index f694f413e29a..000000000000 --- a/src/pages/home/report/ContextMenu/ContextMenuUtils/index.js +++ /dev/null @@ -1,17 +0,0 @@ -/* 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, -}; diff --git a/src/pages/home/report/ContextMenu/ContextMenuUtils/index.native.js b/src/pages/home/report/ContextMenu/ContextMenuUtils/index.native.js deleted file mode 100644 index 3dbf81926098..000000000000 --- a/src/pages/home/report/ContextMenu/ContextMenuUtils/index.native.js +++ /dev/null @@ -1,15 +0,0 @@ -/* 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, -}; diff --git a/src/styles/styles.js b/src/styles/styles.js index dd84b99fb814..e9b503cc2b62 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -3078,6 +3078,10 @@ const styles = { width: variables.modalContentMaxWidth, textAlign: 'center', }, + + popoverDescriptionText: { + maxWidth: 500, + }, }; export default styles; From 001298a6881548436ae775a36187f9faa8d6c1d8 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Thu, 13 Apr 2023 00:00:36 +0500 Subject: [PATCH 2/4] feat: updated popoverDescriptionText to a maxwidth of 375 --- src/styles/styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index e9b503cc2b62..063bc39e8506 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -3080,7 +3080,7 @@ const styles = { }, popoverDescriptionText: { - maxWidth: 500, + maxWidth: 375, }, }; From 8fda8feeb358ab0f152a53158a2a18c0b49e0eb2 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Thu, 13 Apr 2023 01:23:01 +0500 Subject: [PATCH 3/4] feat: added maxwidth for menu item to wrapper --- src/components/MenuItem.js | 2 +- src/styles/styles.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 13eae4229d5e..29ae77023312 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -67,7 +67,6 @@ const MenuItem = (props) => { styles.breakWord, styles.lineHeightNormal, props.title ? descriptionVerticalMargin : undefined, - styles.popoverDescriptionText, ], props.style); return ( @@ -87,6 +86,7 @@ const MenuItem = (props) => { styles.popoverMenuItem, 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} > diff --git a/src/styles/styles.js b/src/styles/styles.js index 063bc39e8506..f774722dafb5 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -3079,7 +3079,7 @@ const styles = { textAlign: 'center', }, - popoverDescriptionText: { + popoverMaxWidth: { maxWidth: 375, }, }; From 559902698eb9e26e0b415647838440cfc04af481 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Sat, 15 Apr 2023 03:12:44 +0500 Subject: [PATCH 4/4] feat: change descriptive text break style --- src/components/MenuItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 29ae77023312..537aeb16d0c8 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -64,7 +64,7 @@ const MenuItem = (props) => { const descriptionTextStyle = StyleUtils.combineStyles([ styles.textLabelSupporting, (props.icon ? styles.ml3 : undefined), - styles.breakWord, + styles.breakAll, styles.lineHeightNormal, props.title ? descriptionVerticalMargin : undefined, ], props.style);