diff --git a/CHANGELOG.md b/CHANGELOG.md index d887b45217e..4afd96facf4 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src/components/form/form_row/form_row.js b/src/components/form/form_row/form_row.js index d42d41d1392..79835cb54df 100644 --- a/src/components/form/form_row/form_row.js +++ b/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, /** diff --git a/src/components/form/form_row/form_row.test.js b/src/components/form/form_row/form_row.test.js index 130d18752bf..c32f7d24ac2 100644 --- a/src/components/form/form_row/form_row.test.js +++ b/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(() => ).toThrow(); + }); + + test('two children is an error', () => { + expect(() => ( + +
+
+ + )).toThrow(); + }); + test('ties together parts for accessibility', () => { const props = { label: 'Label', diff --git a/src/components/form/form_row/index.d.ts b/src/components/form/form_row/index.d.ts index 89ed398e5ff..93aadba7221 100644 --- a/src/components/form/form_row/index.d.ts +++ b/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; - export type EuiFormRowProps = ExclusiveUnion; + export type EuiFormRowProps = ExclusiveUnion & { + children: ReactElement; + }; export const EuiFormRow: FunctionComponent; }