fix(CheckboxGroup): propagate props to Checkbox children (#20267)

* fix(CheckboxGroup): propagate props to Checkbox children

* refactor: shrink diff

Author: adamalston

packages/react/src/components/CheckboxGroup/CheckboxGroup-test.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -13,6 +13,16 @@ import { AILabel } from '../AILabel';
 
 const prefix = 'cds';
 
+/**
+ * @param element {Element}
+ * @returns {Record<string, string>}
+ */
+const getElementAttributes = ({ attributes }) =>
+  Array.from(attributes).reduce(
+    (acc, { name, value }) => ({ ...acc, [name]: value }),
+    {}
+  );
+
 describe('CheckboxGroup', () => {
   it('should support a custom `className` prop on the outermost element', () => {
     const { container } = render(
@@ -191,4 +201,89 @@ describe('CheckboxGroup', () => {
       `${prefix}--checkbox-group--horizontal`
     );
   });
+
+  describe('prop inheritance', () => {
+    it('should pass props to child `Checkbox` components', () => {
+      render(
+        <CheckboxGroup legendText="Checkbox heading" invalid readOnly warn>
+          <Checkbox labelText="Checkbox 1" id="checkbox-1" />
+          <Checkbox labelText="Checkbox 2" id="checkbox-2" />
+        </CheckboxGroup>
+      );
+
+      const checkbox1 = screen.getByLabelText('Checkbox 1');
+      const checkbox2 = screen.getByLabelText('Checkbox 2');
+      const attributes1 = getElementAttributes(checkbox1);
+      const attributes2 = getElementAttributes(checkbox2);
+
+      expect(attributes1).toEqual({
+        class: `${prefix}--checkbox`,
+        id: 'checkbox-1',
+        'data-invalid': 'true',
+        'aria-readonly': 'true',
+        type: 'checkbox',
+      });
+      expect(attributes2).toEqual({
+        class: `${prefix}--checkbox`,
+        id: 'checkbox-2',
+        'data-invalid': 'true',
+        'aria-readonly': 'true',
+        type: 'checkbox',
+      });
+    });
+
+    it('should not override individual `Checkbox` props', () => {
+      render(
+        <CheckboxGroup legendText="Checkbox heading" readOnly>
+          <Checkbox labelText="Checkbox 1" id="checkbox-1" readOnly={false} />
+          <Checkbox labelText="Checkbox 2" id="checkbox-2" />
+        </CheckboxGroup>
+      );
+
+      const checkbox1 = screen.getByLabelText('Checkbox 1');
+      const checkbox2 = screen.getByLabelText('Checkbox 2');
+      const attributes1 = getElementAttributes(checkbox1);
+      const attributes2 = getElementAttributes(checkbox2);
+
+      expect(attributes1).toEqual({
+        class: `${prefix}--checkbox`,
+        id: 'checkbox-1',
+        // Should not be read-only because it explicitly sets `readOnly` to
+        // `false`.
+        'aria-readonly': 'false',
+        type: 'checkbox',
+      });
+      expect(attributes2).toEqual({
+        class: `${prefix}--checkbox`,
+        id: 'checkbox-2',
+        // Should be read-only because it inherits from the group.
+        'aria-readonly': 'true',
+        type: 'checkbox',
+      });
+    });
+
+    it('should not affect non-`Checkbox` children', () => {
+      render(
+        <CheckboxGroup legendText="Checkbox heading" readOnly>
+          <Checkbox labelText="Checkbox label" id="checkbox-1" />
+          <div data-testid="non-checkbox">Not a checkbox</div>
+        </CheckboxGroup>
+      );
+
+      const checkbox = screen.getByLabelText('Checkbox label');
+      const nonCheckbox = screen.getByTestId('non-checkbox');
+      const checkboxAttributes = getElementAttributes(checkbox);
+      const nonCheckboxAttributes = getElementAttributes(nonCheckbox);
+
+      expect(checkboxAttributes).toEqual({
+        class: `${prefix}--checkbox`,
+        id: 'checkbox-1',
+        'aria-readonly': 'true',
+        type: 'checkbox',
+      });
+      expect(nonCheckboxAttributes).toEqual({
+        'data-testid': 'non-checkbox',
+      });
+    });
+  });
 });

packages/react/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -6,14 +6,21 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { cloneElement, type ReactNode } from 'react';
+import React, {
+  Children,
+  cloneElement,
+  isValidElement,
+  type ComponentProps,
+  type ReactNode,
+} from 'react';
 import cx from 'classnames';
 import { deprecate } from '../../prop-types/deprecate';
 import { usePrefix } from '../../internal/usePrefix';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { useId } from '../../internal/useId';
 import { AILabel } from '../AILabel';
 import { isComponentElement } from '../../internal';
+import { Checkbox } from '../Checkbox';
 
 export interface CheckboxGroupProps {
   children?: ReactNode;
@@ -89,6 +96,37 @@ const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
     ? cloneElement(candidate, { size: 'mini', kind: 'default' })
     : null;
 
+  const clonedChildren = Children.map(children, (child) => {
+    if (
+      isValidElement<ComponentProps<typeof Checkbox>>(child) &&
+      child.type === Checkbox
+    ) {
+      const childProps: Pick<
+        ComponentProps<typeof Checkbox>,
+        'invalid' | 'readOnly' | 'warn'
+      > = {
+        ...(typeof invalid !== 'undefined' &&
+        typeof child.props.invalid === 'undefined'
+          ? { invalid }
+          : {}),
+        ...(typeof readOnly !== 'undefined' &&
+        typeof child.props.readOnly === 'undefined'
+          ? { readOnly }
+          : {}),
+        ...(typeof warn !== 'undefined' &&
+        typeof child.props.warn === 'undefined'
+          ? { warn }
+          : {}),
+      };
+
+      return Object.keys(childProps).length
+        ? cloneElement(child, childProps)
+        : child;
+    }
+
+    return child;
+  });
+
   return (
     <fieldset
       className={fieldsetClasses}
@@ -111,7 +149,7 @@ const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
           ''
         )}
       </legend>
-      {children}
+      {clonedChildren}
       <div className={`${prefix}--checkbox-group__validation-msg`}>
         {!readOnly && invalid && (
           <>