Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(component): add Radio component #2933

Merged
merged 5 commits into from
Apr 3, 2025
Merged

feat(component): add Radio component #2933

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7f9cdad
feat(component): add Radio component
MaxLardenois Mar 31, 2025
04567b6
fix: use divider token for border width
MaxLardenois Apr 1, 2025
354c522
doc: add radio button in migration from boosted
MaxLardenois Apr 1, 2025
387b8e8
Merge branch 'ouds/main' into ouds/main-2784-ouds-create-component---…
vprothais Apr 3, 2025
976892f
fix: after review edits
MaxLardenois Apr 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1066,15 +1066,15 @@ $form-check-label-cursor: pointer !default; // OUDS mod: instead
// ouds mod: no `$form-check-input-color`
// OUDS mod: no `$form-check-input-border`
$form-check-input-border-radius: $ouds-checkbox-border-radius !default; // OUDS mod: instead of `0`
// OUDS mod: no `$form-check-radio-border-radius`
$form-check-radio-border-radius: $ouds-radio-button-border-radius !default; // OUDS mod: instead of `0`
// OUDS mod: no `$form-check-input-focus-border`
// OUDS mod: no `$form-check-input-focus-box-shadow`

// OUDS mod: no `$form-check-input-checked-color`
// OUDS mod: no `$form-check-input-checked-bg-color`
// OUDS mod: no `$form-check-input-checked-border-color`
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='#000' d='m15.262 7.047-6.034 7a.97.97 0 0 1-.737.328.97.97 0 0 1-.736-.329l-3.017-3.5A.833.833 0 0 1 4.53 10c0-.242.106-.46.276-.619l.378-.35a.978.978 0 0 1 .666-.256c.235 0 .449.08.614.21l1.838 1.89 5.578-5.013a.98.98 0 0 1 .645-.237c.52 0 .943.392.943.875a.833.833 0 0 1-.207.547Z'/></svg>") !default; // OUDS mod: custom SVG
// OUDS mod: no `$form-check-radio-checked-bg-image`
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='#000' d='M14.0635 10C14.0635 12.2437 12.2446 14.0625 10.001 14.0625C7.75732 14.0625 5.93848 12.2437 5.93848 10C5.93848 7.75634 7.75732 5.9375 10.001 5.9375C12.2446 5.9375 14.0635 7.75634 14.0635 10Z'/></svg>") !default; // OUDS mod: custom SVG

// OUDS mod: no `$form-check-input-indeterminate-color`
// OUDS mod: no `$form-check-input-indeterminate-bg-color`
Expand Down
133 changes: 132 additions & 1 deletion scss/forms/_control-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,10 @@
@include border-radius($form-check-input-border-radius);
}

&[type="radio"] {
@include border-radius($form-check-radio-border-radius);
}

&:indeterminate[type="checkbox"] {
--#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-checkbox-border-width-selected)};

Expand All @@ -182,22 +186,41 @@
}
}

&[type="radio"] {
--#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-radio-button-border-width-selected)};
&::before {
mask-image: escape-svg($form-check-radio-checked-bg-image);
}
}

&:hover {
&[type="checkbox"] {
--#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-checkbox-border-width-selected-hover)};
}

&[type="radio"] {
--#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-radio-button-border-width-selected-hover)};
}
}

&:focus-visible {
&[type="checkbox"] {
--#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-checkbox-border-width-selected-focus)};
}

&[type="radio"] {
--#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-radio-button-border-width-selected-focus)};
}
}

&:active {
&[type="checkbox"] {
--#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-checkbox-border-width-selected-pressed)};
}

&[type="radio"] {
--#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-radio-button-border-width-selected-pressed)};
}
}
}

Expand All @@ -207,6 +230,10 @@
&[type="checkbox"] {
--#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-checkbox-border-width-unselected-hover)};
}

&[type="radio"] {
--#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-radio-button-border-width-unselected-hover)};
}
}

&:focus-visible {
Expand All @@ -215,6 +242,10 @@
&[type="checkbox"] {
--#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-checkbox-border-width-unselected-focus)};
}

&[type="radio"] {
--#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-radio-button-border-width-unselected-focus)};
}
}

&:active {
Expand All @@ -223,6 +254,9 @@
&[type="checkbox"] {
--#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-checkbox-border-width-unselected-pressed)};
}
&[type="radio"] {
--#{$prefix}control-item-indicator-border-width: #{px-to-rem($ouds-radio-button-border-width-unselected-pressed)};
}
}

&:disabled {
Expand All @@ -237,7 +271,7 @@
//

.control-item-divider {
padding-bottom: subtract($ouds-control-item-space-inset, 1px);
padding-bottom: subtract($ouds-control-item-space-inset, $ouds-divider-border-width);
border-bottom: $ouds-divider-border-width solid $ouds-color-border-default;
}

Expand Down Expand Up @@ -275,6 +309,103 @@
}


//
// Radio button
//

.radio-button-item {
@extend %control-item;
}

.radio-button-standalone {
@extend %control-item-standalone;
}

.radio-button-additional-label {
display: block;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it is a flex item, this display should be useful.

margin: 0;
font-weight: $ouds-font-weight-system-strong;
color: $ouds-color-content-default;
@include get-font-size("label-medium");
}

.radio-button-item-outlined {
&:hover,
&:active,
&:has(input:checked) {
padding: subtract($ouds-control-item-space-inset, $ouds-divider-border-width);
border: $ouds-divider-border-width solid $ouds-color-border-default;
}

&:has(input:checked) {
border-color: $ouds-color-action-selected;

&:hover {
border-color: $ouds-color-action-hover;
}

&:active {
border-color: $ouds-color-action-pressed;
}

// stylelint-disable-next-line selector-no-qualifying-type
.was-validated &:has(input:invalid),
&:has(input.is-invalid) {
border-color: $ouds-color-action-negative-enabled;
}

// stylelint-disable-next-line selector-no-qualifying-type
.was-validated &:has(input:invalid:hover),
&:has(input.is-invalid:hover) {
border-color: $ouds-color-action-negative-hover;
}

// stylelint-disable-next-line selector-no-qualifying-type
.was-validated &:has(input:invalid:focus-visible),
&:has(input.is-invalid:focus-visible) {
border-color: $ouds-color-action-negative-focus;
}

// stylelint-disable-next-line selector-no-qualifying-type
.was-validated &:has(input:invalid:active),
&:has(input.is-invalid:active) {
border-color: $ouds-color-action-negative-pressed;
}
}

&:hover {
border-color: $ouds-color-action-hover;
}

&:active {
border-color: $ouds-color-action-pressed;
}

// stylelint-disable-next-line selector-no-qualifying-type
.was-validated &:has(input:invalid:hover),
&:has(input.is-invalid:hover) {
border-color: $ouds-color-action-negative-hover;
}

// stylelint-disable-next-line selector-no-qualifying-type
.was-validated &:has(input:invalid:focus-visible),
&:has(input.is-invalid:focus-visible) {
border-color: $ouds-color-action-negative-focus;
}

// stylelint-disable-next-line selector-no-qualifying-type
.was-validated &:has(input:invalid:active),
&:has(input.is-invalid:active) {
border-color: $ouds-color-action-negative-pressed;
}

&:has(input:focus-visible) {
padding: $ouds-control-item-space-inset;
border-width: 0;
}
}


//
// Bootstrap compatibility
//
Expand Down
18 changes: 4 additions & 14 deletions site/content/docs/0.3/forms/checkbox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,19 +65,9 @@ Browser default checkboxes are replaced with the help of `.checkbox-item`. Check

Checkboxes are implemented using `.control-item-*` classes, see below.

### Control item

Control item is an abstraction for several non-text input components that have similar behavior and layout. It contains an `<input>` indicator, a text container for the label and an optional icon.

We use the future friendly child check selector (`:has`) for all our `<input>` states, like `:invalid` or `:disabled`. When combined with the `.control-item-label` class, we can easily style the text for each item based on the `<input>`'s state.

`.control-item-assets-container` controls the position of the `.control-item-indicator` and the optional icon.

`.control-item-text-container` contains the label and optional helper text and controls their positioning.

`.control-item-label` extend their clickable area until a `.control-item`, `.checkbox-standalone` or a `position: relative;` is found in the page hierarchy. This ensure a consistent approach, whatever the DOM is. Consequently, none of the elements next to the label should be interactive.

`.control-item-indicator` uses customized Solaris icons to indicate checked or indeterminate states.
{{< markdown >}}
{{< partial "control-item.md" >}}
{{< /markdown >}}

## Variants

Expand Down Expand Up @@ -368,7 +358,7 @@ When checkboxes belong to a group (e.g., in a form), you must provide clear cont
## Standalone

{{< callout warning >}}
This is commonly used to build custom component and shouldn't be used alone. Remember to provide some sort of accessible name for assistive technologies (for instance, using `aria-labelledby`, a `.visually-hidden`, `aria-label` or a second label). See the [forms overview accessibility]({{< docsref "/forms/overview#accessibility" >}}) section for details.
{{< partial "callouts/standalone-form-indicator.md" >}}
{{< /callout >}}

For the standalone Checkbox, we provide a completely different architecture to ease the integration inside your projects.
Expand Down
Loading