Add styling to number, select and date fields. Rename button sections…

… to interaction

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

lib/atomic_view/components/field_component.erb

@@ -2,7 +2,7 @@
   <% if left_section? %>
     <% if left_section_addon? %>
       <span class="inline-flex items-center rounded-l-md ring-1 ring-gray-300 px-3 text-gray-500 sm:text-sm"><%= left_section %></span>
-    <% elsif left_section_button? %>
+    <% elsif left_section_interaction? %>
       <%= left_section %>
     <% else %>
       <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
@@ -14,7 +14,7 @@
   <% if right_section? %>
     <% if right_section_addon? %>
       <span class="inline-flex items-center rounded-r-md ring-1 ring-gray-300 px-3 text-gray-500 sm:text-sm"><%= right_section %></span>
-    <% elsif right_section_button? %>
+    <% elsif right_section_interaction? %>
       <%= right_section %>
     <% else %>
       <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">

lib/atomic_view/components/field_component.rb

@@ -13,18 +13,18 @@ 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
 
       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

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

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

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

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 %>
+<br>
+<%= 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 %>

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 %>
+<br>
+<%= 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 %>