Skip to content

Commit 95c9390

Browse files
lukewalczaklukewalczak
authored
feat: add container style prop (#4691)
* feat: add container style prop * feat: add container style prop to list accordion
1 parent 218cc32 commit 95c9390

8 files changed

Lines changed: 244 additions & 124 deletions

File tree

‎src/components/List/ListAccordion.tsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,17 @@ export type Props = {
7272
*/
7373
background?: PressableAndroidRippleConfig;
7474
/**
75-
* Style that is passed to the wrapping TouchableRipple element.
75+
* Style that is passed to the root TouchableRipple container.
7676
*/
7777
style?: StyleProp<ViewStyle>;
78+
/**
79+
* Style that is passed to the outermost container that wraps the entire content, including left and right items and both title and description.
80+
*/
81+
containerStyle?: StyleProp<ViewStyle>;
82+
/**
83+
* Style that is passed to the content container, which wraps the title and description.
84+
*/
85+
contentStyle?: StyleProp<ViewStyle>;
7886
/**
7987
* Style that is passed to Title element.
8088
*/
@@ -173,6 +181,8 @@ const ListAccordion = ({
173181
descriptionNumberOfLines = 2,
174182
rippleColor: customRippleColor,
175183
style,
184+
containerStyle,
185+
contentStyle,
176186
id,
177187
testID,
178188
background,
@@ -252,7 +262,7 @@ const ListAccordion = ({
252262
borderless
253263
>
254264
<View
255-
style={theme.isV3 ? styles.rowV3 : styles.row}
265+
style={[theme.isV3 ? styles.rowV3 : styles.row, containerStyle]}
256266
pointerEvents={pointerEvents}
257267
>
258268
{left
@@ -262,7 +272,11 @@ const ListAccordion = ({
262272
})
263273
: null}
264274
<View
265-
style={[theme.isV3 ? styles.itemV3 : styles.item, styles.content]}
275+
style={[
276+
theme.isV3 ? styles.itemV3 : styles.item,
277+
styles.content,
278+
contentStyle,
279+
]}
266280
>
267281
<Text
268282
selectable={false}

‎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 left and right items and both title and description.
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 leading and trailing icons and title 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: 48 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,13 @@ exports[`renders expanded accordion 1`] = `
5858
<View
5959
pointerEvents="none"
6060
style={
61-
{
62-
"flexDirection": "row",
63-
"marginVertical": 6,
64-
}
61+
[
62+
{
63+
"flexDirection": "row",
64+
"marginVertical": 6,
65+
},
66+
undefined,
67+
]
6568
}
6669
>
6770
<View
@@ -74,6 +77,7 @@ exports[`renders expanded accordion 1`] = `
7477
"flex": 1,
7578
"justifyContent": "center",
7679
},
80+
undefined,
7781
]
7882
}
7983
>
@@ -205,11 +209,14 @@ exports[`renders expanded accordion 1`] = `
205209
>
206210
<View
207211
style={
208-
{
209-
"flexDirection": "row",
210-
"marginVertical": 6,
211-
"width": "100%",
212-
}
212+
[
213+
{
214+
"flexDirection": "row",
215+
"marginVertical": 6,
216+
"width": "100%",
217+
},
218+
undefined,
219+
]
213220
}
214221
>
215222
<View
@@ -323,10 +330,13 @@ exports[`renders list accordion with children 1`] = `
323330
<View
324331
pointerEvents="none"
325332
style={
326-
{
327-
"flexDirection": "row",
328-
"marginVertical": 6,
329-
}
333+
[
334+
{
335+
"flexDirection": "row",
336+
"marginVertical": 6,
337+
},
338+
undefined,
339+
]
330340
}
331341
>
332342
<View
@@ -393,6 +403,7 @@ exports[`renders list accordion with children 1`] = `
393403
"flex": 1,
394404
"justifyContent": "center",
395405
},
406+
undefined,
396407
]
397408
}
398409
>
@@ -540,10 +551,13 @@ exports[`renders list accordion with custom title and description styles 1`] = `
540551
<View
541552
pointerEvents="none"
542553
style={
543-
{
544-
"flexDirection": "row",
545-
"marginVertical": 6,
546-
}
554+
[
555+
{
556+
"flexDirection": "row",
557+
"marginVertical": 6,
558+
},
559+
undefined,
560+
]
547561
}
548562
>
549563
<View
@@ -556,6 +570,7 @@ exports[`renders list accordion with custom title and description styles 1`] = `
556570
"flex": 1,
557571
"justifyContent": "center",
558572
},
573+
undefined,
559574
]
560575
}
561576
>
@@ -743,10 +758,13 @@ exports[`renders list accordion with left items 1`] = `
743758
<View
744759
pointerEvents="none"
745760
style={
746-
{
747-
"flexDirection": "row",
748-
"marginVertical": 6,
749-
}
761+
[
762+
{
763+
"flexDirection": "row",
764+
"marginVertical": 6,
765+
},
766+
undefined,
767+
]
750768
}
751769
>
752770
<View
@@ -813,6 +831,7 @@ exports[`renders list accordion with left items 1`] = `
813831
"flex": 1,
814832
"justifyContent": "center",
815833
},
834+
undefined,
816835
]
817836
}
818837
>
@@ -960,10 +979,13 @@ exports[`renders multiline list accordion 1`] = `
960979
<View
961980
pointerEvents="none"
962981
style={
963-
{
964-
"flexDirection": "row",
965-
"marginVertical": 6,
966-
}
982+
[
983+
{
984+
"flexDirection": "row",
985+
"marginVertical": 6,
986+
},
987+
undefined,
988+
]
967989
}
968990
>
969991
<View
@@ -976,6 +998,7 @@ exports[`renders multiline list accordion 1`] = `
976998
"flex": 1,
977999
"justifyContent": "center",
9781000
},
1001+
undefined,
9791002
]
9801003
}
9811004
>

0 commit comments

Comments
 (0)