diff --git a/CHANGELOG.md b/CHANGELOG.md index c55b85bcab9..27ed058ab33 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Exported `dateFormatAliases` as a part of the public API ([#3043](https://github.com/elastic/eui/pull/3043)) - Exported `EuiTextProps` type definition ([#3039](https://github.com/elastic/eui/pull/3039)) +- Added a `component` prop to `EuiForm` to render a `
`([#3010](https://github.com/elastic/eui/pull/3010)) - Removed `role` attribute from `EuiImage`([#3036](https://github.com/elastic/eui/pull/3036)) - Added `prepend` and `append` ability to `EuiComboBox` single selection only ([#3003](https://github.com/elastic/eui/pull/3003)) - Added `onColumnResize` prop to `EuiDataGrid` of type `EuiDataGridOnColumnResizeHandler` that gets called when column changes it's size ([#2963](https://github.com/elastic/eui/pull/2963)) diff --git a/src-docs/src/views/form_layouts/form_layouts_example.js b/src-docs/src/views/form_layouts/form_layouts_example.js index 5dce9eb01ca..77fa810ce83 100644 --- a/src-docs/src/views/form_layouts/form_layouts_example.js +++ b/src-docs/src/views/form_layouts/form_layouts_example.js @@ -55,7 +55,9 @@ export const FormLayoutsExample = { Use the EuiFormRow component to easily associate form components with labels, help text, and error text. Use the{' '} EuiForm component to group{' '} - EuiFormRows. + EuiFormRows. By default EuiForm will render as a + simple div unless you pass{' '} + component="form".

), props: { diff --git a/src-docs/src/views/form_layouts/form_rows.js b/src-docs/src/views/form_layouts/form_rows.js index 5cb3a437aae..c47cf321f6c 100644 --- a/src-docs/src/views/form_layouts/form_rows.js +++ b/src-docs/src/views/form_layouts/form_rows.js @@ -87,7 +87,7 @@ export default class extends Component { render() { return ( - + diff --git a/src/components/form/__snapshots__/form.test.tsx.snap b/src/components/form/__snapshots__/form.test.tsx.snap index 0bd32da79a3..cf47bd6563a 100644 --- a/src/components/form/__snapshots__/form.test.tsx.snap +++ b/src/components/form/__snapshots__/form.test.tsx.snap @@ -7,3 +7,11 @@ exports[`EuiForm is rendered 1`] = ` data-test-subj="test subject string" /> `; + +exports[`EuiForm renders a form element 1`] = ` + +`; diff --git a/src/components/form/form.test.tsx b/src/components/form/form.test.tsx index e6e47ccdf1b..a2cd56da801 100644 --- a/src/components/form/form.test.tsx +++ b/src/components/form/form.test.tsx @@ -10,4 +10,10 @@ describe('EuiForm', () => { expect(component).toMatchSnapshot(); }); + + test('renders a form element', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); }); diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx index 2dcfa5cdda7..5b1e598d243 100644 --- a/src/components/form/form.tsx +++ b/src/components/form/form.tsx @@ -1,12 +1,24 @@ -import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react'; +import React, { + FunctionComponent, + ReactNode, + HTMLAttributes, + FormHTMLAttributes, +} from 'react'; import classNames from 'classnames'; import { EuiCallOut } from '../call_out'; import { EuiI18n } from '../i18n'; -import { CommonProps } from '../common'; +import { CommonProps, ExclusiveUnion } from '../common'; export type EuiFormProps = CommonProps & - HTMLAttributes & { + ExclusiveUnion< + { component: 'form' } & FormHTMLAttributes, + { component?: 'div' } & HTMLAttributes + > & { isInvalid?: boolean; + /** + * Which HTML element to render `div` or `form` + */ + component?: 'form' | 'div'; error?: ReactNode | ReactNode[]; }; @@ -15,6 +27,7 @@ export const EuiForm: FunctionComponent = ({ className, isInvalid, error, + component = 'div', ...rest }) => { const classes = classNames('euiForm', className); @@ -53,10 +66,12 @@ export const EuiForm: FunctionComponent = ({ ); } + const Element = component; + return ( -
+ }> {optionalErrorAlert} {children} -
+ ); };