From 1069ecae5137d6371926159cb43f5dcb280032a5 Mon Sep 17 00:00:00 2001 From: Joel Warrington Date: Tue, 3 Dec 2024 21:06:41 -0700 Subject: [PATCH] Add styling to number, select and date fields. Rename button sections to interaction --- .../components/date_field_component.rb | 8 ++++++++ lib/atomic_view/components/field_component.erb | 4 ++-- lib/atomic_view/components/field_component.rb | 18 +++++++++--------- .../components/number_field_component.rb | 9 +++++++++ lib/atomic_view/components/select_component.rb | 11 +++++++++++ .../text_field_component_preview.rb | 4 ++-- .../with_left_section_button.html.erb | 4 ---- .../with_left_section_interaction.html.erb | 9 +++++++++ .../with_right_section_button.html.erb | 4 ---- .../with_right_section_interaction.html.erb | 9 +++++++++ 10 files changed, 59 insertions(+), 21 deletions(-) delete mode 100644 previews/selection_and_input/text_field_component_preview/with_left_section_button.html.erb create mode 100644 previews/selection_and_input/text_field_component_preview/with_left_section_interaction.html.erb delete mode 100644 previews/selection_and_input/text_field_component_preview/with_right_section_button.html.erb create mode 100644 previews/selection_and_input/text_field_component_preview/with_right_section_interaction.html.erb diff --git a/lib/atomic_view/components/date_field_component.rb b/lib/atomic_view/components/date_field_component.rb index 3b3507f..a027e96 100644 --- a/lib/atomic_view/components/date_field_component.rb +++ b/lib/atomic_view/components/date_field_component.rb @@ -1,6 +1,14 @@ module AtomicView module Components class DateFieldComponent < ViewComponent::Form::DateFieldComponent + 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", + "text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500" => method_errors? + ) + end end end end diff --git a/lib/atomic_view/components/field_component.erb b/lib/atomic_view/components/field_component.erb index b5bddd9..db6f36f 100644 --- a/lib/atomic_view/components/field_component.erb +++ b/lib/atomic_view/components/field_component.erb @@ -2,7 +2,7 @@ <% if left_section? %> <% if left_section_addon? %> <%= left_section %> - <% elsif left_section_button? %> + <% elsif left_section_interaction? %> <%= left_section %> <% else %>
@@ -14,7 +14,7 @@ <% if right_section? %> <% if right_section_addon? %> <%= right_section %> - <% elsif right_section_button? %> + <% elsif right_section_interaction? %> <%= right_section %> <% else %>
diff --git a/lib/atomic_view/components/field_component.rb b/lib/atomic_view/components/field_component.rb index 86bfd9e..97696c6 100644 --- a/lib/atomic_view/components/field_component.rb +++ b/lib/atomic_view/components/field_component.rb @@ -13,10 +13,10 @@ def html_class *%W[block w-full h-9 min-w-0 z-10 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?, + "pl-10" => left_section? && !(left_section_addon? || left_section_interaction?), + "pr-10" => right_section? && !(right_section_addon? || right_section_interaction?), + "shadow-none rounded-none rounded-r-md" => left_section_addon? || left_section_interaction?, + "shadow-none rounded-none rounded-l-md" => right_section_addon? || right_section_interaction?, "text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500" => method_errors? ) end @@ -24,7 +24,7 @@ def html_class def container_html_class class_names( "relative rounded-md shadow-sm", - {"flex" => left_section_addon? || left_section_button? || right_section_addon? || right_section_button?}, + {"flex" => left_section_addon? || left_section_interaction? || right_section_addon? || right_section_interaction?}, options[:container_class] ) end @@ -41,8 +41,8 @@ def left_section_addon? options[:left_section_as_addon].present? end - def left_section_button? - options[:left_section_as_button].present? + def left_section_interaction? + options[:left_section_as_interaction].present? end def right_section @@ -57,8 +57,8 @@ def right_section_addon? options[:right_section_as_addon].present? end - def right_section_button? - options[:right_section_as_button].present? + def right_section_interaction? + options[:right_section_as_interaction].present? end end end diff --git a/lib/atomic_view/components/number_field_component.rb b/lib/atomic_view/components/number_field_component.rb index 8d94a5c..e6762a5 100644 --- a/lib/atomic_view/components/number_field_component.rb +++ b/lib/atomic_view/components/number_field_component.rb @@ -1,6 +1,15 @@ module AtomicView module Components class NumberFieldComponent < ViewComponent::Form::NumberFieldComponent + def call + render FieldComponent.new( + form, + object_name, + method_name, + options, + ActionView::Helpers::Tags::NumberField + ) + end end end end diff --git a/lib/atomic_view/components/select_component.rb b/lib/atomic_view/components/select_component.rb index 7b67423..1b74225 100644 --- a/lib/atomic_view/components/select_component.rb +++ b/lib/atomic_view/components/select_component.rb @@ -1,6 +1,17 @@ module AtomicView module Components class SelectComponent < ViewComponent::Form::SelectComponent + def html_class + class_names( + 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", + "text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500" => method_errors?, + ), + options[:class] + ) + end end end end diff --git a/previews/selection_and_input/text_field_component_preview.rb b/previews/selection_and_input/text_field_component_preview.rb index 80733ae..d502402 100644 --- a/previews/selection_and_input/text_field_component_preview.rb +++ b/previews/selection_and_input/text_field_component_preview.rb @@ -19,7 +19,7 @@ def with_left_section_addon render_with_template locals: {model: Model.new} end - def with_left_section_button + def with_left_section_interaction render_with_template locals: {model: Model.new} end @@ -31,7 +31,7 @@ def with_right_section_addon render_with_template locals: {model: Model.new} end - def with_right_section_button + def with_right_section_interaction render_with_template locals: {model: Model.new} end # @!endgroup diff --git a/previews/selection_and_input/text_field_component_preview/with_left_section_button.html.erb b/previews/selection_and_input/text_field_component_preview/with_left_section_button.html.erb deleted file mode 100644 index 4081df9..0000000 --- a/previews/selection_and_input/text_field_component_preview/with_left_section_button.html.erb +++ /dev/null @@ -1,4 +0,0 @@ -<%= form_with model: model do |form| %> - <%= form.label :attribute %> - <%= form.text_field :attribute, left_section_as_button: true, left_section: form.button("Do Things", class: "relative -mr-px inline-flex items-center gap-x-1.5 rounded-l-md px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 hover:bg-gray-50") %> -<% end %> \ No newline at end of file diff --git a/previews/selection_and_input/text_field_component_preview/with_left_section_interaction.html.erb b/previews/selection_and_input/text_field_component_preview/with_left_section_interaction.html.erb new file mode 100644 index 0000000..3c8782a --- /dev/null +++ b/previews/selection_and_input/text_field_component_preview/with_left_section_interaction.html.erb @@ -0,0 +1,9 @@ +<%= form_with model: model do |form| %> + <%= form.label :attribute %> + <%= form.text_field :attribute, left_section_as_interaction: true, left_section: form.button("Do Things", class: "relative -mr-px inline-flex items-center gap-x-1.5 rounded-l-md px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 hover:bg-gray-50") %> +<% end %> +
+<%= form_with model: model do |form| %> + <%= form.label :attribute %> + <%= form.text_field :attribute, left_section_as_interaction: true, left_section: form.select(:example, [["Lorem", 1], ["Ipsum", 2]], class: "max-w-24 rounded-r-none") %> +<% end %> \ No newline at end of file diff --git a/previews/selection_and_input/text_field_component_preview/with_right_section_button.html.erb b/previews/selection_and_input/text_field_component_preview/with_right_section_button.html.erb deleted file mode 100644 index 67c8738..0000000 --- a/previews/selection_and_input/text_field_component_preview/with_right_section_button.html.erb +++ /dev/null @@ -1,4 +0,0 @@ -<%= form_with model: model do |form| %> - <%= form.label :attribute %> - <%= form.text_field :attribute, right_section_as_button: true, right_section: form.button("Do Things", class: "relative -ml-px inline-flex items-center gap-x-1.5 rounded-r-md px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 hover:bg-gray-50") %> -<% end %> \ No newline at end of file diff --git a/previews/selection_and_input/text_field_component_preview/with_right_section_interaction.html.erb b/previews/selection_and_input/text_field_component_preview/with_right_section_interaction.html.erb new file mode 100644 index 0000000..86843ed --- /dev/null +++ b/previews/selection_and_input/text_field_component_preview/with_right_section_interaction.html.erb @@ -0,0 +1,9 @@ +<%= form_with model: model do |form| %> + <%= form.label :attribute %> + <%= form.text_field :attribute, right_section_as_interaction: true, right_section: form.button("Do Things", class: "relative -ml-px inline-flex items-center gap-x-1.5 rounded-r-md px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 hover:bg-gray-50") %> +<% end %> +
+<%= form_with model: model do |form| %> + <%= form.label :attribute %> + <%= form.text_field :attribute, right_section_as_interaction: true, right_section: form.select(:example, [["Lorem", 1], ["Ipsum", 2]], class: "max-w-24 rounded-l-none") %> +<% end %>