Skip to content

Commit a16deea

Browse files
lukewalczaklukewalczak
committed
feat: add container style prop
1 parent 23604c0 commit a16deea

File tree

7 files changed

+187
-101
lines changed

7 files changed

+187
-101
lines changed

‎src/components/List/ListItem.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,11 +63,15 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
6363
*/
6464
theme?: ThemeProp;
6565
/**
66-
* Style that is passed to the wrapping TouchableRipple element.
66+
* Style that is passed to the root TouchableRipple container.
6767
*/
6868
style?: StyleProp<ViewStyle>;
6969
/**
70-
* Style that is passed to the container wrapping title and descripton.
70+
* Style that is passed to the outermost container that wraps the entire content, including icons and text.
71+
*/
72+
containerStyle?: StyleProp<ViewStyle>;
73+
/**
74+
* Style that is passed to the content container, which wraps the title and description.
7175
*/
7276
contentStyle?: StyleProp<ViewStyle>;
7377
/**
@@ -144,6 +148,7 @@ const ListItem = (
144148
onPress,
145149
theme: themeOverrides,
146150
style,
151+
containerStyle,
147152
contentStyle,
148153
titleStyle,
149154
titleNumberOfLines = 1,
@@ -238,7 +243,7 @@ const ListItem = (
238243
theme={theme}
239244
testID={testID}
240245
>
241-
<View style={theme.isV3 ? styles.rowV3 : styles.row}>
246+
<View style={[theme.isV3 ? styles.rowV3 : styles.row, containerStyle]}>
242247
{left
243248
? left({
244249
color: descriptionColor,

‎src/components/Menu/MenuItem.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,21 @@ export type Props = {
6464
*/
6565
titleMaxFontSizeMultiplier?: number;
6666
/**
67+
* Style that is passed to the root TouchableRipple container.
6768
* @optional
6869
*/
6970
style?: StyleProp<ViewStyle>;
71+
/**
72+
* Style that is passed to the outermost container that wraps the entire content, including icons and text.
73+
*/
74+
containerStyle?: StyleProp<ViewStyle>;
75+
/**
76+
* Style that is passed to the content container, which wraps the title text.
77+
*/
7078
contentStyle?: StyleProp<ViewStyle>;
79+
/**
80+
* Style that is passed to the Title element.
81+
*/
7182
titleStyle?: StyleProp<TextStyle>;
7283
/**
7384
* Color of the ripple effect.
@@ -122,6 +133,7 @@ const MenuItem = ({
122133
background,
123134
onPress,
124135
style,
136+
containerStyle,
125137
contentStyle,
126138
titleStyle,
127139
rippleColor: customRippleColor,
@@ -176,7 +188,7 @@ const MenuItem = ({
176188
accessibilityState={newAccessibilityState}
177189
rippleColor={rippleColor}
178190
>
179-
<View style={styles.row}>
191+
<View style={[styles.row, containerStyle]}>
180192
{leadingIcon ? (
181193
<View
182194
style={[!isV3 && styles.item, { width: iconWidth }]}

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -205,11 +205,14 @@ exports[`renders expanded accordion 1`] = `
205205
>
206206
<View
207207
style={
208-
{
209-
"flexDirection": "row",
210-
"marginVertical": 6,
211-
"width": "100%",
212-
}
208+
[
209+
{
210+
"flexDirection": "row",
211+
"marginVertical": 6,
212+
"width": "100%",
213+
},
214+
undefined,
215+
]
213216
}
214217
>
215218
<View

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

Lines changed: 56 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,14 @@ exports[`renders list item with custom description 1`] = `
4747
>
4848
<View
4949
style={
50-
{
51-
"flexDirection": "row",
52-
"marginVertical": 6,
53-
"width": "100%",
54-
}
50+
[
51+
{
52+
"flexDirection": "row",
53+
"marginVertical": 6,
54+
"width": "100%",
55+
},
56+
undefined,
57+
]
5558
}
5659
>
5760
<View
@@ -374,11 +377,14 @@ exports[`renders list item with custom title and description styles 1`] = `
374377
>
375378
<View
376379
style={
377-
{
378-
"flexDirection": "row",
379-
"marginVertical": 6,
380-
"width": "100%",
381-
}
380+
[
381+
{
382+
"flexDirection": "row",
383+
"marginVertical": 6,
384+
"width": "100%",
385+
},
386+
undefined,
387+
]
382388
}
383389
>
384390
<View
@@ -516,11 +522,14 @@ exports[`renders list item with left and right items 1`] = `
516522
>
517523
<View
518524
style={
519-
{
520-
"flexDirection": "row",
521-
"marginVertical": 6,
522-
"width": "100%",
523-
}
525+
[
526+
{
527+
"flexDirection": "row",
528+
"marginVertical": 6,
529+
"width": "100%",
530+
},
531+
undefined,
532+
]
524533
}
525534
>
526535
<Text>
@@ -710,11 +719,14 @@ exports[`renders list item with left item 1`] = `
710719
>
711720
<View
712721
style={
713-
{
714-
"flexDirection": "row",
715-
"marginVertical": 6,
716-
"width": "100%",
717-
}
722+
[
723+
{
724+
"flexDirection": "row",
725+
"marginVertical": 6,
726+
"width": "100%",
727+
},
728+
undefined,
729+
]
718730
}
719731
>
720732
<View
@@ -870,11 +882,14 @@ exports[`renders list item with right item 1`] = `
870882
>
871883
<View
872884
style={
873-
{
874-
"flexDirection": "row",
875-
"marginVertical": 6,
876-
"width": "100%",
877-
}
885+
[
886+
{
887+
"flexDirection": "row",
888+
"marginVertical": 6,
889+
"width": "100%",
890+
},
891+
undefined,
892+
]
878893
}
879894
>
880895
<View
@@ -979,11 +994,14 @@ exports[`renders list item with title and description 1`] = `
979994
>
980995
<View
981996
style={
982-
{
983-
"flexDirection": "row",
984-
"marginVertical": 6,
985-
"width": "100%",
986-
}
997+
[
998+
{
999+
"flexDirection": "row",
1000+
"marginVertical": 6,
1001+
"width": "100%",
1002+
},
1003+
undefined,
1004+
]
9871005
}
9881006
>
9891007
<View
@@ -1117,11 +1135,14 @@ exports[`renders with a description with typeof number 1`] = `
11171135
>
11181136
<View
11191137
style={
1120-
{
1121-
"flexDirection": "row",
1122-
"marginVertical": 6,
1123-
"width": "100%",
1124-
}
1138+
[
1139+
{
1140+
"flexDirection": "row",
1141+
"marginVertical": 6,
1142+
"width": "100%",
1143+
},
1144+
undefined,
1145+
]
11251146
}
11261147
>
11271148
<View

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

Lines changed: 48 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -264,11 +264,14 @@ exports[`renders list section with custom title style 1`] = `
264264
>
265265
<View
266266
style={
267-
{
268-
"flexDirection": "row",
269-
"marginVertical": 6,
270-
"width": "100%",
271-
}
267+
[
268+
{
269+
"flexDirection": "row",
270+
"marginVertical": 6,
271+
"width": "100%",
272+
},
273+
undefined,
274+
]
272275
}
273276
>
274277
<View
@@ -421,11 +424,14 @@ exports[`renders list section with custom title style 1`] = `
421424
>
422425
<View
423426
style={
424-
{
425-
"flexDirection": "row",
426-
"marginVertical": 6,
427-
"width": "100%",
428-
}
427+
[
428+
{
429+
"flexDirection": "row",
430+
"marginVertical": 6,
431+
"width": "100%",
432+
},
433+
undefined,
434+
]
429435
}
430436
>
431437
<View
@@ -797,11 +803,14 @@ exports[`renders list section with subheader 1`] = `
797803
>
798804
<View
799805
style={
800-
{
801-
"flexDirection": "row",
802-
"marginVertical": 6,
803-
"width": "100%",
804-
}
806+
[
807+
{
808+
"flexDirection": "row",
809+
"marginVertical": 6,
810+
"width": "100%",
811+
},
812+
undefined,
813+
]
805814
}
806815
>
807816
<View
@@ -954,11 +963,14 @@ exports[`renders list section with subheader 1`] = `
954963
>
955964
<View
956965
style={
957-
{
958-
"flexDirection": "row",
959-
"marginVertical": 6,
960-
"width": "100%",
961-
}
966+
[
967+
{
968+
"flexDirection": "row",
969+
"marginVertical": 6,
970+
"width": "100%",
971+
},
972+
undefined,
973+
]
962974
}
963975
>
964976
<View
@@ -1290,11 +1302,14 @@ exports[`renders list section without subheader 1`] = `
12901302
>
12911303
<View
12921304
style={
1293-
{
1294-
"flexDirection": "row",
1295-
"marginVertical": 6,
1296-
"width": "100%",
1297-
}
1305+
[
1306+
{
1307+
"flexDirection": "row",
1308+
"marginVertical": 6,
1309+
"width": "100%",
1310+
},
1311+
undefined,
1312+
]
12981313
}
12991314
>
13001315
<View
@@ -1447,11 +1462,14 @@ exports[`renders list section without subheader 1`] = `
14471462
>
14481463
<View
14491464
style={
1450-
{
1451-
"flexDirection": "row",
1452-
"marginVertical": 6,
1453-
"width": "100%",
1454-
}
1465+
[
1466+
{
1467+
"flexDirection": "row",
1468+
"marginVertical": 6,
1469+
"width": "100%",
1470+
},
1471+
undefined,
1472+
]
14551473
}
14561474
>
14571475
<View

0 commit comments

Comments
 (0)