diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 2bfc7c05214f..61f66ce0cc28 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -101,6 +101,9 @@ type ButtonProps = Partial & { /** Additional text styles when the button is hovered */ textHoverStyles?: StyleProp; + /** The number of lines to display for the primary text */ + primaryTextNumberOfLines?: number; + /** Whether we should use the default hover style */ shouldUseDefaultHover?: boolean; @@ -262,6 +265,7 @@ function Button({ innerStyles = [], textStyles = [], textHoverStyles = [], + primaryTextNumberOfLines = 1, shouldUseDefaultHover = true, hoverStyles = undefined, @@ -301,8 +305,9 @@ function Button({ const primaryText = ( ; }; function ActionableItemButtons(props: ActionableItemButtonsProps) { @@ -32,6 +35,8 @@ function ActionableItemButtons(props: ActionableItemButtonsProps) { text={props.shouldUseLocalization ? translate(item.text as TranslationPaths) : item.text} medium success={item.isPrimary} + primaryTextNumberOfLines={props.primaryTextNumberOfLines} + textStyles={props.textStyles} /> ))} diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index a0f602f34a61..b525d5b748aa 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -1493,6 +1493,8 @@ function PureReportActionItem({ } else { const hasBeenFlagged = ![CONST.MODERATION.MODERATOR_DECISION_APPROVED, CONST.MODERATION.MODERATOR_DECISION_PENDING].some((item) => item === moderationDecision) && !isPendingRemove(action); + + const isConciergeOptions = isConciergeCategoryOptions(action) || isConciergeDescriptionOptions(action); children = ( @@ -1535,7 +1537,9 @@ function PureReportActionItem({ ? 'vertical' : 'horizontal' } - shouldUseLocalization={!isConciergeCategoryOptions(action) && !isConciergeDescriptionOptions(action)} + shouldUseLocalization={!isConciergeOptions} + primaryTextNumberOfLines={isConciergeOptions ? 2 : 1} + textStyles={isConciergeOptions ? styles.textAlignLeft : undefined} /> )}