Skip to content

Commit c42cfa2

Browse files
lukewalczaklukewalczak
authored
feat: add contentStyle to the list item title and description container (#4205)
1 parent bdc2cbc commit c42cfa2

File tree

6 files changed

+100
-3
lines changed

6 files changed

+100
-3
lines changed

‎src/components/List/ListItem.tsx

+17-1
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,10 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
6666
* Style that is passed to the wrapping TouchableRipple element.
6767
*/
6868
style?: StyleProp<ViewStyle>;
69+
/**
70+
* Style that is passed to the container wrapping title and descripton.
71+
*/
72+
contentStyle?: StyleProp<ViewStyle>;
6973
/**
7074
* Style that is passed to Title element.
7175
*/
@@ -104,6 +108,10 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
104108
* Specifies the largest possible scale a description font can reach.
105109
*/
106110
descriptionMaxFontSizeMultiplier?: number;
111+
/**
112+
* TestID used for testing purposes
113+
*/
114+
testID?: string;
107115
};
108116

109117
/**
@@ -136,6 +144,7 @@ const ListItem = (
136144
onPress,
137145
theme: themeOverrides,
138146
style,
147+
contentStyle,
139148
titleStyle,
140149
titleNumberOfLines = 1,
141150
descriptionNumberOfLines = 2,
@@ -144,6 +153,7 @@ const ListItem = (
144153
descriptionStyle,
145154
descriptionMaxFontSizeMultiplier,
146155
titleMaxFontSizeMultiplier,
156+
testID,
147157
...rest
148158
}: Props,
149159
ref: React.ForwardedRef<View>
@@ -226,6 +236,7 @@ const ListItem = (
226236
style={[theme.isV3 ? styles.containerV3 : styles.container, style]}
227237
onPress={onPress}
228238
theme={theme}
239+
testID={testID}
229240
>
230241
<View style={theme.isV3 ? styles.rowV3 : styles.row}>
231242
{left
@@ -235,7 +246,12 @@ const ListItem = (
235246
})
236247
: null}
237248
<View
238-
style={[theme.isV3 ? styles.itemV3 : styles.item, styles.content]}
249+
style={[
250+
theme.isV3 ? styles.itemV3 : styles.item,
251+
styles.content,
252+
contentStyle,
253+
]}
254+
testID={`${testID}-content`}
239255
>
240256
{renderTitle()}
241257

‎src/components/__tests__/ListItem.test.tsx

+34-2
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,20 @@ const styles = StyleSheet.create({
1717
description: {
1818
color: red500,
1919
},
20+
content: {
21+
paddingLeft: 0,
22+
},
2023
});
2124

25+
const testID = 'list-item';
26+
2227
it('renders list item with title and description', () => {
2328
const tree = render(
24-
<ListItem title="First Item" description="Description for first item" />
29+
<ListItem
30+
title="First Item"
31+
testID={testID}
32+
description="Description for first item"
33+
/>
2534
).toJSON();
2635

2736
expect(tree).toMatchSnapshot();
@@ -31,6 +40,7 @@ it('renders list item with left item', () => {
3140
const tree = render(
3241
<ListItem
3342
title="First Item"
43+
testID={testID}
3444
left={(props) => <ListIcon {...props} icon="folder" />}
3545
/>
3646
).toJSON();
@@ -40,7 +50,11 @@ it('renders list item with left item', () => {
4050

4151
it('renders list item with right item', () => {
4252
const tree = render(
43-
<ListItem title="First Item" right={() => <Text>GG</Text>} />
53+
<ListItem
54+
title="First Item"
55+
testID={testID}
56+
right={() => <Text>GG</Text>}
57+
/>
4458
).toJSON();
4559

4660
expect(tree).toMatchSnapshot();
@@ -51,6 +65,7 @@ it('renders list item with left and right items', () => {
5165
<ListItem
5266
title="First Item"
5367
description="Item description"
68+
testID={testID}
5469
left={() => <Text>GG</Text>}
5570
right={(props) => <ListIcon {...props} icon="folder" />}
5671
/>
@@ -64,6 +79,7 @@ it('renders list item with custom title and description styles', () => {
6479
<ListItem
6580
title="First Item"
6681
description="Item description"
82+
testID={testID}
6783
titleStyle={styles.title}
6884
descriptionStyle={styles.description}
6985
/>
@@ -93,6 +109,7 @@ it('renders list item with custom description', () => {
93109
</View>
94110
</View>
95111
)}
112+
testID={testID}
96113
/>
97114
).toJSON();
98115

@@ -106,6 +123,7 @@ it('renders with a description with typeof number', () => {
106123
description={123}
107124
titleStyle={styles.title}
108125
descriptionStyle={styles.description}
126+
testID={testID}
109127
/>
110128
).toJSON();
111129

@@ -120,10 +138,24 @@ it('calling onPress on ListItem right component', () => {
120138
<ListItem
121139
title="First Item"
122140
description="Item description"
141+
testID={testID}
123142
right={() => <IconButton icon="pencil" onPress={onPress} />}
124143
/>
125144
);
126145

127146
fireEvent(getByTestId('icon-button'), 'onPress');
128147
expect(onPress).toHaveBeenCalledTimes(1);
129148
});
149+
150+
it('renders list item with custom content style', () => {
151+
const { getByTestId } = render(
152+
<ListItem
153+
title="First Item"
154+
description="Item description"
155+
contentStyle={styles.content}
156+
testID={testID}
157+
/>
158+
);
159+
160+
expect(getByTestId('list-item-content')).toHaveStyle(styles.content);
161+
});

‎src/components/__tests__/ListSection.test.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,19 @@ const styles = StyleSheet.create({
1515
},
1616
});
1717

18+
const testID = 'list-item';
19+
1820
it('renders list section without subheader', () => {
1921
const tree = render(
2022
<ListSection>
2123
<ListItem
2224
title="First Item"
25+
testID={testID}
2326
left={(props) => <ListIcon {...props} icon="folder" />}
2427
/>
2528
<ListItem
2629
title="Second Item"
30+
testID={testID}
2731
left={(props) => <ListIcon {...props} icon="folder" />}
2832
/>
2933
</ListSection>
@@ -38,10 +42,12 @@ it('renders list section with subheader', () => {
3842
<ListSubheader>Some title</ListSubheader>
3943
<ListItem
4044
title="First Item"
45+
testID={testID}
4146
left={(props) => <ListIcon {...props} icon="folder" />}
4247
/>
4348
<ListItem
4449
title="Second Item"
50+
testID={testID}
4551
left={(props) => <ListIcon {...props} icon="folder" />}
4652
/>
4753
</ListSection>
@@ -55,10 +61,12 @@ it('renders list section with custom title style', () => {
5561
<ListSection title="Some title" titleStyle={styles.itemColor}>
5662
<ListItem
5763
title="First Item"
64+
testID={testID}
5865
left={(props) => <ListIcon {...props} icon="folder" />}
5966
/>
6067
<ListItem
6168
title="Second Item"
69+
testID={testID}
6270
left={(props) => <ListIcon {...props} icon="folder" />}
6371
/>
6472
</ListSection>

‎src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap

+2
Original file line numberDiff line numberDiff line change
@@ -223,8 +223,10 @@ exports[`renders expanded accordion 1`] = `
223223
"flexShrink": 1,
224224
"justifyContent": "center",
225225
},
226+
undefined,
226227
]
227228
}
229+
testID="undefined-content"
228230
>
229231
<Text
230232
numberOfLines={1}

‎src/components/__tests__/__snapshots__/ListItem.test.tsx.snap

+21
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ exports[`renders list item with custom description 1`] = `
4343
],
4444
]
4545
}
46+
testID="list-item"
4647
>
4748
<View
4849
style={
@@ -64,8 +65,10 @@ exports[`renders list item with custom description 1`] = `
6465
"flexShrink": 1,
6566
"justifyContent": "center",
6667
},
68+
undefined,
6769
]
6870
}
71+
testID="list-item-content"
6972
>
7073
<Text
7174
numberOfLines={1}
@@ -367,6 +370,7 @@ exports[`renders list item with custom title and description styles 1`] = `
367370
],
368371
]
369372
}
373+
testID="list-item"
370374
>
371375
<View
372376
style={
@@ -388,8 +392,10 @@ exports[`renders list item with custom title and description styles 1`] = `
388392
"flexShrink": 1,
389393
"justifyContent": "center",
390394
},
395+
undefined,
391396
]
392397
}
398+
testID="list-item-content"
393399
>
394400
<Text
395401
numberOfLines={1}
@@ -506,6 +512,7 @@ exports[`renders list item with left and right items 1`] = `
506512
],
507513
]
508514
}
515+
testID="list-item"
509516
>
510517
<View
511518
style={
@@ -530,8 +537,10 @@ exports[`renders list item with left and right items 1`] = `
530537
"flexShrink": 1,
531538
"justifyContent": "center",
532539
},
540+
undefined,
533541
]
534542
}
543+
testID="list-item-content"
535544
>
536545
<Text
537546
numberOfLines={1}
@@ -697,6 +706,7 @@ exports[`renders list item with left item 1`] = `
697706
],
698707
]
699708
}
709+
testID="list-item"
700710
>
701711
<View
702712
style={
@@ -772,8 +782,10 @@ exports[`renders list item with left item 1`] = `
772782
"flexShrink": 1,
773783
"justifyContent": "center",
774784
},
785+
undefined,
775786
]
776787
}
788+
testID="list-item-content"
777789
>
778790
<Text
779791
numberOfLines={1}
@@ -854,6 +866,7 @@ exports[`renders list item with right item 1`] = `
854866
],
855867
]
856868
}
869+
testID="list-item"
857870
>
858871
<View
859872
style={
@@ -875,8 +888,10 @@ exports[`renders list item with right item 1`] = `
875888
"flexShrink": 1,
876889
"justifyContent": "center",
877890
},
891+
undefined,
878892
]
879893
}
894+
testID="list-item-content"
880895
>
881896
<Text
882897
numberOfLines={1}
@@ -960,6 +975,7 @@ exports[`renders list item with title and description 1`] = `
960975
],
961976
]
962977
}
978+
testID="list-item"
963979
>
964980
<View
965981
style={
@@ -981,8 +997,10 @@ exports[`renders list item with title and description 1`] = `
981997
"flexShrink": 1,
982998
"justifyContent": "center",
983999
},
1000+
undefined,
9841001
]
9851002
}
1003+
testID="list-item-content"
9861004
>
9871005
<Text
9881006
numberOfLines={1}
@@ -1095,6 +1113,7 @@ exports[`renders with a description with typeof number 1`] = `
10951113
],
10961114
]
10971115
}
1116+
testID="list-item"
10981117
>
10991118
<View
11001119
style={
@@ -1116,8 +1135,10 @@ exports[`renders with a description with typeof number 1`] = `
11161135
"flexShrink": 1,
11171136
"justifyContent": "center",
11181137
},
1138+
undefined,
11191139
]
11201140
}
1141+
testID="list-item-content"
11211142
>
11221143
<Text
11231144
numberOfLines={1}

0 commit comments

Comments
 (0)