From 7495829c3032ee31bf5ac2c670b73b340334bf27 Mon Sep 17 00:00:00 2001
From: PKulkoRaccoonGang <peter.kulko@raccoongang.com>
Date: Tue, 10 Oct 2023 11:01:02 +0300
Subject: [PATCH 1/3] fix: fixed duplicate calls in FormRadioSet and
 FormCheckboxSet

---
 src/Form/FormCheckbox.jsx | 2 +-
 src/Form/FormRadio.jsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Form/FormCheckbox.jsx b/src/Form/FormCheckbox.jsx
index 9a9b736b89..0fa1f061c1 100644
--- a/src/Form/FormCheckbox.jsx
+++ b/src/Form/FormCheckbox.jsx
@@ -74,7 +74,7 @@ const FormCheckbox = React.forwardRef(({
     ...props,
     className: controlClassName,
   });
-  const control = React.createElement(controlAs, { ...checkboxInputProps, ref });
+  const control = React.createElement(controlAs, { ...props, className: controlClassName, ref });
   return (
     <FormGroupContextProvider
       controlId={checkboxInputProps.id}
diff --git a/src/Form/FormRadio.jsx b/src/Form/FormRadio.jsx
index 9840f6ab53..2cbacbff0f 100644
--- a/src/Form/FormRadio.jsx
+++ b/src/Form/FormRadio.jsx
@@ -59,7 +59,7 @@ const FormRadio = React.forwardRef(({
           'pgn__form-control-disabled': radioInputProps.disabled,
         })}
       >
-        <RadioControl {...radioInputProps} ref={ref} />
+        <RadioControl ref={ref} className={controlClassName} {...props} />
         <div>
           <FormLabel className={labelClassName}>
             {children}

From 6106a15ac804541fa3ae9f152dbc58278df3316b Mon Sep 17 00:00:00 2001
From: PKulkoRaccoonGang <peter.kulko@raccoongang.com>
Date: Tue, 10 Oct 2023 16:12:34 +0300
Subject: [PATCH 2/3] refactor: added new tests

---
 src/Form/tests/FormCheckboxSet.test.jsx | 19 +++++++++++++++++++
 src/Form/tests/FormRadioSet.test.jsx    | 19 +++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/src/Form/tests/FormCheckboxSet.test.jsx b/src/Form/tests/FormCheckboxSet.test.jsx
index be5c0a9082..393364f6e3 100644
--- a/src/Form/tests/FormCheckboxSet.test.jsx
+++ b/src/Form/tests/FormCheckboxSet.test.jsx
@@ -165,4 +165,23 @@ describe('FormCheckboxSet', () => {
       expect(checkboxNode.defaultChecked).toBe(true);
     });
   });
