From 583a2f3c842cc2cf2aef58645e13d578131bfc88 Mon Sep 17 00:00:00 2001
From: Dombi Attila <83396+dombesz@users.noreply.github.com>
Date: Sat, 14 Dec 2024 02:53:03 +0200
Subject: [PATCH] Add validation error border around the datepicker's input.

---
 frontend/src/global_styles/primer/_overrides.sass | 6 ++++++
 lib/primer/open_project/forms/date_picker.rb      | 2 ++
 2 files changed, 8 insertions(+)

diff --git a/frontend/src/global_styles/primer/_overrides.sass b/frontend/src/global_styles/primer/_overrides.sass
index 2ef53fc4dd50..b458b00a2e9d 100644
--- a/frontend/src/global_styles/primer/_overrides.sass
+++ b/frontend/src/global_styles/primer/_overrides.sass
@@ -32,6 +32,12 @@
   input
     border-radius: var(--borderRadius-medium)
 
+  // Currently we cannot morph the angular datepicker input field, and we have no way to set the
+  // validation error border on the input. However we can morph the input's wrapper element, thus
+  // adding this parent wrapper rule we can display the red border on the input.
+  &-input-wrap[invalid='true'] input:not(:focus)
+    border-color: var(--control-borderColor-danger)
+
 .UnderlineNav
   @include no-visible-scroll-bar
   margin-bottom: 12px
diff --git a/lib/primer/open_project/forms/date_picker.rb b/lib/primer/open_project/forms/date_picker.rb
index f16834892046..f3089f101f77 100644
--- a/lib/primer/open_project/forms/date_picker.rb
+++ b/lib/primer/open_project/forms/date_picker.rb
@@ -9,6 +9,8 @@ class DatePicker < Primer::Forms::TextField
 
         def initialize(input:, datepicker_options:)
           super(input:)
+
+          @field_wrap_arguments[:invalid] = true if @input.invalid?
           @datepicker_options = datepicker_options
         end
       end