[EuiForm] Added invalidCallout prop to allow conditional rendering …

…of error callout (#3585)

Fixes #478

CHANGELOG.md

@@ -29,6 +29,7 @@
 ## [`25.0.0`](https://github.com/elastic/eui/tree/v25.0.0)
 
 - 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

@@ -26,7 +26,9 @@ export const FormValidationExample = {
           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.
+          passed as an array in case you need to list more than one. You can
+          also hide the callout by passing
+          <EuiCode>invalidCallout=&ldquo;none&ldquo;</EuiCode>
         </p>
       ),
       source: [

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

@@ -15,3 +15,11 @@ exports[`EuiForm renders a form element 1`] = `
   data-test-subj="test subject string"
 />
 `;
+
+exports[`EuiForm renders without error callout when invalidCallout is "none" 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiForm testClass1 testClass2"
+  data-test-subj="test subject string"
+/>
+`;

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"