[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 `invalidCallout` 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/form_validation_example.js

@@ -24,9 +24,11 @@ export const FormValidationExample = {
       text: (
         <p>
           Validation is achieved by applying <EuiCode>isInvalid</EuiCode> and
-          optionally error props onto the <strong>EuiForm</strong> or{' '}
-          <strong>EuiFormRow</strong> components. Errors are optional and are
-          passed as an array in case you need to list many errors.
+          the optional <EuiCode>error<EuiCode> props onto the{' '}
+          <strong>EuiForm</strong> and <strong>EuiFormRow</strong> components. 
+          Errors are optional and are passed as an array in case you need to 
+          list more than one. You can also hide the callout by passing{' '}
+          <EuiCode language="ts">{'invalidCallout="none"'}</EuiCode>
         </p>
       ),
       source: [

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('renders without error callout when invalidCallout is "none"', () => {
+    const component = render(
+      <EuiForm {...requiredProps} isInvalid 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 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"