Updated Content

powerhome · Nov 21, 2024 · 11200aa · 11200aa
1 parent d7d93ee
commit 11200aa
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx b/playbook/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx
@@ -1,10 +1,20 @@
 import React from 'react'
 
 import Table from '../_table'
-import Body from '../../pb_body/_body'
+import Background from '../../pb_background/_background'
 
 const TableWithCollapsible = (props) => {
 
+  const Content = () => {
+    return (
+      <Background color="light" 
+          padding="md"
+      >
+        <div>Nested content inside a background.</div>
+      </Background>
+    );
+  };
+
     return (
     <Table
         size="sm"
@@ -21,7 +31,7 @@ const TableWithCollapsible = (props) => {
       </Table.Head>
       <Table.Body>
         <Table.Row collapsible 
-            collapsibleContent={<Body text="hello"/>}
+            collapsibleContent={<Content/>}
         >
           <Table.Cell>{'Value 1'}</Table.Cell>
           <Table.Cell>{'Value 2'}</Table.Cell>

diff --git a/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx b/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx
@@ -101,14 +101,22 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
             >
               {children}
             </div>
-            <Collapsible collapsed={isCollapsed} 
-                padding="none"
-            >
-              <tr/>
-              <Collapsible.Content>
-                <div>hello</div>
-              </Collapsible.Content>
-            </Collapsible>
+            <tr>
+              <Collapsible
+                  collapsed={isCollapsed}
+                  htmlOptions={{ colSpan: colSpan }}
+                  padding="none"
+                  tag="td"
+              >
+                <tr/>
+                <Collapsible.Content 
+                    margin="none"
+                    padding="none" 
+                >
+                 {collapsibleContent}
+                </Collapsible.Content>
+              </Collapsible>
+            </tr>
           </>
         )
       ) : isTableTag ? (