Style ecr-library sort (#2991)

* remove outline * remove highlight color * Flex end * [pre-commit.ci] auto fixes from pre-commit hooks * update snap * return outline * remove commented code * pr request * add comment * pr comments * Update containers/ecr-viewer/src/styles/custom-styles.scss Co-authored-by: Mary McGrath <[email protected]> --------- Co-authored-by: Lina <[email protected]> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Mary McGrath <[email protected]>
CDCgov · Dec 5, 2024 · 56997de · 56997de
1 parent c157957
commit 56997de
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 30 deletions.
diff --git a/containers/ecr-viewer/src/app/components/EcrTableClient.tsx b/containers/ecr-viewer/src/app/components/EcrTableClient.tsx
@@ -172,7 +172,7 @@ export const EcrTableClient: React.FC<EcrTableClientProps> = ({
                   data-sortable={column.dataSortable}
                   aria-sort={getAriaSortValue(column.sortDirection)}
                 >
-                  <div className={"display-flex"}>
+                  <div className="sort-div">
                     {column.value}
                     <SortButton
                       columnName={column.id}

diff --git a/containers/ecr-viewer/src/app/components/SortButton.tsx b/containers/ecr-viewer/src/app/components/SortButton.tsx
@@ -33,32 +33,27 @@ export const SortButton: React.FC<SortButtonProps> = ({
     );
     arrowsToReset.forEach((arrow) => {
       arrow.id !== buttonSelector
-        ? arrow.setAttribute(
-            "class",
-            "sort-button usa-button sortable-column margin-left-auto",
-          )
+        ? arrow.setAttribute("class", "sort-button usa-button sortable-column")
         : "";
     });
   }
 
   function changeArrowDirection() {
     const buttons = document.querySelectorAll(`button#${buttonSelector}`);
     buttons.forEach((button) => {
-      button.className ===
-      "sort-button usa-button sortable-column margin-left-auto"
+      button.className === "sort-button usa-button sortable-column"
         ? button.setAttribute(
             "class",
-            "sort-button usa-button margin-left-auto sortable-asc-column margin-left-auto",
+            "sort-button usa-button sortable-asc-column",
           )
-        : button.className ===
-            "sort-button usa-button sortable-asc-column margin-left-auto"
+        : button.className === "sort-button usa-button sortable-asc-column"
           ? button.setAttribute(
               "class",
-              "sort-button usa-button sortable-desc-column margin-left-auto",
+              "sort-button usa-button sortable-desc-column",
             )
           : button.setAttribute(
               "class",
-              "sort-button usa-button sortable-asc-column margin-left-auto",
+              "sort-button usa-button sortable-asc-column",
             );
     });
   }
@@ -81,7 +76,7 @@ export const SortButton: React.FC<SortButtonProps> = ({
     <Button
       id={`${columnName}-sort-button`}
       aria-label={`Sort by ${columnName}`}
-      className={`sort-button usa-button ${className} margin-left-auto`}
+      className={`sort-button usa-button ${className}`}
       type="button"
       onClick={() => {
         handleSort(columnName, direction);

diff --git a/containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrTable.test.tsx.snap b/containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrTable.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`EcrTable should match snapshot 1`] = `
                 Patient
                 <button
                   aria-label="Sort by patient"
-                  class="usa-button sort-button usa-button sortable-column margin-left-auto"
+                  class="usa-button sort-button usa-button sortable-column"
                   data-testid="button"
                   id="patient-sort-button"
                   type="button"
@@ -44,12 +44,12 @@ exports[`EcrTable should match snapshot 1`] = `
               scope="col"
             >
               <div
-                class="display-flex"
+                class="sort-div"
               >
                 Received Date
                 <button
                   aria-label="Sort by date_created"
-                  class="usa-button sort-button usa-button sortable-desc-column margin-left-auto"
+                  class="usa-button sort-button usa-button sortable-desc-column"
                   data-testid="button"
                   id="date_created-sort-button"
                   type="button"
@@ -68,7 +68,7 @@ exports[`EcrTable should match snapshot 1`] = `
                 Encounter Date
                 <button
                   aria-label="Sort by report_date"
-                  class="usa-button sort-button usa-button sortable-column margin-left-auto"
+                  class="usa-button sort-button usa-button sortable-column"
                   data-testid="button"
                   id="report_date-sort-button"
                   type="button"

diff --git a/containers/ecr-viewer/src/styles/custom-styles.scss b/containers/ecr-viewer/src/styles/custom-styles.scss
@@ -184,39 +184,47 @@ h4 {
 
 .sort-button{
   border: none;
-  outline: none;
   transition: none;
+  margin-left: auto;
+  background-color: transparent;
   &:hover{
-    outline: none;
     background-color: transparent; /* Removes the hover background */
     color: inherit; /* Keeps the text color unchanged */
   }
   &:active {
-    outline: none;
-    background-color: inherit; /* Keeps the original background color */
+    background-color: transparent; /* Keeps the original background color */
     color: inherit; /* Keeps the text color unchanged */
   }
   &:focus {
-    outline: none;
-    background-color: inherit; /* Removes fill after click */
+    background-color: transparent; /* Removes fill after click */
+    color: inherit; /* Keeps the text color unchanged */
   }
 }
 
-.sortable-column{
-  background-color: transparent;
-  @include add-background-svg("usa-icons/sort_arrow");
+.sortable-column, .sortable-desc-column, .sortable-asc-column{
+    &.usa-button{
+      margin-left: auto;
+      justify-content: flex-end;
+      padding: 12px;
+    }
 }
 
-.sortable-desc-column{
-  background-color: transparent;
+.sortable-column {
+  @include add-background-svg("usa-icons/sort_arrow");}
+
+.sortable-desc-column {
   @include add-background-svg("usa-icons/arrow_downward");
 }
 
-.sortable-asc-column{
-  background-color: transparent;
+.sortable-asc-column {
   @include add-background-svg("usa-icons/arrow_upward");
 }
 
+.sort-div {
+  width: 100%;
+  display: flex;
+}
+
 .ecr-client-wrapper {
   height: calc(100% - 4rem);
 }
@@ -230,6 +238,16 @@ h4 {
   border-collapse: separate;
   font-family: "Source Sans Pro Web";
 
+  // Hide highlight color by matching th color on sorted column - per design
+  &.usa-table th{
+    &[aria-sort=descending] {
+      background-color: #DFE1E2;
+    }
+    &[aria-sort=ascending] {
+      background-color: #DFE1E2;
+    }
+  }
+
   a {
     color: var(--Primary-primary, #005EA2);
     font-size: 1rem;