refactor(radio-button): remove MDC dependency

Author: Kiarokh

src/components/checkbox/checkbox.scss

@@ -39,6 +39,9 @@
 
 .box {
     &:after {
+        height: 0.125rem;
+        width: 0.25rem;
+
         .indeterminate & {
             opacity: 1;
             width: calc(var(--limel-boolean-input-box-size) - 0.5rem);
@@ -47,6 +50,8 @@
 }
 
 .checkbox {
+    --limel-boolean-input-box-border-radius: 0.25rem;
+
     svg.check-mark {
         position: absolute;
         z-index: 1;

src/components/list/radio-button/radio-button.scss

@@ -1,21 +1,48 @@
-@use '@material/radio';
-@use '@material/radio/styles';
-@use '@material/form-field';
+/**
+* :::important
+* The `RadioButtonTemplate` can be imported and used in the HTML of
+* other components, to render a non-functional and decorative radio button in
+* their UI. An example of this is the list component.
+* This means the content of `RadioButtonTemplate` will become a part of the
+* consumer's DOM structure.
+*
+* Additionally, the consumer components' also need to import the current `.scss`
+* file into their own styles file, for the radio button to be rendered correctly!
+* This means, if the styles in this file are not "specific" enough,
+* there is a risk that the consumer component's styles are affected by
+* our styles here.
+*
+* For instance if the consumer has a `<label>`,
+* it might unintentionally inherit styles from the radio button; unless we
+* make the such styles more specific here.
+*
+* Naturally, we cannot mitigate all sorts of potential styling problems.
+* The consumer component should be aware of this issue too.
+* But we can ensure that our styles here both make sense,
+* are readable, and are as specific as possible to avoid unintended side effects.
+* :::
+*/
 
-@include form-field.core-styles;
+@use '../../style/mixins';
 
-.mdc-form-field {
-    display: flex;
+@forward '../../style/internal/boolean-input.scss';
 
-    .mdc-radio {
-        @include radio.ink-color(primary);
-    }
+.radio-button {
+    --limel-boolean-input-box-border-radius: var(
+        --limel-boolean-input-box-size
+    );
 }
 
-.mdc-radio {
-    .mdc-radio__native-control:enabled:not(:checked)
-        + .mdc-radio__background
-        .mdc-radio__outer-circle {
-        border-color: var(--mdc-checkbox-unchecked-color);
+.box {
+    &:after {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+
+        .boolean-input:has(input[type='radio']:checked) & {
+            opacity: 1;
+            transform: scale(0.6);
+            box-shadow: var(--shadow-depth-8);
+        }
     }
 }

src/components/list/radio-button/radio-button.template.tsx

@@ -14,30 +14,25 @@ export const RadioButtonTemplate: FunctionalComponent<
     return (
         <div class="mdc-form-field">
             <div
-                class={`
-                        mdc-radio
-                        ${props.disabled ? 'mdc-radio--disabled' : ''}
-                    `}
+                class={{
+                    'boolean-input': true,
+                    'radio-button': true,
+                    checked: props.checked,
+                    disabled: props.disabled,
+                }}
             >
                 <input
-                    class="mdc-radio__native-control"
                     type="radio"
                     id={props.id}
                     checked={props.checked}
                     disabled={props.disabled}
                     onChange={props.onChange}
                 />
-                <div class="mdc-radio__background">
-                    <div class="mdc-radio__outer-circle" />
-                    <div class="mdc-radio__inner-circle" />
-                </div>
+                <div class="box" />
+                <label class="boolean-input-label" htmlFor={props.id}>
+                    {props.label}
+                </label>
             </div>
-            <label
-                class={`${props.disabled ? 'disabled' : ''}`}
-                htmlFor={props.id}
-            >
-                {props.label}
-            </label>
         </div>
     );
 };

src/style/internal/boolean-input.scss

@@ -21,7 +21,8 @@
     ); // helps align with other fields in the form, or within table rows
     width: 100%;
 
-    input[type='checkbox'] {
+    input[type='checkbox'],
+    input[type='radio'] {
         // Hide the native checkbox
         @include mixins.visually-hidden;
         -webkit-appearance: none;
@@ -97,7 +98,7 @@ label.boolean-input-label {
     height: var(--limel-boolean-input-box-size);
 
     margin-right: var(--limel-boolean-input-gap-size);
-    border-radius: 0.25rem;
+    border-radius: var(--limel-boolean-input-box-border-radius);
     border: 0.125rem solid;
 
     border-color: var(
@@ -110,7 +111,8 @@ label.boolean-input-label {
     );
 
     .checked &,
-    .boolean-input:has(input[type='checkbox']:checked) & {
+    .boolean-input:has(input[type='checkbox']:checked) &,
+    .boolean-input:has(input[type='radio']:checked) & {
         background-color: var(
             --lime-primary-color,
             var(--limel-theme-primary-color)
@@ -143,29 +145,34 @@ label.boolean-input-label {
         inset: -0.1875rem; // 3px
         border-radius: inherit;
 
-        .boolean-input:has(input[type='checkbox']:focus-visible) & {
+        .boolean-input:has(input[type='checkbox']:focus-visible) &,
+        .boolean-input:has(input[type='radio']:focus-visible) & {
             will-change: box-shadow;
 
             box-shadow: var(--shadow-depth-8-focused);
         }
     }
 
     &:after {
-        // For indicating the indeterminate state
+        // For indicating the indeterminate state in checkbox
+        // For indicating the the checked state in radio
         transition:
             opacity 0.2s ease,
-            width 0.4s ease;
+            width 0.4s ease,
+            box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87),
+            transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);
         content: '';
         position: absolute;
         inset: 0;
         margin: auto;
 
-        height: 0.125rem;
-        width: 0.25rem;
-
         border-radius: 1rem;
         opacity: 0;
 
         background-color: rgb(var(--color-white));
+
+        .boolean-input:not(.disabled):has(label.boolean-input-label:hover) & {
+            will-change: opacity, box-shadow, transform, width;
+        }
     }
 }