Merge pull request #53940 from FitseTLT/fix-tag-picker-word-break-sty…

…le-issue
Expensify · Dec 18, 2024 · e3d7afd · e3d7afd
2 parents 8b9bd0e + 9ec22ff
commit e3d7afd
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 0 deletions.
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
@@ -118,6 +118,7 @@ function BaseSelectionList<TItem extends ListItem>(
         shouldPreventActiveCellVirtualization = false,
         shouldScrollToFocusedIndex = true,
         onContentSizeChange,
+        listItemTitleStyles,
     }: BaseSelectionListProps<TItem>,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
@@ -524,6 +525,7 @@ function BaseSelectionList<TItem extends ListItem>(
                     normalizedIndex={normalizedIndex}
                     shouldSyncFocus={!isTextInputFocusedRef.current}
                     wrapperStyle={listItemWrapperStyle}
+                    titleStyles={listItemTitleStyles}
                     shouldHighlightSelectedItem={shouldHighlightSelectedItem}
                     singleExecution={singleExecution}
                 />

diff --git a/src/components/SelectionList/BaseSelectionListItemRenderer.tsx b/src/components/SelectionList/BaseSelectionListItemRenderer.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import type {StyleProp, TextStyle} from 'react-native';
 import type useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import type useSingleExecution from '@hooks/useSingleExecution';
 import * as SearchUIUtils from '@libs/SearchUIUtils';
@@ -11,6 +12,7 @@ type BaseSelectionListItemRendererProps<TItem extends ListItem> = Omit<BaseListI
         setFocusedIndex: ReturnType<typeof useArrowKeyFocusManager>[1];
         normalizedIndex: number;
         singleExecution: ReturnType<typeof useSingleExecution>['singleExecution'];
+        titleStyles?: StyleProp<TextStyle>;
     };
 
 function BaseSelectionListItemRenderer<TItem extends ListItem>({
@@ -37,6 +39,7 @@ function BaseSelectionListItemRenderer<TItem extends ListItem>({
     shouldSyncFocus,
     shouldHighlightSelectedItem,
     wrapperStyle,
+    titleStyles,
     singleExecution,
 }: BaseSelectionListItemRendererProps<TItem>) {
     const handleOnCheckboxPress = () => {
@@ -82,6 +85,7 @@ function BaseSelectionListItemRenderer<TItem extends ListItem>({
                 shouldSyncFocus={shouldSyncFocus}
                 shouldHighlightSelectedItem={shouldHighlightSelectedItem}
                 wrapperStyle={wrapperStyle}
+                titleStyles={titleStyles}
             />
             {item.footerContent && item.footerContent}
         </>

diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx
@@ -22,6 +22,7 @@ function RadioListItem<TItem extends ListItem>({
     onFocus,
     shouldSyncFocus,
     wrapperStyle,
+    titleStyles,
 }: RadioListItemProps<TItem>) {
     const styles = useThemeStyles();
     const fullTitle = isMultilineSupported ? item.text?.trimStart() : item.text;
@@ -59,6 +60,7 @@ function RadioListItem<TItem extends ListItem>({
                             item.alternateText ? styles.mb1 : null,
                             isDisabled && styles.colorMuted,
                             isMultilineSupported ? {paddingLeft} : null,
+                            titleStyles,
                         ]}
                         numberOfLines={isMultilineSupported ? 2 : 1}
                     />

diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
@@ -297,6 +297,9 @@ type ListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
 
     /** Whether we highlight all the selected items */
     shouldHighlightSelectedItem?: boolean;
+
+    /** Styles applied for the title */
+    titleStyles?: StyleProp<TextStyle>;
 };
 
 type BaseListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
@@ -563,6 +566,9 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Styles for the section title */
     sectionTitleStyles?: StyleProp<ViewStyle>;
 
+    /** Styles applid for the title of the list item */
+    listItemTitleStyles?: StyleProp<TextStyle>;
+
     /** This may improve scroll performance for large lists */
     removeClippedSubviews?: boolean;
 

diff --git a/src/components/TagPicker/index.tsx b/src/components/TagPicker/index.tsx
@@ -98,6 +98,7 @@ function TagPicker({selectedTag, tagListName, policyID, tagListIndex, shouldShow
         <SelectionList
             ListItem={RadioListItem}
             sectionTitleStyles={styles.mt5}
+            listItemTitleStyles={styles.breakAll}
             sections={sections}
             textInputValue={searchValue}
             headerMessage={headerMessage}