From 271cf6b658727dc183748fcf31ff359d64f2411f Mon Sep 17 00:00:00 2001
From: adamviktora <viktora.adam@gmail.com>
Date: Tue, 11 Jun 2024 16:12:26 +0200
Subject: [PATCH] fix(Table): compound expansion styles

---
 packages/react-table/src/components/Table/Tr.tsx              | 4 ++++
 .../src/components/Table/examples/TableCompoundExpandable.tsx | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-table/src/components/Table/Tr.tsx b/packages/react-table/src/components/Table/Tr.tsx
index 715ca98d30e..04eeb35c353 100644
--- a/packages/react-table/src/components/Table/Tr.tsx
+++ b/packages/react-table/src/components/Table/Tr.tsx
@@ -28,6 +28,8 @@ export interface TrProps extends Omit<React.HTMLProps<HTMLTableRowElement>, 'onR
   isStriped?: boolean;
   /** Flag indicating the row will act as a border. This is typically used for a table with a nested and sticky header. */
   isBorderRow?: boolean;
+  /** Flag indicating the row is controlling the expansion of another row. */
+  isControlRow?: boolean;
   /** An event handler for the row */
   onRowClick?: (event?: React.KeyboardEvent | React.MouseEvent) => void;
   /** Flag indicating that the row is selectable */
@@ -50,6 +52,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
   isRowSelected = false,
   isStriped = false,
   isBorderRow = false,
+  isControlRow = false,
   innerRef,
   ouiaId,
   ouiaSafe = true,
@@ -100,6 +103,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
           isRowSelected && styles.modifiers.selected,
           isStriped && styles.modifiers.striped,
           isBorderRow && styles.modifiers.borderRow,
+          isControlRow && styles.tableControlRow,
           resetOffset && styles.modifiers.firstCellOffsetReset
         )}
         hidden={rowIsHidden}
diff --git a/packages/react-table/src/components/Table/examples/TableCompoundExpandable.tsx b/packages/react-table/src/components/Table/examples/TableCompoundExpandable.tsx
index 6e4253e88b7..12482e29c0c 100644
--- a/packages/react-table/src/components/Table/examples/TableCompoundExpandable.tsx
+++ b/packages/react-table/src/components/Table/examples/TableCompoundExpandable.tsx
@@ -75,7 +75,7 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
         const isRowExpanded = !!expandedCellKey;
         return (
           <Tbody key={repo.name} isExpanded={isRowExpanded}>
-            <Tr>
+            <Tr isControlRow>
               <Td width={25} dataLabel={columnNames.name} component="th">
                 <a href="#">{repo.name}</a>
               </Td>
@@ -109,7 +109,7 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
             </Tr>
             {isRowExpanded ? (
               <Tr isExpanded={isRowExpanded}>
-                <Td dataLabel={columnNames[expandedCellKey]} noPadding colSpan={6}>
+                <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