fix(cellheader): fixed test stories

chanzuckerberg · Jan 30, 2025 · b2ee0df · b2ee0df
1 parent 6938adf
commit b2ee0df
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 13 deletions.
diff --git 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
@@ -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
@@ -22,25 +22,55 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         </div>
       </th>
       <th
-        class="css-ezzkc2"
+        class="css-bony3j"
       >
         <div
           class="css-rm9mvq"
         >
           <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"
         >
           <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
@@ -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
@@ -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
@@ -9,36 +9,81 @@ exports[`<TableHeader /> Default story renders snapshot 1`] = `
       class="css-fitsu2"
     >
       <th
-        class="css-ezzkc2"
+        class="css-bony3j"
       >
         <div
           class="css-rm9mvq"
         >
           <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"
         >
           <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"
         >
           <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>
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,6 +11,7 @@ export const TestDemo = (props: Args): JSX.Element => ( @@
               shouldShowTooltipOnHover
               active
               tooltipText="testTooltipTitle"
+              hover
               {...props}
             >
               Header
@@ Expand Down @@