From 7b75dbee4bcb8f84161895b9757df26d3ea773f5 Mon Sep 17 00:00:00 2001
From: Elisa Shapiro <83474365+ElisaShapiro@users.noreply.github.com>
Date: Fri, 27 Sep 2024 11:01:30 -0400
Subject: [PATCH] [PBNTR-531] Fix spacing on Radio kit Children doc example
 (#3730)

**What does this PR do?** A clear and concise description with your
runway ticket url.
[PBNTR-531](https://runway.powerhrg.com/backlog_items/PBNTR-531)
requests an adjustment to the spacing of the Rails and React Radio
Children doc example (created in
[PBNTR-480](https://runway.powerhrg.com/backlog_items/PBNTR-480) and
[PBNTR-523](https://runway.powerhrg.com/backlog_items/PBNTR-523),
respectively) done as a followup ticket due to the need for
[PBNTR-515](https://runway.powerhrg.com/backlog_items/PBNTR-515) to
merge into Playbook as well (the ability to add a margin bottom to the
bottom of the Typeahead kit) in order to achieve proper spacing.

**Screenshots:** Screenshots to visualize your addition/change
Rails doc example comparison
Current production spacing
<img width="612" alt="prod rails spacing"
src="https://github.com/user-attachments/assets/5902ea81-ce5b-4a21-b09f-952fe7324db2">
Updated spacing
<img width="1351" alt="for PR rails centered radio children doc ex"
src="https://github.com/user-attachments/assets/50b3ce82-ab77-4a58-97e6-adeb2ac8b5b5">
React doc example comparison
Current production spacing
<img width="613" alt="prod react spacing"
src="https://github.com/user-attachments/assets/e8d3e44b-a294-4d69-b135-c080a14d8440">
Updated spacing
<img width="1352" alt="for PR react centered radio children doc ex"
src="https://github.com/user-attachments/assets/3b38e847-2cd9-46e4-bce0-28eddd8538f0">


**How to test?** Steps to confirm the desired behavior:
1. Go to the [rails](milano link /kits/radio#custom-children) and/or
[react](milano link kits/radio/react#custom-children) radio children doc
examples.
2. Observe the improved spacing of the 3 radio children components in
the example.


#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
~~- [ ] **TESTS** I have added test coverage to my code.~~
---
 .../playbook/pb_radio/docs/_radio_custom_children.html.erb | 2 ++
 .../playbook/pb_radio/docs/_radio_custom_children.jsx      | 7 +++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb b/playbook/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb
index f5593332a6..f7e44c3a03 100644
--- a/playbook/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb
@@ -10,6 +10,7 @@
 <%= pb_rails("radio", props: {
   custom_children: true,
   label: "Select",
+  margin_bottom: "sm",
   name: "Group1",
   value: "Select",
 }) do %>
@@ -22,6 +23,7 @@
 <%= pb_rails("radio", props: {
   custom_children: true,
   label: "Typeahead",
+  margin_bottom: "sm",
   name: "Group1",
   value: "Typeahead",
 }) do %>
diff --git a/playbook/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx b/playbook/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx
index 20fc3fe7d9..6f5510ea34 100644
--- a/playbook/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx
+++ b/playbook/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx
@@ -19,12 +19,14 @@ const RadioChildren = (props) => {
       <Radio
           customChildren
           label="Select"
+          marginBottom="sm"
           name="Group1"
           tabIndex={0}
           value="Select"
           {...props}
       >
-        <Select 
+        <Select
+            marginBottom="none"
             minWidth="xs"
             options={options}
         />
@@ -32,17 +34,18 @@ const RadioChildren = (props) => {
       <Radio
           customChildren
           label="Typeahead"
+          marginBottom="sm"
           name="Group1"
           tabIndex={0}
           value="Typeahead"
           {...props}
       >
         <Typeahead 
+            marginBottom="none"
             minWidth="xs"
             options={options}
         />
       </Radio>
-      <br />
       <Radio
           customChildren
           defaultChecked={false}