Merge pull request #308 from shuhaib-aot/Feature/added-props-inputfiled

Added name prop into input fields

Author: arun-s-aot

forms-flow-components/src/components/CustomComponents/FormInput.tsx

@@ -4,6 +4,7 @@ import { Form, InputGroup } from 'react-bootstrap';
 interface FormInputProps {
   type?: string;
   label?: string;
+  name? : string;
   value?: string;
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
   onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
@@ -24,6 +25,7 @@ interface FormInputProps {
 
 export const FormInput: React.FC<FormInputProps> = ({
   type = "text",
+  name,
   label,
   value ,
   onChange,
@@ -55,6 +57,7 @@ export const FormInput: React.FC<FormInputProps> = ({
         <InputGroup className="custom-form-input-group">
           <Form.Control
             type={type}
+            name={name}
             value={value}
             onChange={onChange}
             onBlur={onBlur}

forms-flow-components/src/components/CustomComponents/FormTextArea.tsx

@@ -4,6 +4,7 @@ import { Form, InputGroup } from 'react-bootstrap';
 interface FormTextAreaProps {
     type?: string;
     label?: string;
+    name?:string;
     value?: string;
     onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
     onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void;
@@ -27,6 +28,7 @@ interface FormTextAreaProps {
 export const FormTextArea = forwardRef<HTMLTextAreaElement, FormTextAreaProps>(({
     label,
     value = '',
+    name,
     onChange,
     onBlur,
     placeholder = '',
@@ -81,6 +83,7 @@ export const FormTextArea = forwardRef<HTMLTextAreaElement, FormTextAreaProps>((
                     <Form.Control
                         as="textarea"
                         ref={combinedRef}
+                        name={name}
                         value={value}
                         onChange={onChange}
                         onBlur={onBlur}

forms-flow-theme/scss/_modal.scss

@@ -454,6 +454,7 @@
 
   .input-with-pills {
     display: flex !important;
+    justify-content: flex-start;
     flex-wrap: wrap !important;
     align-items: center;
     padding: var(--spacer-050) var(--spacer-100);