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,52 +23,81 @@ function FormField(props) {
     tooltipMaxWidth,
     validate,
     isRequired,
+    type,
     ...rest
   } = props;
 
   const [field, meta] = useField({ name, validate });
   const isValid = !(meta.touched && meta.error);
 
-        return (
+  return (
-          <FormGroup
+    <>
-            fieldId={id}
+      {(type === 'textarea' && (
+        <FormGroup
+          fieldId={id}
           helperTextInvalid={meta.error}
+          isRequired={isRequired}
+          isValid={isValid}
+          label={label}
+        >
+          {tooltip && (
+            <Tooltip
+              content={tooltip}
+              maxWidth={tooltipMaxWidth}
+              position="right"
+            >
+              <QuestionCircleIcon />
+            </Tooltip>
+          )}
+          <TextArea
+            id={id}
             isRequired={isRequired}
             isValid={isValid}
-            label={label}
+            resizeOrientation="vertical"
-          >
+            {...rest}
-            {tooltip && (
+            {...field}
-              <Tooltip
+            onChange={(value, event) => {
-                content={tooltip}
+              field.onChange(event);
-                maxWidth={tooltipMaxWidth}
+            }}
-                position="right"
+          />
-              >
+        </FormGroup>
-                <QuestionCircleIcon />
+      )) || (
-              </Tooltip>
+        <FormGroup
-            )}
+          fieldId={id}
-            isValid={isValid}
           helperTextInvalid={meta.error}
-            <TextInput
+          isRequired={isRequired}
-              id={id}
+          isValid={isValid}
-              isRequired={isRequired}
+          label={label}
-              isValid={isValid}
+        >
-              {...rest}
+          {tooltip && (
-              {...field}
+            <Tooltip
-              onChange={(value, event) => {
+              content={tooltip}
-                field.onChange(event);
+              maxWidth={tooltipMaxWidth}
-              }}
+              position="right"
-            />
+            >
-          </FormGroup>
+              <QuestionCircleIcon />
-        );
+            </Tooltip>
-      }}
+          )}
-    </Field>
+          <TextInput
+            id={id}
+            isRequired={isRequired}
+            isValid={isValid}
+            {...rest}
+            {...field}
+            onChange={(value, event) => {
+              field.onChange(event);
+            }}
+          />
+        </FormGroup>
+      )}
+    </>
   );
 }
 
 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,