fix(TextareaField): address QA updates (#1936)

- add bottom line for readonly field
- move character counter to the top line of the component

Author: booc0mtaco

src/components/TextareaField/TextareaField-v2.module.css

@@ -13,6 +13,11 @@
 .textarea {
   @mixin inputStylesV2;
   padding: 0.5rem 0.75rem;
+
+  &:read-only:not(:disabled) {
+    border: 0;
+    border-bottom: 1px solid var(--eds-theme-color-border-utility-default-low-emphasis);
+  }
 }
 
 /**

src/components/TextareaField/TextareaField-v2.tsx

@@ -217,6 +217,10 @@ export const TextareaField: TextareaFieldType = forwardRef(
         styles['textarea-field--invalid-length'],
     );
 
+    const textareaClassName = clsx(
+      readOnly && styles['textarea-field__textarea--read-only'],
+    );
+
     // Pick the smallest of the lengths to set as the maximum value allowed
     const maxLengthShown = getMinValue(maxLength, recommendedMaxLength);
 
@@ -247,11 +251,18 @@ export const TextareaField: TextareaFieldType = forwardRef(
                 (Optional)
               </Text>
             )}
+            {maxLengthShown && (
+              <div className={styles['textarea-field__character-counter']}>
+                <span className={fieldLengthCountClassName}>{fieldLength}</span>{' '}
+                / {maxLengthShown}
+              </div>
+            )}
           </div>
         )}
         <TextArea
           aria-describedby={ariaDescribedByVar}
           aria-disabled={disabled}
+          className={textareaClassName}
           defaultValue={defaultValue}
           disabled={disabled}
           id={idVar}
@@ -282,12 +293,6 @@ export const TextareaField: TextareaFieldType = forwardRef(
                 {fieldNote}
               </FieldNote>
             )}
-            {maxLengthShown && (
-              <div className={styles['textarea-field__character-counter']}>
-                <span className={fieldLengthCountClassName}>{fieldLength}</span>{' '}
-                / {maxLengthShown}
-              </div>
-            )}
           </div>
         )}
       </div>

src/components/TextareaField/__snapshots__/TextareaField-v2.test.tsx.snap

@@ -244,7 +244,7 @@ exports[`<TextareaField /> WhenReadOnly story renders snapshot 1`] = `
     </div>
     <textarea
       aria-describedby=":r9:"
-      class="textarea"
+      class="textarea textarea-field__textarea--read-only"
       id=":r8:"
       placeholder="Enter long-form text here"
       readonly=""
@@ -480,6 +480,18 @@ exports[`<TextareaField /> WithAMaxLength story renders snapshot 1`] = `
       >
         Textarea Field
       </label>
+      <div
+        class="textarea-field__character-counter"
+      >
+        <span
+          class="textarea-field--invalid-length"
+        >
+          202
+        </span>
+         
+        / 
+        144
+      </div>
     </div>
     <textarea
       aria-describedby=":rl:"
@@ -521,18 +533,6 @@ praesentium, commodi eligendi asperiores quis dolorum porro.
         </svg>
         Longer Field description
       </div>
-      <div
-        class="textarea-field__character-counter"
-      >
-        <span
-          class="textarea-field--invalid-length"
-        >
-          202
-        </span>
-         
-        / 
-        144
-      </div>
     </div>
   </div>
 </div>
@@ -554,6 +554,18 @@ exports[`<TextareaField /> WithARecommendedLength story renders snapshot 1`] = `
       >
         Textarea Field
       </label>
+      <div
+        class="textarea-field__character-counter"
+      >
+        <span
+          class="textarea-field--invalid-length"
+        >
+          202
+        </span>
+         
+        / 
+        144
+      </div>
     </div>
     <textarea
       aria-describedby=":rn:"
@@ -594,18 +606,6 @@ praesentium, commodi eligendi asperiores quis dolorum porro.
         </svg>
         Longer Field description
       </div>
-      <div
-        class="textarea-field__character-counter"
-      >
-        <span
-          class="textarea-field--invalid-length"
-        >
-          202
-        </span>
-         
-        / 
-        144
-      </div>
     </div>
   </div>
 </div>
@@ -627,6 +627,18 @@ exports[`<TextareaField /> WithBothRecommendedAndMaxLengths story renders snapsh
       >
         Textarea Field
       </label>
+      <div
+        class="textarea-field__character-counter"
+      >
+        <span
+          class="textarea-field--invalid-length"
+        >
+          202
+        </span>
+         
+        / 
+        144
+      </div>
     </div>
     <textarea
       aria-describedby=":rp:"
@@ -668,18 +680,6 @@ praesentium, commodi eligendi asperiores quis dolorum porro.
         </svg>
         Longer Field description
       </div>
-      <div
-        class="textarea-field__character-counter"
-      >
-        <span
-          class="textarea-field--invalid-length"
-        >
-          202
-        </span>
-         
-        / 
-        144
-      </div>
     </div>
   </div>
 </div>