+
+  it('checks if onClick is called once in FormCheckboxSet', () => {
+    const handleChange = jest.fn();
+    const { getByLabelText } = render(
+      <FormGroup controlId="my-field">
+        <FormLabel>Which color?</FormLabel>
+        <FormCheckboxSet
+          name="colors"
+          onChange={handleChange}
+        >
+          <FormCheckbox value="red">Red</FormCheckbox>
+          <FormCheckbox value="green">Green</FormCheckbox>
+        </FormCheckboxSet>
+      </FormGroup>,
+    );
+
+    userEvent.click(getByLabelText('Red'));
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/src/Form/tests/FormRadioSet.test.jsx b/src/Form/tests/FormRadioSet.test.jsx
index 4d5a5d0a66..23cf96dd23 100644
--- a/src/Form/tests/FormRadioSet.test.jsx
+++ b/src/Form/tests/FormRadioSet.test.jsx
@@ -108,4 +108,23 @@ describe('FormRadioSet', () => {
     expect(evergreenRadio).toHaveAttribute('name', 'trees');
     expect(deciduousRadio).toHaveAttribute('name', 'trees');
   });
+
+  it('checks if onClick is called once in FormRadioSet', () => {
+    const handleChange = jest.fn();
+    const { getByLabelText } = render(
+      <FormGroup>
+        <FormLabel>Which color?</FormLabel>
+        <FormRadioSet
+          name="colors"
+          onChange={handleChange}
+        >
+          <FormRadio value="red">Red</FormRadio>
+          <FormRadio value="green">Green</FormRadio>
+        </FormRadioSet>
+      </FormGroup>,
+    );
+
+    userEvent.click(getByLabelText('Red'));
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
 });

From 7bfa1e544fa2719392eabcb64dbd79934098d775 Mon Sep 17 00:00:00 2001
From: PKulkoRaccoonGang <peter.kulko@raccoongang.com>
Date: Thu, 12 Oct 2023 11:10:35 +0300
Subject: [PATCH 3/3] refactor: refactoring after review

---
 src/Form/FormCheckbox.jsx                 | 18 ++++---
 src/Form/FormRadio.jsx                    | 63 +++++++++++------------
 src/Menu/__snapshots__/Menu.test.jsx.snap |  1 +
 3 files changed, 43 insertions(+), 39 deletions(-)

diff --git a/src/Form/FormCheckbox.jsx b/src/Form/FormCheckbox.jsx
index 0fa1f061c1..d2e1951ba5 100644
--- a/src/Form/FormCheckbox.jsx
+++ b/src/Form/FormCheckbox.jsx
@@ -62,7 +62,7 @@ const FormCheckbox = React.forwardRef(({
   floatLabelLeft,
   ...props
 }, ref) => {
-  const { getCheckboxControlProps, hasCheckboxSetProvider } = useCheckboxSetContext();
+  const { hasCheckboxSetProvider } = useCheckboxSetContext();
   const { hasFormGroupProvider, useSetIsControlGroupEffect, getControlProps } = useFormGroupContext();
   useSetIsControlGroupEffect(true);
   const shouldActAsGroup = hasFormGroupProvider && !hasCheckboxSetProvider;
@@ -70,14 +70,11 @@ const FormCheckbox = React.forwardRef(({
     ...getControlProps({}),
     role: 'group',
   } : {};
-  const checkboxInputProps = getCheckboxControlProps({
-    ...props,
-    className: controlClassName,
-  });
+
   const control = React.createElement(controlAs, { ...props, className: controlClassName, ref });
   return (
     <FormGroupContextProvider
-      controlId={checkboxInputProps.id}
+      controlId={props.id}
       isInvalid={isInvalid}
       isValid={isValid}
     >
@@ -85,7 +82,7 @@ const FormCheckbox = React.forwardRef(({
         className={classNames('pgn__form-checkbox', className, {
           'pgn__form-control-valid': isValid,
           'pgn__form-control-invalid': isInvalid,
-          'pgn__form-control-disabled': checkboxInputProps.disabled,
+          'pgn__form-control-disabled': props.disabled,
           'pgn__form-control-label-left': !!floatLabelLeft,
         })}
         {...groupProps}
@@ -107,6 +104,8 @@ const FormCheckbox = React.forwardRef(({
 });
 
 FormCheckbox.propTypes = {
+  /** Specifies id of the FormCheckbox component. */
+  id: PropTypes.string,
   /** Specifies contents of the component. */
   children: PropTypes.node.isRequired,
   /** Specifies class name to append to the base element. */
@@ -123,10 +122,14 @@ FormCheckbox.propTypes = {
   isValid: PropTypes.bool,
   /** Specifies control element. */
   controlAs: PropTypes.elementType,
+  /** Specifies whether the floating label should be aligned to the left. */
   floatLabelLeft: PropTypes.bool,
+  /** Specifies whether the `FormCheckbox` is disabled. */
+  disabled: PropTypes.bool,
 };
 
 FormCheckbox.defaultProps = {
+  id: undefined,
   className: undefined,
   controlClassName: undefined,
   labelClassName: undefined,
@@ -135,6 +138,7 @@ FormCheckbox.defaultProps = {
   isValid: false,
   controlAs: CheckboxControl,
   floatLabelLeft: false,
+  disabled: false,
 };
 
 export { CheckboxControl };
diff --git a/src/Form/FormRadio.jsx b/src/Form/FormRadio.jsx
index 2cbacbff0f..4021e408d5 100644
--- a/src/Form/FormRadio.jsx
+++ b/src/Form/FormRadio.jsx
@@ -40,42 +40,37 @@ const FormRadio = React.forwardRef(({
   isInvalid,
   isValid,
   ...props
-}, ref) => {
-  const { getRadioControlProps } = useRadioSetContext();
-  const radioInputProps = getRadioControlProps({
-    ...props,
-    className: controlClassName,
-  });
-  return (
-    <FormGroupContextProvider
-      controlId={radioInputProps.id}
-      isInvalid={isInvalid}
-      isValid={isValid}
+}, ref) => (
+  <FormGroupContextProvider
+    controlId={props.id}
+    isInvalid={isInvalid}
+    isValid={isValid}
+  >
+    <div
+      className={classNames('pgn__form-radio', className, {
+        'pgn__form-control-valid': isValid,
+        'pgn__form-control-invalid': isInvalid,
+        'pgn__form-control-disabled': props.disabled,
+      })}
     >
-      <div
-        className={classNames('pgn__form-radio', className, {
-          'pgn__form-control-valid': isValid,
-          'pgn__form-control-invalid': isInvalid,
-          'pgn__form-control-disabled': radioInputProps.disabled,
-        })}
-      >
-        <RadioControl ref={ref} className={controlClassName} {...props} />
-        <div>
-          <FormLabel className={labelClassName}>
-            {children}
-          </FormLabel>
-          {description && (
-            <FormControlFeedback hasIcon={false}>
-              {description}
-            </FormControlFeedback>
-          )}
-        </div>
+      <RadioControl ref={ref} className={controlClassName} {...props} />
+      <div>
+        <FormLabel className={labelClassName}>
+          {children}
+        </FormLabel>
+        {description && (
+        <FormControlFeedback hasIcon={false}>
+          {description}
+        </FormControlFeedback>
+        )}
       </div>
-    </FormGroupContextProvider>
-  );
-});
+    </div>
+  </FormGroupContextProvider>
+));
 
 FormRadio.propTypes = {
+  /** Specifies id of the FormRadio component. */
+  id: PropTypes.string,
   /** Specifies contents of the component. */
   children: PropTypes.node.isRequired,
   /** Specifies class name to append to the base element. */
@@ -90,15 +85,19 @@ FormRadio.propTypes = {
   isInvalid: PropTypes.bool,
   /** Specifies whether to display component in valid state, this affects styling. */
   isValid: PropTypes.bool,
+  /** Specifies whether the `FormRadio` is disabled. */
+  disabled: PropTypes.bool,
 };
 
 FormRadio.defaultProps = {
+  id: undefined,
   className: undefined,
   controlClassName: undefined,
   labelClassName: undefined,
   description: undefined,
   isInvalid: false,
   isValid: false,
+  disabled: false,
 };
 
 export { RadioControl };
diff --git a/src/Menu/__snapshots__/Menu.test.jsx.snap b/src/Menu/__snapshots__/Menu.test.jsx.snap
index ced5b21403..75f4f1b1cf 100644
--- a/src/Menu/__snapshots__/Menu.test.jsx.snap
+++ b/src/Menu/__snapshots__/Menu.test.jsx.snap
@@ -126,6 +126,7 @@ exports[`Menu Item renders correctly renders as expected with menu items 1`] = `
   >
     <input
       className="pgn__form-checkbox-input"
+      disabled={false}
       id="form-field1"
       type="checkbox"
     />