Fix IE bugs, add theme settings + icons

thisisdano · Mar 10, 2021 · Jan 19, 2021 · Jan 19, 2021 · Jan 19, 2021 · Jan 19, 2021
commit 767d108d3af7083bb5eed849b515e2ea9d9cefe4
diff --git a/src/js/components/table.js b/src/js/components/table.js
@@ -8,10 +8,20 @@ const SORTED = "aria-sort";
 const ASCENDING = "ascending";
 const DESCENDING = "descending";
 const SORT_OVERRIDE = "data-sort-value";
-const ICON_PATH = "../../dist/img/sprite.svg";
-const ICON_UNSORTED = `${ICON_PATH}#swap_vert`;
-const ICON_ASCENDING = `${ICON_PATH}#arrow_upward`;
-const ICON_DESCENDING = `${ICON_PATH}#arrow_downward`;
+
+const ICON_SOURCE = `
+  <svg class="usa-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <g id="descending">
+      <path d="M19,15l-1.41-1.41L13,18.17V2H11v16.17l-4.59-4.59L5,15l7,7L19,15z"/>
+    </g>
+    <g id="ascending">
+      <path transform="rotate(180, 12, 12)" d="M19,15l-1.41-1.41L13,18.17V2H11v16.17l-4.59-4.59L5,15l7,7L19,15z"/>
+    </g>
+    <g id="unsorted" >
+      <polygon points="15.17 15 13 17.17 13 6.83 15.17 9 16.58 7.59 12 3 7.41 7.59 8.83 9 11 6.83 11 17.17 8.83 15 7.42 16.41 12 21 16.59 16.41 15.17 15"/>
+    </g>
+  </svg>
+`;
 
 const BUTTON_CLASS = `${PREFIX}-table__header__button`;
 const BUTTON = `.${BUTTON_CLASS}`;
