From a16deeac53c65c267b4cef2f1680bb071c5226b7 Mon Sep 17 00:00:00 2001
From: lukewalczak <lukasz.walczak.pwr@gmail.com>
Date: Wed, 23 Apr 2025 09:48:19 +0200
Subject: [PATCH 1/2] feat: add container style prop

---
 src/components/List/ListItem.tsx              | 11 ++-
 src/components/Menu/MenuItem.tsx              | 14 ++-
 .../__snapshots__/ListAccordion.test.tsx.snap | 13 ++-
 .../__snapshots__/ListItem.test.tsx.snap      | 91 ++++++++++++-------
 .../__snapshots__/ListSection.test.tsx.snap   | 78 ++++++++++------
 .../__snapshots__/Menu.test.tsx.snap          | 36 +++++---
 .../__snapshots__/MenuItem.test.tsx.snap      | 45 ++++++---
 7 files changed, 187 insertions(+), 101 deletions(-)

diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx
index 4fbfcc0cb2..c6d9b64853 100644
--- a/src/components/List/ListItem.tsx
+++ b/src/components/List/ListItem.tsx
@@ -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>;
   /**
@@ -144,6 +148,7 @@ const ListItem = (
     onPress,
     theme: themeOverrides,
     style,
+    containerStyle,
     contentStyle,
     titleStyle,
     titleNumberOfLines = 1,
@@ -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,
diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
index 08efb22808..89b962d637 100644
--- a/src/components/Menu/MenuItem.tsx
+++ b/src/components/Menu/MenuItem.tsx
@@ -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.
@@ -122,6 +133,7 @@ const MenuItem = ({
   background,
   onPress,
   style,
+  containerStyle,
   contentStyle,
   titleStyle,
   rippleColor: customRippleColor,
@@ -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 }]}
diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap
index c828bdc743..198b0774fd 100644
--- a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap
@@ -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
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
index 1333d5931e..14894a190f 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
@@ -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
@@ -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
@@ -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>
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap
index 2bff44929d..50a18c0e76 100644
--- a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
index 04ab372e53..801552dab1 100644
--- a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
@@ -358,9 +358,12 @@ exports[`renders menu with content styles 1`] = `
             >
               <View
                 style={
-                  {
-                    "flexDirection": "row",
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    undefined,
+                  ]
                 }
               >
                 <View
@@ -478,9 +481,12 @@ exports[`renders menu with content styles 1`] = `
             >
               <View
                 style={
-                  {
-                    "flexDirection": "row",
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    undefined,
+                  ]
                 }
               >
                 <View
@@ -1072,9 +1078,12 @@ exports[`renders visible menu 1`] = `
             >
               <View
                 style={
-                  {
-                    "flexDirection": "row",
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    undefined,
+                  ]
                 }
               >
                 <View
@@ -1192,9 +1201,12 @@ exports[`renders visible menu 1`] = `
             >
               <View
                 style={
-                  {
-                    "flexDirection": "row",
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    undefined,
+                  ]
                 }
               >
                 <View
diff --git a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap
index 4462d03ff0..5a8af4286f 100644
--- a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap
@@ -55,9 +55,12 @@ exports[`Menu Item renders menu item 1`] = `
   >
     <View
       style={
-        {
-          "flexDirection": "row",
-        }
+        [
+          {
+            "flexDirection": "row",
+          },
+          undefined,
+        ]
       }
     >
       <View
@@ -223,9 +226,12 @@ exports[`Menu Item renders menu item 1`] = `
   >
     <View
       style={
-        {
-          "flexDirection": "row",
-        }
+        [
+          {
+            "flexDirection": "row",
+          },
+          undefined,
+        ]
       }
     >
       <View
@@ -391,9 +397,12 @@ exports[`Menu Item renders menu item 1`] = `
   >
     <View
       style={
-        {
-          "flexDirection": "row",
-        }
+        [
+          {
+            "flexDirection": "row",
+          },
+          undefined,
+        ]
       }
     >
       <View
@@ -559,9 +568,12 @@ exports[`Menu Item renders menu item 1`] = `
   >
     <View
       style={
-        {
-          "flexDirection": "row",
-        }
+        [
+          {
+            "flexDirection": "row",
+          },
+          undefined,
+        ]
       }
     >
       <View
@@ -727,9 +739,12 @@ exports[`Menu Item renders menu item 1`] = `
   >
     <View
       style={
-        {
-          "flexDirection": "row",
-        }
+        [
+          {
+            "flexDirection": "row",
+          },
+          undefined,
+        ]
       }
     >
       <View

From 3592277cf283d94c3c4b528ec5bb51e4ad71a0ce Mon Sep 17 00:00:00 2001
From: lukewalczak <lukasz.walczak.pwr@gmail.com>
Date: Wed, 30 Apr 2025 10:20:59 +0200
Subject: [PATCH 2/2] feat: add container style prop to list accordion

---
 src/components/List/ListAccordion.tsx         | 20 ++++++-
 src/components/List/ListItem.tsx              |  2 +-
 src/components/Menu/MenuItem.tsx              |  2 +-
 .../__snapshots__/ListAccordion.test.tsx.snap | 60 ++++++++++++-------
 4 files changed, 59 insertions(+), 25 deletions(-)

diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx
index 7c85098898..56deb81dcd 100644
--- a/src/components/List/ListAccordion.tsx
+++ b/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}
diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx
index c6d9b64853..467eb9b67a 100644
--- a/src/components/List/ListItem.tsx
+++ b/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>;
   /**
diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
index 89b962d637..5e5bf05bc5 100644
--- a/src/components/Menu/MenuItem.tsx
+++ b/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>;
   /**
diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap
index 198b0774fd..12d8d5cbb9 100644
--- a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap
+++ b/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,
             ]
           }
         >