Merge pull request #3483 from cisagov/rjm/3396-sort-ui

#3396: Redesign sort header UI - [RJM]

src/registrar/assets/js/uswds-edited.js

@@ -5695,19 +5695,35 @@ const createHeaderButton = (header, headerName) => {
   buttonEl.setAttribute("tabindex", "0");
   buttonEl.classList.add(SORT_BUTTON_CLASS);
   // ICON_SOURCE
+  // ---- END DOTGOV EDIT
+  // Change icons on sort, use source from arro_upward and arrow_downward
+  // buttonEl.innerHTML = Sanitizer.escapeHTML`
+  // <svg class="${PREFIX}-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  //   <g class="descending" fill="transparent">
+  //     <path d="M17 17L15.59 15.59L12.9999 18.17V2H10.9999V18.17L8.41 15.58L7 17L11.9999 22L17 17Z" />
+  //   </g>
+  //   <g class="ascending" fill="transparent">
+  //     <path transform="rotate(180, 12, 12)" d="M17 17L15.59 15.59L12.9999 18.17V2H10.9999V18.17L8.41 15.58L7 17L11.9999 22L17 17Z" />
+  //   </g>
+  //   <g class="unsorted" fill="transparent">
+  //     <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>
+  // `;
   buttonEl.innerHTML = Sanitizer.escapeHTML`
   <svg class="${PREFIX}-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <g class="descending" fill="transparent">
-      <path d="M17 17L15.59 15.59L12.9999 18.17V2H10.9999V18.17L8.41 15.58L7 17L11.9999 22L17 17Z" />
+      <path d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/>
     </g>
     <g class="ascending" fill="transparent">
-      <path transform="rotate(180, 12, 12)" d="M17 17L15.59 15.59L12.9999 18.17V2H10.9999V18.17L8.41 15.58L7 17L11.9999 22L17 17Z" />
+      <path d="m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
     </g>
     <g class="unsorted" fill="transparent">
       <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>
   `;
+  // ---- END DOTGOV EDIT
   header.appendChild(buttonEl);
   updateSortLabel(header, headerName);
 };

src/registrar/assets/src/sass/_theme/_tables.scss

@@ -41,13 +41,8 @@ th {
   }
 }
 
-// The member table has an extra "expand" row, which looks like a single row.
+// .dotgov-table allows us to customize .usa-table on the user-facing pages,
-// But the DOM disagrees - so we basically need to hide the border on both rows.
+// while leaving the default styles for use on the admin pages
-#members__table-wrapper .dotgov-table tr:nth-last-child(2) td,
-#members__table-wrapper .dotgov-table tr:nth-last-child(2) th {
-  border-bottom: none;
-}
-
 .dotgov-table {
   width: 100%;
 
@@ -68,7 +63,8 @@ th {
       border-bottom: 1px solid color('base-lighter');
     }
 
-    thead th {
+    thead th,
+    thead th[aria-sort] {
       color: color('primary-darker');
       border-bottom: 2px solid color('base-light');
     }
@@ -93,17 +89,46 @@ th {
     }
   }
 
-  @include at-media(tablet-lg) {
+  // Sortable headers
-    th[data-sortable] .usa-table__header__button {
+  th[data-sortable][aria-sort=ascending],
-      right: auto;
+  th[data-sortable][aria-sort=descending] {
-  
+    background-color: transparent;
-      &[aria-sort=ascending],
+    .usa-table__header__button {
-      &[aria-sort=descending],
+      background-color: color('accent-cool-lightest');
-      &:not([aria-sort]) {
+      border-radius: units(.5);
-        right: auto;
+      color: color('primary-darker');
+      &:hover {
+        background-color: color('accent-cool-lightest');
       }
     }
   }
+  @include at-media(tablet-lg) {
+    th[data-sortable]:not(.left-align-sort-button) .usa-table__header__button {
+      // position next to the copy
+      right: auto;
+      // slide left to mock a margin between the copy and the icon
+      transform: translateX(units(1));
+      // fix vertical alignment
+      top: units(1.5);
+    }
+    th[data-sortable].left-align-sort-button .usa-table__header__button {
+      left: 0;
+    }
+  }
+
+  // Currently the 'flash' when sort is clicked,
+  // this will become persistent if the double-sort bug is fixed
+  td[data-sort-active],
+  th[data-sort-active] {
+    background-color: color('primary-lightest');
+  }
+}
+
+// The member table has an extra "expand" row, which looks like a single row.
+// But the DOM disagrees - so we basically need to hide the border on both rows.
+#members__table-wrapper .dotgov-table tr:nth-last-child(2) td,
+#members__table-wrapper .dotgov-table tr:nth-last-child(2) th {
+  border-bottom: none;
 }
 
 .dotgov-table--cell-padding-2 {

src/registrar/templates/includes/member_domains_edit_table.html

@@ -45,7 +45,7 @@
       <caption class="sr-only">member domains</caption>
       <thead>
         <tr>
-          <th data-sortable="checked" scope="col" role="columnheader" class="padding-right-105 width-6"><span class="sr-only">Assigned domains</span></th>
+          <th data-sortable="checked" scope="col" role="columnheader" class="padding-right-105 width-6 left-align-sort-button"><span class="sr-only">Assigned domains</span></th>
           <!-- We override default sort to be name/ascending in the JSON endpoint. We add the correct aria-sort attribute here to reflect that in the UI -->
           <th data-sortable="name" scope="col" role="columnheader" aria-sort="descending">Domains</th>
         </tr>