-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[PBNTR-373](Enable Kits Instead of Text for Radio label) (#3612)
[PBNTR-373](https://runway.powerhrg.com/backlog_items/PBNTR-373) This PR adds the ability to have a child wrapped around the `<Radio>` kit. When this child is clicked. it will check off the radio button! <img width="1121" alt="Screenshot 2024-08-26 at 11 30 37 AM" src="https://github.com/user-attachments/assets/e15b0b27-8796-49a2-bf57-a9060bed2b53"> **How to test?** Steps to confirm the desired behavior: 1. Go to Radio kit and test the functionally! #### Checklist: - [ ] **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. - [ ] **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
1 parent
18795ba
commit 7ea0e37
Showing
4 changed files
with
158 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
56 changes: 56 additions & 0 deletions
56
playbook/app/pb_kits/playbook/pb_radio/docs/_radio_children.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
import React from 'react' | ||
import Radio from '../_radio' | ||
import Select from '../../pb_select/_select' | ||
import Typeahead from '../../pb_typeahead/_typeahead' | ||
import Title from '../../pb_title/_title' | ||
|
||
const RadioChildren = (props) => { | ||
|
||
|
||
const options = [ | ||
{ label: 'Orange', value: 'Orange' }, | ||
{ label: 'Red', value: 'Red' }, | ||
{ label: 'Green', value: 'Green' }, | ||
{ label: 'Blue', value: 'Blue' }, | ||
] | ||
|
||
return ( | ||
<div> | ||
<Radio | ||
label="Select" | ||
name="Group1" | ||
tabIndex={0} | ||
value="Select" | ||
{...props} | ||
> | ||
<Select | ||
minWidth="xs" | ||
options={options} | ||
/> | ||
</Radio> | ||
<Radio | ||
label="Typeahead" | ||
name="Group1" | ||
tabIndex={0} | ||
value="Typeahead" | ||
{...props} | ||
> | ||
<Typeahead | ||
minWidth="xs" | ||
options={options} | ||
/> | ||
</Radio> | ||
<br /> | ||
<Radio | ||
defaultChecked={false} | ||
label="Typography" | ||
name="Group1" | ||
value="Typography" | ||
{...props} | ||
> | ||
<Title text="Custom Typography" /> | ||
</Radio> | ||
</div> | ||
) | ||
} | ||
export default RadioChildren |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters