Merge pull request #6970 from Sage/FE-6592-ft-rtl-final-form

Refactor flat-table and flat-table-row to RTL FE-6592
Sage · Sep 26, 2024 · d83f547 · d83f547
2 parents 2249a0d + 54301b6
commit d83f547
Show file tree

Hide file tree

Showing 11 changed files with 3,293 additions and 3,225 deletions.
diff --git a/src/components/flat-table/__internal__/build-position-map.ts b/src/components/flat-table/__internal__/build-position-map.ts
@@ -9,6 +9,8 @@ export default (
         acc[currentId] = 0;
       } else {
         const previousId = array[index - 1].getAttribute("id");
+
+        /* istanbul ignore else */
         if (previousId) {
           acc[currentId] = acc[previousId] + array[index - 1][propertyName];
         }

diff --git a/src/components/flat-table/components.test-pw.tsx b/src/components/flat-table/components.test-pw.tsx
@@ -3006,3 +3006,28 @@ export const HighlightedRowWithLoadingState = (
     </div>
   );
 };
+
+export const FlatTableWithStickyColumn = () => (
+  <FlatTable width="260px" overflowX="auto">
+    <FlatTableHead>
+      <FlatTableRow>
+        <FlatTableHeader>Foo</FlatTableHeader>
+        <FlatTableRowHeader>Foo</FlatTableRowHeader>
+        <FlatTableHeader>Foo</FlatTableHeader>
+        <FlatTableHeader>Foo</FlatTableHeader>
+        <FlatTableHeader>Foo</FlatTableHeader>
+      </FlatTableRow>
+    </FlatTableHead>
+    <FlatTableBody>
+      <FlatTableRow>
+        <FlatTableCell>Bar</FlatTableCell>
+        <FlatTableRowHeader>Bar</FlatTableRowHeader>
+        <FlatTableCell>Bar</FlatTableCell>
+        <FlatTableCell>Bar</FlatTableCell>
+        <FlatTableCell>
+          <input />
+        </FlatTableCell>
+      </FlatTableRow>
+    </FlatTableBody>
+  </FlatTable>
+);
diff --git a/src/components/flat-table/flat-table-row/flat-table-row.component.tsx b/src/components/flat-table/flat-table-row/flat-table-row.component.tsx
@@ -7,9 +7,10 @@ import React, {
   useLayoutEffect,
 } from "react";
 import invariant from "invariant";
-import { TableBorderSize } from "..";
 
 import Event from "../../../__internal__/utils/helpers/events";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+import { TableBorderSize } from "..";
 import StyledFlatTableRow from "./flat-table-row.style";
 import DrawerSidebarContext from "../../drawer/__internal__/drawer-sidebar.context";
 import FlatTableRowHeader from "../flat-table-row-header";
@@ -23,7 +24,7 @@ import SubRowProvider, { SubRowContext } from "./__internal__/sub-row-provider";
 import { buildPositionMap } from "../__internal__";
 import FlatTableHeadContext from "../flat-table-head/__internal__/flat-table-head.context";
 
-export interface FlatTableRowProps {
+export interface FlatTableRowProps extends Omit<TagProps, "data-component"> {
   /** Overrides default cell color, provide design token, any color from palette or any valid css color value. */
   bgColor?: string;
   /** Array of FlatTableHeader or FlatTableCell. FlatTableRowHeader could also be passed. */
@@ -82,6 +83,8 @@ export const FlatTableRow = React.forwardRef<
       draggable,
       findItem,
       moveItem,
+      "data-element": dataElement,
+      "data-role": dataRole,
       ...rest
     }: FlatTableRowProps,
     ref
@@ -269,13 +272,20 @@ export const FlatTableRow = React.forwardRef<
 
     const isFirstSubRow = firstRowId === internalId.current;
 
+    const getDataElement = () => {
+      if (dataElement) return dataElement;
+
+      return isSubRow ? "flat-table-sub-row" : "flat-table-row";
+    };
+
     const rowComponent = () => (
       <StyledFlatTableRow
         isInSidebar={isInSidebar}
         expandable={expandable}
         isSubRow={isSubRow}
         isFirstSubRow={isFirstSubRow}
-        data-element={isSubRow ? "flat-table-sub-row" : "flat-table-row"}
+        data-element={getDataElement()}
+        data-role={dataRole}
         highlighted={highlighted}
         selected={selected}
         onClick={handleClick}
@@ -297,6 +307,7 @@ export const FlatTableRow = React.forwardRef<
         rowHeight={rowRef?.current?.offsetHeight}
         {...interactiveRowProps}
         {...rest}
+        data-component="flat-table-row"
       >
         <FlatTableRowContext.Provider
           value={{