feat: add contentStyle to the list item title and description contain…

…er (#4205)
callstack · Jan 8, 2024 · c42cfa2 · c42cfa2
1 parent bdc2cbc
commit c42cfa2
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 3 deletions.
diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx
@@ -66,6 +66,10 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    * Style that is passed to the wrapping TouchableRipple element.
    */
   style?: StyleProp<ViewStyle>;
+  /**
+   * Style that is passed to the container wrapping title and descripton.
+   */
+  contentStyle?: StyleProp<ViewStyle>;
   /**
    * Style that is passed to Title element.
    */
@@ -104,6 +108,10 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    * Specifies the largest possible scale a description font can reach.
    */
   descriptionMaxFontSizeMultiplier?: number;
+  /**
+   * TestID used for testing purposes
+   */
+  testID?: string;
 };
 
 /**
@@ -136,6 +144,7 @@ const ListItem = (
     onPress,
     theme: themeOverrides,
     style,
+    contentStyle,
     titleStyle,
     titleNumberOfLines = 1,
     descriptionNumberOfLines = 2,
@@ -144,6 +153,7 @@ const ListItem = (
     descriptionStyle,
     descriptionMaxFontSizeMultiplier,
     titleMaxFontSizeMultiplier,
+    testID,
     ...rest
   }: Props,
   ref: React.ForwardedRef<View>
@@ -226,6 +236,7 @@ const ListItem = (
       style={[theme.isV3 ? styles.containerV3 : styles.container, style]}
       onPress={onPress}
       theme={theme}
+      testID={testID}
     >
       <View style={theme.isV3 ? styles.rowV3 : styles.row}>
         {left
@@ -235,7 +246,12 @@ const ListItem = (
             })
           : null}
         <View
-          style={[theme.isV3 ? styles.itemV3 : styles.item, styles.content]}
+          style={[
+            theme.isV3 ? styles.itemV3 : styles.item,
+            styles.content,
+            contentStyle,
+          ]}
+          testID={`${testID}-content`}
         >
           {renderTitle()}
 

diff --git a/src/components/__tests__/ListItem.test.tsx b/src/components/__tests__/ListItem.test.tsx
@@ -17,11 +17,20 @@ const styles = StyleSheet.create({
   description: {
     color: red500,
   },
+  content: {
+    paddingLeft: 0,
+  },
 });
 
+const testID = 'list-item';
+
 it('renders list item with title and description', () => {
   const tree = render(
-    <ListItem title="First Item" description="Description for first item" />
+    <ListItem
+      title="First Item"
+      testID={testID}
+      description="Description for first item"
+    />
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
@@ -31,6 +40,7 @@ it('renders list item with left item', () => {
   const tree = render(
     <ListItem
       title="First Item"
+      testID={testID}
       left={(props) => <ListIcon {...props} icon="folder" />}
     />
   ).toJSON();
@@ -40,7 +50,11 @@ it('renders list item with left item', () => {
 
 it('renders list item with right item', () => {
   const tree = render(
-    <ListItem title="First Item" right={() => <Text>GG</Text>} />
+    <ListItem
+      title="First Item"
+      testID={testID}
+      right={() => <Text>GG</Text>}
+    />
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
@@ -51,6 +65,7 @@ it('renders list item with left and right items', () => {
     <ListItem
       title="First Item"
       description="Item description"
+      testID={testID}
       left={() => <Text>GG</Text>}
       right={(props) => <ListIcon {...props} icon="folder" />}
     />
@@ -64,6 +79,7 @@ it('renders list item with custom title and description styles', () => {
     <ListItem
       title="First Item"
       description="Item description"
+      testID={testID}
       titleStyle={styles.title}
       descriptionStyle={styles.description}
     />
@@ -93,6 +109,7 @@ it('renders list item with custom description', () => {
           </View>
         </View>
       )}
+      testID={testID}
     />
   ).toJSON();
 
@@ -106,6 +123,7 @@ it('renders with a description with typeof number', () => {
       description={123}
       titleStyle={styles.title}
       descriptionStyle={styles.description}
+      testID={testID}
     />
   ).toJSON();
 
@@ -120,10 +138,24 @@ it('calling onPress on ListItem right component', () => {
     <ListItem
       title="First Item"
       description="Item description"
+      testID={testID}
       right={() => <IconButton icon="pencil" onPress={onPress} />}
     />
   );
 
   fireEvent(getByTestId('icon-button'), 'onPress');
   expect(onPress).toHaveBeenCalledTimes(1);
 });
+
+it('renders list item with custom content style', () => {
+  const { getByTestId } = render(
+    <ListItem
+      title="First Item"
+      description="Item description"
+      contentStyle={styles.content}
+      testID={testID}
+    />
+  );
+
+  expect(getByTestId('list-item-content')).toHaveStyle(styles.content);
+});
diff --git a/src/components/__tests__/ListSection.test.tsx b/src/components/__tests__/ListSection.test.tsx
@@ -15,15 +15,19 @@ const styles = StyleSheet.create({
   },
 });
 
+const testID = 'list-item';
+
 it('renders list section without subheader', () => {
   const tree = render(
     <ListSection>
       <ListItem
         title="First Item"
+        testID={testID}
         left={(props) => <ListIcon {...props} icon="folder" />}
       />
       <ListItem
         title="Second Item"
+        testID={testID}
         left={(props) => <ListIcon {...props} icon="folder" />}
       />
     </ListSection>
@@ -38,10 +42,12 @@ it('renders list section with subheader', () => {
       <ListSubheader>Some title</ListSubheader>
       <ListItem
         title="First Item"
+        testID={testID}
         left={(props) => <ListIcon {...props} icon="folder" />}
       />
       <ListItem
         title="Second Item"
+        testID={testID}
         left={(props) => <ListIcon {...props} icon="folder" />}
       />
     </ListSection>
@@ -55,10 +61,12 @@ it('renders list section with custom title style', () => {
     <ListSection title="Some title" titleStyle={styles.itemColor}>
       <ListItem
         title="First Item"
+        testID={testID}
         left={(props) => <ListIcon {...props} icon="folder" />}
       />
       <ListItem
         title="Second Item"
+        testID={testID}
         left={(props) => <ListIcon {...props} icon="folder" />}
       />
     </ListSection>

diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap
@@ -223,8 +223,10 @@ exports[`renders expanded accordion 1`] = `
               "flexShrink": 1,
               "justifyContent": "center",
             },
+            undefined,
           ]
         }
+        testID="undefined-content"
       >
         <Text
           numberOfLines={1}

diff --git a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
@@ -43,6 +43,7 @@ exports[`renders list item with custom description 1`] = `
       ],
     ]
   }
+  testID="list-item"
 >
   <View
     style={
@@ -64,8 +65,10 @@ exports[`renders list item with custom description 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
+          undefined,
         ]
       }
+      testID="list-item-content"
     >
       <Text
         numberOfLines={1}
@@ -367,6 +370,7 @@ exports[`renders list item with custom title and description styles 1`] = `
       ],
     ]
   }
+  testID="list-item"
 >
   <View
     style={
@@ -388,8 +392,10 @@ exports[`renders list item with custom title and description styles 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
+          undefined,
         ]
       }
+      testID="list-item-content"
     >
       <Text
         numberOfLines={1}
@@ -506,6 +512,7 @@ exports[`renders list item with left and right items 1`] = `
       ],
     ]
   }
+  testID="list-item"
 >
   <View
     style={
@@ -530,8 +537,10 @@ exports[`renders list item with left and right items 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
+          undefined,
         ]
       }
+      testID="list-item-content"
     >
       <Text
         numberOfLines={1}
@@ -697,6 +706,7 @@ exports[`renders list item with left item 1`] = `
       ],
     ]
   }
+  testID="list-item"
 >
   <View
     style={
@@ -772,8 +782,10 @@ exports[`renders list item with left item 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
+          undefined,
         ]
       }
+      testID="list-item-content"
     >
       <Text
         numberOfLines={1}
@@ -854,6 +866,7 @@ exports[`renders list item with right item 1`] = `
       ],
     ]
   }
+  testID="list-item"
 >
   <View
     style={
@@ -875,8 +888,10 @@ exports[`renders list item with right item 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
+          undefined,
         ]
       }
+      testID="list-item-content"
     >
       <Text
         numberOfLines={1}
@@ -960,6 +975,7 @@ exports[`renders list item with title and description 1`] = `
       ],
     ]
   }
+  testID="list-item"
 >
   <View
     style={
@@ -981,8 +997,10 @@ exports[`renders list item with title and description 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
+          undefined,
         ]
       }
+      testID="list-item-content"
     >
       <Text
         numberOfLines={1}
@@ -1095,6 +1113,7 @@ exports[`renders with a description with typeof number 1`] = `
       ],
     ]
   }
+  testID="list-item"
 >
   <View
     style={
@@ -1116,8 +1135,10 @@ exports[`renders with a description with typeof number 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
+          undefined,
         ]
       }
+      testID="list-item-content"
     >
       <Text
         numberOfLines={1}