IBX-9775: Fix invalid date time input styling (#1515)

Author: tischsoic

src/bundle/Resources/public/scss/_inputs.scss

@@ -521,8 +521,11 @@
     display: none;
 }
 
-.ibexa-input--text.is-invalid + .ibexa-input-text-wrapper__actions {
-    .ibexa-icon {
-        fill: $ibexa-color-danger;
+.ibexa-input--text,
+.ibexa-input--date {
+    &.is-invalid + .ibexa-input-text-wrapper__actions {
+        .ibexa-icon {
+            fill: $ibexa-color-danger;
+        }
     }
 }

src/bundle/Resources/views/themes/admin/ui/component/inputs/input_date_time_picker.html.twig

@@ -12,8 +12,9 @@
 }) %}
 {% set input_attr = input_attr|default({})|merge({
     class: (input_attr.class|default('')
-        ~ ' ibexa-input ibexa-input--date ibexa-date-time-picker__input flatpickr flatpickr-input'
+        ~ ' form-control ibexa-input ibexa-input--date ibexa-date-time-picker__input flatpickr flatpickr-input'
         ~ (is_small ? ' ibexa-input--small')
+        ~ (form.vars.errors|default(false) ? ' is-invalid')
     )|trim,
     readonly: 'readonly',
     type: 'text',

src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig

@@ -262,6 +262,7 @@
         {% include '@ibexadesign/ui/component/inputs/input_date_time_picker.html.twig' with {
             input_attr: additional_input_attr|merge({ class: additional_input_attr.class|default('') ~ ' ibexa-picker__input' }),
             is_disabled: attr.disabled|default(false),
+            form,
         } %}
         {% set attr = attr|merge({ hidden: true, class: attr.class|default('') ~ ' ibexa-picker__form-input' }) %}
         {{ block('form_widget') }}