Added component prop to EuiForm (#3010)

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 `<form>`([#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))

src-docs/src/views/form_layouts/form_layouts_example.js

@@ -55,7 +55,9 @@ export const FormLayoutsExample = {
           Use the <EuiCode>EuiFormRow</EuiCode> component to easily associate
           form components with labels, help text, and error text. Use the{' '}
           <EuiCode>EuiForm</EuiCode> component to group{' '}
-          <EuiCode>EuiFormRow</EuiCode>s.
+          <EuiCode>EuiFormRow</EuiCode>s. By default EuiForm will render as a
+          simple div unless you pass{' '}
+          <EuiCode>component=&quot;form&quot;</EuiCode>.
         </p>
       ),
       props: {

src-docs/src/views/form_layouts/form_rows.js

@@ -87,7 +87,7 @@ export default class extends Component {
 
   render() {
     return (
-      <EuiForm>
+      <EuiForm component="form">
         <EuiFormRow label="Text field" helpText="I am some friendly help text.">
           <EuiFieldText name="first" />
         </EuiFormRow>

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`] = `
+<form
+  aria-label="aria-label"
+  class="euiForm testClass1 testClass2"
+  data-test-subj="test subject string"
+/>
+`;

src/components/form/form.test.tsx

@@ -10,4 +10,10 @@ describe('EuiForm', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  test('renders a form element', () => {
+    const component = render(<EuiForm {...requiredProps} component="form" />);
+
+    expect(component).toMatchSnapshot();
+  });
 });

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<HTMLDivElement> & {
+  ExclusiveUnion<
+    { component: 'form' } & FormHTMLAttributes<HTMLFormElement>,
+    { component?: 'div' } & HTMLAttributes<HTMLDivElement>
+  > & {
     isInvalid?: boolean;
+    /**
+     * Which HTML element to render `div` or `form`
+     */
+    component?: 'form' | 'div';
     error?: ReactNode | ReactNode[];
   };
 
@@ -15,6 +27,7 @@ export const EuiForm: FunctionComponent<EuiFormProps> = ({
   className,
   isInvalid,
   error,
+  component = 'div',
   ...rest
 }) => {
   const classes = classNames('euiForm', className);
@@ -53,10 +66,12 @@ export const EuiForm: FunctionComponent<EuiFormProps> = ({
     );
   }
 
+  const Element = component;
+
   return (
-    <div className={classes} {...rest}>
+    <Element className={classes} {...rest as HTMLAttributes<HTMLElement>}>
       {optionalErrorAlert}
       {children}
-    </div>
+    </Element>
   );
 };