Skip to content

feat: add container style prop #4691

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add container style prop #4691

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions src/components/List/ListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,15 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
*/
theme?: ThemeProp;
/**
* Style that is passed to the wrapping TouchableRipple element.
* Style that is passed to the root TouchableRipple container.
*/
style?: StyleProp<ViewStyle>;
/**
* Style that is passed to the container wrapping title and descripton.
* Style that is passed to the outermost container that wraps the entire content, including icons and text.
*/
containerStyle?: StyleProp<ViewStyle>;
/**
* Style that is passed to the content container, which wraps the title and description.
*/
contentStyle?: StyleProp<ViewStyle>;
/**
Expand Down Expand Up @@ -144,6 +148,7 @@ const ListItem = (
onPress,
theme: themeOverrides,
style,
containerStyle,
contentStyle,
titleStyle,
titleNumberOfLines = 1,
Expand Down Expand Up @@ -238,7 +243,7 @@ const ListItem = (
theme={theme}
testID={testID}
>
<View style={theme.isV3 ? styles.rowV3 : styles.row}>
<View style={[theme.isV3 ? styles.rowV3 : styles.row, containerStyle]}>
{left
? left({
color: descriptionColor,
Expand Down
14 changes: 13 additions & 1 deletion src/components/Menu/MenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,21 @@ export type Props = {
*/
titleMaxFontSizeMultiplier?: number;
/**
* Style that is passed to the root TouchableRipple container.
* @optional
*/
style?: StyleProp<ViewStyle>;
/**
* Style that is passed to the outermost container that wraps the entire content, including icons and text.
*/
containerStyle?: StyleProp<ViewStyle>;
/**
* Style that is passed to the content container, which wraps the title text.
*/
contentStyle?: StyleProp<ViewStyle>;
/**
* Style that is passed to the Title element.
*/
titleStyle?: StyleProp<TextStyle>;
/**
* Color of the ripple effect.
Expand Down Expand Up @@ -122,6 +133,7 @@ const MenuItem = ({
background,
onPress,
style,
containerStyle,
contentStyle,
titleStyle,
rippleColor: customRippleColor,
Expand Down Expand Up @@ -176,7 +188,7 @@ const MenuItem = ({
accessibilityState={newAccessibilityState}
rippleColor={rippleColor}
>
<View style={styles.row}>
<View style={[styles.row, containerStyle]}>
{leadingIcon ? (
<View
style={[!isV3 && styles.item, { width: iconWidth }]}
Expand Down
13 changes: 8 additions & 5 deletions src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,11 +205,14 @@ exports[`renders expanded accordion 1`] = `
>
<View
style={
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
}
[
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
},
undefined,
]
}
>
<View
Expand Down
91 changes: 56 additions & 35 deletions src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,14 @@ exports[`renders list item with custom description 1`] = `
>
<View
style={
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
}
[
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
},
undefined,
]
}
>
<View
Expand Down Expand Up @@ -374,11 +377,14 @@ exports[`renders list item with custom title and description styles 1`] = `
>
<View
style={
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
}
[
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
},
undefined,
]
}
>
<View
Expand Down Expand Up @@ -516,11 +522,14 @@ exports[`renders list item with left and right items 1`] = `
>
<View
style={
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
}
[
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
},
undefined,
]
}
>
<Text>
Expand Down Expand Up @@ -710,11 +719,14 @@ exports[`renders list item with left item 1`] = `
>
<View
style={
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
}
[
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
},
undefined,
]
}
>
<View
Expand Down Expand Up @@ -870,11 +882,14 @@ exports[`renders list item with right item 1`] = `
>
<View
style={
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
}
[
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
},
undefined,
]
}
>
<View
Expand Down Expand Up @@ -979,11 +994,14 @@ exports[`renders list item with title and description 1`] = `
>
<View
style={
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
}
[
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
},
undefined,
]
}
>
<View
Expand Down Expand Up @@ -1117,11 +1135,14 @@ exports[`renders with a description with typeof number 1`] = `
>
<View
style={
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
}
[
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
},
undefined,
]
}
>
<View
Expand Down
78 changes: 48 additions & 30 deletions src/components/__tests__/__snapshots__/ListSection.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,11 +264,14 @@ exports[`renders list section with custom title style 1`] = `
>
<View
style={
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
}
[
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
},
undefined,
]
}
>
<View
Expand Down Expand Up @@ -421,11 +424,14 @@ exports[`renders list section with custom title style 1`] = `
>
<View
style={
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
}
[
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
},
undefined,
]
}
>
<View
Expand Down Expand Up @@ -797,11 +803,14 @@ exports[`renders list section with subheader 1`] = `
>
<View
style={
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
}
[
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
},
undefined,
]
}
>
<View
Expand Down Expand Up @@ -954,11 +963,14 @@ exports[`renders list section with subheader 1`] = `
>
<View
style={
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
}
[
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
},
undefined,
]
}
>
<View
Expand Down Expand Up @@ -1290,11 +1302,14 @@ exports[`renders list section without subheader 1`] = `
>
<View
style={
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
}
[
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
},
undefined,
]
}
>
<View
Expand Down Expand Up @@ -1447,11 +1462,14 @@ exports[`renders list section without subheader 1`] = `
>
<View
style={
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
}
[
{
"flexDirection": "row",
"marginVertical": 6,
"width": "100%",
},
undefined,
]
}
>
<View
Expand Down
Loading
Loading