feat: radio button update with checkbox css simplification

Author: MaxLardenois

scss/forms/_control-item.scss

@@ -296,6 +296,83 @@
   min-height: $ouds-checkbox-size-min-height;
 }
 
+//
+// Radio button specific
+//
+
+.radio-button-additional-label {
+  display: block;
+  margin: 0;
+  font-weight: $ouds-font-weight-strong;
+  color: $ouds-color-content-default;
+  @include get-font-size("label-medium");
+}
+
+.radio-button-item-outlined {
+  &:hover,
+  &:active,
+  &:has([type]:checked) {
+    padding: subtract($ouds-control-item-space-inset, 1px);
+    border: 1px solid $ouds-color-border-default; // TODO: Introduce design token once created
+  }
+
+  &:has([type]:checked) {
+    border-color: $ouds-color-action-selected;
+
+    &:hover {
+      border-color: $ouds-color-action-hover;
+    }
+
+    &:active {
+      border-color: $ouds-color-action-pressed;
+    }
+
+    .was-validated &:has([type]:invalid),
+    &:has([type].is-invalid) {
+      border-color: $ouds-color-action-negative-enabled;
+    }
+
+    .was-validated &:has([type]:invalid:hover),
+    &:has([type].is-invalid:hover) {
+      border-color: $ouds-color-action-negative-hover;
+    }
+
+    .was-validated &:has([type]:invalid:focus-visible),
+    &:has([type].is-invalid:focus-visible) {
+      border-color: $ouds-color-action-negative-focus;
+    }
+
+    .was-validated &:has([type]:invalid:active),
+    &:has([type].is-invalid:active) {
+      border-color: $ouds-color-action-negative-pressed;
+    }
+  }
+
+  &:hover {
+    border-color: $ouds-color-action-hover;
+  }
+
+  &:active {
+    border-color: $ouds-color-action-pressed;
+  }
+
+  .was-validated &:has([type]:invalid:hover),
+  &:has([type].is-invalid:hover) {
+    border-color: $ouds-color-action-negative-hover;
+  }
+
+  .was-validated &:has([type]:invalid:focus-visible),
+  &:has([type].is-invalid:focus-visible) {
+    border-color: $ouds-color-action-negative-focus;
+  }
+
+  .was-validated &:has([type]:invalid:active),
+  &:has([type].is-invalid:active) {
+    border-color: $ouds-color-action-negative-pressed;
+  }
+}
+
+
 //
 // Bootstrap compatibility
 //

site/content/docs/0.3/forms/radio-button.md

