Allow to set child styles in Collapsible (#55)

tgstation · Jan 4, 2025 · 5e113a0 · 5e113a0
1 parent 7d592d6
commit 5e113a0
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git 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
@@ -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',
+    },
+  },
+};