fix: make sortable table header chevron clickable (#860)

* fix: snapshots

* fix: make sortable table header chevron clickable

* chore: remove not required changes

* chore: resolve conflicts

* chore: resolve comments

* chore: updates screenshot

Author: taksuparth

packages/tablev2/Table.tsx

@@ -146,6 +146,12 @@ function HeaderCell<Entry>({
       className={style.sortableButton}
     >
       {column.header}
+      {Boolean(column.sorter) && (
+        <span
+          data-cy="sortIcon"
+          className={cx(style.sortable(order), "sortIcon")}
+        />
+      )}
     </ResetButton>
   ) : (
     column.header
@@ -155,7 +161,7 @@ function HeaderCell<Entry>({
     <div
       className={cx(style.headerCell(column.textAlign), {
         [style.makeSpaceForSortIndicator]: Boolean(column.sorter),
-        [style.sortable(order)]: Boolean(column.sorter),
+        [style.headerHover]: Boolean(column.sorter),
         [style.rowScrollShadow]: showScrollShadow
       })}
       id={id}

packages/tablev2/__snapshots__/tablev2.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`Table v2 rendering renders default 1`] = `
     >
       <div
         aria-sort="none"
-        class="css-1kf7gto"
+        class="css-1il2bhb"
         id="name"
         role="columnheader"
       >
@@ -27,6 +27,10 @@ exports[`Table v2 rendering renders default 1`] = `
             <div>
               Name
             </div>
+            <span
+              class="css-123nj8f sortIcon"
+              data-cy="sortIcon"
+            />
           </div>
         </button>
         <div
@@ -966,7 +970,7 @@ exports[`Table v2 rendering renders without a sticky first column 1`] = `
     >
       <div
         aria-sort="none"
-        class="css-kzvdt0"
+        class="css-1me0nmx"
         id="name"
         role="columnheader"
       >
@@ -981,6 +985,10 @@ exports[`Table v2 rendering renders without a sticky first column 1`] = `
             <div>
               Name
             </div>
+            <span
+              class="css-123nj8f sortIcon"
+              data-cy="sortIcon"
+            />
           </div>
         </button>
         <div

packages/tablev2/style.ts

@@ -79,9 +79,14 @@ export const sortable = (dir: "asc" | "desc" | null) => css`
       "currentColor"
     )};
   }
+`;
+
+export const headerHover = css`
   &:hover {
-    &:after {
-      display: inline-block;
+    .sortIcon {
+      :after {
+        display: inline-block;
+      }
     }
   }
 `;

packages/tablev2/tablev2.test.tsx

@@ -265,6 +265,35 @@ describe("Table v2", () => {
 
       expect(sorterFn).toHaveBeenCalledWith("desc", -1);
     });
+    it("calls the function passed to the 'sorter' prop when clicking the arrow besides heading", () => {
+      const sorterFn = jest.fn();
+      const { getByTestId } = render(
+        <Table
+          data={mockData}
+          toId={el => el.id.toString()}
+          columns={[
+            {
+              id: "name",
+              header: <div>Name</div>,
+              textAlign: "left",
+              render: x => (
+                <a href={`http://google.com/?q=${encodeURIComponent(x.name)}`}>
+                  {x.name}
+                </a>
+              ),
+              initialWidth: "300px",
+              sorter: sorterFn
+            }
+          ]}
+          initialSorter={{ by: "name", order: "asc" }}
+        />
+      );
+
+      expect(sorterFn).toHaveBeenCalledWith("asc", 1);
+      const sortIcon = getByTestId("sortIcon");
+      sortIcon.click();
+      expect(sorterFn).toHaveBeenLastCalledWith("desc", -1);
+    });
     it("sorts strings with Sorter.string", () => {
       const nameSort = Sorter.string("name");
       const ascSort = nameSort("asc", -1);