Added component prop to EuiForm

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `21.0.0`.
+- Added a renderForm prop to `EuiForm` to render a `<form>`([#3010](https://github.com/elastic/eui/pull/3010))
 
 ## [`21.0.0`](https://github.com/elastic/eui/tree/v21.0.0)
 

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 <form > 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 <form >', () => {
+    const component = render(<EuiForm {...requiredProps} component="form" />);
+
+    expect(component).toMatchSnapshot();
+  });
 });

src/components/form/form.tsx

@@ -1,12 +1,22 @@
-import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
+import React, {
+  FunctionComponent,
+  ReactNode,
+  HTMLAttributes,
+  FormEvent,
+} from 'react';
 import classNames from 'classnames';
 import { EuiCallOut } from '../call_out';
 import { EuiI18n } from '../i18n';
 import { CommonProps } from '../common';
 
 export type EuiFormProps = CommonProps &
+  HTMLAttributes<HTMLFormElement> &
   HTMLAttributes<HTMLDivElement> & {
     isInvalid?: boolean;
+    /**
+     * Renders From element
+     */
+    component?: 'form' | 'div';
     error?: ReactNode | ReactNode[];
   };
 
@@ -15,6 +25,8 @@ export const EuiForm: FunctionComponent<EuiFormProps> = ({
   className,
   isInvalid,
   error,
+  component = 'div',
+  onSubmit,
   ...rest
 }) => {
   const classes = classNames('euiForm', className);
@@ -53,10 +65,22 @@ export const EuiForm: FunctionComponent<EuiFormProps> = ({
     );
   }
 
+  const relObj: {
+    onSubmit?:
+      | (((event: FormEvent<HTMLFormElement>) => void) &
+          ((event: FormEvent<HTMLDivElement>) => void))
+      | undefined;
+  } = {};
+
+  if (component === 'form') {
+    relObj.onSubmit = onSubmit;
+  }
+  const Element = component;
+
   return (
-    <div className={classes} {...rest}>
+    <Element className={classes} {...relObj} {...rest}>
       {optionalErrorAlert}
       {children}
-    </div>
+    </Element>
   );
 };