From 5e113a0472153197370845257909fc553aa295ce Mon Sep 17 00:00:00 2001
From: Aylong <69762909+AyIong@users.noreply.github.com>
Date: Sun, 5 Jan 2025 01:26:17 +0200
Subject: [PATCH] Allow to set child styles in `Collapsible` (#55)

---
 lib/components/Collapsible.tsx  | 11 +++++++++--
 stories/Collapsible.stories.tsx | 15 +++++++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/lib/components/Collapsible.tsx b/lib/components/Collapsible.tsx
index bc03128..c78b203 100644
--- a/lib/components/Collapsible.tsx
+++ b/lib/components/Collapsible.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode, useState } from 'react';
+import { type CSSProperties, type ReactNode, useState } from 'react';
 import { Box, type BoxProps } from './Box';
 import { Button } from './Button';
 
@@ -13,6 +13,8 @@ type Props = Partial<{
   open: boolean;
   /** Text to display on the button for collapsing */
   title: ReactNode;
+  /** Custom styles for the child nodes */
+  childStyles: CSSProperties;
 }> &
   BoxProps;
 
@@ -26,6 +28,7 @@ export function Collapsible(props: Props) {
   const {
     children,
     child_mt = 1,
+    childStyles,
     color,
     title,
     buttons,
@@ -52,7 +55,11 @@ export function Collapsible(props: Props) {
           <div className="Table__cell Table__cell--collapsing">{buttons}</div>
         )}
       </div>
-      {open && <Box mt={child_mt}>{children}</Box>}
+      {open && (
+        <Box mt={child_mt} style={childStyles}>
+          {children}
+        </Box>
+      )}
     </Box>
   );
 }
diff --git a/stories/Collapsible.stories.tsx b/stories/Collapsible.stories.tsx
index 8388b78..c03b59b 100644
--- a/stories/Collapsible.stories.tsx
+++ b/stories/Collapsible.stories.tsx
@@ -16,3 +16,18 @@ export const Default: Story = {
     children: 'Collapsed content',
   },
 };
+
+export const StyledChild: Story = {
+  args: {
+    title: 'Click me',
+    children: 'Collapsed content',
+    child_mt: -0.1,
+    childStyles: {
+      padding: '0.5em',
+      backgroundColor: 'rgba(0, 0, 0, 0.1)',
+      color: 'red',
+      border: '1px solid rgba(255, 255, 255, 0.1)',
+      borderRadius: '0 0 0.25em 0.25em',
+    },
+  },
+};