From 56dfaba6246135ba51baee37c93b01af9b3197b4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 1 Feb 2021 19:01:43 +0000
Subject: [PATCH] Add error state styles to date picker field

---
 .../src/forms/DateTimeField.svelte             | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/standard-components/src/forms/DateTimeField.svelte b/packages/standard-components/src/forms/DateTimeField.svelte
index 591acededb..7bf6bf7ac1 100644
--- a/packages/standard-components/src/forms/DateTimeField.svelte
+++ b/packages/standard-components/src/forms/DateTimeField.svelte
@@ -57,7 +57,8 @@
       <div
         id={`${$fieldState.fieldId}-wrapper`}
         aria-disabled="false"
-        aria-invalid="false"
+        aria-invalid={!$fieldState.valid}
+        class:is-invalid={!$fieldState.valid}
         class="flatpickr spectrum-InputGroup spectrum-Datepicker"
         class:is-focused={open}
         aria-readonly="false"
@@ -65,12 +66,21 @@
         aria-haspopup="true">
         <div
           on:click={flatpickr?.open}
-          class="spectrum-Textfield spectrum-InputGroup-textfield">
+          class="spectrum-Textfield spectrum-InputGroup-textfield"
+          class:is-invalid={!$fieldState.valid}>
+          {#if !$fieldState.valid}
+            <svg
+              class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
+              focusable="false"
+              aria-hidden="true">
+              <use xlink:href="#spectrum-icon-18-Alert" />
+            </svg>
+          {/if}
           <input
             data-input
             type="text"
             class="spectrum-Textfield-input spectrum-InputGroup-input"
-            aria-invalid="false"
+            aria-invalid={!$fieldState.valid}
             {placeholder}
             id={$fieldState.fieldId}
             value={$fieldState.value} />
@@ -79,6 +89,7 @@
           type="button"
           class="spectrum-Picker spectrum-InputGroup-button"
           tabindex="-1"
+          class:is-invalid={!$fieldState.valid}
           on:click={flatpickr?.open}>
           <svg
             class="spectrum-Icon spectrum-Icon--sizeM"
@@ -108,6 +119,7 @@
       --spectrum-alias-single-line-width,
       var(--spectrum-global-dimension-size-2400)
     );
+    overflow: hidden;
   }
   .flatpickr .spectrum-Textfield {
     width: auto;