[Forms] Fix position of caption for checkbox and radio groups (#3072)

Co-authored-by: camertron <[email protected]>

.changeset/curvy-apes-judge.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': minor
+---
+
+[Forms] Fix position of caption for checkbox and radio groups

app/forms/check_box_group_form.rb

@@ -3,7 +3,7 @@
 # :nodoc:
 class CheckBoxGroupForm < ApplicationForm
   form do |check_form|
-    check_form.check_box_group(label: "I like to eat, eat, eat:") do |check_group|
+    check_form.check_box_group(label: "I like to eat, eat, eat:", caption: "Nom nom nom") do |check_group|
       check_group.check_box(
         name: "long_a",
         label: "Ey-ples and ba-naynays",

app/forms/radio_button_group_form.rb

@@ -3,7 +3,11 @@
 # :nodoc:
 class RadioButtonGroupForm < ApplicationForm
   form do |radio_form|
-    radio_form.radio_button_group(name: "channel", label: "How did you hear about us?") do |radio_group|
+    radio_form.radio_button_group(
+      name: "channel",
+      label: "How did you hear about us?",
+      caption: "We love our listeners"
+    ) do |radio_group|
       radio_group.radio_button(value: "online", label: "Online advertisement", caption: "Facebook maybe?")
       radio_group.radio_button(value: "radio", label: "Radio advertisement", caption: "We love us some NPR")
       radio_group.radio_button(value: "friend", label: "From a friend", caption: "Wow, what a good person")

lib/primer/forms/check_box_group.html.erb

@@ -5,6 +5,9 @@
         <%= @input.label %>
       <% end %>
     <% end %>
+    <div class="mb-2">
+      <%= render(Caption.new(input: @input)) %>
+    </div>
     <%= render(SpacingWrapper.new) do %>
       <% @input.check_boxes.each do |check_box| %>
         <%= render(check_box.to_component) %>
@@ -14,7 +17,4 @@
   <div class="mt-2">
     <%= render(ValidationMessage.new(input: @input)) %>
   </div>
-  <div class="mt-2">
-    <%= render(Caption.new(input: @input)) %>
-  </div>
 </div>

lib/primer/forms/check_box_group.rb

@@ -8,7 +8,7 @@ class CheckBoxGroup < BaseComponent
 
       def initialize(input:)
         @input = input
-        @input.add_label_classes("FormControl-label", "mb-2")
+        @input.add_label_classes("FormControl-label")
         Primer::Forms::Utils.classify(@input.input_arguments)
       end
     end

lib/primer/forms/radio_button_group.html.erb

@@ -5,6 +5,9 @@
         <%= @input.label %>
       <% end %>
     <% end %>
+    <div class="mb-2">
+      <%= render(Caption.new(input: @input)) %>
+    </div>
     <%= render(SpacingWrapper.new) do %>
       <% @input.radio_buttons.each do |radio_button| %>
         <%= render(radio_button.to_component) %>
@@ -14,7 +17,4 @@
   <div class="mt-2">
     <%= render(ValidationMessage.new(input: @input)) %>
   </div>
-  <div class="mt-2">
-    <%= render(Caption.new(input: @input)) %>
-  </div>
 </div>

lib/primer/forms/radio_button_group.rb

@@ -8,7 +8,7 @@ class RadioButtonGroup < BaseComponent
 
       def initialize(input:)
         @input = input
-        @input.add_label_classes("FormControl-label", "mb-2")
+        @input.add_label_classes("FormControl-label")
         Primer::Forms::Utils.classify(@input.input_arguments)
       end
     end

test/lib/primer/forms/radio_button_group_input_test.rb

@@ -64,7 +64,7 @@ def test_validations
     refute_selector "input[type=radio][invalid]"
 
     # should have a validation message
-    validation_id = page.find("fieldset")["aria-describedby"]
+    validation_id = page.find("fieldset")["aria-describedby"].split(" ").find { |id| id.start_with?("validation-") }
     assert_selector ".FormControl-inlineValidation[id='#{validation_id}']", text: /Channel can['’]t be blank/
 
     # first radio button should have focus