From 2efaf34953a8b6a095d7c2b19460db4742086ebe Mon Sep 17 00:00:00 2001
From: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
Date: Mon, 27 Jan 2025 21:09:47 -0500
Subject: [PATCH 1/3] fix(headercell): added new hover prop to control
 component hover state

---
 .../__storybook__/index.stories.tsx           |  4 ++++
 .../__tests__/CellHeader.namespace-test.tsx   |  1 +
 .../components/src/core/CellHeader/index.tsx  | 19 ++++++++++++------
 .../components/src/core/CellHeader/style.ts   | 20 ++++++++++++++-----
 4 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/core/CellHeader/__storybook__/index.stories.tsx b/packages/components/src/core/CellHeader/__storybook__/index.stories.tsx
index 4e435cd4b..e25d77c56 100644
--- 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
index 542afda00..a482b6b51 100644
--- 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
index cdcdb42f4..241a3d0ed 100644
--- 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
index 3a2f83535..df6118280 100644
--- 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,17 +57,25 @@ 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 {
@@ -73,10 +83,10 @@ export const StyledTableHeader = styled("th", {
       }
 
       &: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;
         }
 

From 6938adfd1e5762cec05f26aa1434579f417367d6 Mon Sep 17 00:00:00 2001
From: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
Date: Thu, 30 Jan 2025 13:32:47 -0500
Subject: [PATCH 2/3] refactor(cellheader): changes default value of hover prop
 to false

---
 .../__storybook__/index.stories.tsx           |  2 +-
 .../CellHeader/__storybook__/stories/test.tsx |  4 +-
 .../__snapshots__/index.test.tsx.snap         | 19 +------
 .../core/CellHeader/__tests__/index.test.tsx  |  6 +--
 .../components/src/core/CellHeader/index.tsx  |  2 +-
 .../__snapshots__/index.test.tsx.snap         | 40 ++-------------
 .../__snapshots__/index.test.tsx.snap         | 51 ++-----------------
 7 files changed, 17 insertions(+), 107 deletions(-)

diff --git a/packages/components/src/core/CellHeader/__storybook__/index.stories.tsx b/packages/components/src/core/CellHeader/__storybook__/index.stories.tsx
index e25d77c56..262132d4f 100644
--- a/packages/components/src/core/CellHeader/__storybook__/index.stories.tsx
+++ b/packages/components/src/core/CellHeader/__storybook__/index.stories.tsx
@@ -47,7 +47,7 @@ export const Default = {
     active: false,
     direction: "desc",
     hideSortIcon: false,
-    hover: true,
+    hover: false,
     shouldShowTooltipOnHover: true,
     tooltipProps: { sdsStyle: "dark" },
     tooltipText: "This is a header cell",
diff --git a/packages/components/src/core/CellHeader/__storybook__/stories/test.tsx b/packages/components/src/core/CellHeader/__storybook__/stories/test.tsx
index 6e85f594b..44b5aa4d0 100644
--- a/packages/components/src/core/CellHeader/__storybook__/stories/test.tsx
+++ b/packages/components/src/core/CellHeader/__storybook__/stories/test.tsx
@@ -1,6 +1,7 @@
+import { Args } from "@storybook/types";
 import RawCellHeader from "src/core/CellHeader";
 
-export const TestDemo = (): JSX.Element => (
+export const TestDemo = (props: Args): JSX.Element => (
   <table>
     <tbody>
       <tr>
@@ -10,6 +11,7 @@ export const TestDemo = (): JSX.Element => (
           shouldShowTooltipOnHover
           active
           tooltipText="testTooltipTitle"
+          {...props}
         >
           Header
         </RawCellHeader>
diff --git a/packages/components/src/core/CellHeader/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/CellHeader/__tests__/__snapshots__/index.test.tsx.snap
index 563cf01ff..736ce6faa 100644
--- a/packages/components/src/core/CellHeader/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/CellHeader/__tests__/__snapshots__/index.test.tsx.snap
@@ -5,10 +5,8 @@ exports[`<CellHeader /> Default story renders snapshot 1`] = `
   <tbody>
     <tr>
       <th
-        class="css-bony3j"
-        data-mui-internal-clone-element="true"
+        class="css-ezzkc2"
         direction="desc"
-        tabindex="0"
       >
         <div
           class="css-rm9mvq"
@@ -16,21 +14,6 @@ exports[`<CellHeader /> Default story renders snapshot 1`] = `
           <span>
             Header
           </span>
-          <div
-            class="css-1ft6wgl"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-11x9hfs-MuiSvgIcon-root"
-              data-file-name="IconChevronDownSmall"
-              data-testid="IconChevronDownSmall"
-              fillcontrast="white"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-            />
-          </div>
         </div>
       </th>
     </tr>
diff --git a/packages/components/src/core/CellHeader/__tests__/index.test.tsx b/packages/components/src/core/CellHeader/__tests__/index.test.tsx
index 0459cb089..5113fb701 100644
--- a/packages/components/src/core/CellHeader/__tests__/index.test.tsx
+++ b/packages/components/src/core/CellHeader/__tests__/index.test.tsx
@@ -16,7 +16,7 @@ describe("<CellHeader />", () => {
   });
 
   it("renders tooltip on hover", async () => {
-    render(<Test />);
+    render(<Test hover={true} />);
     const headerCellElement = screen.getByTestId("CellHeader");
     fireEvent.mouseOver(headerCellElement);
     await screen.findByText("testTooltipTitle");
@@ -29,8 +29,8 @@ describe("<CellHeader />", () => {
     expect(style.textAlign).toBe("right");
   });
 
-  it("renders a sort icon when header is active", async () => {
-    render(<Test />);
+  it("renders a sort icon when header is active and hover is true", async () => {
+    render(<Test hover={true} />);
     const headerCellElement = screen.getByTestId("CellHeader");
     const sortIcon =
       headerCellElement.getElementsByClassName("MuiSvgIcon-root")[0];
diff --git a/packages/components/src/core/CellHeader/index.tsx b/packages/components/src/core/CellHeader/index.tsx
index 241a3d0ed..4f2fccfa8 100644
--- a/packages/components/src/core/CellHeader/index.tsx
+++ b/packages/components/src/core/CellHeader/index.tsx
@@ -76,7 +76,7 @@ const CellHeader = forwardRef<HTMLTableCellElement, CellHeaderProps>(
       tooltipProps,
       tooltipText = "",
       tooltipSubtitle,
-      hover = true,
+      hover = false,
       ...rest
     } = props;
 
diff --git a/packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap
index 49a89cb5c..f53968f0a 100644
--- a/packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
       class="css-fitsu2"
     >
       <th
-        class="css-13v2ecb"
+        class="css-t4gp9z"
       >
         <div
           class="css-187gjam"
@@ -22,7 +22,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         </div>
       </th>
       <th
-        class="css-bony3j"
+        class="css-ezzkc2"
       >
         <div
           class="css-rm9mvq"
@@ -30,25 +30,10 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           <span>
             Active Header
           </span>
-          <div
-            class="css-1ft6wgl"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-136pauu-MuiSvgIcon-root"
-              data-file-name="IconChevronDownSmall"
-              data-testid="IconChevronDownSmall"
-              fillcontrast="white"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-            />
-          </div>
         </div>
       </th>
       <th
-        class="css-bony3j"
+        class="css-ezzkc2"
       >
         <div
           class="css-rm9mvq"
@@ -56,25 +41,10 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           <span>
             A very long table header title to test sort icon positioning
           </span>
-          <div
-            class="css-1ft6wgl"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-11x9hfs-MuiSvgIcon-root"
-              data-file-name="IconChevronDownSmall"
-              data-testid="IconChevronDownSmall"
-              fillcontrast="white"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-            />
-          </div>
         </div>
       </th>
       <th
-        class="css-bony3j"
+        class="css-ezzkc2"
       >
         <div
           class="css-rm9mvq"
@@ -85,7 +55,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         </div>
       </th>
       <th
-        class="css-148k9j7"
+        class="css-1scpxyh"
       >
         <div
           class="css-wg04tn"
diff --git a/packages/components/src/core/TableHeader/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/TableHeader/__tests__/__snapshots__/index.test.tsx.snap
index 586c8390d..327a55352 100644
--- a/packages/components/src/core/TableHeader/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/TableHeader/__tests__/__snapshots__/index.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`<TableHeader /> Default story renders snapshot 1`] = `
       class="css-fitsu2"
     >
       <th
-        class="css-bony3j"
+        class="css-ezzkc2"
       >
         <div
           class="css-rm9mvq"
@@ -17,25 +17,10 @@ exports[`<TableHeader /> Default story renders snapshot 1`] = `
           <span>
             Column 1
           </span>
-          <div
-            class="css-1ft6wgl"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-136pauu-MuiSvgIcon-root"
-              data-file-name="IconChevronDownSmall"
-              data-testid="IconChevronDownSmall"
-              fillcontrast="white"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-            />
-          </div>
         </div>
       </th>
       <th
-        class="css-bony3j"
+        class="css-ezzkc2"
       >
         <div
           class="css-rm9mvq"
@@ -43,25 +28,10 @@ exports[`<TableHeader /> Default story renders snapshot 1`] = `
           <span>
             Column 2
           </span>
-          <div
-            class="css-1ft6wgl"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-11x9hfs-MuiSvgIcon-root"
-              data-file-name="IconChevronDownSmall"
-              data-testid="IconChevronDownSmall"
-              fillcontrast="white"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-            />
-          </div>
         </div>
       </th>
       <th
-        class="css-bony3j"
+        class="css-ezzkc2"
       >
         <div
           class="css-rm9mvq"
@@ -69,21 +39,6 @@ exports[`<TableHeader /> Default story renders snapshot 1`] = `
           <span>
             Column 3
           </span>
-          <div
-            class="css-1ft6wgl"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-11x9hfs-MuiSvgIcon-root"
-              data-file-name="IconChevronDownSmall"
-              data-testid="IconChevronDownSmall"
-              fillcontrast="white"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-            />
-          </div>
         </div>
       </th>
     </tr>

From b2ee0df3f49ccd07713d0275620e710d62898f17 Mon Sep 17 00:00:00 2001
From: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
Date: Thu, 30 Jan 2025 13:48:21 -0500
Subject: [PATCH 3/3] fix(cellheader): fixed test stories

---
 .../CellHeader/__storybook__/stories/test.tsx |  1 +
 .../Table/__storybook__/stories/default.tsx   |  6 ++-
 .../__snapshots__/index.test.tsx.snap         | 34 ++++++++++++-
 .../__storybook__/stories/default.tsx         |  8 +--
 .../__storybook__/stories/test.tsx            |  8 +--
 .../__snapshots__/index.test.tsx.snap         | 51 +++++++++++++++++--
 6 files changed, 95 insertions(+), 13 deletions(-)

diff --git a/packages/components/src/core/CellHeader/__storybook__/stories/test.tsx b/packages/components/src/core/CellHeader/__storybook__/stories/test.tsx
index 44b5aa4d0..5f2383b6b 100644
--- a/packages/components/src/core/CellHeader/__storybook__/stories/test.tsx
+++ b/packages/components/src/core/CellHeader/__storybook__/stories/test.tsx
@@ -11,6 +11,7 @@ export const TestDemo = (props: Args): JSX.Element => (
           shouldShowTooltipOnHover
           active
           tooltipText="testTooltipTitle"
+          hover
           {...props}
         >
           Header
diff --git a/packages/components/src/core/Table/__storybook__/stories/default.tsx b/packages/components/src/core/Table/__storybook__/stories/default.tsx
index 93f996fc3..a3dae5aa1 100644
--- a/packages/components/src/core/Table/__storybook__/stories/default.tsx
+++ b/packages/components/src/core/Table/__storybook__/stories/default.tsx
@@ -19,8 +19,10 @@ export const Table = (props: Args): JSX.Element => {
         <CellHeader horizontalAlign="center" hideSortIcon>
           Category
         </CellHeader>
-        <CellHeader active>Active Header</CellHeader>
-        <CellHeader>
+        <CellHeader active hover>
+          Active Header
+        </CellHeader>
+        <CellHeader hover>
           A very long table header title to test sort icon positioning
         </CellHeader>
         <CellHeader hideSortIcon>Component</CellHeader>
diff --git a/packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap
index f53968f0a..0d9e23f07 100644
--- a/packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         </div>
       </th>
       <th
-        class="css-ezzkc2"
+        class="css-bony3j"
       >
         <div
           class="css-rm9mvq"
@@ -30,10 +30,25 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           <span>
             Active Header
           </span>
+          <div
+            class="css-1ft6wgl"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-136pauu-MuiSvgIcon-root"
+              data-file-name="IconChevronDownSmall"
+              data-testid="IconChevronDownSmall"
+              fillcontrast="white"
+              focusable="false"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+            />
+          </div>
         </div>
       </th>
       <th
-        class="css-ezzkc2"
+        class="css-bony3j"
       >
         <div
           class="css-rm9mvq"
@@ -41,6 +56,21 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           <span>
             A very long table header title to test sort icon positioning
           </span>
+          <div
+            class="css-1ft6wgl"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-11x9hfs-MuiSvgIcon-root"
+              data-file-name="IconChevronDownSmall"
+              data-testid="IconChevronDownSmall"
+              fillcontrast="white"
+              focusable="false"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+            />
+          </div>
         </div>
       </th>
       <th
diff --git a/packages/components/src/core/TableHeader/__storybook__/stories/default.tsx b/packages/components/src/core/TableHeader/__storybook__/stories/default.tsx
index b622a2bb8..7b17b7c12 100644
--- a/packages/components/src/core/TableHeader/__storybook__/stories/default.tsx
+++ b/packages/components/src/core/TableHeader/__storybook__/stories/default.tsx
@@ -6,9 +6,11 @@ export const TableHeader = (props: Args): JSX.Element => {
   return (
     <table>
       <RawTableHeader {...props}>
-        <CellHeader active>Column 1</CellHeader>
-        <CellHeader>Column 2</CellHeader>
-        <CellHeader>Column 3</CellHeader>
+        <CellHeader active hover>
+          Column 1
+        </CellHeader>
+        <CellHeader hover>Column 2</CellHeader>
+        <CellHeader hover>Column 3</CellHeader>
       </RawTableHeader>
     </table>
   );
diff --git a/packages/components/src/core/TableHeader/__storybook__/stories/test.tsx b/packages/components/src/core/TableHeader/__storybook__/stories/test.tsx
index fbf69a6df..c77ddb134 100644
--- a/packages/components/src/core/TableHeader/__storybook__/stories/test.tsx
+++ b/packages/components/src/core/TableHeader/__storybook__/stories/test.tsx
@@ -4,9 +4,11 @@ import RawTableHeader from "src/core/TableHeader";
 export const TestDemo = (): JSX.Element => (
   <table>
     <RawTableHeader data-testid="TableHeader">
-      <CellHeader active>Column 1</CellHeader>
-      <CellHeader>Column 2</CellHeader>
-      <CellHeader>Column 3</CellHeader>
+      <CellHeader active hover>
+        Column 1
+      </CellHeader>
+      <CellHeader hover>Column 2</CellHeader>
+      <CellHeader hover>Column 3</CellHeader>
     </RawTableHeader>
   </table>
 );
diff --git a/packages/components/src/core/TableHeader/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/TableHeader/__tests__/__snapshots__/index.test.tsx.snap
index 327a55352..586c8390d 100644
--- a/packages/components/src/core/TableHeader/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/TableHeader/__tests__/__snapshots__/index.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`<TableHeader /> Default story renders snapshot 1`] = `
       class="css-fitsu2"
     >
       <th
-        class="css-ezzkc2"
+        class="css-bony3j"
       >
         <div
           class="css-rm9mvq"
@@ -17,10 +17,25 @@ exports[`<TableHeader /> Default story renders snapshot 1`] = `
           <span>
             Column 1
           </span>
+          <div
+            class="css-1ft6wgl"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-136pauu-MuiSvgIcon-root"
+              data-file-name="IconChevronDownSmall"
+              data-testid="IconChevronDownSmall"
+              fillcontrast="white"
+              focusable="false"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+            />
+          </div>
         </div>
       </th>
       <th
-        class="css-ezzkc2"
+        class="css-bony3j"
       >
         <div
           class="css-rm9mvq"
@@ -28,10 +43,25 @@ exports[`<TableHeader /> Default story renders snapshot 1`] = `
           <span>
             Column 2
           </span>
+          <div
+            class="css-1ft6wgl"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-11x9hfs-MuiSvgIcon-root"
+              data-file-name="IconChevronDownSmall"
+              data-testid="IconChevronDownSmall"
+              fillcontrast="white"
+              focusable="false"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+            />
+          </div>
         </div>
       </th>
       <th
-        class="css-ezzkc2"
+        class="css-bony3j"
       >
         <div
           class="css-rm9mvq"
@@ -39,6 +69,21 @@ exports[`<TableHeader /> Default story renders snapshot 1`] = `
           <span>
             Column 3
           </span>
+          <div
+            class="css-1ft6wgl"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-11x9hfs-MuiSvgIcon-root"
+              data-file-name="IconChevronDownSmall"
+              data-testid="IconChevronDownSmall"
+              fillcontrast="white"
+              focusable="false"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+            />
+          </div>
         </div>
       </th>
     </tr>