[No QA] DRY up menu item styles

src/components/MenuItem.js

@@ -3,10 +3,10 @@ import {
     View, Text, Pressable,
 } from 'react-native';
 import PropTypes from 'prop-types';
-
-import styles from '../styles/styles';
+import styles, {getButtonBackgroundColorStyle, getIconFillColor} from '../styles/styles';
 import Icon from './Icon';
 import {ArrowRight} from './Icon/Expensicons';
+import getButtonState from '../libs/getButtonState';
 
 const propTypes = {
     // Any additional styles to apply
@@ -40,26 +40,30 @@ const MenuItem = ({
 }) => (
     <Pressable
         onPress={onPress}
-        style={({hovered}) => ([
+        style={({hovered, pressed}) => ([
             styles.createMenuItem,
-            hovered && styles.hoveredButton,
+            getButtonBackgroundColorStyle(getButtonState(hovered, pressed)),
             wrapperStyle,
         ])}
     >
-        <View style={styles.flexRow}>
-            <View style={styles.createMenuIcon}>
-                <Icon src={icon} />
-            </View>
-            <View style={styles.justifyContentCenter}>
-                <Text style={[styles.createMenuText, styles.ml3]}>
-                    {title}
-                </Text>
-            </View>
-        </View>
-        {shouldShowRightArrow && (
-            <View style={styles.createMenuIcon}>
-                <Icon src={ArrowRight} />
-            </View>
+        {({hovered, pressed}) => (
+            <>
+                <View style={styles.flexRow}>
+                    <View style={styles.createMenuIcon}>
+                        <Icon src={icon} fill={getIconFillColor(getButtonState(hovered, pressed))} />
+                    </View>
+                    <View style={styles.justifyContentCenter}>
+                        <Text style={[styles.createMenuText, styles.ml3]}>
+                            {title}
+                        </Text>
+                    </View>
+                </View>
+                {shouldShowRightArrow && (
+                    <View style={styles.createMenuIcon}>
+                        <Icon src={ArrowRight} fill={getIconFillColor(getButtonState(hovered, pressed))} />
+                    </View>
+                )}
+            </>
         )}
     </Pressable>
 );

src/libs/getButtonState.js

@@ -0,0 +1,25 @@
+import CONST from '../CONST';
+
+/**
+ * Get the string representation of a button's state.
+ *
+ * @param {Boolean} [isHovered]
+ * @param {Boolean} [isPressed]
+ * @param {Boolean} [isComplete]
+ * @returns {String}
+ */
+export default function (isHovered = false, isPressed = false, isComplete = false) {
+    if (isComplete) {
+        return CONST.BUTTON_STATES.COMPLETE;
+    }
+
+    if (isPressed) {
+        return CONST.BUTTON_STATES.PRESSED;
+    }
+
+    if (isHovered) {
+        return CONST.BUTTON_STATES.HOVERED;
+    }
+
+    return CONST.BUTTON_STATES.DEFAULT;
+}

src/pages/home/report/ReportActionContextMenuItem.js

@@ -1,35 +1,11 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {Pressable, Text} from 'react-native';
+import {Pressable} from 'react-native';
+import MenuItem from '../../../components/MenuItem';
 import Tooltip from '../../../components/Tooltip';
 import Icon from '../../../components/Icon';
-import getReportActionContextMenuItemStyles from '../../../styles/getReportActionContextMenuItemStyles';
-import CONST from '../../../CONST';
-import styles from '../../../styles/styles';
-
-/**
- * Get the string representation of a button's state.
- *
- * @param {Boolean} [isHovered]
- * @param {Boolean} [isPressed]
- * @param {Boolean} [isComplete]
- * @returns {String}
- */
-function getButtonState(isHovered = false, isPressed = false, isComplete = false) {
-    if (isComplete) {
-        return CONST.BUTTON_STATES.COMPLETE;
-    }
-
-    if (isPressed) {
-        return CONST.BUTTON_STATES.PRESSED;
-    }
-
-    if (isHovered) {
-        return CONST.BUTTON_STATES.HOVERED;
-    }
-
-    return CONST.BUTTON_STATES.DEFAULT;
-}
+import styles, {getIconFillColor, getButtonBackgroundColorStyle} from '../../../styles/styles';
+import getButtonState from '../../../libs/getButtonState';
 
 const propTypes = {
     icon: PropTypes.elementType.isRequired,
@@ -74,7 +50,6 @@ class ReportActionContextMenuItem extends Component {
     }
 
     render() {
-        const {getButtonStyle, getIconFillColor} = getReportActionContextMenuItemStyles(this.props.isMini);
         const icon = this.state.success ? this.props.successIcon || this.props.icon : this.props.icon;
         const text = this.state.success ? this.props.successText || this.props.text : this.props.text;
         return (
@@ -84,9 +59,10 @@ class ReportActionContextMenuItem extends Component {
                         <Pressable
                             onPress={this.triggerPressAndUpdateSuccess}
                             style={
-                                ({hovered, pressed}) => getButtonStyle(
-                                    getButtonState(hovered, pressed, this.state.success),
-                                )
+                                ({hovered, pressed}) => [
+                                    styles.reportActionContextMenuMiniButton,
+                                    getButtonBackgroundColorStyle(getButtonState(hovered, pressed, this.state.success)),
+                                ]
                             }
                         >
                             {({hovered, pressed}) => (
@@ -98,29 +74,12 @@ class ReportActionContextMenuItem extends Component {
                         </Pressable>
                     </Tooltip>
                 ) : (
-                    <Pressable
+                    <MenuItem
+                        title={text}
+                        icon={icon}
                         onPress={this.triggerPressAndUpdateSuccess}
-                        style={
-                            ({hovered, pressed}) => getButtonStyle(
-                                getButtonState(hovered, pressed, this.state.success),
-                            )
-                        }
-                    >
-                        {({hovered, pressed}) => (
-                            <>
-                                <Icon
-                                    src={icon}
-                                    fill={getIconFillColor(getButtonState(hovered, pressed, this.state.success))}
-                                />
-                                <Text
-                                    style={styles.reportActionContextMenuText}
-                                    selectable={false}
-                                >
-                                    {text}
-                                </Text>
-                            </>
-                        )}
-                    </Pressable>
+                        wrapperStyle={styles.pr9}
+                    />
                 )
         );
     }

src/styles/styles.js

@@ -13,6 +13,7 @@ import overflow from './utilities/overflow';
 import whiteSpace from './utilities/whiteSpace';
 import wordBreak from './utilities/wordBreak';
 import textInputAlignSelf from './utilities/textInputAlignSelf';
+import CONST from '../CONST';
 
 const styles = {
     // Add all of our utility and helper styles
@@ -1062,14 +1063,11 @@ const styles = {
         borderColor: colors.transparent,
     },
 
-    reportActionContextMenuText: {
-        color: themeColors.heading,
-        fontFamily: fontFamily.GTA_BOLD,
-        fontSize: variables.fontSizeLabel,
-        fontWeight: fontWeightBold,
-        textAlign: 'center',
-        ...spacing.ml4,
-        ...spacing.mr2,
+    reportActionContextMenuMiniButton: {
+        ...spacing.p1,
+        ...spacing.mv1,
+        ...spacing.mh1,
+        ...{borderRadius: variables.componentBorderRadiusSmall},
     },
 
     settingsPageBackground: {
@@ -1447,6 +1445,44 @@ function getBackgroundColorStyle(backgroundColor) {
     };
 }
 
+/**
+ * Generate a style for the background color of the button, based on its current state.
+ *
+ * @param {String} [buttonState] - One of {'default', 'hovered', 'pressed'}
+ * @returns {Object}
+ */
+function getButtonBackgroundColorStyle(buttonState = CONST.BUTTON_STATES.DEFAULT) {
+    switch (buttonState) {
+        case CONST.BUTTON_STATES.HOVERED:
+            return {backgroundColor: themeColors.buttonHoveredBG};
+        case CONST.BUTTON_STATES.PRESSED:
+            return {backgroundColor: themeColors.buttonPressedBG};
+        case CONST.BUTTON_STATES.DEFAULT:
+        default:
+            return {};
+    }
+}
+
+/**
+ * Generate fill color of an icon based on its state.
+ *
+ * @param {String} [buttonState] - One of {'default', 'hovered', 'pressed'}
+ * @returns {Object}
+ */
+function getIconFillColor(buttonState = CONST.BUTTON_STATES.DEFAULT) {
+    switch (buttonState) {
+        case CONST.BUTTON_STATES.HOVERED:
+            return themeColors.text;
+        case CONST.BUTTON_STATES.PRESSED:
+            return themeColors.heading;
+        case CONST.BUTTON_STATES.COMPLETE:
+            return themeColors.iconSuccessFill;
+        case CONST.BUTTON_STATES.DEFAULT:
+        default:
+            return themeColors.icon;
+    }
+}
+
 /**
  * @param {Animated.Value} rotate
  * @param {Animated.Value} backgroundColor
@@ -1513,6 +1549,8 @@ export {
     getZoomSizingStyle,
     getBackgroundAndBorderStyle,
     getBackgroundColorStyle,
+    getButtonBackgroundColorStyle,
+    getIconFillColor,
     getAnimatedFABStyle,
     getWidthAndHeightStyle,
     getOpacityStyle,

src/styles/themes/default.js

@@ -33,6 +33,7 @@ export default {
     badgeSuccessBG: colors.green,
     buttonDisabledBG: colors.gray2,
     buttonHoveredBG: colors.gray1,
+    buttonPressedBG: colors.gray2,
     spinner: colors.gray4,
     unreadIndicator: colors.green,
     placeholderText: colors.gray3,

src/styles/utilities/spacing.js

@@ -169,6 +169,10 @@ export default {
         paddingRight: 20,
     },
 
+    pr9: {
+        paddingRight: 32,
+    },
+
     pl5: {
         paddingLeft: 20,
     },