IBX-6343: ezdate and ezdatetime validation is styled properly

ibexa · Sep 19, 2023 · 272920f · 272920f
1 parent 91d572f
commit 272920f
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezdate.js b/src/bundle/Resources/public/js/scripts/fieldType/ezdate.js
@@ -3,7 +3,7 @@
     const SELECTOR_INPUT = '.ibexa-data-source__input:not(.flatpickr-input)';
     const SELECTOR_FLATPICKR_INPUT = '.flatpickr-input';
     const EVENT_VALUE_CHANGED = 'change';
-    const SELECTOR_ERROR_NODE = '.ibexa-data-source';
+    const SELECTOR_ERROR_NODE = '.ibexa-form-error';
 
     class EzDateValidator extends ibexa.BaseFieldValidator {
         /**

diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezdatetime.js b/src/bundle/Resources/public/js/scripts/fieldType/ezdatetime.js
@@ -3,7 +3,7 @@
     const SELECTOR_INPUT = '.ibexa-data-source__input[data-seconds]';
     const SELECTOR_FLATPICKR_INPUT = '.flatpickr-input';
     const EVENT_VALUE_CHANGED = 'change';
-    const SELECTOR_ERROR_NODE = '.ibexa-data-source';
+    const SELECTOR_ERROR_NODE = '.ibexa-form-error';
     const { convertDateToTimezone } = ibexa.helpers.timezone;
 
     class EzDateTimeValidator extends ibexa.BaseFieldValidator {

diff --git a/src/bundle/Resources/public/scss/_mixins.scss b/src/bundle/Resources/public/scss/_mixins.scss
@@ -13,6 +13,23 @@
 @import 'mixins/drag-and-drop';
 
 @mixin datetime-field() {
+    &.is-invalid {
+        .ibexa-label {
+            color: $ibexa-color-danger;
+        }
+
+        .ibexa-input-text-wrapper__action-btn {
+            .ibexa-icon {
+                fill: $ibexa-color-danger;
+            }
+        }
+
+        .ibexa-data-source__input {
+            border: calculateRem(1px) solid $ibexa-color-danger;
+            background: $ibexa-color-danger-100;
+        }
+    }
+
     .ibexa-data-source__input-wrapper {
         max-width: 30ch;
         position: relative;
@@ -98,7 +115,7 @@
 
         .ibexa-data-source__input {
             border: calculateRem(1px) solid $ibexa-color-danger;
-            background: $ibexa-color-warning-pale;
+            background: $ibexa-color-danger-100;
         }
     }
 }