fix(headercell): added new hover prop to control component hover state

chanzuckerberg · Jan 28, 2025 · 2efaf34 · 2efaf34
1 parent d4c2a36
commit 2efaf34
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 11 deletions.
diff --git a/packages/components/src/core/CellHeader/__storybook__/index.stories.tsx b/packages/components/src/core/CellHeader/__storybook__/index.stories.tsx
@@ -20,6 +20,9 @@ export default {
       control: { type: "select" },
       options: ["left", "center", "right"],
     },
+    hover: {
+      control: { type: "boolean" },
+    },
     shouldShowTooltipOnHover: {
       control: { type: "boolean" },
     },
@@ -44,6 +47,7 @@ export const Default = {
     active: false,
     direction: "desc",
     hideSortIcon: false,
+    hover: true,
     shouldShowTooltipOnHover: true,
     tooltipProps: { sdsStyle: "dark" },
     tooltipText: "This is a header cell",

diff --git a/packages/components/src/core/CellHeader/__tests__/CellHeader.namespace-test.tsx b/packages/components/src/core/CellHeader/__tests__/CellHeader.namespace-test.tsx
@@ -12,6 +12,7 @@ const CellBasicNameSpaceTest = (props: CellHeaderProps) => {
             direction="asc"
             active
             hideSortIcon
+            hover
             horizontalAlign="center"
             shouldShowTooltipOnHover
             tooltipProps={{ sdsStyle: "light" }}

diff --git a/packages/components/src/core/CellHeader/index.tsx b/packages/components/src/core/CellHeader/index.tsx
@@ -16,6 +16,7 @@ interface CellHeaderContentProps {
   hideSortIcon?: boolean;
   horizontalAlign?: "left" | "center" | "right";
   children: React.ReactNode;
+  hover?: boolean;
 }
 
 interface CellHeaderRawProps
@@ -39,6 +40,7 @@ const CellHeaderContent = (
     direction = "desc",
     hideSortIcon = false,
     horizontalAlign,
+    hover,
   } = props;
 
   const sdsIconName: keyof IconNameToSizes =
@@ -61,7 +63,7 @@ const CellHeaderContent = (
   return (
     <StyledCellHeaderContainer horizontalAlign={horizontalAlign}>
       <span>{children}</span>
-      {(!hideSortIcon || active) && sortIcon}
+      {(!hideSortIcon || active) && hover && sortIcon}
     </StyledCellHeaderContainer>
   );
 };
@@ -74,10 +76,11 @@ const CellHeader = forwardRef<HTMLTableCellElement, CellHeaderProps>(
       tooltipProps,
       tooltipText = "",
       tooltipSubtitle,
+      hover = true,
       ...rest
     } = props;
 
-    if (shouldShowTooltipOnHover) {
+    if (shouldShowTooltipOnHover && hover) {
       return (
         <Tooltip
           arrow
@@ -87,15 +90,19 @@ const CellHeader = forwardRef<HTMLTableCellElement, CellHeaderProps>(
           title={tooltipText}
           {...tooltipProps}
         >
-          <StyledTableHeader ref={ref} {...rest}>
-            <CellHeaderContent {...props}>{children}</CellHeaderContent>
+          <StyledTableHeader ref={ref} hover={hover} {...rest}>
+            <CellHeaderContent {...props} hover={hover}>
+              {children}
+            </CellHeaderContent>
           </StyledTableHeader>
         </Tooltip>
       );
     }
     return (
-      <StyledTableHeader ref={ref} {...rest}>
-        <CellHeaderContent {...props}>{children}</CellHeaderContent>
+      <StyledTableHeader ref={ref} hover={hover} {...rest}>
+        <CellHeaderContent hover={hover} {...props}>
+          {children}
+        </CellHeaderContent>
       </StyledTableHeader>
     );
   }

diff --git a/packages/components/src/core/CellHeader/style.ts b/packages/components/src/core/CellHeader/style.ts
@@ -12,6 +12,7 @@ export interface CellHeaderExtraProps extends CommonThemeProps {
   active?: boolean;
   hideSortIcon?: boolean;
   horizontalAlign?: "left" | "center" | "right";
+  hover?: boolean;
 }
 
 const contentPositionMapping = {
@@ -27,6 +28,7 @@ const doNotForwardProps = [
   "tooltipProps",
   "tooltipText",
   "hideSortIcon",
+  "hover",
 ];
 
 export const StyledSortingIcon = styled(Icon, {
@@ -55,28 +57,36 @@ export const StyledTableHeader = styled("th", {
   ${focusVisibleA11yStyle}
 
   ${(props: CellHeaderExtraProps) => {
-    const { active = false, horizontalAlign = "left" } = props;
+    const { active = false, horizontalAlign = "left", hover = true } = props;
 
     const spaces = getSpaces(props);
     const semanticColors = getSemanticColors(props);
 
+    const defaultColor = active
+      ? semanticColors?.accent?.textAction
+      : semanticColors?.base?.textSecondary;
+
+    const hoverColor = active
+      ? semanticColors?.accent?.textActionHover
+      : semanticColors?.base?.textPrimary;
+
     return `
-      color: ${active ? semanticColors?.accent?.textAction : semanticColors?.base?.textSecondary};
+      color: ${defaultColor};
       padding: ${spaces?.l}px ${spaces?.m}px;
       text-align: ${horizontalAlign};
       min-width: 96px;
-      cursor: pointer;
+      cursor: ${hover ? "pointer" : "default"};
       vertical-align: bottom;
 
       & .MuiButtonBase-root {
         outline: none;
       }
 
       &:hover {
-        color: ${active ? semanticColors?.accent?.textActionHover : semanticColors?.base?.textPrimary};
+        color: ${hover ? hoverColor : defaultColor};
 
         & .MuiButtonBase-root {
-          color: ${active ? semanticColors?.accent?.textActionHover : semanticColors?.base?.textPrimary};
+          color: ${hoverColor};
           opacity: 1;
         }