@@ -16,15 +16,15 @@ You can find here the [OUDS Radio button design guidelines](https://unified-desi
 ## Basic example
 
 {{< example >}}
-<div class="radio-button-item">
+<div class="control-item">
   <div class="control-item-assets-container">
     <input class="control-item-indicator" type="radio" value="" id="radioDefault" name="radioBasic">
   </div>
   <div class="control-item-text-container">
     <label class="control-item-label" for="radioDefault">Label</label>
   </div>
 </div>
-<div class="radio-button-item control-item-divider">
+<div class="control-item control-item-divider">
   <div class="control-item-assets-container">
     <input class="control-item-indicator" type="radio" value="" id="radioFullOption" checked name="radioBasic" aria-describedby="radioFullOptionAdditionalText radioFullOptionHelper">
   </div>
@@ -60,7 +60,7 @@ You can find here the [OUDS Radio button design guidelines](https://unified-desi
 
 ## Approach
 
-Browser default radio buttons are replaced with the help of `.radio-button-item`. Radio buttons allows user to select a single option from a set of mutually exclusive choices.
+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.
 
 Radio buttons are implemented using `.control-item-*` classes, see below.
 
@@ -72,26 +72,26 @@ Radio buttons are implemented using `.control-item-*` classes, see below.
 
 ### 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.
+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.
 
 {{< example >}}
-<div class="radio-button-item radio-button-item-outlined control-item-divider">
+<div class="control-item radio-button-item-outlined control-item-divider">
   <div class="control-item-assets-container">
     <input class="control-item-indicator" type="radio" value="" id="radioOutlined1" name="radioOutlined" checked>
   </div>
   <div class="control-item-text-container">
     <label class="control-item-label" for="radioOutlined1">Label</label>
   </div>
 </div>
-<div class="radio-button-item radio-button-item-outlined control-item-divider">
+<div class="control-item radio-button-item-outlined control-item-divider">
   <div class="control-item-assets-container">
     <input class="control-item-indicator" type="radio" value="" id="radioOutlined2" name="radioOutlined">
   </div>
   <div class="control-item-text-container">
     <label class="control-item-label" for="radioOutlined2">Label</label>
   </div>
 </div>
-<div class="radio-button-item radio-button-item-outlined control-item-divider">
+<div class="control-item radio-button-item-outlined control-item-divider">
   <div class="control-item-assets-container">
     <input class="control-item-indicator is-invalid" type="radio" value="" id="radioOutlined3" name="radioOutlined">
   </div>
@@ -106,15 +106,15 @@ You can display an outlined radio buttons by adding a `.radio-button-item-outlin
 You can display a divider by adding `.control-item-divider` to a `.control-item`.
 
 {{< example >}}
-<div class="radio-button-item control-item-divider">
+<div class="control-item control-item-divider">
   <div class="control-item-assets-container">
     <input class="control-item-indicator" type="radio" value="" id="radioDivider" name="radioDivider" checked>
   </div>
   <div class="control-item-text-container">
     <label class="control-item-label" for="radioDivider">Label</label>
   </div>
 </div>
-<div class="radio-button-item control-item-divider">
+<div class="control-item control-item-divider">
   <div class="control-item-assets-container">
     <input class="control-item-indicator" type="radio" value="" id="radioDivider2" name="radioDivider">
   </div>
@@ -129,7 +129,7 @@ You can display a divider by adding `.control-item-divider` to 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 `.control-item`.
 
 {{< example >}}
-<div class="radio-button-item">
+<div class="control-item">
   <div class="control-item-assets-container">
     <input class="control-item-indicator" type="radio" value="" id="radioWithSVG" name="radioIcon" checked>
   </div>
@@ -142,7 +142,7 @@ You can display an icon by adding `.control-item-assets-container` with an icon
     </svg>
   </div>
 </div>
-<div class="radio-button-item">
+<div class="control-item">
   <div class="control-item-assets-container">
     <input class="control-item-indicator" type="radio" value="" id="radioWithIconFont"  name="radioIcon">
   </div>
@@ -160,7 +160,7 @@ You can display an icon by adding `.control-item-assets-container` with an icon
 You can display an additional label for critical information for the option by adding a `.radio-button-additional-label` as a sibling of a `.control-item-label`.
 
 {{< example >}}
-<div class="radio-button-item">
+<div class="control-item">
   <div class="control-item-assets-container">
     <input class="control-item-indicator" type="radio" value="" id="radioAdditionalLabel">
   </div>
@@ -176,7 +176,7 @@ You can display an additional label for critical information for the option by a
 You can display an helper text by adding a `.control-item-helper` as a sibling of a `.control-item-label`.
 
 {{< example >}}
-<div class="radio-button-item">
+<div class="control-item">
   <div class="control-item-assets-container">
     <input class="control-item-indicator" type="radio" value="" id="radioHelperText">
   </div>
@@ -192,7 +192,7 @@ You can display an helper text by adding a `.control-item-helper` as a sibling o
 You can reverse the component by adding `.control-item-reverse` to a `.control-item`.
 
 {{< example >}}
-<div class="radio-button-item control-item-reverse">
+<div class="control-item control-item-reverse">
   <div class="control-item-assets-container">
     <input class="control-item-indicator" type="radio" value="" id="radioReverse">
   </div>
@@ -230,15 +230,15 @@ Put your checkboxes, radios, and switches on the opposite side with the `.form-c
 Add the `disabled` attribute and the associated `<label>` are automatically styled to match with a lighter color to help indicate the input's state.
 
 {{< example stackblitz_add_js="true" >}}
-<div class="radio-button-item">
+<div class="control-item">
   <div class="control-item-assets-container">
     <input class="control-item-indicator" type="radio" value="" id="radioDisabled" disabled name="radioDisabled">
   </div>
   <div class="control-item-text-container">
     <label class="control-item-label" for="radioDisabled">Label</label>
   </div>
 </div>
-<div class="radio-button-item">
+<div class="control-item">
   <div class="control-item-assets-container">
     <input class="control-item-indicator" type="radio" value="" id="radioCheckedDisabled" checked disabled name="radioDisabled">
   </div>
@@ -272,7 +272,7 @@ Add the `disabled` attribute and the associated `<label>` are automatically styl
  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. -->
 
 {{< example >}}
-<div class="radio-button-item">
+<div class="control-item">
   <div class="control-item-assets-container">
     <input class="control-item-indicator is-invalid" type="radio" value="" id="radioInvalid">
   </div>
@@ -290,7 +290,7 @@ When radio buttons belong to a group (e.g., in a form), you must provide clear c
 <div class="row">
   <fieldset class="col-md-6">
     <legend>Radio buttons group example</legend>
-    <div class="radio-button-item control-item-divider">
+    <div class="control-item control-item-divider">
       <div class="control-item-assets-container">
         <input class="control-item-indicator" type="radio" value="" id="radioGroup1" name="radioGroup" aria-describedby="radioGroup1AdditionalLabel radioGroup1Description">
       </div>
@@ -305,12 +305,12 @@ When radio buttons belong to a group (e.g., in a form), you must provide clear c
         </svg>
       </div>
     </div>
-    <div class="radio-button-item control-item-divider">
+    <div class="control-item control-item-divider">
       <div class="control-item-assets-container">
         <input class="control-item-indicator" type="radio" value="" id="radioGroup2" checked name="radioGroup"  aria-describedby="radioGroup2AdditionalLabel radioGroup2Description">
       </div>
       <div class="control-item-text-container">
-        <label class="control-item-label" for="radioGroup2">A longer label for showing behavior in this case, </label>
+        <label class="control-item-label" for="radioGroup2">A longer label for showing behavior in this case</label>
         <p class="radio-button-additional-label" id="radioGroup2AdditionalLabel">Radio button indicator and icon will stick to the top area of the component</p>
         <p class="control-item-helper" id="radioGroup2Description">Also a longer helper text, it will also wrap at some point depending on the component width</p>
       </div>