Repurpose style prop for menuitem to apply to pressable

Expensify · Apr 4, 2023 · a453d1e · a453d1e
1 parent f57b97f
commit a453d1e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/src/components/IOUConfirmationList.js b/src/components/IOUConfirmationList.js
@@ -323,12 +323,13 @@ class IOUConfirmationList extends Component {
                         />
                     )}
             >
-                <MenuItemWithTopDescription // TODO: Get rid of the padding that's coming from popoverItem within MenuItem for this one.
+                <MenuItemWithTopDescription
                     shouldShowRightIcon
                     title={formattedAmount}
                     description={this.props.translate('iou.amount')}
                     interactive={false}
                     onPress={() => {}} // TODO: Make this go to edit amount!
+                    style={styles.iouMenuItem}
                     titleStyle={styles.iouConfirmationAmount}
                 />
             </OptionsSelector>

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
@@ -30,7 +30,7 @@ const defaultProps = {
     shouldShowBasicTitle: false,
     shouldShowDescriptionOnTop: false,
     wrapperStyle: [],
-    style: {},
+    style: styles.popoverMenuItem,
     titleStyle: {},
     success: false,
     icon: undefined,
@@ -60,13 +60,13 @@ const MenuItem = (props) => {
         (props.shouldShowBasicTitle ? undefined : styles.textStrong),
         (props.interactive && props.disabled ? {...styles.disabledText, ...styles.userSelectNone} : undefined),
         styles.pre,
-    ], props.style, props.titleStyle);
+    ], props.titleStyle);
     const descriptionTextStyle = StyleUtils.combineStyles([
         styles.textLabelSupporting,
         (props.icon ? styles.ml3 : undefined),
         styles.breakWord,
         styles.lineHeightNormal,
-    ], props.style);
+    ]);
 
     return (
         <Pressable
@@ -82,7 +82,7 @@ const MenuItem = (props) => {
                 props.onPress(e);
             }}
             style={({hovered, pressed}) => ([
-                styles.popoverMenuItem,
+                props.style,
                 StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive), true),
                 ..._.isArray(props.wrapperStyle) ? props.wrapperStyle : [props.wrapperStyle],
             ])}

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2280,6 +2280,14 @@ const styles = {
         fontSize: 19,
     },
 
+    iouMenuItem: {
+        flexDirection: 'row',
+        borderRadius: 0,
+        justifyContent: 'space-between',
+        width: '100%',
+        marginBottom: 20,
+    },
+
     iouPreviewBox: {
         backgroundColor: themeColors.cardBG,
         borderRadius: variables.componentBorderRadiusCard,