@@ -73,7 +83,6 @@ const updateSortLabel = (header) => {
  */
 const unsetSort = (header) => {
   header.removeAttribute(SORTED);
-  updateButtonIcon(header.querySelector(BUTTON))
   updateSortLabel(header);
 }
 
@@ -85,13 +94,34 @@ const unsetSort = (header) => {
  */
 const sortRows = (header, ascending) => {
   header.setAttribute(SORTED, ascending === true ? DESCENDING : ASCENDING );
-  updateButtonIcon(header.querySelector(BUTTON), ascending === true ? DESCENDING : ASCENDING);
   updateSortLabel(header);
 
   const tbody = header.closest(TABLE).querySelector('tbody');
-  Array.from(tbody.querySelectorAll('tr'))
-    .sort(compareFunction(Array.from(header.parentNode.children).indexOf(header), !ascending))
-    .forEach(tr => tbody.appendChild(tr) );
+
+  // We can use Array.from() and Array.sort() instead once we drop IE support, likely in the summer of 2021
+  //
+  // Array.from(tbody.querySelectorAll('tr').sort(
+  //   compareFunction(
+  //     Array.from(header.parentNode.children).indexOf(header),
+  //     !ascending)
+  //   )
+  // .forEach(tr => tbody.appendChild(tr) );
+
+  // turn array-like sets into true arrays so that we can sort them
+  let allRows = [].slice.call(tbody.querySelectorAll('tr')); 
+  const allHeaders = [].slice.call(header.parentNode.children);
+  const thisHeaderIndex = allHeaders.indexOf(header);
+  allRows.sort(
+    compareFunction(
+      thisHeaderIndex, 
+      !ascending
+    )
+  ).forEach(tr => {
+    [].slice.call(tr.children).forEach(td => td.removeAttribute("data-sort-active"));
+    tr.children[thisHeaderIndex].setAttribute("data-sort-active", true);
+    tbody.appendChild(tr) 
+  });
+
   return true;
 }
 
@@ -135,29 +165,11 @@ const createHeaderButton = (header) => {
   const buttonEl = document.createElement("button");
   buttonEl.setAttribute('tabindex', '0');
   buttonEl.classList.add(BUTTON_CLASS);
-  buttonEl.innerHTML = `
-    <svg class="usa-icon usa-icon--size-3" aria-hidden="true" role="img">
-      <use href="${ICON_UNSORTED}"></use>
-    </svg>
-  `;
+  buttonEl.innerHTML = `${ICON_SOURCE}`;
   header.appendChild(buttonEl);
   updateSortLabel(header);
 }
 
-/**
- ** Updates button icon path to display a sort direction, if provided.
- * Otherwise, show the unsorted icon.
- * @param {HTMLButtonElement} button
- * @param {String} sortDirection optional
- */
-
-const updateButtonIcon = (button, sortDirection = "") => {
-  let icon = ICON_UNSORTED;
-  if (sortDirection === ASCENDING) icon = ICON_ASCENDING;
-  if (sortDirection === DESCENDING) icon = ICON_DESCENDING;
-  button.querySelector(".usa-icon use").setAttribute("href", icon);
-}
-
 
 /**
  * Update the live region immediately following the table whenever sort changes.

diff --git a/src/stylesheets/core/placeholders/_table.scss b/src/stylesheets/core/placeholders/_table.scss
@@ -53,13 +53,18 @@
   }
 
   @mixin table-header-sorted-styles {
-    background-color: color("base-lightest");
-    &:after {
-      border-bottom-color: color("ink");
-    }
+    background-color: color("theme-table-sorted-background-color");
+    border-width: units(2px) units(2px) units(1px);
+    border-left-color: color("theme-table-sorted-border-color");
+    border-right-color: color("theme-table-sorted-border-color");
+    border-top-color: color("theme-table-sorted-border-color");
+
+    // &:after {
+    //   border-bottom-color: color("ink");
+    // }
   }
 
-  @mixin table-button-unsorted-styles {
+  @mixin table-button-default-styles {
     @include button-unstyled;
     // @include add-background-svg("usa-icons/swap_vert");
     position: absolute;
@@ -71,31 +76,51 @@
     cursor: pointer;
     display: inline-block;
     margin: 0;
-    @include u-square(3);
+    @include u-square(4);
     text-decoration: none;
+    text-align: center;
     transform: translate(0, -50%);
     &:hover {
-      background-color: color("base-lightest");
-      color: color("ink");
+      // background-color: color("base-lightest");
+      // color: color("ink");
+    }
+    .usa-icon {
+      @include u-square(3);
+      vertical-align: middle;
+      & > g {
+        fill: transparent;
+      }
+    }
+  }
+  @mixin table-button-unsorted-styles {
+    @include table-button-default-styles;
+    .usa-icon > g#unsorted {
+      fill: color("theme-table-unsorted-icon-color");
     }
   }
 
   @mixin table-button-sorted-ascending-styles {
-    // background-size: units(2);
-    // @include add-background-svg("usa-icons/arrow_upward");
+    @include table-button-default-styles;
+    .usa-icon > g#ascending {
+      fill: color("theme-table-sorted-icon-color");
+    }
   }
   @mixin table-button-sorted-descending-styles {
-    // background-size: units(2);
-    // @include add-background-svg("usa-icons/arrow_downward");
+    @include table-button-default-styles;
+    .usa-icon > g#descending {
+      fill: color("theme-table-sorted-icon-color");
+    }
   }
 
   .usa-table__header--sortable {
     @include table-header-unsorted-styles;
-
   }
 
-  .usa-table__header__button {
-    @include table-button-unsorted-styles;
+  .usa-table__header--sortable:not([aria-sort]),
+  .usa-table__header--sortable[aria-sort="none"] {
+    .usa-table__header__button {
+      @include table-button-unsorted-styles;
+    }
   }
 
   .usa-table__header--sortable[aria-sort="descending"] {
@@ -111,6 +136,20 @@
       @include table-button-sorted-ascending-styles;
     }
   }
+
+  td[data-sort-active],
+  th[data-sort-active] {
+    background-color: color("theme-table-sorted-background-color");
+    border-left-width: units(2px);
+    border-right-width: units(2px);
+    border-left-color: color("theme-table-sorted-border-color");
+    border-right-color: color("theme-table-sorted-border-color");
+  }
+  tr:last-child > td[data-sort-active],
+  tr:last-child > th[data-sort-active] {
+    border-bottom-width: units(2px);
+    border-bottom-color: color("theme-table-sorted-border-color");
+  }
 }
 
 %usa-table--borderless {

diff --git a/src/stylesheets/settings/_settings-components.scss b/src/stylesheets/settings/_settings-components.scss
@@ -175,6 +175,12 @@ $theme-table-stripe-background-color: "base-lightest" !default;
 $theme-table-stripe-text-color: "ink" !default;
 $theme-table-text-color: "ink" !default;
 
+$theme-table-sorted-border-color: "accent-cool-darker" !default;
+$theme-table-sorted-background-color: "accent-cool-light" !default;
+$theme-table-sorted-icon-color: "base" !default;
+$theme-table-unsorted-icon-color: "ink" !default;
+
+
 // Tooltips
 $theme-tooltip-background-color: "ink" !default;
 $theme-tooltip-font-color: "base-lightest" !default;

diff --git a/src/stylesheets/theme/_uswds-theme-components.scss b/src/stylesheets/theme/_uswds-theme-components.scss
@@ -174,6 +174,10 @@ $theme-table-header-text-color: "ink";
 $theme-table-stripe-background-color: "base-lightest";
 $theme-table-stripe-text-color: "ink";
 $theme-table-text-color: "ink";
+$theme-table-sorted-border-color: "accent-cool-darker";
+$theme-table-sorted-background-color: "accent-cool-light";
+$theme-table-sorted-icon-color: "base";
+$theme-table-unsorted-icon-color: "ink";
 
 // Tooltips
 $theme-tooltip-background-color: "ink";