From 630a17e2a97815b48e80bf7c96c9411438e6f267 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Wed, 28 Feb 2024 06:51:24 +0530 Subject: [PATCH 01/15] Add prop isRowMultilineSupported to BaseSelectionList --- src/components/SelectionList/BaseSelectionList.tsx | 1 + src/components/SelectionList/types.ts | 3 +++ 2 files changed, 4 insertions(+) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 1c69d00b3910..9ddb37695334 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -63,6 +63,7 @@ function BaseSelectionList( onLayout, customListHeader, listHeaderWrapperStyle, + isRowMultilineSupported = false, }: BaseSelectionListProps, inputRef: ForwardedRef, ) { diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 59f6b14cfb1f..370439b48835 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -258,6 +258,9 @@ type BaseSelectionListProps = Partial & { /** Styles for the list header wrapper */ listHeaderWrapperStyle?: StyleProp; + + /** Whether to wrap large text up to 2 lines */ + isRowMultilineSupported?: boolean; }; type ItemLayout = { From b7ab5736aee5e7f22f1abb5b7fa939d830deec66 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Wed, 28 Feb 2024 06:53:24 +0530 Subject: [PATCH 02/15] Add isMultilineSupported prop to ListItem --- src/components/SelectionList/RadioListItem.tsx | 1 + src/components/SelectionList/types.ts | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx index b3340a0faf7a..b39f014a193b 100644 --- a/src/components/SelectionList/RadioListItem.tsx +++ b/src/components/SelectionList/RadioListItem.tsx @@ -16,6 +16,7 @@ function RadioListItem({ onDismissError, shouldPreventDefaultFocusOnSelectRow, rightHandSideComponent, + isMultilineSupported = false, }: RadioListItemProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 370439b48835..550276166e9e 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -37,6 +37,9 @@ type CommonListItemProps = { /** Styles for the checkbox wrapper view if select multiple option is on */ selectMultipleStyle?: StyleProp; + + /** Whether to wrap large text up to 2 lines */ + isMultilineSupported?: boolean; }; type ListItem = { @@ -83,6 +86,9 @@ type ListItem = { /** Whether this option should show subscript */ shouldShowSubscript?: boolean; + + /** Whether to wrap large text up to 2 lines */ + isMultilineSupported?: boolean; }; type ListItemProps = CommonListItemProps & { From 52a2fedc3f332edc3535885984540b4804132ecc Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Wed, 28 Feb 2024 06:55:15 +0530 Subject: [PATCH 03/15] Add numberOfLines prop type to TextWithTooltip --- src/components/TextWithTooltip/index.native.tsx | 4 ++-- src/components/TextWithTooltip/index.tsx | 4 ++-- src/components/TextWithTooltip/types.ts | 3 +++ 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/TextWithTooltip/index.native.tsx b/src/components/TextWithTooltip/index.native.tsx index f8013ae00e4c..345f1fb770a5 100644 --- a/src/components/TextWithTooltip/index.native.tsx +++ b/src/components/TextWithTooltip/index.native.tsx @@ -2,11 +2,11 @@ import React from 'react'; import Text from '@components/Text'; import type TextWithTooltipProps from './types'; -function TextWithTooltip({text, textStyles}: TextWithTooltipProps) { +function TextWithTooltip({text, textStyles, numberOfLines}: TextWithTooltipProps) { return ( {text} diff --git a/src/components/TextWithTooltip/index.tsx b/src/components/TextWithTooltip/index.tsx index fd202db8de64..0b03c9fcc592 100644 --- a/src/components/TextWithTooltip/index.tsx +++ b/src/components/TextWithTooltip/index.tsx @@ -7,7 +7,7 @@ type LayoutChangeEvent = { target: HTMLElement; }; -function TextWithTooltip({text, shouldShowTooltip, textStyles}: TextWithTooltipProps) { +function TextWithTooltip({text, shouldShowTooltip, textStyles, numberOfLines}: TextWithTooltipProps) { const [showTooltip, setShowTooltip] = useState(false); return ( @@ -17,7 +17,7 @@ function TextWithTooltip({text, shouldShowTooltip, textStyles}: TextWithTooltipP > { const target = (e.nativeEvent as unknown as LayoutChangeEvent).target; if (!shouldShowTooltip) { diff --git a/src/components/TextWithTooltip/types.ts b/src/components/TextWithTooltip/types.ts index 80517b0b2acf..426336851ada 100644 --- a/src/components/TextWithTooltip/types.ts +++ b/src/components/TextWithTooltip/types.ts @@ -4,6 +4,9 @@ type TextWithTooltipProps = { text: string; shouldShowTooltip: boolean; textStyles?: StyleProp; + + /** Custom number of lines for Text */ + numberOfLines?: number; }; export default TextWithTooltipProps; From f585826cfe433c01e812c5fd76058cf7c6055020 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Wed, 28 Feb 2024 06:55:58 +0530 Subject: [PATCH 04/15] Pass isRowMultilineSupported in CategoryPicker --- src/components/CategoryPicker/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js index 2374fc9e5d0c..89312a7ca614 100644 --- a/src/components/CategoryPicker/index.js +++ b/src/components/CategoryPicker/index.js @@ -70,6 +70,7 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC onSelectRow={onSubmit} ListItem={RadioListItem} initiallyFocusedOptionKey={selectedOptionKey} + isRowMultilineSupported /> ); } From 3a87b37183cd5e6854891b254a52e764c9c61019 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Wed, 28 Feb 2024 06:56:17 +0530 Subject: [PATCH 05/15] Pass isMultilineSupported to ListItem --- src/components/SelectionList/BaseSelectionList.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 9ddb37695334..9db0b4102b99 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -294,6 +294,7 @@ function BaseSelectionList( shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} rightHandSideComponent={rightHandSideComponent} keyForList={item.keyForList} + isMultilineSupported={isRowMultilineSupported} /> ); }; From b72a521c1290767455744e0e6da030f576e2da1c Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Wed, 28 Feb 2024 06:57:00 +0530 Subject: [PATCH 06/15] Pass custom numberOfLines to TextWithTooltip --- src/components/SelectionList/RadioListItem.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx index b39f014a193b..019cae84d156 100644 --- a/src/components/SelectionList/RadioListItem.tsx +++ b/src/components/SelectionList/RadioListItem.tsx @@ -45,9 +45,10 @@ function RadioListItem({ styles.optionDisplayName, isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, styles.sidebarLinkTextBold, - styles.pre, + isMultilineSupported ? styles.preWrap : styles.pre, item.alternateText ? styles.mb1 : null, ]} + numberOfLines={isMultilineSupported ? 2 : 1} /> {!!item.alternateText && ( From c140118d793b8400ca9f12f29c1cf0f92d603b99 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Wed, 28 Feb 2024 06:57:37 +0530 Subject: [PATCH 07/15] Add the missing prop comments in TextWithTooltip Props --- src/components/TextWithTooltip/types.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/TextWithTooltip/types.ts b/src/components/TextWithTooltip/types.ts index 426336851ada..9199cc34ad5f 100644 --- a/src/components/TextWithTooltip/types.ts +++ b/src/components/TextWithTooltip/types.ts @@ -1,8 +1,13 @@ import type {StyleProp, TextStyle} from 'react-native'; type TextWithTooltipProps = { + /** The text to display */ text: string; + + /** Whether to show the toolip text */ shouldShowTooltip: boolean; + + /** Additional text styles */ textStyles?: StyleProp; /** Custom number of lines for Text */ From 261ae17cdf57596d40fdae0da86e3541029861c9 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Wed, 28 Feb 2024 06:59:47 +0530 Subject: [PATCH 08/15] Run prettier --- src/components/TextWithTooltip/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TextWithTooltip/types.ts b/src/components/TextWithTooltip/types.ts index 9199cc34ad5f..262a1f7dba03 100644 --- a/src/components/TextWithTooltip/types.ts +++ b/src/components/TextWithTooltip/types.ts @@ -6,7 +6,7 @@ type TextWithTooltipProps = { /** Whether to show the toolip text */ shouldShowTooltip: boolean; - + /** Additional text styles */ textStyles?: StyleProp; From 3f4172ccc694821ec04301236ff4472a17d47e22 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi <64629613+neonbhai@users.noreply.github.com> Date: Wed, 28 Feb 2024 19:20:15 +0530 Subject: [PATCH 09/15] Add default prop value to numberOfLines Co-authored-by: Fedi Rajhi --- src/components/TextWithTooltip/index.native.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TextWithTooltip/index.native.tsx b/src/components/TextWithTooltip/index.native.tsx index 345f1fb770a5..f8f81cc7181c 100644 --- a/src/components/TextWithTooltip/index.native.tsx +++ b/src/components/TextWithTooltip/index.native.tsx @@ -2,7 +2,7 @@ import React from 'react'; import Text from '@components/Text'; import type TextWithTooltipProps from './types'; -function TextWithTooltip({text, textStyles, numberOfLines}: TextWithTooltipProps) { +function TextWithTooltip({text, textStyles, numberOfLines = 1}: TextWithTooltipProps) { return ( Date: Wed, 28 Feb 2024 19:22:08 +0530 Subject: [PATCH 10/15] Add default prop value to numberOfLines (web) Co-authored-by: Fedi Rajhi --- src/components/TextWithTooltip/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TextWithTooltip/index.tsx b/src/components/TextWithTooltip/index.tsx index 0b03c9fcc592..755959d52cfc 100644 --- a/src/components/TextWithTooltip/index.tsx +++ b/src/components/TextWithTooltip/index.tsx @@ -7,7 +7,7 @@ type LayoutChangeEvent = { target: HTMLElement; }; -function TextWithTooltip({text, shouldShowTooltip, textStyles, numberOfLines}: TextWithTooltipProps) { +function TextWithTooltip({text, shouldShowTooltip, textStyles, numberOfLines = 1}: TextWithTooltipProps) { const [showTooltip, setShowTooltip] = useState(false); return ( From 6d50cb5a8b12c514e82e267189e92641e7809f41 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi <64629613+neonbhai@users.noreply.github.com> Date: Wed, 28 Feb 2024 19:23:41 +0530 Subject: [PATCH 11/15] Remove null coalescing operator in favor of default value Co-authored-by: Fedi Rajhi --- src/components/TextWithTooltip/index.native.tsx | 2 +- src/components/TextWithTooltip/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/TextWithTooltip/index.native.tsx b/src/components/TextWithTooltip/index.native.tsx index f8f81cc7181c..3780df6362be 100644 --- a/src/components/TextWithTooltip/index.native.tsx +++ b/src/components/TextWithTooltip/index.native.tsx @@ -6,7 +6,7 @@ function TextWithTooltip({text, textStyles, numberOfLines = 1}: TextWithTooltipP return ( {text} diff --git a/src/components/TextWithTooltip/index.tsx b/src/components/TextWithTooltip/index.tsx index 755959d52cfc..96721488c6db 100644 --- a/src/components/TextWithTooltip/index.tsx +++ b/src/components/TextWithTooltip/index.tsx @@ -17,7 +17,7 @@ function TextWithTooltip({text, shouldShowTooltip, textStyles, numberOfLines = 1 > { const target = (e.nativeEvent as unknown as LayoutChangeEvent).target; if (!shouldShowTooltip) { From 4576f782b3ba52f4aa69f33fe6e327a7ed46d033 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi <64629613+neonbhai@users.noreply.github.com> Date: Wed, 28 Feb 2024 20:53:59 +0530 Subject: [PATCH 12/15] Update src/components/SelectionList/types.ts Co-authored-by: Puneet Lath --- src/components/SelectionList/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 550276166e9e..54728307fd41 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -38,7 +38,7 @@ type CommonListItemProps = { /** Styles for the checkbox wrapper view if select multiple option is on */ selectMultipleStyle?: StyleProp; - /** Whether to wrap large text up to 2 lines */ + /** Whether to wrap long text up to 2 lines */ isMultilineSupported?: boolean; }; From d928ea06a8bdfee4dd1068a88627d3cfdb30884f Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi <64629613+neonbhai@users.noreply.github.com> Date: Wed, 28 Feb 2024 20:54:06 +0530 Subject: [PATCH 13/15] Update src/components/SelectionList/types.ts Co-authored-by: Puneet Lath --- src/components/SelectionList/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 54728307fd41..0a550f95dbd4 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -87,7 +87,7 @@ type ListItem = { /** Whether this option should show subscript */ shouldShowSubscript?: boolean; - /** Whether to wrap large text up to 2 lines */ + /** Whether to wrap long text up to 2 lines */ isMultilineSupported?: boolean; }; From 0253712257c16b3b3a52b83a70775dc180a1a433 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi <64629613+neonbhai@users.noreply.github.com> Date: Wed, 28 Feb 2024 20:54:13 +0530 Subject: [PATCH 14/15] Update src/components/SelectionList/types.ts Co-authored-by: Puneet Lath --- src/components/SelectionList/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 0a550f95dbd4..620f1d4cb39b 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -265,7 +265,7 @@ type BaseSelectionListProps = Partial & { /** Styles for the list header wrapper */ listHeaderWrapperStyle?: StyleProp; - /** Whether to wrap large text up to 2 lines */ + /** Whether to wrap long text up to 2 lines */ isRowMultilineSupported?: boolean; }; From a3334e7590d6acdd4a94bd29b6cbd5f4d2ca7177 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi <64629613+neonbhai@users.noreply.github.com> Date: Wed, 28 Feb 2024 20:54:19 +0530 Subject: [PATCH 15/15] Update src/components/TextWithTooltip/types.ts Co-authored-by: Puneet Lath --- src/components/TextWithTooltip/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TextWithTooltip/types.ts b/src/components/TextWithTooltip/types.ts index 262a1f7dba03..19c0b0dca6ed 100644 --- a/src/components/TextWithTooltip/types.ts +++ b/src/components/TextWithTooltip/types.ts @@ -10,7 +10,7 @@ type TextWithTooltipProps = { /** Additional text styles */ textStyles?: StyleProp; - /** Custom number of lines for Text */ + /** Custom number of lines for text wrapping */ numberOfLines?: number; };