Add optional label to text, options, phone, and multi-checkbox inputs

Use new optional attribute on fields that are optional
Update styling to fit optional label and update translations

styles/elements/_inputs.scss

@@ -378,8 +378,7 @@ select {
     margin-left: $gap * 4;
 
     .usa-input {
-      input,
-      label {
+      input {
         max-width: 12rem;
       }
 

templates/components/multi_checkbox_input.html

@@ -1,7 +1,7 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/tooltip.html" import Tooltip %}
 
-{% macro MultiCheckboxInput(field, other_input_field=None, tooltip=None, inline=False) -%}
+{% macro MultiCheckboxInput(field, other_input_field=None, tooltip=None, inline=False, optional=True) -%}
   <multicheckboxinput
     v-cloak
     name='{{ field.name }}'
@@ -24,6 +24,10 @@
         <legend>
           <div class="usa-input__title">
             {{ field.label | striptags}}
+            {% if optional %}
+              &nbsp;
+              <span class="usa-input-label-helper">(optional)</span>
+            {% endif %}
             {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}
             {% if not field.description %}
               {{ validation_icons }}

templates/components/options_input.html

@@ -28,6 +28,10 @@
           <legend>
             <div class="usa-input__title{% if not field.description %}-inline{% endif %}">
               {{ field.label | striptags}}
+              {% if optional %}
+                &nbsp;
+                <span class="usa-input-label-helper">(optional)</span>
+              {% endif %}
               {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}
             </div>
 

templates/components/text_input.html

@@ -40,6 +40,10 @@
         <label for={{field.name}}>
           <div class="usa-input__title">
             {{ label }}
+            {% if optional %}
+              &nbsp;
+              <span class="usa-input-label-helper">(optional)</span>
+            {% endif %}
             {% if tooltip and not disabled %}
               {{ Tooltip(tooltip, tooltip_title) }}
             {% endif %}

templates/fragments/edit_user_form.html

@@ -22,9 +22,9 @@
         {{ TextInput(form.email, validation='email', optional=False) }}
         {{ PhoneInput(form.phone_number, form.phone_ext, phone_optional=False) }}
 
-        {{ OptionsInput(form.service_branch) }}
-        {{ OptionsInput(form.citizenship) }}
-        {{ OptionsInput(form.designation) }}
+        {{ OptionsInput(form.service_branch, optional=False) }}
+        {{ OptionsInput(form.citizenship, optional=False) }}
+        {{ OptionsInput(form.designation, optional=False) }}
 
 
         <div class="usa-input">

templates/portfolios/admin.html

@@ -17,7 +17,7 @@
               {{ portfolio_form.csrf_token }}
               <div class='form-row'>
                 <div class='form-col form-col--half'>
-                  {{ TextInput(portfolio_form.name, validation="portfolioName") }}
+                  {{ TextInput(portfolio_form.name, validation="portfolioName", optional=False) }}
                 </div>
                 <div class='edit-portfolio-name action-group'>
                   {{ SaveButton(text='Save', additional_classes='usa-button-big') }}

templates/portfolios/applications/settings.html

@@ -25,8 +25,8 @@
             </p>
             <div class="form-row">
               <div class="form-col form-col--two-thirds">
-                {{ TextInput(application_form.name) }}
-                {{ TextInput(application_form.description, paragraph=True) }}
+                {{ TextInput(application_form.name, optional=False) }}
+                {{ TextInput(application_form.description, paragraph=True, optional=False) }}
               </div>
               <div class="form-col form-col--third">
                 {% if user_can(permissions.DELETE_APPLICATION) %}

templates/portfolios/new.html

@@ -14,7 +14,7 @@
     <form id="portfolio-create" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
       {{ form.csrf_token }}
 
-      {{ TextInput(form.name) }}
+      {{ TextInput(form.name, optional=False) }}
       {{ OptionsInput(form.defense_component, optional=False) }}
       {{ TextInput(form.description, paragraph=True) }}
 

translations.yaml

@@ -143,7 +143,7 @@ forms:
     first_name_label: First name
     funding: Funding
     last_name_label: Last name
-    phone_number_label: Phone number (optional)
+    phone_number_label: Phone number
     portfolio_mgmt: Portfolio management
     reporting: Reporting
   portfolio: