feat(component): add Radio component #2933
Merged
Conversation
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
MaxLardenois
added
🗳️ feature
⚛️ component
📖 documentation
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
MaxLardenois
force-pushed
the
ouds/main-2784-ouds-create-component---radio-button
branch
from
2a44495 to
7f9cdad
Compare
vprothais
requested changes
Apr 2, 2025
|
|
||
| `.control-item-assets-container` are containers controlling the position of the `.control-item-indicator` and the optional icon. | ||
|
|
||
| `.control-item-label` extend their clickable area until a `.control-item`, `.checkbox-standalone`, `.radio-button-standalone` or a `position: relative;` is found in the page hierarchy. It permits to have a more consistent approach, whatever the DOM is. Nonetheless, it means that none of the elements next to the label should be interactive. |
There was a problem hiding this comment.
I missed it on the checkbox review, but the .control-item does not exist on its own.
| @@ -179,6 +179,40 @@ See [our new Checkbox page]({{< docsref "/forms/checkbox" >}}) for more informat | |||
|
|
|||
| - <span class="badge text-bg-status-warning-emphasized">Warning</span> Links in checkboxes' labels are now forbidden (they won't be interactive anyway). | |||
|
|
|||
| #### Radio button | |||
|
|
|||
| - <span class="badge text-bg-status-positive-emphasized">New</span> `.radio-button-item`, `.radio-button-standalone`, `.radio-button-additional-label`, `.radio-button-item-outlined` have been added. | |||
There was a problem hiding this comment.
In the checkbox part we are listing all control-item classes. Maybe we should move this list to the Checks & radios section since it is used in both components.
scss/forms/_control-item.scss
Outdated
| } | ||
|
|
||
| .radio-button-additional-label { | ||
| display: block; |
There was a problem hiding this comment.
it is a flex item, this display should be useful.
|
|
||
| ## Approach | ||
|
|
||
| Browser default radio buttons are replaced with the help of `.control-item`. Radio buttons allows user to select a single option from a set of mutually exclusive choices. |
There was a problem hiding this comment.
.control-item class does not exist :)
|
|
||
| ### Outlined | ||
|
|
||
| You can display an outlined radio buttons by adding a `.radio-button-item-outlined` to `.control-item`. If there is an outlined radio button item in a group, all its siblings should also be outlined. |
There was a problem hiding this comment.
Suggested change
| You can display an outlined radio buttons by adding a `.radio-button-item-outlined` to `.control-item`. If there is an outlined radio button item in a group, all its siblings should also be outlined. | |
| You can display an outlined radio buttons by adding a `.radio-button-item-outlined` to `.radio-button-item`. If there is an outlined radio button item in a group, all its siblings should also be outlined. |
|
|
||
| ### Divider | ||
|
|
||
| You can display a divider by adding `.control-item-divider` to a `.control-item`. |
There was a problem hiding this comment.
Suggested change
| You can display a divider by adding `.control-item-divider` to a `.control-item`. | |
| You can display a divider by adding `.control-item-divider` to a `.radio-button-item`. |
|
|
||
| ### Icon | ||
|
|
||
| You can display an icon by adding `.control-item-assets-container` with an icon (SVG or font-icon most likely) inside as a child of a `.control-item`. |
There was a problem hiding this comment.
Suggested change
| You can display an icon by adding `.control-item-assets-container` with an icon (SVG or font-icon most likely) inside as a child of a `.control-item`. | |
| You can display an icon by adding `.control-item-assets-container` with an icon (SVG or font-icon most likely) inside as a child of a `.radio-button-item`. |
|
|
||
| ### Reverse | ||
|
|
||
| You can reverse the component by adding `.control-item-reverse` to a `.control-item`. |
There was a problem hiding this comment.
Suggested change
| You can reverse the component by adding `.control-item-reverse` to a `.control-item`. | |
| You can reverse the component by adding `.control-item-reverse` to a `.radio-button-item`. |
|
|
||
| ### Invalid | ||
|
|
||
| You can display an invalid radio button by adding `.is-invalid` to a `.control-item-indicator`. <!-- Please take a look at our [Validation]({{< docsref "/forms/validation" >}}) page to know more about this. --> |
There was a problem hiding this comment.
The link can be uncommented since we have the page now.
Suggested change
| You can display an invalid radio button by adding `.is-invalid` to a `.control-item-indicator`. <!-- Please take a look at our [Validation]({{< docsref "/forms/validation" >}}) page to know more about this. --> | |
| You can display an invalid radio button by adding `.is-invalid` to a `.control-item-indicator`. Please take a look at our [Validation]({{< docsref "/forms/validation" >}}) page to know more about this. |
There was a problem hiding this comment.
Ok, porting this to Checkbox too
vprothais
deleted the
ouds/main-2784-ouds-create-component---radio-button
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Note: Please transform
- [ ]into- (NA)in the description when things are not applicableRelated issues
closes #2892
Types of change
Live previews
Checklist
Contribution
Accessibility
Design
Development
Documentation
Checklist (for Core Team only)
After the merge