Move ReportActionContextMenu up for grouped ReportActionItems

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}

src/styles/getReportActionItemStyles.js

@@ -1,16 +1,31 @@
 import themeColors from './themes/default';
+import positioning from './utilities/positioning';
 
 /**
  * Generate the styles for the ReportActionItem wrapper view.
  *
  * @param {Boolean} [isHovered]
  * @returns {Object}
  */
-export default function (isHovered = false) {
+export function getReportActionItemStyle(isHovered = false) {
     return {
         display: 'flex',
         justifyContent: 'space-between',
         backgroundColor: isHovered ? themeColors.hoverComponentBG : themeColors.componentBG,
         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',
+    };
+}

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,

src/styles/utilities/positioning.js

@@ -6,6 +6,9 @@ export default {
     tn4: {
         top: -16,
     },
+    tn8: {
+        top: -32,
+    },
     r4: {
         right: 16,
     },