Fixes cloning of RadioField children (#3754)

* extends child property instead of overriding it in the RadioField component * tests that RadioField doesn't override Radio property but extends it * updates CONTRIBUTORS.md * updates CHANGELOG.md * Update packages/terra-form-radio/CHANGELOG.md Co-authored-by: Supreeth <supreeth.mr1990@gmail.com> * adds snapshot check Co-authored-by: Supreeth <supreeth.mr1990@gmail.com> * overrides 'aria-described' prop of Radio by value of RadioField Co-authored-by: Supreeth <supreeth.mr1990@gmail.com> * extends child property instead of overriding it in the CheckboxField component * updates snapshots --------- Co-authored-by: Supreeth <supreeth.mr1990@gmail.com>
cerner · Apr 6, 2023 · 91601e7 · 91601e7
1 parent 3d7745e
commit 91601e7
Show file tree

Hide file tree

Showing 9 changed files with 312 additions and 2 deletions.
diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
@@ -104,6 +104,7 @@ Community
 - Cory McDonald [@corymcdonald]
 - Noah Benham [@noahbenham]
 - Payal Sawant [@PayalSawant]
+- Volodymyr Kondratenko [@vohaha]
 
 [@ryanthemanuel]: https://github.com/ryanthemanuel
 [@Matt-Butler]: https://github.com/Matt-Butler
@@ -205,3 +206,4 @@ Community
 [@JacksonJN]: https://github.com/JacksonJN
 [@manjusr]: https://github.com/manjusr
 [@saurabhkhare86]: https://github.com/SaurabhKhare86
+[@vohaha]: https://github.com/vohaha
diff --git a/packages/terra-form-checkbox/CHANGELOG.md b/packages/terra-form-checkbox/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Fixed
+  * Fixed cloning of CheckboxField child to extend property instead of overriding it.
+
 ## 4.18.0 - (February 15, 2023)
 
 * Changed

diff --git a/packages/terra-form-checkbox/src/CheckboxField.jsx b/packages/terra-form-checkbox/src/CheckboxField.jsx
@@ -138,7 +138,7 @@ const CheckboxField = (props) => {
   const content = React.Children.map(children, (child) => {
     if (child && child.type.isCheckbox) {
       return React.cloneElement(child, {
-        inputAttrs: { 'aria-describedby': ariaDescriptionIds },
+        inputAttrs: { ...child.props.inputAttrs, 'aria-describedby': ariaDescriptionIds },
       });
     }
 

diff --git a/packages/terra-form-checkbox/tests/jest/CheckboxField.test.jsx b/packages/terra-form-checkbox/tests/jest/CheckboxField.test.jsx
@@ -4,6 +4,7 @@ import ThemeContextProvider from 'terra-theme-context/lib/ThemeContextProvider';
 /* eslint-disable-next-line import/no-extraneous-dependencies */
 import { shallowWithIntl, mountWithIntl } from 'terra-enzyme-intl';
 import CheckboxField from '../../src/CheckboxField';
+import Checkbox from '../../src/Checkbox';
 
 window.matchMedia = () => ({ matches: true });
 
@@ -76,3 +77,21 @@ it('correctly applies the theme context className', () => {
   );
   expect(wrapper).toMatchSnapshot();
 });
+
+it('correctly applies "inputAttrs" property to the Checkbox component', () => {
+  const attrKey = 'data-custom-attr';
+  const attrValue = 'attr data';
+  const checkboxField = (
+    <CheckboxField legend="Default CheckboxField">
+      <Checkbox
+        labelText="Default label"
+        inputAttrs={{
+          [attrKey]: attrValue,
+        }}
+      />
+    </CheckboxField>
+  );
+  const wrapper = mountWithIntl(checkboxField);
+  expect(wrapper.find('input').prop(attrKey)).toBe(attrValue);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/packages/terra-form-checkbox/tests/jest/__snapshots__/CheckboxField.test.jsx.snap b/packages/terra-form-checkbox/tests/jest/__snapshots__/CheckboxField.test.jsx.snap
@@ -1,5 +1,133 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`correctly applies "inputAttrs" property to the Checkbox component 1`] = `
+<InjectIntl(CheckboxField)
+  intl={
+    Object {
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "formatDate": [Function],
+      "formatHTMLMessage": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatPlural": [Function],
+      "formatRelative": [Function],
+      "formatTime": [Function],
+      "formats": Object {},
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralFormat": [Function],
+        "getRelativeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": null,
+      "now": [Function],
+      "onError": [Function],
+      "textComponent": "span",
+      "timeZone": null,
+    }
+  }
+  legend="Default CheckboxField"
+>
+  <CheckboxField
+    error={null}
+    help={null}
+    hideRequired={false}
+    intl={
+      Object {
+        "defaultFormats": Object {},
+        "defaultLocale": "en",
+        "formatDate": [Function],
+        "formatHTMLMessage": [Function],
+        "formatMessage": [Function],
+        "formatNumber": [Function],
+        "formatPlural": [Function],
+        "formatRelative": [Function],
+        "formatTime": [Function],
+        "formats": Object {},
+        "formatters": Object {
+          "getDateTimeFormat": [Function],
+          "getMessageFormat": [Function],
+          "getNumberFormat": [Function],
+          "getPluralFormat": [Function],
+          "getRelativeFormat": [Function],
+        },
+        "locale": "en",
+        "messages": null,
+        "now": [Function],
+        "onError": [Function],
+        "textComponent": "span",
+        "timeZone": null,
+      }
+    }
+    isInline={false}
+    isInvalid={false}
+    isLegendHidden={false}
+    legend="Default CheckboxField"
+    legendAttrs={Object {}}
+    required={false}
+    showOptional={false}
+  >
+    <fieldset
+      className="checkbox-field"
+    >
+      <legend
+        className="legend-group"
+        id="terra-checkbox-field-description-2"
+      >
+        <div
+          className="legend"
+        >
+          Default CheckboxField
+          <span
+            className="error-icon-hidden"
+          />
+        </div>
+      </legend>
+      <Checkbox
+        disabled={false}
+        inputAttrs={
+          Object {
+            "aria-describedby": "terra-checkbox-field-description-2  ",
+            "data-custom-attr": "attr data",
+          }
+        }
+        isInline={false}
+        isLabelHidden={false}
+        key=".0"
+        labelText="Default label"
+        labelTextAttrs={Object {}}
+        name={null}
+      >
+        <div
+          className="checkbox"
+        >
+          <label
+            className="label"
+          >
+            <input
+              aria-describedby="terra-checkbox-field-description-2  "
+              className="native-input"
+              data-custom-attr="attr data"
+              disabled={false}
+              name={null}
+              type="checkbox"
+            />
+            <span
+              className="label-text"
+            >
+              Default label
+            </span>
+          </label>
+        </div>
+      </Checkbox>
+    </fieldset>
+  </CheckboxField>
+</InjectIntl(CheckboxField)>
+`;
+
 exports[`correctly applies the theme context className 1`] = `
 <ThemeContextProvider
   intl={

diff --git a/packages/terra-form-radio/CHANGELOG.md b/packages/terra-form-radio/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Fixed
+  * Fixed cloning of RadioField child to extend property instead of overriding it.
+
 ## 4.34.0 - (March 1, 2023)
 
 * Changed

diff --git a/packages/terra-form-radio/src/RadioField.jsx b/packages/terra-form-radio/src/RadioField.jsx
@@ -138,7 +138,7 @@ const RadioField = (props) => {
   const content = React.Children.map(children, (child) => {
     if (child && child.type.isRadio) {
       return React.cloneElement(child, {
-        inputAttrs: { 'aria-describedby': ariaDescriptionIds },
+        inputAttrs: { ...child.props.inputAttrs, 'aria-describedby': ariaDescriptionIds },
       });
     }
 

diff --git a/packages/terra-form-radio/tests/jest/RadioField.test.jsx b/packages/terra-form-radio/tests/jest/RadioField.test.jsx
@@ -4,6 +4,7 @@ import ThemeContextProvider from 'terra-theme-context/lib/ThemeContextProvider';
 /* eslint-disable-next-line import/no-extraneous-dependencies */
 import { shallowWithIntl, mountWithIntl } from 'terra-enzyme-intl';
 import RadioField from '../../src/RadioField';
+import Radio from '../../src/Radio';
 
 window.matchMedia = () => ({ matches: true });
 
@@ -76,3 +77,21 @@ it('correctly applies the theme context className', () => {
   );
   expect(wrapper).toMatchSnapshot();
 });
+
+it('correctly applies "inputAttrs" property to the Radio component', () => {
+  const attrKey = 'data-custom-attr';
+  const attrValue = 'attr data';
+  const radioField = (
+    <RadioField legend="Default RadioField">
+      <Radio
+        labelText="Default label"
+        inputAttrs={{
+          [attrKey]: attrValue,
+        }}
+      />
+    </RadioField>
+  );
+  const wrapper = mountWithIntl(radioField);
+  expect(wrapper.find('input').prop(attrKey)).toBe(attrValue);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/packages/terra-form-radio/tests/jest/__snapshots__/RadioField.test.jsx.snap b/packages/terra-form-radio/tests/jest/__snapshots__/RadioField.test.jsx.snap
@@ -1,5 +1,141 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`correctly applies "inputAttrs" property to the Radio component 1`] = `
+<InjectIntl(RadioField)
+  intl={
+    Object {
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "formatDate": [Function],
+      "formatHTMLMessage": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatPlural": [Function],
+      "formatRelative": [Function],
+      "formatTime": [Function],
+      "formats": Object {},
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralFormat": [Function],
+        "getRelativeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": null,
+      "now": [Function],
+      "onError": [Function],
+      "textComponent": "span",
+      "timeZone": null,
+    }
+  }
+  legend="Default RadioField"
+>
+  <RadioField
+    error={null}
+    help={null}
+    hideRequired={false}
+    intl={
+      Object {
+        "defaultFormats": Object {},
+        "defaultLocale": "en",
+        "formatDate": [Function],
+        "formatHTMLMessage": [Function],
+        "formatMessage": [Function],
+        "formatNumber": [Function],
+        "formatPlural": [Function],
+        "formatRelative": [Function],
+        "formatTime": [Function],
+        "formats": Object {},
+        "formatters": Object {
+          "getDateTimeFormat": [Function],
+          "getMessageFormat": [Function],
+          "getNumberFormat": [Function],
+          "getPluralFormat": [Function],
+          "getRelativeFormat": [Function],
+        },
+        "locale": "en",
+        "messages": null,
+        "now": [Function],
+        "onError": [Function],
+        "textComponent": "span",
+        "timeZone": null,
+      }
+    }
+    isInline={false}
+    isInvalid={false}
+    isLegendHidden={false}
+    legend="Default RadioField"
+    legendAttrs={Object {}}
+    required={false}
+    showOptional={false}
+  >
+    <fieldset
+      className="radio-field"
+      required={false}
+    >
+      <legend
+        className="legend-group"
+        id="terra-radio-field-description-2"
+      >
+        <div
+          className="legend"
+        >
+          Default RadioField
+          <span
+            className="error-icon-hidden"
+          />
+        </div>
+      </legend>
+      <Radio
+        disabled={false}
+        inputAttrs={
+          Object {
+            "aria-describedby": "terra-radio-field-description-2  ",
+            "data-custom-attr": "attr data",
+          }
+        }
+        isInline={false}
+        isLabelHidden={false}
+        key=".0"
+        labelText="Default label"
+        labelTextAttrs={Object {}}
+        name={null}
+      >
+        <div
+          className="radio"
+        >
+          <label
+            className="label"
+          >
+            <input
+              aria-describedby="terra-radio-field-description-2  "
+              className="native-input"
+              data-custom-attr="attr data"
+              disabled={false}
+              name={null}
+              type="radio"
+            />
+            <span
+              className="outer-ring"
+            >
+              <span
+                className="inner-ring"
+              />
+            </span>
+            <span
+              className="label-text"
+            >
+              Default label
+            </span>
+          </label>
+        </div>
+      </Radio>
+    </fieldset>
+  </RadioField>
+</InjectIntl(RadioField)>
+`;
+
 exports[`correctly applies the theme context className 1`] = `
 <ThemeContextProvider
   intl={