Table - expandable section animation support

[kmcfaul]

patternfly/patternfly#7537

• Add an opt-in flag for the animation on Table
• Add a no-padding modifier flag to ExpandableRowContent
• Add inert to collapsed Trs along with hidden

[mcoker]

Per the core PR: patternfly/patternfly#7537

• Adds an opt-in for the animation do-dads and hwhat-nots. Thats .pf-m-animate-expand on the parent .pf-v6-c-table wrapper.
• Expandable tables need <Table isExpandable>. This resolves a bug where the compound expandable control row has a bottom border that it shouldn't have per @andrew-ronaldson. This is not tied to animations and works with/without the animation opt-in.
  • Changes this with the bottom border
    
  • To this without the bottom border
    
• Expandable rows need isExpandable. Animations require this to work properly. The examples I found that were lacking it were compound expandable, but there may be more.
• Need to always render the compound expandable things that expand. Currently they're conditionally rendered behind isRowExpanded in our examples -

  patternfly-react/packages/react-table/src/components/Table/examples/TableCompoundExpandable.tsx

  Line 110 in b8f1dfd

  {isRowExpanded ? (

• Adds a .pf-m-no-background variant to <ExpandableRowContent> for use when .pf-m-no-padding (noPadding) is on the parent <Td /> in compound expandable. This allows the secondary/grey background to show through since <ExpandableRowContent> has a white background by default.

[mcoker]

FWIW here is my current diff from my local react branch with these changes

diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx
index 39a96cf8c7..e033b33a68 100644
diff --git a/packages/react-table/src/components/Table/ExpandableRowContent.tsx b/packages/react-table/src/components/Table/ExpandableRowContent.tsx
index d991b706ca..25f50b4eb0 100644
--- a/packages/react-table/src/components/Table/ExpandableRowContent.tsx
+++ b/packages/react-table/src/components/Table/ExpandableRowContent.tsx
@@ -9,7 +9,7 @@ export const ExpandableRowContent: React.FunctionComponent<ExpandableRowContentP
   children = null as React.ReactNode,
   ...props
 }: ExpandableRowContentProps) => (
-  <div {...props} className={css(styles.tableExpandableRowContent)}>
+  <div {...props} className={css(styles.tableExpandableRowContent, 'pf-m-no-background')}>
     {children}
   </div>
 );
diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx
index 39a96cf8c7..e033b33a68 100644
--- a/packages/react-table/src/components/Table/Table.tsx
+++ b/packages/react-table/src/components/Table/Table.tsx
@@ -212,7 +212,8 @@ const TableBase: React.FunctionComponent<TableProps> = ({
           isStriped && styles.modifiers.striped,
           isExpandable && styles.modifiers.expandable,
           hasNoInset && stylesTreeView.modifiers.noInset,
-          isNested && 'pf-m-nested'
+          isNested && 'pf-m-nested',
+          'pf-m-animate-expand'
         )}
         ref={tableRef}
         {...(isTreeTable && { role: 'treegrid' })}
diff --git a/packages/react-table/src/components/Table/examples/TableCompoundExpandable.tsx b/packages/react-table/src/components/Table/examples/TableCompoundExpandable.tsx
index 282aa9013a..d7f18efcee 100644
--- a/packages/react-table/src/components/Table/examples/TableCompoundExpandable.tsx
+++ b/packages/react-table/src/components/Table/examples/TableCompoundExpandable.tsx
@@ -59,7 +59,7 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
   });
 
   return (
-    <Table aria-label="Compound expandable table">
+    <Table aria-label="Compound expandable table" isExpandable>
       <Thead>
         <Tr>
           <Th>{columnNames.name}</Th>
@@ -107,24 +107,22 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
                 <a href="#">Open in GitHub</a>
               </Td>
             </Tr>
-            {isRowExpanded ? (
-              <Tr isExpanded={isRowExpanded}>
-                <Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>
-                  <ExpandableRowContent>
-                    <div className={spacing.mMd}>
-                      Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem
-                      ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum
-                      sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit
-                      dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor.
-                      Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem
-                      ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum
-                      sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit
-                      dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor.
-                    </div>
-                  </ExpandableRowContent>
-                </Td>
-              </Tr>
-            ) : null}
+            <Tr isExpanded={isRowExpanded} isExpandable inert>
+              <Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>
+                <ExpandableRowContent className="pf-m-no-background">
+                  <div className={spacing.mMd}>
+                    Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem
+                    ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum
+                    sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit
+                    dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor.
+                    Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem
+                    ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum
+                    sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit
+                    dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor.
+                  </div>
+                </ExpandableRowContent>
+              </Td>
+            </Tr>
           </Tbody>
         );
       })}