Migrate FontAwesome to va-icon in EZR (#29798)

Co-authored-by: Matthew Kerns <matthewkerns@matthew-kerns.myfiosgateway.com>
department-of-veterans-affairs · May 15, 2024 · c0dc4d3 · c0dc4d3
1 parent cad88c7
commit c0dc4d3
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/src/applications/ezr/components/FormFields/DependentList.jsx b/src/applications/ezr/components/FormFields/DependentList.jsx
@@ -127,9 +127,11 @@ const DependentList = ({ labelledBy, list, mode, onDelete }) => {
           >
             {content['button-edit']}{' '}
             <span className="sr-only dd-privacy-mask">{dependentName}</span>{' '}
-            <i
-              role="presentation"
-              className="fas fa-chevron-right vads-u-margin-left--0p5"
+            <va-icon
+              class="vads-u-margin-left--0p5"
+              icon="chevron_right"
+              size={3}
+              aria-hidden="true"
             />
           </Link>
           {/* eslint-disable-next-line @department-of-veterans-affairs/prefer-button-component */}
@@ -140,9 +142,11 @@ const DependentList = ({ labelledBy, list, mode, onDelete }) => {
               handlers.showConfirm({ index, description: modalDescription })
             }
           >
-            <i
-              role="presentation"
-              className="fas fa-times vads-u-margin-right--0p5"
+            <va-icon
+              class="vads-u-margin-right--0p5"
+              icon="close"
+              size={3}
+              aria-hidden="true"
             />{' '}
             {content['button-remove']}{' '}
             <span className="sr-only dd-privacy-mask">{dependentName}</span>

diff --git a/src/applications/ezr/sass/_buttons.scss b/src/applications/ezr/sass/_buttons.scss
@@ -1,5 +1,6 @@
 .ezr-button-link, .ezr-button-remove {
   &:hover, &:focus, &:active { padding: 4px 8px !important; }
+  va-icon { vertical-align: middle; }
 }
 .ezr-button-remove { border-radius: 5px; color: var(--vads-color-secondary-dark) !important; font-weight: 700; text-decoration: none; text-transform: uppercase;
   &:hover, &:focus, &:active { background: var(--vads-color-secondary-lightest) !important; }

diff --git a/src/applications/ezr/sass/_listLoopPattern.scss b/src/applications/ezr/sass/_listLoopPattern.scss
@@ -1,6 +1,5 @@
 .ezr-listloop--list { list-style: none !important; margin: 0; max-width: 26em; padding: 0; }
 .ezr-listloop--tile { margin-bottom: 1em; padding: 1em; }
-.ezr-listloop--tile .fas { font-size: .875em; }
 
 legend.schemaform-block-title:focus { outline: none !important; }