feat(Table): color the column header cell with hover color when sort …

…is active
mondaycom · Feb 14, 2024 · e0eadee · e0eadee
1 parent ef35c86
commit e0eadee
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/packages/core/src/components/Table/TableHeaderCell/TableHeaderCell.module.scss b/packages/core/src/components/Table/TableHeaderCell/TableHeaderCell.module.scss
@@ -10,7 +10,8 @@
   justify-content: space-between;
   background-color: inherit;
 
-  &:hover {
+  &:hover,
+  &.sortActive {
     background-color: var(--allgrey-background-color);
   }
 

diff --git a/packages/core/src/components/Table/TableHeaderCell/TableHeaderCell.tsx b/packages/core/src/components/Table/TableHeaderCell/TableHeaderCell.tsx
@@ -40,13 +40,14 @@ const TableHeaderCell: VibeComponent<ITableHeaderCellProps, HTMLDivElement> = fo
   ) => {
     const [isHovered, setIsHovered] = useState<boolean>(false);
     const ariaSort = getAriaSort(sortState);
+    const isSortActive = onSortClicked && ariaSort !== "none";
     const shouldShowSortIcon = ariaSort !== "none" || isHovered;
 
     return (
       <div
         ref={ref}
         id={id}
-        className={cx(styles.tableHeaderCell, className)}
+        className={cx(styles.tableHeaderCell, { [styles.sortActive]: isSortActive }, className)}
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.TABLE_HEADER_CELL, id)}
         role="columnheader"
         onMouseEnter={() => setIsHovered(true)}