IBX-10895: Fixed RadioButton issues

packages/assets/src/scss/_choice-input-field.scss

@@ -1,7 +1,30 @@
 @use 'functions' as *;
+@use 'variables' as *;
 
 .ids-choice-input-field {
+    --ids-input-hover-border-color: var(--ids-input-hover-color, #{$color-primary-80});
+    --ids-input-hover-text-color: var(--ids-input-hover-color, #{$color-primary-80});
+
     display: flex;
     align-items: center;
     gap: calculateRem(8px);
+
+    &--disabled {
+        .ids-choice-input-label {
+            color: var(--ids-input-disabled-text-color, #{$color-neutral-150});
+            pointer-events: none;
+        }
+    }
+
+    &--error {
+        .ids-choice-input-label {
+            color: var(--ids-input-error-text-color, #{$color-error-80});
+        }
+    }
+
+    &:hover:not(&--disabled) {
+        .ids-choice-input-label {
+            color: var(--ids-input-hover-text-color);
+        }
+    }
 }

packages/assets/src/scss/mixins/_inputs.scss

@@ -29,7 +29,7 @@
         pointer-events: none;
     }
 
-    &:hover {
+    &:hover:not(&--disabled) {
         border-color: var(--ids-input-hover-border-color, #{$color-primary-80});
     }
 

packages/components/src/components/RadioButton/RadioButtonField/RadioButtonField.tsx

@@ -9,8 +9,8 @@ import { RadioButtonFieldProps } from './RadioButtonField.types';
 
 export const RadioButtonField = ({
     className = '',
-    label,
     inputWrapperClassName = '',
+    label,
     labelClassName = '',
     ...inputProps
 }: RadioButtonFieldProps) => {
@@ -25,6 +25,8 @@ export const RadioButtonField = ({
     return (
         <BaseChoiceInputField
             className={fieldClassName}
+            disabled={inputProps.disabled}
+            error={inputProps.error}
             id={inputProps.id}
             inputWrapperClassName={inputWrapperClassName}
             labelClassName={labelClassName}

packages/components/src/hoc/withStateChecked.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 
 type OnChangeFn = (checked: boolean, ...args: any[]) => any; // eslint-disable-line @typescript-eslint/no-explicit-any
 
@@ -22,6 +22,10 @@ export const withStateChecked = <T extends object>(WrappedComponent: FC<any>) =>
             }
         };
 
+        useEffect(() => {
+            setComponentChecked(checked);
+        }, [checked]);
+
         return <WrappedComponent {...restProps} checked={componentChecked} onChange={handleChange} />;
     };
 

packages/components/src/hoc/withStateValue.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 
 type OnChangeFn<T> = (value: T, ...args: any[]) => any; // eslint-disable-line @typescript-eslint/no-explicit-any
 
@@ -22,6 +22,10 @@ export const withStateValue = <Props, ValueType>(WrappedComponent: FC<any>) => {
             }
         };
 
+        useEffect(() => {
+            setComponentValue(value);
+        }, [value]);
+
         return <WrappedComponent {...restProps} onChange={handleChange} value={componentValue} />;
     };
 

packages/components/src/partials/BaseChoiceInput/BaseChoiceInput.tsx

@@ -20,7 +20,6 @@ export const BaseChoiceInput = ({
     id = undefined,
     inputClassName = '',
     ref,
-    required = false,
     title = '',
     value = '',
 }: BaseChoiceInputProps) => {
@@ -58,7 +57,6 @@ export const BaseChoiceInput = ({
                 id={id}
                 name={name}
                 ref={ref}
-                required={required}
                 title={title}
                 type={type}
                 value={value}

packages/components/src/partials/BaseChoiceInput/BaseChoiceInput.types.ts

@@ -20,6 +20,5 @@ export interface BaseChoiceInputProps extends BaseComponentAriaAttributes {
     id?: string;
     inputClassName?: string;
     ref?: Ref<HTMLInputElement>;
-    required?: boolean;
     value?: string;
 }

packages/components/src/partials/BaseChoiceInputField/BaseChoiceInputField.tsx

@@ -8,13 +8,17 @@ import { BaseChoiceInputFieldProps } from './BaseChoiceInputField.types';
 export const BaseChoiceInputField = ({
     children,
     className = '',
+    disabled = false,
+    error = false,
     id,
     inputWrapperClassName = '',
     labelClassName = '',
     renderInput,
 }: BaseChoiceInputFieldProps) => {
     const componentClassName = createCssClassNames({
         'ids-choice-input-field': true,
+        'ids-choice-input-field--disabled': disabled,
+        'ids-choice-input-field--error': error,
         [className]: true,
     });
     const componentInputWrapperClassName = createCssClassNames({

packages/components/src/partials/BaseChoiceInputField/BaseChoiceInputField.types.ts

@@ -2,6 +2,8 @@ import { BaseComponentAriaAttributes } from '@ids-types/general';
 
 export interface BaseChoiceInputFieldProps extends BaseComponentAriaAttributes {
     children: React.ReactNode;
+    disabled?: boolean;
+    error?: boolean;
     id: string;
     inputWrapperClassName?: string;
     labelClassName?: string;

packages/components/src/partials/BaseInput/BaseInput.types.ts

@@ -28,7 +28,7 @@ interface BaseInputPropsProps extends BaseComponentAttributes {
 }
 
 interface BaseInputVisibleProps extends BaseInputPropsProps {
-    required: boolean;
+    required?: boolean;
     type?: Exclude<BaseInputType, 'hidden'>;
     extraInputAttrs?: Omit<InputHTMLAttributes<HTMLInputElement>, keyof BaseInputVisibleProps>;
 }