Fix width of text fields and multi inputs

.changeset/tough-bats-refuse.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Fix widths of text fields and multi inputs.

app/forms/select_form.rb

@@ -2,8 +2,8 @@
 
 # :nodoc:
 class SelectForm < ApplicationForm
-  form do |check_form|
-    check_form.select_list(name: "cities", label: "Cool cities", caption: "Select your favorite!", include_blank: true) do |city_list|
+  form do |select_form|
+    select_form.select_list(name: "cities", label: "Cool cities", caption: "Select your favorite!", include_blank: true) do |city_list|
       city_list.option(label: "Lopez Island", value: "lopez_island")
       city_list.option(label: "Bellevue", value: "bellevue")
       city_list.option(label: "Seattle", value: "seattle")

lib/primer/forms/form_control.html.erb

@@ -1,5 +1,5 @@
 <% if @input.form_control? %>
-  <%= content_tag(:div, **@form_group_arguments) do %>
+  <%= content_tag(@tag, **@form_group_arguments) do %>
     <% if @input.label %>
       <%= builder.label(@input.name, **@input.label_arguments) do %>
         <%= @input.label %>

lib/primer/forms/form_control.rb

@@ -6,11 +6,15 @@ module Forms
     class FormControl < BaseComponent
       delegate :builder, :form, to: :@input
 
-      def initialize(input:)
+      def initialize(input:, tag: :div, **system_arguments)
         @input = input
+        @tag = tag
         @input.add_label_classes("FormControl-label")
         @form_group_arguments = {
+          **system_arguments,
           class: class_names(
+            system_arguments[:class],
+            system_arguments[:classes],
             "FormControl",
             "width-full",
             "FormControl--fullWidth" => @input.full_width?

lib/primer/forms/multi.html.erb

@@ -1,9 +1,7 @@
-<%= content_tag(:div, **@input.input_arguments) do %>
-  <%= render(FormControl.new(input: @input)) do %>
-    <primer-multi-input data-name="<%= @input.name %>">
-      <% @input.inputs.each do |child_input| %>
-        <%= render(child_input.to_component) %>
-      <% end %>
-    </primer-multi-input>
-  <% end %>
+<%= render(FormControl.new(input: @input, **@input.input_arguments)) do %>
+  <primer-multi-input data-name="<%= @input.name %>">
+    <% @input.inputs.each do |child_input| %>
+      <%= render(child_input.to_component) %>
+    <% end %>
+  </primer-multi-input>
 <% end %>

lib/primer/forms/text_field.html.erb

@@ -1,19 +1,17 @@
-<primer-text-field>
-  <%= render(FormControl.new(input: @input)) do %>
-    <%= content_tag(:div, **@field_wrap_arguments) do %>
-      <% if @input.leading_visual %>
-        <span class="FormControl-input-leadingVisualWrap">
-          <%= render(Primer::Beta::Octicon.new(**@input.leading_visual)) %>
-        </span>
-      <% end %>
-      <%= render Primer::ConditionalWrapper.new(condition: @input.auto_check_src, tag: "auto-check", csrf: auto_check_authenticity_token, src: @input.auto_check_src) do %>
-        <%= builder.text_field(@input.name, **@input.input_arguments) %>
-      <% end %>
-      <% if @input.show_clear_button? %>
-        <button type="button" id="<%= @input.clear_button_id %>" class="FormControl-input-trailingAction" aria-label="Clear" data-action="click:primer-text-field#clearContents">
-          <%= render(Primer::Beta::Octicon.new(icon: :"x-circle-fill")) %>
-        </button>
-      <% end %>
+<%= render(FormControl.new(input: @input, tag: :"primer-text-field")) do %>
+  <%= content_tag(:div, **@field_wrap_arguments) do %>
+    <% if @input.leading_visual %>
+      <span class="FormControl-input-leadingVisualWrap">
+        <%= render(Primer::Beta::Octicon.new(**@input.leading_visual)) %>
+      </span>
+    <% end %>
+    <%= render Primer::ConditionalWrapper.new(condition: @input.auto_check_src, tag: "auto-check", csrf: auto_check_authenticity_token, src: @input.auto_check_src) do %>
+      <%= builder.text_field(@input.name, **@input.input_arguments) %>
+    <% end %>
+    <% if @input.show_clear_button? %>
+      <button type="button" id="<%= @input.clear_button_id %>" class="FormControl-input-trailingAction" aria-label="Clear" data-action="click:primer-text-field#clearContents">
+        <%= render(Primer::Beta::Octicon.new(icon: :"x-circle-fill")) %>
+      </button>
     <% end %>
   <% end %>
-</primer-text-field>
+<% end %>

test/lib/primer/forms/forms_test.rb

@@ -275,4 +275,16 @@ def test_renders_field_name_with_question_mark_caption_template
     assert_selector "input[name=enabled]"
     assert_selector ".my-test-caption"
   end
+
+  def test_text_field_custom_element_is_form_control
+    render_preview :single_text_field_form
+
+    assert_selector "primer-text-field.FormControl"
+  end
+
+  def test_siblings_are_form_controls_when_including_a_multi_input
+    render_preview :multi_input_form
+
+    assert_selector ".FormControl-radio-group-wrap + .FormControl"
+  end
 end