diff --git a/.changeset/tough-bats-refuse.md b/.changeset/tough-bats-refuse.md new file mode 100644 index 0000000000..681a84e3ef --- /dev/null +++ b/.changeset/tough-bats-refuse.md @@ -0,0 +1,5 @@ +--- +'@primer/view-components': patch +--- + +Fix widths of text fields and multi inputs. diff --git a/app/forms/select_form.rb b/app/forms/select_form.rb index eff2f78c63..8cd5b59cf1 100644 --- a/app/forms/select_form.rb +++ b/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") diff --git a/lib/primer/forms/form_control.html.erb b/lib/primer/forms/form_control.html.erb index 4ffd9fb707..a53e9659d4 100644 --- a/lib/primer/forms/form_control.html.erb +++ b/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 %> diff --git a/lib/primer/forms/form_control.rb b/lib/primer/forms/form_control.rb index 6bf6e47d41..2cbc73df6a 100644 --- a/lib/primer/forms/form_control.rb +++ b/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? diff --git a/lib/primer/forms/multi.html.erb b/lib/primer/forms/multi.html.erb index 4a05bc63a8..75d63b4e4e 100644 --- a/lib/primer/forms/multi.html.erb +++ b/lib/primer/forms/multi.html.erb @@ -1,9 +1,7 @@ -<%= content_tag(:div, **@input.input_arguments) do %> - <%= render(FormControl.new(input: @input)) do %> - - <% @input.inputs.each do |child_input| %> - <%= render(child_input.to_component) %> - <% end %> - - <% end %> +<%= render(FormControl.new(input: @input, **@input.input_arguments)) do %> + + <% @input.inputs.each do |child_input| %> + <%= render(child_input.to_component) %> + <% end %> + <% end %> diff --git a/lib/primer/forms/text_field.html.erb b/lib/primer/forms/text_field.html.erb index 0d5c5ae0d4..0c7a3aa89f 100644 --- a/lib/primer/forms/text_field.html.erb +++ b/lib/primer/forms/text_field.html.erb @@ -1,19 +1,17 @@ - - <%= render(FormControl.new(input: @input)) do %> - <%= content_tag(:div, **@field_wrap_arguments) do %> - <% if @input.leading_visual %> - - <%= render(Primer::Beta::Octicon.new(**@input.leading_visual)) %> - - <% 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? %> - - <% end %> +<%= render(FormControl.new(input: @input, tag: :"primer-text-field")) do %> + <%= content_tag(:div, **@field_wrap_arguments) do %> + <% if @input.leading_visual %> + + <%= render(Primer::Beta::Octicon.new(**@input.leading_visual)) %> + + <% 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? %> + <% end %> <% end %> - +<% end %> diff --git a/test/lib/primer/forms/forms_test.rb b/test/lib/primer/forms/forms_test.rb index 4abd5ac469..93e32c7241 100644 --- a/test/lib/primer/forms/forms_test.rb +++ b/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