Add validation error border around the datepicker's input.

opf · Dec 17, 2024 · 583a2f3 · 583a2f3
1 parent 8040262
commit 583a2f3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git 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
@@ -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