FWF-5716:[Feature] - Moved single variable selection modal from MF to EE

Author: Josephalexantony-aot

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

@@ -65,8 +65,8 @@ export const CustomTextArea: FC<CustomTextAreaProps> = ({
         <div
           className={`text-area-icon ${onIconClick ? "text-area-icon-clickable" : ""}`}
           onClick={onIconClick}
-          role={onIconClick ? "button" : undefined}
-          tabIndex={onIconClick ? 0 : undefined}
+          role={onIconClick && "button"}
+          tabIndex={onIconClick && 0 }
           onKeyDown={
             onIconClick
               ? (e) => {

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

@@ -35,6 +35,7 @@ export interface ReusableStandardModalProps {
   secondaryBtnLoading?: boolean;
   secondoryBtndataTestid?: string;
   secondoryBtnariaLabel?: string;
+  allignButtons?: boolean;
 }
 
 const buildModalContent = (
@@ -113,6 +114,7 @@ export const ReusableStandardModal: React.FC<ReusableStandardModalProps> = ({
   secondaryBtnLoading,
   secondoryBtndataTestid,
   secondoryBtnariaLabel,
+  allignButtons,
 }) => {
   const { t } = useTranslation();
   const darkColor = StyleServices.getCSSVariable("--secondary-dark");
@@ -190,7 +192,7 @@ export const ReusableStandardModal: React.FC<ReusableStandardModalProps> = ({
       )}
 
       {(primaryBtnText || secondaryBtnText) && (
-        <Modal.Footer>
+        <Modal.Footer className={`mt-3 ${allignButtons ? "justify-content-between" : ""}`}>
           {secondaryBtnText && (
             <V8CustomButton
               label={t(secondaryBtnText)}

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

@@ -58,6 +58,9 @@ export * from "./CustomComponents/ReusableTable";
 export * from "./CustomComponents/ReusableLargeModal";
 export * from "./CustomComponents/FormViewModal";
 export * from "./CustomComponents/ReusableStandardModal";
+<<<<<<< Updated upstream
 export * from "./CustomComponents/SelectWithCustomValue";
 export * from "./CustomComponents/SingleVariableSelectionModal";
+=======
+>>>>>>> Stashed changes
 

forms-flow-components/src/components/index.ts

@@ -346,28 +346,29 @@ $box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
       border-bottom: 1px solid var(--gray-x-light);
     }
 
-    .modal-footer {
-      padding: 1rem 0;
-      background-color: transparent;
-      display: flex;
-      gap: 0.5rem;
-      border-top: none;
-      width: 100%;
-      align-items: center;
-      
-      // Default: single or two buttons aligned to the right
-      justify-content: flex-end;
-      
-      // Only when exactly 3 elements are present, space them between
-      // Modern browsers with :has() support
-      &:has(> *:nth-child(3):last-child) {
-        justify-content: space-between;
-      }
-      
-      // Fallback for older browsers - use data attribute
-      &[data-three-buttons="true"] {
-        justify-content: space-between;
-      }
+    
+  }
+  .modal-footer {
+    padding-top: 1rem;
+    background-color: transparent;
+    display: flex;
+    gap: 0.5rem;
+    border-top: none;
+    width: 100%;
+    align-items: center;
+    
+    // Default: single or two buttons aligned to the right
+    justify-content: flex-end;
+    
+    // Only when exactly 3 elements are present, space them between
+    // Modern browsers with :has() support
+    &:has(> *:nth-child(3):last-child) {
+      justify-content: space-between;
+    }
+    
+    // Fallback for older browsers - use data attribute
+    &[data-three-buttons="true"] {
+      justify-content: space-between;
     }
   }
 }