#410 - FormField - Hide description if error message is given (#565)

* hide description if error message is given * test fix
livechat · May 23, 2023 · bfc4167 · bfc4167
1 parent af3e0e3
commit bfc4167
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/packages/react-components/src/components/FormField/FormField.spec.tsx b/packages/react-components/src/components/FormField/FormField.spec.tsx
@@ -2,6 +2,12 @@ import * as React from 'react';
 import { render } from 'test-utils';
 import { FormFieldProps, FormField } from './FormField';
 
+const label = 'Example label text';
+const error = 'Error text';
+const description = <div>Description text</div>;
+const adornment = <div>Decoration element</div>;
+const labelRight = <div>Label right</div>;
+
 const renderComponent = (props: FormFieldProps) => {
   return render(
     <FormField {...props} className="my-css-class">
@@ -18,12 +24,21 @@ describe('<FormField> component', () => {
   });
 
   it('should render field elements', () => {
-    const label = 'Example label text';
-    const error = 'Error text';
-    const description = <div>Description text</div>;
-    const adornment = <div>Decoration element</div>;
-    const labelRight = <div>Label right</div>;
     const { getByText } = renderComponent({
+      labelText: label,
+      description: description,
+      labelAdornment: adornment,
+      labelRightNode: labelRight,
+    });
+
+    expect(getByText(label)).toBeVisible();
+    expect(getByText('Description text')).toBeVisible();
+    expect(getByText('Decoration element')).toBeVisible();
+    expect(getByText('Label right')).toBeVisible();
+  });
+
+  it('should not render description if error is given', () => {
+    const { getByText, queryByText } = renderComponent({
       labelText: label,
       error: error,
       description: description,
@@ -33,7 +48,7 @@ describe('<FormField> component', () => {
 
     expect(getByText(label)).toBeVisible();
     expect(getByText(error)).toBeVisible();
-    expect(getByText('Description text')).toBeVisible();
+    expect(queryByText('Description text')).toBeFalsy();
     expect(getByText('Decoration element')).toBeVisible();
     expect(getByText('Label right')).toBeVisible();
   });

diff --git a/packages/react-components/src/components/FormField/FormField.tsx b/packages/react-components/src/components/FormField/FormField.tsx
@@ -95,7 +95,9 @@ export const FormField: React.FC<FormFieldProps> = ({
         <div className={cx(styles[`${baseClass}__content`])}>
           {children}
           {error && <FieldError>{error}</FieldError>}
-          {description && <FieldDescription>{description}</FieldDescription>}
+          {!error && description && (
+            <FieldDescription>{description}</FieldDescription>
+          )}
         </div>
       </div>
     </div>