From 9cc5c20eabef80c3644f67749193fb71c796813a Mon Sep 17 00:00:00 2001 From: Joel Warrington Date: Sun, 20 Oct 2024 13:27:02 -0600 Subject: [PATCH] Update styling of text fields and checkbox --- Procfile.dev | 2 +- .../components/check_box_component.rb | 3 + .../components/email_field_component.rb | 14 ++-- ...component.html.erb => field_component.erb} | 2 +- lib/atomic_view/components/field_component.rb | 65 +++++++++++++++++++ .../components/password_field_component.rb | 9 +++ .../components/search_field_component.rb | 9 +++ .../components/telephone_field_component.rb | 9 +++ .../components/text_field_component.rb | 56 ++-------------- .../components/url_field_component.rb | 9 +++ 10 files changed, 118 insertions(+), 60 deletions(-) rename lib/atomic_view/components/{text_field_component.html.erb => field_component.erb} (89%) create mode 100644 lib/atomic_view/components/field_component.rb diff --git a/Procfile.dev b/Procfile.dev index da151fe..297230f 100644 --- a/Procfile.dev +++ b/Procfile.dev @@ -1,2 +1,2 @@ -web: bin/rails server +web: bin/rails server -p 3001 css: bin/rails tailwindcss:watch diff --git a/lib/atomic_view/components/check_box_component.rb b/lib/atomic_view/components/check_box_component.rb index d26591b..cc8efb2 100644 --- a/lib/atomic_view/components/check_box_component.rb +++ b/lib/atomic_view/components/check_box_component.rb @@ -1,6 +1,9 @@ module AtomicView module Components class CheckBoxComponent < ViewComponent::Form::CheckBoxComponent + def html_class + "h-4 w-4 rounded border-neutral-300 text-blue-500 focus:ring-blue-700 hover:border-neutral-700" + end end end end diff --git a/lib/atomic_view/components/email_field_component.rb b/lib/atomic_view/components/email_field_component.rb index c28da7e..031e0e4 100644 --- a/lib/atomic_view/components/email_field_component.rb +++ b/lib/atomic_view/components/email_field_component.rb @@ -2,14 +2,12 @@ module AtomicView module Components class EmailFieldComponent < ViewComponent::Form::EmailFieldComponent def call - render TextFieldComponent.new( - @form, - @object_name, - @object_method, - @options.merge( - type: "email", - left_section: icon("at-symbol", variant: :mini, options: {class: "size-5 text-gray-500"}) - ) + render FieldComponent.new( + form, + object_name, + method_name, + options, + ActionView::Helpers::Tags::EmailField ) end end diff --git a/lib/atomic_view/components/text_field_component.html.erb b/lib/atomic_view/components/field_component.erb similarity index 89% rename from lib/atomic_view/components/text_field_component.html.erb rename to lib/atomic_view/components/field_component.erb index de2dc0f..b5c613a 100644 --- a/lib/atomic_view/components/text_field_component.html.erb +++ b/lib/atomic_view/components/field_component.erb @@ -10,7 +10,7 @@ <% end %> <% end %> - <%= ActionView::Helpers::Tags::TextField.new(object_name, method_name, @view_context, options).render %> + <%= tag_klass.new(@object_name, @method_name, @view_context, @options).render %> <% if right_section? %> <% if right_section_addon? %> <%= right_section %> diff --git a/lib/atomic_view/components/field_component.rb b/lib/atomic_view/components/field_component.rb new file mode 100644 index 0000000..b300efd --- /dev/null +++ b/lib/atomic_view/components/field_component.rb @@ -0,0 +1,65 @@ +module AtomicView + module Components + class FieldComponent < ViewComponent::Form::FieldComponent + attr_reader :tag_klass + + def initialize(form, object_name, method_name, options = {}, tag_klass = ActionView::Helpers::Tags::TextField) + super(form, object_name, method_name, options) + @tag_klass = tag_klass + end + + def html_class + class_names( + *%W[block w-full h-9 min-w-0 flex-1 rounded-md border-0 py-1 text-sm shadow-sm ring-1], + "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200", + "text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-neutral-700", + "pl-10" => left_section? && !(left_section_addon? || left_section_button?), + "pr-10" => right_section? && !(right_section_addon? || right_section_button?), + "shadow-none rounded-none rounded-r-md" => left_section_addon? || left_section_button?, + "shadow-none rounded-none rounded-l-md" => right_section_addon? || right_section_button?, + "text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500" => method_errors? + ) + end + + def container_html_class + class_names( + "relative rounded-md shadow-sm", + {"flex" => left_section_addon? || left_section_button? || right_section_addon? || right_section_button?}, + options[:container_class] + ) + end + + def left_section + options[:left_section] + end + + def left_section? + left_section.present? + end + + def left_section_addon? + options[:left_section_as_addon].present? + end + + def left_section_button? + options[:left_section_as_button].present? + end + + def right_section + options[:right_section] || method_errors? && icon("exclamation-circle", variant: :mini, options: {class: "size-5 text-red-500"}) + end + + def right_section? + right_section.present? + end + + def right_section_addon? + options[:right_section_as_addon].present? + end + + def right_section_button? + options[:right_section_as_button].present? + end + end + end +end diff --git a/lib/atomic_view/components/password_field_component.rb b/lib/atomic_view/components/password_field_component.rb index 7c5d9a3..9f5758a 100644 --- a/lib/atomic_view/components/password_field_component.rb +++ b/lib/atomic_view/components/password_field_component.rb @@ -1,6 +1,15 @@ module AtomicView module Components class PasswordFieldComponent < ViewComponent::Form::PasswordFieldComponent + def call + render FieldComponent.new( + form, + object_name, + method_name, + options, + ActionView::Helpers::Tags::PasswordField + ) + end end end end diff --git a/lib/atomic_view/components/search_field_component.rb b/lib/atomic_view/components/search_field_component.rb index 358a334..19e886d 100644 --- a/lib/atomic_view/components/search_field_component.rb +++ b/lib/atomic_view/components/search_field_component.rb @@ -1,6 +1,15 @@ module AtomicView module Components class SearchFieldComponent < ViewComponent::Form::SearchFieldComponent + def call + render FieldComponent.new( + form, + object_name, + method_name, + options, + ActionView::Helpers::Tags::SearchField + ) + end end end end diff --git a/lib/atomic_view/components/telephone_field_component.rb b/lib/atomic_view/components/telephone_field_component.rb index c6a617f..3ffdac2 100644 --- a/lib/atomic_view/components/telephone_field_component.rb +++ b/lib/atomic_view/components/telephone_field_component.rb @@ -1,6 +1,15 @@ module AtomicView module Components class TelephoneFieldComponent < ViewComponent::Form::TelephoneFieldComponent + def call + render FieldComponent.new( + form, + object_name, + method_name, + options, + ActionView::Helpers::Tags::TelField + ) + end end end end diff --git a/lib/atomic_view/components/text_field_component.rb b/lib/atomic_view/components/text_field_component.rb index a1b5644..ad6eb39 100644 --- a/lib/atomic_view/components/text_field_component.rb +++ b/lib/atomic_view/components/text_field_component.rb @@ -1,58 +1,14 @@ module AtomicView module Components class TextFieldComponent < ViewComponent::Form::TextFieldComponent - def html_class - class_names( - *%W[block w-full min-w-0 flex-1 rounded-md border-0 py-1.5 shadow-sm ring-1 focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6], - "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200", - "text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-600", - "pl-10" => left_section? && !(left_section_addon? || left_section_button?), - "pr-10" => right_section? && !(right_section_addon? || right_section_button?), - "shadow-none ring-inset rounded-none rounded-r-md" => left_section_addon? || left_section_button?, - "shadow-none ring-inset rounded-none rounded-l-md" => right_section_addon? || right_section_button?, - "text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500" => method_errors? + def call + render FieldComponent.new( + form, + object_name, + method_name, + options ) end - - def container_html_class - class_names( - "relative rounded-md shadow-sm", - {"flex" => left_section_addon? || left_section_button? || right_section_addon? || right_section_button?}, - options[:container_class] - ) - end - - def left_section - options[:left_section] - end - - def left_section? - left_section.present? - end - - def left_section_addon? - options[:left_section_as_addon].present? - end - - def left_section_button? - options[:left_section_as_button].present? - end - - def right_section - options[:right_section] || method_errors? && icon("exclamation-circle", variant: :mini, options: {class: "size-5 text-red-500"}) - end - - def right_section? - right_section.present? - end - - def right_section_addon? - options[:right_section_as_addon].present? - end - - def right_section_button? - options[:right_section_as_button].present? - end end end end diff --git a/lib/atomic_view/components/url_field_component.rb b/lib/atomic_view/components/url_field_component.rb index f592236..17224e7 100644 --- a/lib/atomic_view/components/url_field_component.rb +++ b/lib/atomic_view/components/url_field_component.rb @@ -1,6 +1,15 @@ module AtomicView module Components class UrlFieldComponent < ViewComponent::Form::UrlFieldComponent + def call + render FieldComponent.new( + form, + object_name, + method_name, + options, + ActionView::Helpers::Tags::UrlField + ) + end end end end