From a81f95d8aae186ec5de48e57ea7912b28c956b67 Mon Sep 17 00:00:00 2001
From: Jesse Carmine <carminej@gmail.com>
Date: Tue, 20 Oct 2020 14:15:07 -0700
Subject: [PATCH] fix(FormLabel): remove span from Label for required input.
 (#286)

Co-authored-by: Nathan Young <1447339+nathanyoung@users.noreply.github.com>
---
 src/components/FormLabel/FormLabel.test.jsx                   | 4 ++--
 src/components/FormLabel/FormLabel.tsx                        | 2 +-
 .../Formik/FormikSelectInput/FormikSelectInput.test.jsx       | 3 +--
 .../Formik/FormikTextInput/FormikTextInput.test.jsx           | 4 ++--
 .../Formik/FormikTextareaInput/FormikTextareaInput.test.tsx   | 4 ++--
 src/components/SelectInput/SelectInput.test.jsx               | 3 +--
 src/components/TextInput/TextInput.test.tsx                   | 4 ++--
 src/components/TextareaInput/TextareaInput.test.tsx           | 4 ++--
 8 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/components/FormLabel/FormLabel.test.jsx b/src/components/FormLabel/FormLabel.test.jsx
index 090ba4fc1..29cbf9ad1 100644
--- a/src/components/FormLabel/FormLabel.test.jsx
+++ b/src/components/FormLabel/FormLabel.test.jsx
@@ -20,8 +20,8 @@ describe('FormLabel', () => {
 
   test('Label correctly renders with askterisk if field is required', () => {
     render(<FormLabel inputId="myId" isFieldRequired>my label</FormLabel>);
-    const labelElement = screen.getByText('my label');
-    expect(labelElement).toHaveTextContent('*');
+    const labelElement = screen.getByText('my label *');
+    expect(labelElement).toBeInTheDocument();
   });
 
   test('Label correctly renders with error class if field has eror', () => {
diff --git a/src/components/FormLabel/FormLabel.tsx b/src/components/FormLabel/FormLabel.tsx
index 882dce4ff..1bb185322 100644
--- a/src/components/FormLabel/FormLabel.tsx
+++ b/src/components/FormLabel/FormLabel.tsx
@@ -64,7 +64,7 @@ const FormLabel: FC<FormLabelProps> = ({
   return (
     <label id={`${inputId}Label`} className={labelClasses} htmlFor={inputId}>
       {children}
-      {isFieldRequired && <span>&nbsp;*</span>}
+      {isFieldRequired && <>&nbsp;*</>}
       {helpText && (
         <Box as="p" display="block" fontSize="sm" color="grey" className={styles['help-text']}>
           {helpText}
diff --git a/src/components/Formik/FormikSelectInput/FormikSelectInput.test.jsx b/src/components/Formik/FormikSelectInput/FormikSelectInput.test.jsx
index 4c490dc54..162a341c5 100644
--- a/src/components/Formik/FormikSelectInput/FormikSelectInput.test.jsx
+++ b/src/components/Formik/FormikSelectInput/FormikSelectInput.test.jsx
@@ -116,8 +116,7 @@ describe('SelectInput', () => {
       test('it renders an asterisk in the label', () => {
         render(renderForm([], { isRequired: true }));
 
-        expect(screen.getByText(testLabelName)).toBeInTheDocument();
-        expect(screen.getByText('*')).toBeInTheDocument();
+        expect(screen.getByText(`${testLabelName} *`)).toBeInTheDocument();
       });
     });
 
diff --git a/src/components/Formik/FormikTextInput/FormikTextInput.test.jsx b/src/components/Formik/FormikTextInput/FormikTextInput.test.jsx
index 93a5c4e6c..ba16a8af7 100644
--- a/src/components/Formik/FormikTextInput/FormikTextInput.test.jsx
+++ b/src/components/Formik/FormikTextInput/FormikTextInput.test.jsx
@@ -136,9 +136,9 @@ describe('FormikTextInput', () => {
       test('Input correctly passes props to dependency label component', async () => {
         const { getByText } = render(renderForm('', { isRequired: true }));
         const submitButton = getByText('submit');
-        const labelElement = getByText(testLabelName);
+        const labelElement = getByText(`${testLabelName} *`);
         expect(labelElement).toHaveAttribute('for', testLabelName);
-        expect(labelElement).toHaveTextContent('*');
+        expect(labelElement).toBeInTheDocument();
 
         fireEvent.click(submitButton);
         await waitFor(() => {
diff --git a/src/components/Formik/FormikTextareaInput/FormikTextareaInput.test.tsx b/src/components/Formik/FormikTextareaInput/FormikTextareaInput.test.tsx
index 2031ab3df..f6b4484ab 100644
--- a/src/components/Formik/FormikTextareaInput/FormikTextareaInput.test.tsx
+++ b/src/components/Formik/FormikTextareaInput/FormikTextareaInput.test.tsx
@@ -151,9 +151,9 @@ describe('FormikTextareaInput', () => {
       test('Input correctly passes props to dependency label component', async () => {
         const { getByText } = render(renderForm('', { isRequired: true }));
         const submitButton = getByText('submit');
-        const labelElement = getByText(testLabelName);
+        const labelElement = getByText(`${testLabelName} *`);
         expect(labelElement).toHaveAttribute('for', testLabelName);
-        expect(labelElement).toHaveTextContent('*');
+        expect(labelElement).toBeInTheDocument();
 
         fireEvent.click(submitButton);
         await waitFor(() => {
diff --git a/src/components/SelectInput/SelectInput.test.jsx b/src/components/SelectInput/SelectInput.test.jsx
index 932d5b1be..b6d632eb6 100644
--- a/src/components/SelectInput/SelectInput.test.jsx
+++ b/src/components/SelectInput/SelectInput.test.jsx
@@ -206,8 +206,7 @@ describe('SelectInput', () => {
           />,
         );
 
-        expect(screen.getByText('Select Label')).toBeInTheDocument();
-        expect(screen.getByText('*')).toBeInTheDocument();
+        expect(screen.getByText('Select Label *')).toBeInTheDocument();
       });
     });
 
diff --git a/src/components/TextInput/TextInput.test.tsx b/src/components/TextInput/TextInput.test.tsx
index 0b93e6c6f..efe891be8 100644
--- a/src/components/TextInput/TextInput.test.tsx
+++ b/src/components/TextInput/TextInput.test.tsx
@@ -144,9 +144,9 @@ describe('TextInput', () => {
       test('it\'s label renders an asterisk indicating that it\'s required', () => {
         render(<TextInput {...baseProps} isRequired />);
 
-        const labelElement = screen.getByText(baseProps.label);
+        const labelElement = screen.getByText(`${baseProps.label} *`);
 
-        expect(labelElement).toHaveTextContent('*');
+        expect(labelElement).toBeInTheDocument();
       });
     });
 
diff --git a/src/components/TextareaInput/TextareaInput.test.tsx b/src/components/TextareaInput/TextareaInput.test.tsx
index 085328b65..c1adddff5 100644
--- a/src/components/TextareaInput/TextareaInput.test.tsx
+++ b/src/components/TextareaInput/TextareaInput.test.tsx
@@ -116,9 +116,9 @@ describe('TextareaInput', () => {
       test("it's label renders an asterisk indicating that it's required", () => {
         render(<TextareaInput {...baseProps} isRequired />);
 
-        const labelElement = screen.getByText(baseProps.label);
+        const labelElement = screen.getByText(`${baseProps.label} *`);
 
-        expect(labelElement).toHaveTextContent('*');
+        expect(labelElement).toBeInTheDocument();
       });
     });