feat(component): add Radio component#2933
Merged
Conversation
MaxLardenois
added
🗳️ feature
⚛️ component
📖 documentation
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
github-project-automation
bot
moved this to In Progress / Draft
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
MaxLardenois
force-pushed
the
ouds/main-2784-ouds-create-component---radio-button
branch
from
2a44495 to
7f9cdad
Compare
boosted-bot
moved this from In Progress / Draft
to Need Dev Review
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
louismaximepiton
moved this from Need Dev Review
to Dev Review In Progress
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
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. |
Collaborator
There was a problem hiding this comment.
I missed it on the checkbox review, but the .control-item does not exist on its own.
|
|
||
| #### 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. |
Collaborator
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; |
Collaborator
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. |
Collaborator
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. |
Collaborator
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`. |
Collaborator
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`. |
Collaborator
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`. |
Collaborator
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. --> |
Collaborator
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. |
Collaborator
Author
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
github-project-automation
bot
moved this from Dev Review In Progress
to Done
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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