fix: update active color of resize handle

okta · Jul 25, 2024 · 66710eb · 66710eb
1 parent 6ee0a40
commit 66710eb
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
@@ -752,7 +752,9 @@ const DataTable = ({
     muiTableProps: {
       ref: tableContentRef,
       className:
-        !shouldDisplayRowActions && hasColumnResizing ? "remove-last-row" : "",
+        !shouldDisplayRowActions && hasColumnResizing
+          ? "ods-hide-spacer-column"
+          : "",
     },
 
     muiTableContainerProps: {

diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
@@ -306,7 +306,7 @@ const TableContent = ({
       ref: tableContentRef,
       className:
         !shouldDisplayRowActions && tableOptions.hasColumnResizing
-          ? "remove-last-row"
+          ? "ods-hide-spacer-column"
           : "",
     },
     muiTableContainerProps: {

diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -2622,12 +2622,12 @@ export const components = ({
             },
 
           // TEST OF RESIZING
-          [`.remove-last-row .${tableHeadClasses.root} &:last-of-type, .remove-last-row .${tableBodyClasses.root} &:last-of-type`]:
+          [`.ods-hide-spacer-column .${tableHeadClasses.root} &:last-of-type, .ods-hide-spacer-column .${tableBodyClasses.root} &:last-of-type`]:
             {
               display: "none",
             },
 
-          [`.remove-last-row .${tableHeadClasses.root} &:nth-last-of-type(2), .remove-last-row .${tableBodyClasses.root} &:nth-last-of-type(2)`]:
+          [`.ods-hide-spacer-column .${tableHeadClasses.root} &:nth-last-of-type(2), .ods-hide-spacer-column .${tableBodyClasses.root} &:nth-last-of-type(2)`]:
             {
               borderTopRightRadius: odysseyTokens.Spacing2,
               borderBottomRightRadius: odysseyTokens.Spacing2,
@@ -2680,6 +2680,11 @@ export const components = ({
 
           [`& .Mui-TableHeadCell-ResizeHandle-Wrapper`]: {
             marginInlineEnd: `-${odysseyTokens.Spacing3}`,
+
+            [`&:active .${dividerClasses.vertical}`]: {
+              borderColor: odysseyTokens.HueNeutral400,
+              opacity: 1,
+            },
           },
 
           [`& .Mui-TableHeadCell-Content-Wrapper`]: {