IBX-10895: Fixed RadioButton issues

Author: GrabowskiM

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.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { action } from 'storybook/actions';
 
+import { FormDecorator } from '@ids-sb-decorators/FormDecorator';
 import { RadioButtonFieldStateful } from './';
 
 const meta: Meta<typeof RadioButtonFieldStateful> = {
@@ -16,6 +17,7 @@ const meta: Meta<typeof RadioButtonFieldStateful> = {
         onFocus: action('on-focus'),
         onInput: action('on-input'),
     },
+    decorators: [FormDecorator],
 };
 
 export default meta;

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/components/RadioButton/RadioButtonInput/RadioButtonInput.stories.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 import { action } from 'storybook/actions';
 
+import { FormDecorator } from '@ids-sb-decorators/FormDecorator';
 import { RadioButtonInputStateful } from '.';
 
 const meta: Meta<typeof RadioButtonInputStateful> = {
@@ -16,15 +15,7 @@ const meta: Meta<typeof RadioButtonInputStateful> = {
         onFocus: action('on-focus'),
         onInput: action('on-input'),
     },
-    decorators: [
-        (Story) => {
-            return (
-                <form name="default-form">
-                    <Story />
-                </form>
-            );
-        },
-    ],
+    decorators: [FormDecorator],
 };
 
 export default meta;

packages/components/src/components/RadioButton/RadioButtonsListField/RadioButtonsListField.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { action } from 'storybook/actions';
 
 import { RadioButtonsListFieldDirection, RadioButtonsListFieldStateful } from '.';
+import { FormDecorator } from '@ids-sb-decorators/FormDecorator';
 
 const meta: Meta<typeof RadioButtonsListFieldStateful> = {
     component: RadioButtonsListFieldStateful,
@@ -18,6 +19,7 @@ const meta: Meta<typeof RadioButtonsListFieldStateful> = {
             { id: 'item3', label: 'Item 3', value: 'item3' },
         ],
     },
+    decorators: [FormDecorator],
 };
 
 export default meta;

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;
 }