Require that FormRow has exactly one child element

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `12.1.0`.
+**Bug fixes**
+- Added requirement that `EuiFormRow` has exactly one child element [#2054](https://github.com/elastic/eui/pull/2054)
 
 ## [`12.1.0`](https://github.com/elastic/eui/tree/v12.1.0)
 

src/components/form/form_row/form_row.js

@@ -1,4 +1,4 @@
-import React, { cloneElement, Component } from 'react';
+import React, { cloneElement, Component, Children } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -155,7 +155,7 @@ export class EuiFormRow extends Component {
       optionalProps['aria-describedby'] = describingIds.join(' ');
     }
 
-    let field = cloneElement(children, {
+    let field = cloneElement(Children.only(children), {
       id,
       onFocus: this.onFocus,
       onBlur: this.onBlur,
@@ -186,7 +186,7 @@ export class EuiFormRow extends Component {
 }
 
 EuiFormRow.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.element.isRequired,
   className: PropTypes.string,
   label: PropTypes.node,
   /**

src/components/form/form_row/form_row.test.js

@@ -18,6 +18,19 @@ describe('EuiFormRow', () => {
     expect(component).toMatchSnapshot();
   });
 
+  test('no children is an error', () => {
+    expect(() => <EuiFormRow {...requiredProps} />).toThrow();
+  });
+
+  test('two children is an error', () => {
+    expect(() => (
+      <EuiFormRow {...requiredProps}>
+        <div />
+        <div />
+      </EuiFormRow>
+    )).toThrow();
+  });
+
   test('ties together parts for accessibility', () => {
     const props = {
       label: 'Label',

src/components/form/form_row/index.d.ts

@@ -1,6 +1,11 @@
 import { CommonProps, ExclusiveUnion } from '../../common';
 
-import { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
+import {
+  FunctionComponent,
+  ReactNode,
+  ReactElement,
+  HTMLAttributes,
+} from 'react';
 
 declare module '@elastic/eui' {
   /**
@@ -29,7 +34,9 @@ declare module '@elastic/eui' {
   } & EuiFormRowCommonProps &
     HTMLAttributes<HTMLFieldSetElement>;
 
-  export type EuiFormRowProps = ExclusiveUnion<LabelProps, LegendProps>;
+  export type EuiFormRowProps = ExclusiveUnion<LabelProps, LegendProps> & {
+    children: ReactElement;
+  };
 
   export const EuiFormRow: FunctionComponent<EuiFormRowProps>;
 }