[EuiForm] Added invalidCallout prop to allow conditional rendering of error callout

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added conditional rendering of the title element in `EuiCallOut` to avoid usage of additional space caused by the rendered `<div>` element ([#3549](https://github.com/elastic/eui/pull/3549))
+- Added new prop to `EuiForm` to allow conditional rendering of error callout ([#3585](https://github.com/elastic/eui/pull/3585))
 
 **Bug fixes**
 

src-docs/src/views/form_validation/validation.js

@@ -34,7 +34,7 @@ export default () => {
 
   return (
     <Fragment>
-      <EuiForm isInvalid={showErrors} error={errors}>
+      <EuiForm isInvalid={showErrors} error={errors} invalidCallout="above">
         <EuiFormRow label="Validation only" isInvalid={showErrors}>
           <EuiFieldText name="first" isInvalid={showErrors} />
         </EuiFormRow>

src/components/form/__snapshots__/form.test.tsx.snap

@@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiForm checks if invalidCallout works 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiForm testClass1 testClass2"
+  data-test-subj="test subject string"
+/>
+`;
+
 exports[`EuiForm is rendered 1`] = `
 <div
   aria-label="aria-label"

src/components/form/form.test.tsx

@@ -33,6 +33,13 @@ describe('EuiForm', () => {
   test('renders a form element', () => {
     const component = render(<EuiForm {...requiredProps} component="form" />);
 
+    expect(component).toMatchSnapshot();
+  });
+  test('checks if invalidCallout works', () => {
+    const component = render(
+      <EuiForm {...requiredProps} invalidCallout="none" />
+    );
+
     expect(component).toMatchSnapshot();
   });
 });

src/components/form/form.tsx

@@ -39,6 +39,10 @@ export type EuiFormProps = CommonProps &
      */
     component?: 'form' | 'div';
     error?: ReactNode | ReactNode[];
+    /*
+     * Where or if to display the callout with the list of errors
+     */
+    invalidCallout?: 'above' | 'none';
   };
 
 export const EuiForm: FunctionComponent<EuiFormProps> = ({
@@ -47,6 +51,7 @@ export const EuiForm: FunctionComponent<EuiFormProps> = ({
   isInvalid,
   error,
   component = 'div',
+  invalidCallout = 'above',
   ...rest
 }) => {
   const classes = classNames('euiForm', className);
@@ -68,11 +73,11 @@ export const EuiForm: FunctionComponent<EuiFormProps> = ({
 
   let optionalErrorAlert;
 
-  if (isInvalid) {
+  if (isInvalid && invalidCallout === 'above') {
     optionalErrorAlert = (
       <EuiI18n
         token="euiForm.addressFormErrors"
-        default="Please address the errors in your form.">
+        default="Please address the highlighted errors.">
         {(addressFormErrors: string) => (
           <EuiCallOut
             className="euiForm__errors"