Fix column growth issue in Data tables (#2309)

OKTA-790299 feat: fix column growth issue Merge branch 'main' into jk-last-column-grow Merge branch 'main' into jk-last-column-grow fix: add waitBeforeCapture to applitools Merge branch 'main' into jk-last-column-grow Update packages/odyssey-react-mui/src/DataTable/DataTable.tsx Co-authored-by: Kevin Ghadyani <[email protected]> refactor: run prettier
okta · Aug 7, 2024 · 93ec2e7 · 93ec2e7
1 parent 0c9a10c
commit 93ec2e7
Show file tree

Hide file tree

Showing 6 changed files with 283 additions and 85 deletions.
diff --git a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
@@ -61,6 +61,7 @@ import {
 import { useScrollIndication } from "./useScrollIndication";
 import styled from "@emotion/styled";
 import { EmptyState } from "../EmptyState";
+import { Button } from "../Button";
 import { Callout } from "../Callout";
 
 export type DataTableColumn<T extends DataTableRowData> = MRT_ColumnDef<T> & {
@@ -255,62 +256,6 @@ export type DataTableProps = {
   maxPages?: number;
 };
 
-const displayColumnDefOptions = {
-  "mrt-row-actions": {
-    header: "",
-    grow: true,
-    muiTableBodyCellProps: {
-      align: "right",
-      sx: {
-        overflow: "visible",
-        width: "unset",
-      },
-      className: "ods-actions-cell",
-    },
-    muiTableHeadCellProps: {
-      align: "right",
-      sx: {
-        width: "unset",
-      },
-      className: "ods-actions-cell",
-    },
-  },
-  "mrt-row-drag": {
-    header: "",
-    muiTableBodyCellProps: {
-      sx: {
-        minWidth: 0,
-        width: "auto",
-      },
-      className: "ods-drag-handle",
-    },
-    muiTableHeadCellProps: {
-      sx: {
-        minWidth: 0,
-        width: "auto",
-      },
-      children: (
-        // Add a spacer to simulate the width of the drag handle in the column.
-        // Without this, the head cells are offset from their body cell counterparts
-        <Box sx={{ marginInline: "-0.1rem" }}>
-          <DragIndicatorIcon sx={{ marginInline: 1, opacity: 0 }} />
-        </Box>
-      ),
-    },
-  },
-  "mrt-row-select": {
-    muiTableHeadCellProps: {
-      padding: "checkbox",
-    },
-    muiTableBodyCellProps: {
-      padding: "checkbox",
-    },
-  },
-  "mrt-row-expand": {
-    header: "",
-  },
-};
-
 const ScrollableTableContainer = styled("div", {
   shouldForwardProp: (prop) =>
     prop !== "odysseyDesignTokens" &&
@@ -677,14 +622,86 @@ const DataTable = ({
       },
     },
     selectAllMode: "all",
-    displayColumnDefOptions:
-      displayColumnDefOptions as MRT_TableOptions<DataTableRowData>["displayColumnDefOptions"],
+    displayColumnDefOptions: {
+      "mrt-row-actions": {
+        header: "",
+        grow: true,
+        muiTableBodyCellProps: {
+          align: "right",
+          sx: {
+            overflow: "visible",
+            width: "unset",
+          },
+          className: "ods-actions-cell",
+        },
+        muiTableHeadCellProps: {
+          align: "right",
+          sx: {
+            width: "unset",
+          },
+          className: "ods-actions-cell",
+          children: (
+            <Box sx={{ display: "flex", visibility: "hidden" }}>
+              {rowActionButtons && rowActionButtons({ id: null })}
+              {((hasRowReordering && onReorderRows) || rowActionMenuItems) && (
+                <Box>
+                  <Button
+                    endIcon={<MoreIcon />}
+                    size="small"
+                    variant="floating"
+                    ariaLabel={t("table.moreactions.arialabel")}
+                    isDisabled
+                  />
+                </Box>
+              )}
+            </Box>
+          ),
+        },
+      },
+      "mrt-row-drag": {
+        header: "",
+        muiTableBodyCellProps: {
+          sx: {
+            minWidth: 0,
+            width: "auto",
+          },
+          className: "ods-drag-handle",
+        },
+        muiTableHeadCellProps: {
+          sx: {
+            minWidth: 0,
+            width: "auto",
+          },
+          children: (
+            // Add a spacer to simulate the width of the drag handle in the column.
+            // Without this, the head cells are offset from their body cell counterparts
+            <Box sx={{ marginInline: "-0.1rem" }}>
+              <DragIndicatorIcon sx={{ marginInline: 1, opacity: 0 }} />
+            </Box>
+          ),
+        },
+      },
+      "mrt-row-select": {
+        muiTableHeadCellProps: {
+          padding: "checkbox",
+        },
+        muiTableBodyCellProps: {
+          padding: "checkbox",
+        },
+      },
+      "mrt-row-expand": {
+        header: "",
+      },
+    },
     muiTableBodyProps: () => ({
       className: rowDensityClassName,
     }),
     defaultColumn: {
       Cell: defaultCell,
     },
+    muiTableBodyCellProps: ({ column }) => ({
+      className: column.getIsResizing() ? "isResizing" : "",
+    }),
 
     // Reordering
     enableRowOrdering: hasRowReordering && Boolean(onReorderRows),

diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
@@ -40,6 +40,7 @@ import {
   DragIndicatorIcon,
 } from "../../icons.generated";
 import { Box } from "../../Box";
+import { Button } from "../../Button";
 import { TableProps, TableState, UniversalProps } from "./componentTypes";
 import { DataTableCell } from "./dataTypes";
 import {
@@ -284,9 +285,48 @@ const TableContent = ({
       ExpandMoreIcon: ChevronDownIcon,
     },
     ...dataTableImmutableSettings,
-    displayColumnDefOptions: displayColumnDefOptions satisfies Partial<
-      MRT_TableOptions<MRT_RowData>["displayColumnDefOptions"]
-    >,
+    displayColumnDefOptions: {
+      ...(displayColumnDefOptions satisfies Partial<
+        MRT_TableOptions<MRT_RowData>["displayColumnDefOptions"]
+      >),
+      "mrt-row-actions": {
+        header: "",
+        grow: true,
+        muiTableBodyCellProps: {
+          align: "right" as const,
+          sx: {
+            overflow: "visible",
+            width: "unset",
+          },
+          className: "ods-actions-cell",
+        },
+        muiTableHeadCellProps: {
+          align: "right" as const,
+          sx: {
+            width: "unset",
+          },
+          className: "ods-actions-cell",
+          children: (
+            <Box sx={{ display: "flex", visibility: "hidden" }}>
+              {tableOptions.rowActionButtons &&
+                tableOptions.rowActionButtons({ id: null })}
+              {((hasRowReordering === true && onReorderRows) ||
+                tableOptions.rowActionMenuItems) && (
+                <Box>
+                  <Button
+                    endIcon={<MoreIcon />}
+                    size="small"
+                    variant="floating"
+                    ariaLabel={t("table.moreactions.arialabel")}
+                    isDisabled
+                  />
+                </Box>
+              )}
+            </Box>
+          ),
+        },
+      },
+    },
     muiTableProps: {
       ref: tableContentRef,
     },
@@ -350,6 +390,9 @@ const TableContent = ({
         ? "isSorted"
         : "isUnsorted",
     }),
+    muiTableBodyCellProps: ({ column }) => ({
+      className: column.getIsResizing() ? "isResizing" : "",
+    }),
     enableSorting: tableOptions.hasSorting === true, // I don't know why this needs to be true, but it still works if undefined otherwise
     onSortingChange: (sortingUpdater) => {
       const newSortVal =

diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx
@@ -44,25 +44,6 @@ export const dataTableImmutableSettings = {
 };
 
 export const displayColumnDefOptions = {
-  "mrt-row-actions": {
-    header: "",
-    grow: true,
-    muiTableBodyCellProps: {
-      align: "right" as const,
-      sx: {
-        overflow: "visible",
-        width: "unset",
-      },
-      className: "ods-actions-cell",
-    },
-    muiTableHeadCellProps: {
-      align: "right" as const,
-      sx: {
-        width: "unset",
-      },
-      className: "ods-actions-cell",
-    },
-  },
   "mrt-row-drag": {
     header: "",
     muiTableBodyCellProps: {

diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -2556,15 +2556,33 @@ export const components = ({
           textAlign: "start",
           verticalAlign: "baseline",
           padding: `0 ${odysseyTokens.Spacing3} !important`,
+          overflow: "visible !important",
+          position: "relative",
           overflowWrap: "break-word",
 
           [`&.${tableCellClasses.root}`]: {
             borderTop: `none !important`,
-            borderRight: `none !important`,
             borderBottom: `none !important`,
             borderLeft: `none !important`,
           },
 
+          ["&::after"]: {
+            background: "transparent !important",
+          },
+
+          [`.${tableBodyClasses.root} &.${tableCellClasses.root}`]: {
+            borderRight: `none !important`,
+          },
+
+          [`&.${tableCellClasses.root}.isResizing::after`]: {
+            borderRightColor: odysseyTokens.BorderColorPrimaryControl,
+            borderRightStyle: odysseyTokens.BorderStyleMain,
+            borderRightWidth: 2,
+            content: '""',
+            position: "absolute",
+            right: 0,
+          },
+
           [`.MuiTable-root.narrow &:last-child`]: {
             width: "auto",
           },
@@ -2616,10 +2634,6 @@ export const components = ({
               width: odysseyTokens.Spacing2,
             },
 
-          [`&::after`]: {
-            display: "none",
-          },
-
           ...(ownerState.variant === "number" && {
             textAlign: "end",
             fontFeatureSettings: '"lnum", "tnum"',
@@ -2744,16 +2758,31 @@ export const components = ({
           [`.${tableBodyClasses.root} &`]: {
             // Target is 48px height
             paddingBlock: odysseyTokens.Spacing3,
+
+            [`& .${tableCellClasses.root}::after`]: {
+              top: `-${odysseyTokens.Spacing3} !important`,
+              bottom: `-${odysseyTokens.Spacing3} !important`,
+            },
           },
 
           [`.${tableBodyClasses.root}.MuiTableBody-compact &`]: {
             // Target is 36px height
             paddingBlock: odysseyTokens.Spacing2,
+
+            [`& .${tableCellClasses.root}::after`]: {
+              top: `-${odysseyTokens.Spacing2} !important`,
+              bottom: `-${odysseyTokens.Spacing2} !important`,
+            },
           },
 
           [`.${tableBodyClasses.root}.MuiTableBody-spacious &`]: {
             // Target is 56px height
             paddingBlock: odysseyTokens.Spacing4,
+
+            [`& .${tableCellClasses.root}::after`]: {
+              top: `-${odysseyTokens.Spacing4} !important`,
+              bottom: `-${odysseyTokens.Spacing4} !important`,
+            },
           },
 
           "&.isDragTarget": {