Repository: primer/view_components (Ruby)

Issue:
Check box group: documented anatomy doesn't match what actually gets rendered
## Summary

Currently, there's not any way to configure the "position" of the Caption to match what's in its documented Anatomy. 😅 

The Primer Docs' [anatomy of a checkbox group](https://primer.style/components/checkbox-group#anatomy) orders the following from top to bottom:

- Label
- Caption
- Options
- Validation message

However, peeking at the source for a check box group, it would appear what's actually rendered is in a different order (again, from top to bottom):

- Label
- Options
- Validation Message
- Caption

I think it would be neat to reflect parity in both the documentation and implementation! 🙇 



Fix (patch):
diff --git a/.changeset/curvy-apes-judge.md b/.changeset/curvy-apes-judge.md
new file mode 100644
index 0000000000..649f7fd5b2
--- /dev/null
+++ b/.changeset/curvy-apes-judge.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': minor
+---
+
+[Forms] Fix position of caption for checkbox and radio groups
diff --git a/app/forms/check_box_group_form.rb b/app/forms/check_box_group_form.rb
index fe8a1437cf..c4aeea42b9 100644
--- a/app/forms/check_box_group_form.rb
+++ b/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",
diff --git a/app/forms/radio_button_group_form.rb b/app/forms/radio_button_group_form.rb
index 32c82912cd..fc05f21833 100644
--- a/app/forms/radio_button_group_form.rb
+++ b/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")
diff --git a/lib/primer/forms/check_box_group.html.erb b/lib/primer/forms/check_box_group.html.erb
index 44847ff053..2b37c21b71 100644
--- a/lib/primer/forms/check_box_group.html.erb
+++ b/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>
diff --git a/lib/primer/forms/check_box_group.rb b/lib/primer/forms/check_box_group.rb
index 72e6b5bc3a..1c3f78b57d 100644
--- a/lib/primer/forms/check_box_group.rb
+++ b/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
diff --git a/lib/primer/forms/radio_button_group.html.erb b/lib/primer/forms/radio_button_group.html.erb
index a6b325d2d9..cdfa2fb162 100644
--- a/lib/primer/forms/radio_button_group.html.erb
+++ b/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>
diff --git a/lib/primer/forms/radio_button_group.rb b/lib/primer/forms/radio_button_group.rb
index eae5bea3a3..e71678cf7c 100644
--- a/lib/primer/forms/radio_button_group.rb
+++ b/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