diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 103d063f9024..9883672976e8 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -78,6 +78,7 @@ const defaultProps = {
shouldGreyOutWhenDisabled: true,
error: '',
shouldRenderAsHTML: false,
+ rightLabel: '',
rightComponent: undefined,
shouldShowRightComponent: false,
titleWithTooltips: [],
@@ -364,6 +365,11 @@ const MenuItem = React.forwardRef((props, ref) => {
/>
)}
+ {Boolean(props.rightLabel) && (
+
+ {props.rightLabel}
+
+ )}
{Boolean(props.shouldShowRightIcon) && (
!state, false);
@@ -715,6 +716,7 @@ function MoneyRequestConfirmationList(props) {
titleStyle={styles.flex1}
disabled={didConfirm}
interactive={!props.isReadOnly}
+ rightLabel={canUseViolations && Boolean(props.policy.requiresCategory) ? translate('common.required') : ''}
/>
)}
{shouldShowTags && (
@@ -727,6 +729,7 @@ function MoneyRequestConfirmationList(props) {
style={[styles.moneyRequestMenuItem]}
disabled={didConfirm}
interactive={!props.isReadOnly}
+ rightLabel={canUseViolations && Boolean(props.policy.requiresTag) ? translate('common.required') : ''}
/>
)}
diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
index d4b12b9cf479..4d2de3275e23 100644
--- a/src/components/menuItemPropTypes.js
+++ b/src/components/menuItemPropTypes.js
@@ -148,6 +148,9 @@ const propTypes = {
/** Should render the content in HTML format */
shouldRenderAsHTML: PropTypes.bool,
+ /** Label to be displayed on the right */
+ rightLabel: PropTypes.string,
+
/** Component to be displayed on the right */
rightComponent: PropTypes.node,
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 9e62cea807b4..4c6ea25eb2c8 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -267,6 +267,7 @@ export default {
tbd: 'TBD',
selectCurrency: 'Select a currency',
card: 'Card',
+ required: 'Required',
},
location: {
useCurrent: 'Use current location',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index d0c5de6066b4..85eab5c3f14d 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -257,6 +257,7 @@ export default {
tbd: 'Por determinar',
selectCurrency: 'Selecciona una moneda',
card: 'Tarjeta',
+ required: 'Obligatorio',
},
location: {
useCurrent: 'Usar ubicaciĆ³n actual',
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index efa346b55eb5..c1b78a224eb3 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -1441,6 +1441,11 @@ const styles = (theme: ThemeColors) =>
alignItems: 'center',
},
+ rightLabelMenuItem: {
+ fontSize: variables.fontSizeLabel,
+ color: theme.textSupporting,
+ },
+
popoverMenuText: {
fontSize: variables.fontSizeNormal,
color: theme.heading,