Skip to content

Commit

Permalink
[PBNTR-531] Fix spacing on Radio kit Children doc example (#3730)
Browse files Browse the repository at this point in the history
**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.~~
  • Loading branch information
ElisaShapiro authored Sep 27, 2024
1 parent 4c97de8 commit 7b75dbe
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<%= pb_rails("radio", props: {
custom_children: true,
label: "Select",
margin_bottom: "sm",
name: "Group1",
value: "Select",
}) do %>
Expand All @@ -22,6 +23,7 @@
<%= pb_rails("radio", props: {
custom_children: true,
label: "Typeahead",
margin_bottom: "sm",
name: "Group1",
value: "Typeahead",
}) do %>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,30 +19,33 @@ const RadioChildren = (props) => {
<Radio
customChildren
label="Select"
marginBottom="sm"
name="Group1"
tabIndex={0}
value="Select"
{...props}
>
<Select
<Select
marginBottom="none"
minWidth="xs"
options={options}
/>
</Radio>
<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}
Expand Down

0 comments on commit 7b75dbe

Please sign in to comment.