diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 1732bbe..3966076 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -33,3 +33,24 @@ site-sidebar { list-style: none; } } + +:root { + --error-color: rgb(155, 35, 24); /* Pico color red 650 */ +} + +form { + .field-with-errors { + input, select, textarea { + border-color: var(--error-color); + + &:has(+ .error-text) { + margin-bottom: 0; + } + } + + .error-text { + color: var(--error-color); + margin-bottom: var(--pico-spacing); + } + } +} diff --git a/app/helpers/errors_helper.rb b/app/helpers/errors_helper.rb new file mode 100644 index 0000000..fe18818 --- /dev/null +++ b/app/helpers/errors_helper.rb @@ -0,0 +1,15 @@ +# frozen_string_literal: true + +module ErrorsHelper + # Rendering an error inside the field + # + # @param html_tag [ActiveSupport::SafeBuffer] + # @param instance [ActionView::Helpers::Tags::Base] + def field_error_helper(html_tag, instance) + return html_tag if instance.is_a?(ActionView::Helpers::Tags::Label) # Don't wrap labels + + error_messages = instance.error_message + content_tag(:div, html_tag + content_tag(:div, error_messages.join('; '), class: 'error-text'), + class: 'field-with-errors') + end +end diff --git a/config/application.rb b/config/application.rb index ca32e8b..84e0222 100644 --- a/config/application.rb +++ b/config/application.rb @@ -43,5 +43,10 @@ module SubtleStorm g.system_tests nil g.template_engine :slim end + + # Field error proc + config.action_view.field_error_proc = proc do |html_tag, instance| + field_error_helper(html_tag, instance) + end end end