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

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

Author: camertron

.changeset/curvy-apes-judge.md

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

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/check_box_group/with_caption/default.png

@@ -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",

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/check_box_group/with_caption/focused.png

@@ -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")

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/radio_button_group/invalid/default.png

@@ -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>