fix(field): making description show up (#3675)

.changeset/slow-rice-cover.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+fix(field): making description show up

packages/react/src/primitives/Field/Field.tsx

@@ -50,11 +50,12 @@ const FieldPrimitive: Primitive<FieldPrimitiveProps, typeof Flex> = (
       {...rest}
     >
       {label ? <Label visuallyHidden={labelHidden}>{label}</Label> : null}
-      {descriptiveText ? (
-        <FieldDescription labelHidden={labelHidden}>
-          {descriptiveText}
-        </FieldDescription>
-      ) : null}
+
+      <FieldDescription
+        labelHidden={labelHidden}
+        descriptiveText={descriptiveText}
+      />
+
       {children}
       {errorMessage ? (
         <FieldErrorMessage hasError={hasError} errorMessage={errorMessage} />

packages/react/src/primitives/Field/__tests__/Field.test.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import { Field } from '../Field';
+import { ComponentClassNames } from '../../shared/constants';
+
+describe('Field component', () => {
+  it('should match snapshot', () => {
+    const { container } = render(
+      <Field
+        label="label"
+        descriptiveText="some description"
+        errorMessage="error"
+        hasError
+      >
+        <div>hi</div>
+      </Field>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render a label', () => {
+    const { getByText } = render(<Field label="label" />);
+    const descriptionElement = getByText('label');
+    expect(descriptionElement).toHaveClass(ComponentClassNames.Label);
+  });
+
+  it('should render descriptive text', () => {
+    const { getByText } = render(
+      <Field label="label" descriptiveText="description" />
+    );
+    const descriptionElement = getByText('description');
+    expect(descriptionElement).toHaveClass(
+      ComponentClassNames.FieldDescription
+    );
+  });
+
+  it('should render error message', () => {
+    const { getByText } = render(
+      <Field label="label" errorMessage="error" hasError />
+    );
+    const descriptionElement = getByText('error');
+    expect(descriptionElement).toHaveClass(
+      ComponentClassNames.FieldErrorMessage
+    );
+  });
+
+  it('should render if it has a "labelHidden" prop is `true`, as long as there\'s descriptiveText', () => {
+    const { getByText } = render(
+      <Field label="label" descriptiveText="some description" labelHidden />
+    );
+    const descriptionElement = getByText('some description');
+    expect(descriptionElement).toHaveClass(ComponentClassNames.VisuallyHidden);
+  });
+
+  it('should not be hidden if it has a "labelHidden" prop is `false`', () => {
+    const { getByText } = render(
+      <Field
+        label="label"
+        descriptiveText="some description"
+        labelHidden={false}
+      />
+    );
+    const descriptionElement = getByText('some description');
+    expect(descriptionElement).not.toHaveClass(
+      ComponentClassNames.VisuallyHidden
+    );
+  });
+});

packages/react/src/primitives/Field/__tests__/__snapshots__/Field.test.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Field component should match snapshot 1`] = `
+<div>
+  <div
+    class="amplify-flex amplify-field"
+  >
+    <label
+      class="amplify-label"
+    >
+      label
+    </label>
+    <p
+      class="amplify-text amplify-field__description"
+      data-testid="qa-field-description"
+    >
+      some description
+    </p>
+    <div>
+      hi
+    </div>
+    <p
+      class="amplify-text amplify-field__error-message"
+    >
+      error
+    </p>
+  </div>
+</div>
+`;