Add inset_form to options and date picker macros

js/components/date_selector.js

@@ -28,6 +28,7 @@ export default {
       type: Boolean,
       default: true,
     },
+    insetForm: Boolean,
   },
 
   data: function() {
@@ -36,6 +37,7 @@ export default {
       month: this.initialmonth,
       year: this.initialyear,
       name: this.nameTag,
+      showValidation: !this.insetForm,
     }
   },
 
@@ -160,6 +162,8 @@ export default {
 
   methods: {
     onInput: function(e) {
+      this.showValidation = true
+
       emitEvent('field-change', this, {
         value: this.formattedDate,
         name: this.name,

js/components/options_input.js

@@ -22,6 +22,7 @@ export default {
       type: String,
       default: '',
     },
+    insetForm: Boolean,
   },
 
   created: function() {
@@ -36,7 +37,7 @@ export default {
     const showError = (this.initialErrors && this.initialErrors.length) || false
     return {
       showError: showError,
-      showValid: !showError && !!this.initialValue,
+      showValid: !this.insetForm && (!showError && !!this.initialValue),
       validationError: this.initialErrors.join(' '),
       value: this.initialValue,
     }

templates/components/date_picker.html

@@ -7,7 +7,8 @@
   mindate=None,
   maxdate=None,
   watch=False,
-  optional=True) -%}
+  optional=True,
+  inset_form=False) -%}
 
 <date-selector
   {% if maxdate %}maxdate="{{ maxdate.strftime("%Y-%m-%d") }}"{% endif %}
@@ -18,9 +19,10 @@
   initialyear="{{ field.data.year }}"
   v-bind:watch='{{ watch | string | lower }}'
   :optional='{{ optional | string | lower }}'
+  v-bind:inset-form={{ inset_form|lower }}
   inline-template>
 
-    <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
+    <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation }">
       <legend>
         <div class="usa-input__title">
           {{ label }}

templates/components/options_input.html

@@ -1,7 +1,16 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/tooltip.html" import Tooltip %}
 
-{% macro OptionsInput(field, tooltip, inline=False, label=True, show_validation=True, disabled=False, watch=False, optional=True) -%}
+{% macro OptionsInput(
+  field,
+  tooltip,
+  inline=False,
+  label=True,
+  show_validation=True,
+  disabled=False,
+  watch=False,
+  optional=True,
+  inset_form=False) -%}
   <optionsinput
     name='{{ field.name }}'
     inline-template
@@ -11,6 +20,7 @@
     v-bind:watch='{{ watch | string | lower }}'
     v-bind:optional={{ optional|lower }}
     v-bind:null-option="'{{ field.default }}'"
+    v-bind:inset-form={{ inset_form|lower }}
     >
     <div
       v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">

templates/components/phone_input.html

@@ -3,10 +3,10 @@
 {% macro PhoneInput(phone_number, phone_ext, placeholder_phone="") %}
   <div class='phone-input'>
       <div class='phone-input__phone'>
-        {{ TextInput(phone_number, placeholder=placeholder_phone, validation='usPhone') }}
+        {{ TextInput(phone_number, placeholder=placeholder_phone, validation='usPhone', inset_form=True) }}
       </div>
       <div class='phone-input__extension'>
-        {{ TextInput(phone_ext, validation='phoneExt')}}
+        {{ TextInput(phone_ext, validation='phoneExt', inset_form=True)}}
       </div>
   </div>
 {%- endmacro %}

templates/fragments/edit_user_form.html

@@ -11,24 +11,24 @@
       <div class='panel__content'>
         <div class='form-row'>
           <div class='form-col form-col--half'>
-            {{ TextInput(form.first_name, validation='requiredField') }}
+            {{ TextInput(form.first_name, validation='requiredField', inset_form=True) }}
           </div>
 
           <div class='form-col form-col--half'>
-            {{ TextInput(form.last_name, validation='requiredField') }}
+            {{ TextInput(form.last_name, validation='requiredField', inset_form=True) }}
           </div>
         </div>
 
-        {{ TextInput(form.email, validation='email') }}
+        {{ TextInput(form.email, validation='email', inset_form=True) }}
         {{ PhoneInput(form.phone_number, form.phone_ext) }}
 
-        {{ OptionsInput(form.service_branch) }}
-        {{ OptionsInput(form.citizenship) }}
-        {{ OptionsInput(form.designation) }}
+        {{ OptionsInput(form.service_branch, inset_form=True) }}
+        {{ OptionsInput(form.citizenship, inset_form=True) }}
+        {{ OptionsInput(form.designation, inset_form=True) }}
 
 
         <div class="usa-input">
-          {{ DatePicker(form.date_latest_training, mindate=mindate, maxdate=maxdate) }}
+          {{ DatePicker(form.date_latest_training, mindate=mindate, maxdate=maxdate, inset_form=True) }}
         </div>
       </div>
     </div>