feat: add container style prop to list accordion

Author: lukewalczak

src/components/List/ListAccordion.tsx

@@ -72,9 +72,17 @@ export type Props = {
    */
   background?: PressableAndroidRippleConfig;
   /**
-   * 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 outermost container that wraps the entire content, including left and right items and both title and description.
+   */
+  containerStyle?: StyleProp<ViewStyle>;
+  /**
+   * Style that is passed to the content container, which wraps the title and description.
+   */
+  contentStyle?: StyleProp<ViewStyle>;
   /**
    * Style that is passed to Title element.
    */
@@ -173,6 +181,8 @@ const ListAccordion = ({
   descriptionNumberOfLines = 2,
   rippleColor: customRippleColor,
   style,
+  containerStyle,
+  contentStyle,
   id,
   testID,
   background,
@@ -252,7 +262,7 @@ const ListAccordion = ({
           borderless
         >
           <View
-            style={theme.isV3 ? styles.rowV3 : styles.row}
+            style={[theme.isV3 ? styles.rowV3 : styles.row, containerStyle]}
             pointerEvents={pointerEvents}
           >
             {left
@@ -262,7 +272,11 @@ const ListAccordion = ({
                 })
               : null}
             <View
-              style={[theme.isV3 ? styles.itemV3 : styles.item, styles.content]}
+              style={[
+                theme.isV3 ? styles.itemV3 : styles.item,
+                styles.content,
+                contentStyle,
+              ]}
             >
               <Text
                 selectable={false}

src/components/List/ListItem.tsx

@@ -67,7 +67,7 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    */
   style?: StyleProp<ViewStyle>;
   /**
-   * Style that is passed to the outermost container that wraps the entire content, including icons and text.
+   * Style that is passed to the outermost container that wraps the entire content, including left and right items and both title and description.
    */
   containerStyle?: StyleProp<ViewStyle>;
   /**

src/components/Menu/MenuItem.tsx

@@ -69,7 +69,7 @@ export type Props = {
    */
   style?: StyleProp<ViewStyle>;
   /**
-   * Style that is passed to the outermost container that wraps the entire content, including icons and text.
+   * Style that is passed to the outermost container that wraps the entire content, including leading and trailing icons and title text.
    */
   containerStyle?: StyleProp<ViewStyle>;
   /**

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

@@ -58,10 +58,13 @@ exports[`renders expanded accordion 1`] = `
       <View
         pointerEvents="none"
         style={
-          {
-            "flexDirection": "row",
-            "marginVertical": 6,
-          }
+          [
+            {
+              "flexDirection": "row",
+              "marginVertical": 6,
+            },
+            undefined,
+          ]
         }
       >
         <View
@@ -74,6 +77,7 @@ exports[`renders expanded accordion 1`] = `
                 "flex": 1,
                 "justifyContent": "center",
               },
+              undefined,
             ]
           }
         >
@@ -326,10 +330,13 @@ exports[`renders list accordion with children 1`] = `
       <View
         pointerEvents="none"
         style={
-          {
-            "flexDirection": "row",
-            "marginVertical": 6,
-          }
+          [
+            {
+              "flexDirection": "row",
+              "marginVertical": 6,
+            },
+            undefined,
+          ]
         }
       >
         <View
@@ -396,6 +403,7 @@ exports[`renders list accordion with children 1`] = `
                 "flex": 1,
                 "justifyContent": "center",
               },
+              undefined,
             ]
           }
         >
@@ -543,10 +551,13 @@ exports[`renders list accordion with custom title and description styles 1`] = `
       <View
         pointerEvents="none"
         style={
-          {
-            "flexDirection": "row",
-            "marginVertical": 6,
-          }
+          [
+            {
+              "flexDirection": "row",
+              "marginVertical": 6,
+            },
+            undefined,
+          ]
         }
       >
         <View
@@ -559,6 +570,7 @@ exports[`renders list accordion with custom title and description styles 1`] = `
                 "flex": 1,
                 "justifyContent": "center",
               },
+              undefined,
             ]
           }
         >
@@ -746,10 +758,13 @@ exports[`renders list accordion with left items 1`] = `
       <View
         pointerEvents="none"
         style={
-          {
-            "flexDirection": "row",
-            "marginVertical": 6,
-          }
+          [
+            {
+              "flexDirection": "row",
+              "marginVertical": 6,
+            },
+            undefined,
+          ]
         }
       >
         <View
@@ -816,6 +831,7 @@ exports[`renders list accordion with left items 1`] = `
                 "flex": 1,
                 "justifyContent": "center",
               },
+              undefined,
             ]
           }
         >
@@ -963,10 +979,13 @@ exports[`renders multiline list accordion 1`] = `
       <View
         pointerEvents="none"
         style={
-          {
-            "flexDirection": "row",
-            "marginVertical": 6,
-          }
+          [
+            {
+              "flexDirection": "row",
+              "marginVertical": 6,
+            },
+            undefined,
+          ]
         }
       >
         <View
@@ -979,6 +998,7 @@ exports[`renders multiline list accordion 1`] = `
                 "flex": 1,
                 "justifyContent": "center",
               },
+              undefined,
             ]
           }
         >