Merge remote-tracking branch 'origin/rkaraivanov/refactor-validation-behavior' into rkaraivanov/refactor-validation-behavior

Author: rkaraivanov

src/components/date-picker/themes/shared/date-picker.bootstrap.scss

@@ -40,6 +40,18 @@ $theme: $bootstrap;
     }
 }
 
+:host(:not([disabled],[readonly]):state(ig-invalid)) {
+    igc-date-time-input::part(input) {
+        border-color: var-get($theme, 'error-secondary-color');
+    }
+
+    igc-date-time-input:focus-within {
+        &::part(input) {
+            box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
+        }
+    }
+}
+
 [part='actions'] {
     min-height: #{sizable(rem(47px), rem(54px), rem(64px))};
 }

src/components/date-picker/themes/shared/date-picker.fluent.scss

@@ -37,6 +37,20 @@ $theme: $fluent;
     }
 }
 
+:host(:not([disabled],[readonly]):state(ig-invalid)) {
+    igc-date-time-input::part(container) {
+        &::before {
+            box-shadow: inset 0 0 0 var(--input-border-size) var-get($theme, 'error-secondary-color');
+        }
+    }
+
+    igc-date-time-input:focus-within {
+        &::part(container)::before {
+            box-shadow: inset 0 0 0 calc(var(--input-border-size) + #{rem(1px)}) var-get($theme, 'error-secondary-color');
+        }
+    }
+}
+
 :host(:disabled),
 :host([disabled]) {
     [part='label']::after {

src/components/date-picker/themes/shared/date-picker.indigo.scss

@@ -44,6 +44,14 @@ $input-theme: input-theme.$indigo;
     ::part(helper-text) {
         color: var-get($input-theme, 'helper-text-color');
     }
+
+    igc-date-time-input::part(container) {
+        border-color: var-get($theme, 'error-secondary-color');
+
+        &::after {
+            background: var-get($theme, 'error-secondary-color');
+        }
+    }
 }
 
 [part='actions'] {

src/components/date-picker/themes/shared/date-picker.material.scss

@@ -56,3 +56,34 @@ $theme: $material;
         }
     }
 }
+
+:host(:not([outlined],[disabled],[readonly]):state(ig-invalid)) {
+    igc-date-time-input::part(label) {
+        color: var-get($theme, 'error-secondary-color');
+    }
+
+    igc-date-time-input::part(container),
+    igc-date-time-input:focus-within::part(container) {
+        border-color: var-get($theme, 'error-secondary-color');
+
+        &::after {
+            background: var-get($theme, 'error-secondary-color');
+        }
+    }
+}
+
+:host(:not([disabled],[readonly])[outlined]:state(ig-invalid)) {
+    igc-date-time-input::part(label) {
+        color: var-get($theme, 'error-secondary-color');
+    }
+
+    igc-date-time-input::part(start),
+    igc-date-time-input::part(end),
+    igc-date-time-input::part(filler) {
+        border-color: var-get($theme, 'error-secondary-color');
+    }
+
+    &::part(notch) {
+        border-bottom-color: var-get($theme, 'error-secondary-color');
+    }
+}