add text area option to FormField component

awx/ui_next/src/components/FormField/FormField.jsx

@@ -1,6 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useField } from 'formik';
+import {
+  FormGroup,
+  TextInput,
+  TextArea,
+  Tooltip,
+} from '@patternfly/react-core';
 import { QuestionCircleIcon as PFQuestionCircleIcon } from '@patternfly/react-icons';
 import styled from 'styled-components';
 
@@ -17,6 +23,7 @@ function FormField(props) {
     tooltipMaxWidth,
     validate,
     isRequired,
+    type,
     ...rest
   } = props;
 
@@ -24,6 +31,8 @@ function FormField(props) {
   const isValid = !(meta.touched && meta.error);
 
   return (
+    <>
+      {(type === 'textarea' && (
         <FormGroup
           fieldId={id}
           helperTextInvalid={meta.error}
@@ -40,8 +49,35 @@ function FormField(props) {
               <QuestionCircleIcon />
             </Tooltip>
           )}
+          <TextArea
+            id={id}
+            isRequired={isRequired}
             isValid={isValid}
+            resizeOrientation="vertical"
+            {...rest}
+            {...field}
+            onChange={(value, event) => {
+              field.onChange(event);
+            }}
+          />
+        </FormGroup>
+      )) || (
+        <FormGroup
+          fieldId={id}
           helperTextInvalid={meta.error}
+          isRequired={isRequired}
+          isValid={isValid}
+          label={label}
+        >
+          {tooltip && (
+            <Tooltip
+              content={tooltip}
+              maxWidth={tooltipMaxWidth}
+              position="right"
+            >
+              <QuestionCircleIcon />
+            </Tooltip>
+          )}
           <TextInput
             id={id}
             isRequired={isRequired}
@@ -53,16 +89,15 @@ function FormField(props) {
             }}
           />
         </FormGroup>
-        );
-      }}
-    </Field>
+      )}
+    </>
   );
 }
 
 FormField.propTypes = {
   id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
+  label: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
   type: PropTypes.string,
   validate: PropTypes.func,
   isRequired: PropTypes.bool,