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
d2iq · Oct 26, 2022 · a3c3764 · a3c3764
1 parent 06cf768
commit a3c3764
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 5 deletions.
diff --git a/packages/tablev2/Table.tsx b/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}

diff --git a/packages/tablev2/__snapshots__/tablev2.test.tsx.snap b/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

diff --git a/packages/tablev2/style.ts b/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;
+ }
  }
  }
 `;

diff --git a/packages/tablev2/tablev2.test.tsx b/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);