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,