Merge pull request #3128 from cisagov/nl/2928-error-message-bundle

#2928 - Updated all error messages to have error icon - [AB]
cisagov · Nov 30, 2024 · 28b964c · 28b964c
2 parents 8cf2c96 + 62ec595
commit 28b964c
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 13 deletions.
diff --git a/src/registrar/assets/src/js/getgov/table-members.js b/src/registrar/assets/src/js/getgov/table-members.js
@@ -102,7 +102,7 @@ export class MembersTable extends BaseTable {
           aria-label="Expand for additional information"
         >
           <span>Expand</span>
-          <svg class="usa-icon usa-icon--big" aria-hidden="true" focusable="false" role="img" width="24">
+          <svg class="usa-icon usa-icon--large" aria-hidden="true" focusable="false" role="img" width="24">
             <use xlink:href="/public/img/sprite.svg#expand_more"></use>
           </svg>
         </button>

diff --git a/src/registrar/assets/src/sass/_theme/_base.scss b/src/registrar/assets/src/sass/_theme/_base.scss
@@ -253,4 +253,11 @@ abbr[title] {
 
 .break-word {
   word-break: break-word;
+}
+
+//Icon size adjustment used by buttons and form errors
+.usa-icon.usa-icon--large {
+  margin: 0;
+  height: 1.5em;
+  width: 1.5em;
 }
diff --git a/src/registrar/assets/src/sass/_theme/_buttons.scss b/src/registrar/assets/src/sass/_theme/_buttons.scss
@@ -243,12 +243,6 @@ a .usa-icon,
   width: 1.3em;
 }
 
-.usa-icon.usa-icon--big {
-  margin: 0;
-  height: 1.5em;
-  width: 1.5em;
-}
-
 // Red, for delete buttons
 // Used on: All delete buttons
 // Note: Can be simplified by adding text-secondary to delete anchors in tables

diff --git a/src/registrar/templates/includes/domain_requests_table.html b/src/registrar/templates/includes/domain_requests_table.html
@@ -55,7 +55,7 @@ <h2 id="domain-requests-header" class="display-inline-block">Domain requests</h2
         <div class="section-outlined__utility-button mobile-lg:padding-right-105 {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6 desktop:padding-left-3{% endif %}" id="export-csv">
             <section aria-label="Domain Requests report component" class="margin-top-205">
               <a href="{% url 'export_data_type_requests' %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right" role="button">
-                  <svg class="usa-icon usa-icon--big" aria-hidden="true" focusable="false" role="img" width="24" height="24">
+                  <svg class="usa-icon usa-icon--large" aria-hidden="true" focusable="false" role="img" width="24" height="24">
                       <use xlink:href="{% static 'img/sprite.svg' %}#file_download"></use>
                   </svg>Export as CSV
               </a>

diff --git a/src/registrar/templates/includes/domains_table.html b/src/registrar/templates/includes/domains_table.html
@@ -45,7 +45,7 @@ <h2 id="domains-header" class="display-inline-block">Domains</h2>
     <div class="section-outlined__utility-button mobile-lg:padding-right-105 {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6 desktop:padding-left-3{% endif %}">
       <section aria-label="Domains report component" class="margin-top-205">
         <a href="{% url 'export_data_type_user' %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right" role="button">
-          <svg class="usa-icon usa-icon--big" aria-hidden="true" focusable="false" role="img" width="24" height="24">
+          <svg class="usa-icon usa-icon--large" aria-hidden="true" focusable="false" role="img" width="24" height="24">
             <use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
           </svg>Export as CSV
         </a>

diff --git a/src/registrar/templates/includes/input_with_errors.html b/src/registrar/templates/includes/input_with_errors.html
@@ -52,9 +52,12 @@
   {% if field.errors %}
     <div id="{{ widget.attrs.id }}__error-message">
     {% for error in field.errors %}
-      <span class="usa-error-message" role="alert">
-        {{ error }}
-      </span>
+      <div class="usa-error-message display-flex" role="alert">
+        <svg class="usa-icon usa-icon--large" focusable="true" role="img" aria-label="Error">
+          <use xlink:href="{%static 'img/sprite.svg'%}#error"></use>
+        </svg>
+        <span class="margin-left-05">{{ error }}</span>
+      </div>
     {% endfor %}
     </div>
   {% endif %}

diff --git a/src/registrar/templates/includes/members_table.html b/src/registrar/templates/includes/members_table.html
@@ -39,7 +39,7 @@
       <div class="section-outlined__utility-button mobile-lg:padding-right-105 {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6 desktop:padding-left-3{% endif %}">
         <section aria-label="Domains report component" class="margin-top-205">
           <a href="{% url 'export_members_portfolio' %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right" role="button">
-            <svg class="usa-icon usa-icon--big" aria-hidden="true" focusable="false" role="img" width="24" height="24">
+            <svg class="usa-icon usa-icon--large" aria-hidden="true" focusable="false" role="img" width="24" height="24">
               <use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
             </svg>Export as CSV
           </a>