fix(ui-form-field): disable child inputs when FormFieldGroup is disabled

INSTUI-4841

Author: ToMESSKa

docs/guides/upgrade-guide.md

@@ -585,6 +585,8 @@ type: embed
 
 `error` or `success` messages are no longer displayed when the component is `readOnly` or `disabled`.
 
+Setting `disabled` on `FormFieldGroup` now also disables its children. Previously, the `disabled` prop only applied disabled styles to the group container while leaving child inputs interactive.
+
 ```js
 ---
 type: embed

packages/ui-form-field/src/FormFieldGroup/__tests__/FormFieldGroup.test.tsx

@@ -157,6 +157,52 @@ describe('<FormFieldGroup />', () => {
     expect(legend).toHaveTextContent(description)
   })
 
+  it('disables children when disabled', () => {
+    const TestComponent = ({ disabled }: { disabled?: boolean }) => (
+      <input data-testid="test-input" disabled={disabled} />
+    )
+
+    render(
+      <FormFieldGroup description="Test group" disabled>
+        <TestComponent />
+      </FormFieldGroup>
+    )
+
+    expect(screen.getByTestId('test-input')).toBeDisabled()
+  })
+
+  it('disables all children when disabled', () => {
+    const TestComponent = ({ disabled }: { disabled?: boolean }) => (
+      <input data-testid="test-input" disabled={disabled} />
+    )
+
+    render(
+      <FormFieldGroup description="Test group" disabled>
+        <TestComponent data-testid="first" />
+        <TestComponent data-testid="second" />
+        <TestComponent data-testid="third" />
+      </FormFieldGroup>
+    )
+
+    screen.getAllByTestId('test-input').forEach((input) => {
+      expect(input).toBeDisabled()
+    })
+  })
+
+  it('does not disable children when not disabled', () => {
+    const TestComponent = ({ disabled }: { disabled?: boolean }) => (
+      <input data-testid="test-input" disabled={disabled} />
+    )
+
+    render(
+      <FormFieldGroup description="Test group">
+        <TestComponent />
+      </FormFieldGroup>
+    )
+
+    expect(screen.getByTestId('test-input')).not.toBeDisabled()
+  })
+
   it('should meet a11y standards', async () => {
     const { container } = render(
       <FormFieldGroup description="Please enter your full name">

packages/ui-form-field/src/FormFieldGroup/v2/index.tsx

@@ -22,10 +22,20 @@
  * SOFTWARE.
  */
 
-import { Component, Children, ReactElement, AriaAttributes } from 'react'
+import {
+  Component,
+  Children,
+  ReactElement,
+  AriaAttributes,
+  isValidElement
+} from 'react'
 
 import { Grid } from '@instructure/ui-grid/latest'
-import { pickProps, omitProps } from '@instructure/ui-react-utils'
+import {
+  pickProps,
+  omitProps,
+  safeCloneElement
+} from '@instructure/ui-react-utils'
 import { withStyleNew } from '@instructure/emotion'
 
 import { allowedProps as formFieldLayoutAllowedProps } from '../../FormFieldLayout/v2/props'
@@ -86,20 +96,22 @@ class FormFieldGroup extends Component<FormFieldGroupProps> {
   }
 
   renderColumns() {
+    const { disabled } = this.props
     return Children.map(this.props.children, (child, index) => {
-      return child ? (
+      if (!child) return null
+      const el = child as ReactElement<any>
+      const renderedChild =
+        disabled && isValidElement(el)
+          ? safeCloneElement(el, { disabled: true })
+          : child
+      return (
         <Grid.Col
-          width={
-            (child as ReactElement).props &&
-            (child as ReactElement<any>).props.width
-              ? 'auto'
-              : undefined
-          }
+          width={el.props && el.props.width ? 'auto' : undefined}
           key={index}
         >
-          {child}
+          {renderedChild}
         </Grid.Col>
-      ) : null
+      )
     })
   }
 

packages/ui-form-field/src/FormFieldGroup/v2/props.ts

@@ -48,7 +48,8 @@ type FormFieldGroupOwnProps = {
    */
   messagesId?: string
   /**
-   * Whether the field group is disabled. When true, error and success messages will be hidden.
+   * Whether the field group is disabled. When true, the disabled prop is propagated to all
+   * child components, error and success messages will be hidden.
    */
   disabled?: boolean
   /**