From 1017f44cd0701a0c00da122970ec2aa29c5cc64c Mon Sep 17 00:00:00 2001
From: Rory Abraham <rory@expensify.com>
Date: Fri, 19 Mar 2021 14:02:41 -0700
Subject: [PATCH] Move ReportActionContextMenu up for grouped ReportActionItems

---
 src/pages/home/report/ReportActionItem.js | 10 ++++++----
 src/styles/getReportActionItemStyles.js   | 17 ++++++++++++++++-
 src/styles/styles.js                      |  7 -------
 src/styles/utilities/positioning.js       |  3 +++
 4 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 3525cd4a8770..a0d920a60185 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -6,8 +6,10 @@ import {withOnyx} from 'react-native-onyx';
 import CONST from '../../../CONST';
 import ONYXKEYS from '../../../ONYXKEYS';
 import ReportActionPropTypes from './ReportActionPropTypes';
-import styles from '../../../styles/styles';
-import getReportActionItemStyles from '../../../styles/getReportActionItemStyles';
+import {
+    getReportActionItemStyle,
+    getMiniReportActionContextMenuWrapperStyle,
+} from '../../../styles/getReportActionItemStyles';
 import PressableWithSecondaryInteraction from '../../../components/PressableWithSecondaryInteraction';
 import Hoverable from '../../../components/Hoverable';
 import PopoverWithMeasuredContent from '../../../components/PopoverWithMeasuredContent';
@@ -107,12 +109,12 @@ class ReportActionItem extends Component {
                 <Hoverable>
                     {hovered => (
                         <View>
-                            <View style={getReportActionItemStyles(hovered)}>
+                            <View style={getReportActionItemStyle(hovered)}>
                                 {!this.props.displayAsGroup
                                     ? <ReportActionItemSingle action={this.props.action} />
                                     : <ReportActionItemGrouped action={this.props.action} />}
                             </View>
-                            <View style={styles.miniReportActionContextMenuWrapperStyle}>
+                            <View style={getMiniReportActionContextMenuWrapperStyle(this.props.displayAsGroup)}>
                                 <ReportActionContextMenu
                                     reportID={this.props.reportID}
                                     reportActionID={this.props.action.sequenceNumber}
diff --git a/src/styles/getReportActionItemStyles.js b/src/styles/getReportActionItemStyles.js
index e4ac54a3886c..20054eb0eef0 100644
--- a/src/styles/getReportActionItemStyles.js
+++ b/src/styles/getReportActionItemStyles.js
@@ -1,4 +1,5 @@
 import themeColors from './themes/default';
+import positioning from './utilities/positioning';
 
 /**
  * Generate the styles for the ReportActionItem wrapper view.
@@ -6,7 +7,7 @@ import themeColors from './themes/default';
  * @param {Boolean} [isHovered]
  * @returns {Object}
  */
-export default function (isHovered = false) {
+export function getReportActionItemStyle(isHovered = false) {
     return {
         display: 'flex',
         justifyContent: 'space-between',
@@ -14,3 +15,17 @@ export default function (isHovered = false) {
         cursor: 'default',
     };
 }
+
+/**
+ * Generate the wrapper styles for the mini ReportActionContextMenu.
+ *
+ * @param {Boolean} isReportActionItemGrouped
+ * @returns {Object}
+ */
+export function getMiniReportActionContextMenuWrapperStyle(isReportActionItemGrouped) {
+    return {
+        ...(isReportActionItemGrouped ? positioning.tn8 : positioning.tn4),
+        ...positioning.r4,
+        position: 'absolute',
+    };
+}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 28e0130bc503..e4ba00a2f2ea 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -10,7 +10,6 @@ import sizing from './utilities/sizing';
 import flex from './utilities/flex';
 import display from './utilities/display';
 import overflow from './utilities/overflow';
-import positioning from './utilities/positioning';
 import whiteSpace from './utilities/whiteSpace';
 import wordBreak from './utilities/wordBreak';
 import textInputAlignSelf from './utilities/textInputAlignSelf';
@@ -953,12 +952,6 @@ const styles = {
         borderColor: colors.transparent,
     },
 
-    miniReportActionContextMenuWrapperStyle: {
-        ...positioning.tn4,
-        ...positioning.r4,
-        position: 'absolute',
-    },
-
     reportActionContextMenuText: {
         color: themeColors.heading,
         fontFamily: fontFamily.GTA_BOLD,
diff --git a/src/styles/utilities/positioning.js b/src/styles/utilities/positioning.js
index ed3164a03c85..9514b8f55091 100644
--- a/src/styles/utilities/positioning.js
+++ b/src/styles/utilities/positioning.js
@@ -6,6 +6,9 @@ export default {
     tn4: {
         top: -16,
     },
+    tn8: {
+        top: -32,
+    },
     r4: {
         right: 16,
     },