fix: custom status text wrap in drawer (#6778)

Co-authored-by: Diego Mello <[email protected]>

Author: Yaddalapalli-Charan-Kumar-Naidu

app/containers/List/List.stories.tsx

@@ -21,6 +21,8 @@ export const TitleAndSubtitle = () => (
 		<List.Separator />
 		<List.Item title={longText} subtitle={longText} translateTitle={false} translateSubtitle={false} testID='test-id' />
 		<List.Separator />
+		<List.Item title={longText} subtitle={longText} translateTitle={false} translateSubtitle={false} numberOfLines={1} />
+		<List.Separator />
 	</List.Container>
 );
 

app/containers/List/ListItem.tsx

@@ -62,16 +62,16 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface IListTitle extends Pick<IListItemContent, 'title' | 'color' | 'translateTitle' | 'styleTitle'> {}
+interface IListTitle extends Pick<IListItemContent, 'title' | 'color' | 'translateTitle' | 'styleTitle' | 'numberOfLines'> {}
 
-const ListTitle = ({ title, color, styleTitle, translateTitle }: IListTitle) => {
+const ListTitle = ({ title, color, styleTitle, translateTitle, numberOfLines }: IListTitle) => {
 	'use memo';
 
 	const { colors } = useTheme();
 	switch (typeof title) {
 		case 'string':
 			return (
-				<Text style={[styles.title, styleTitle, { color: color || colors.fontDefault }]}>
+				<Text numberOfLines={numberOfLines} style={[styles.title, styleTitle, { color: color || colors.fontDefault }]}>
 					{translateTitle && title ? I18n.t(title) : title}
 				</Text>
 			);
@@ -102,6 +102,7 @@ interface IListItemContent {
 	additionalAcessibilityLabel?: string | boolean;
 	accessibilityRole?: AccessibilityRole;
 	additionalAcessibilityLabelCheck?: boolean;
+	numberOfLines?: number;
 }
 
 const Content = React.memo(
@@ -123,7 +124,8 @@ const Content = React.memo(
 		additionalAcessibilityLabel,
 		additionalAcessibilityLabelCheck,
 		accessibilityRole,
-		accessibilityLabel
+		accessibilityLabel,
+		numberOfLines
 	}: IListItemContent) => {
 		'use memo';
 
@@ -165,7 +167,15 @@ const Content = React.memo(
 				{title || subtitle ? (
 					<View style={styles.textContainer}>
 						<View style={styles.textAlertContainer}>
-							{title ? <ListTitle title={title} color={color} styleTitle={styleTitle} translateTitle={translateTitle} /> : null}
+							{title ? (
+								<ListTitle
+									title={title}
+									color={color}
+									styleTitle={styleTitle}
+									translateTitle={translateTitle}
+									numberOfLines={numberOfLines}
+								/>
+							) : null}
 							{alert ? (
 								<CustomIcon name='info' size={ICON_SIZE} color={colors.buttonBackgroundDangerDefault} style={styles.alertIcon} />
 							) : null}

app/containers/List/__snapshots__/List.test.tsx.snap

@@ -2469,6 +2469,107 @@ exports[`Story Snapshots: TitleAndSubtitle should match snapshot 1`] = `
         ]
       }
     />
+    <View
+      style={
+        {
+          "backgroundColor": "#FFFFFF",
+        }
+      }
+    >
+      <View
+        accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
+        accessibilityRole="button"
+        accessible={true}
+        style={
+          [
+            {
+              "alignItems": "center",
+              "flex": 1,
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "paddingHorizontal": 12,
+            },
+            undefined,
+            {
+              "height": 46,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "flex": 1,
+              "justifyContent": "center",
+            }
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+              }
+            }
+          >
+            <Text
+              numberOfLines={1}
+              style={
+                [
+                  {
+                    "backgroundColor": "transparent",
+                    "flex": 1,
+                    "flexShrink": 1,
+                    "fontFamily": "Inter",
+                    "fontSize": 16,
+                    "fontWeight": "500",
+                    "textAlign": "left",
+                  },
+                  undefined,
+                  {
+                    "color": "#2F343D",
+                  },
+                ]
+              }
+            >
+              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+            </Text>
+          </View>
+          <Text
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 14,
+                  "fontWeight": "400",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#6C727A",
+                },
+              ]
+            }
+          >
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+          </Text>
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        [
+          {
+            "height": 0.5,
+          },
+          undefined,
+          {
+            "backgroundColor": "#CBCED1",
+          },
+        ]
+      }
+    />
   </View>
 </RCTScrollView>
 `;

app/views/SidebarView/components/CustomStatus.tsx

@@ -72,6 +72,7 @@ const CustomStatus = () => {
 				onPress={() => (presenceBroadcastDisabled ? onPressPresenceLearnMore() : sidebarNavigate('StatusView'))}
 				translateTitle={!statusText}
 				testID={`sidebar-custom-status-${status}`}
+				numberOfLines={1}
 			/>
 			<List.Separator />
 		</>