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

[Josephalexantony-aot]

User description

📝 Pull Request Summary

Description:

The Single variable Selection Modal has been moved to EE repo to have more consistancy in State.

Related Jira Ticket:
https://aottech.atlassian.net/browse/FWF-5716

Type of Change:

• ✨ Feature
• 🐞 Bug Fix
• ♻️ Refactor
• 🧹 Code Cleanup
• 🧪 Test Addition / Update
• 📦 Dependency Update
• 📘 Documentation Update
• 🚀 Deployment / Config / Security Updates

---

🧩 Microfrontends Affected

Please select all microfrontends or modules that are part of this change:

• forms-flow-admin
• forms-flow-components
• forms-flow-integration
• forms-flow-nav
• forms-flow-review
• forms-flow-service
• forms-flow-submissions
• forms-flow-theme
• scripts
• Others (please specify below)

Details (if Others selected):

---

🧠 Summary of Changes

---

🧪 Testing Details

Testing Performed:

Screenshots (if applicable):

---

✅ Checklist

• Code builds successfully without lint or type errors
• Unit tests added or updated
• Integration or end-to-end tests validated
• UI verified
• Documentation updated (README / Confluence / UI Docs)
• No sensitive information (keys, passwords, secrets) committed
• I have updated the CHANGELOG with relevant details
• I have given a clear and meaningful PR title and description
• I have verified cross-repo dependencies (if any)
• I have confirmed backward compatibility with previous releases
• Verified changes across all selected microfrontends

---

👥 Reviewer Notes

---

PR Type

Enhancement, Bug fix

---

Description

• Remove SingleVariableSelectionModal from components

• Add button alignment option to standard modal

• Adjust modal footer styling and layout

• Fix icon accessibility props in CustomTextArea

---

Diagram Walkthrough

flowchart LR
  SingleVar["SingleVariableSelectionModal component"] -- "removed export and file" --> IndexExports["components/index.ts"]
  ReusableModal["ReusableStandardModal"] -- "add allignButtons prop" --> FooterLayout["Configurable footer alignment"]
  ThemeSCSS["_mixins.scss"] -- "restructure .modal-footer styles" --> FooterLayout
  TextArea["CustomTextArea"] -- "tweak role/tabIndex when clickable" --> A11y["Icon accessibility behavior"]

Loading

File Walkthrough

	Relevant files
Bug fix	CustomTextArea.tsx Simplify icon role and tabIndex assignment                              forms-flow-components/src/components/CustomComponents/CustomTextArea.tsx Set role using boolean short-circuit. Set tabIndex using boolean short-circuit. Maintain keyboard handler for Enter/Space. +2/-2
Enhancement	ReusableStandardModal.tsx Add footer button alignment control to modal                          forms-flow-components/src/components/CustomComponents/ReusableStandardModal.tsx Add allignButtons prop to props interface. Wire allignButtons into component props. Apply conditional justify-content-between on Modal.Footer. +3/-1      SingleVariableSelectionModal.tsx Remove SingleVariableSelectionModal component                        forms-flow-components/src/components/CustomComponents/SingleVariableSelectionModal.tsx Remove entire component file. Decommission single variable selection modal. +0/-275  _mixins.scss Restructure and refine modal footer styles                              forms-flow-theme/scss/v8-scss/_mixins.scss Move and restyle .modal-footer outside nested block. Adjust padding-top and maintain flex alignment logic. Keep spacing rules for three-button layouts. +23/-22
Miscellaneous	index.ts Update index exports after component removal                          forms-flow-components/src/components/index.ts Stop exporting SingleVariableSelectionModal. +0/-1

---

[github-actions]

PR Reviewer Guide 🔍

(Review updated until commit 9eb59a3)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Accessibility The expressions for role and tabIndex can evaluate to non-string/number values when onIconClick is falsy, potentially setting them to false instead of omitting them. This can cause invalid DOM attributes and a11y issues. Consider reverting to ternaries that yield undefined when not clickable. role={onIconClick && "button"} tabIndex={onIconClick && 0 } onKeyDown={ Typo Prop New prop allignButtons appears misspelled; this can propagate inconsistent API usage. Consider renaming to alignButtons and updating its usage to avoid future confusion. allignButtons, Styling Change Modal footer padding changed from 1rem 0 to 1rem top-only; verify no visual regressions where horizontal/ bottom spacing was expected across modals. padding-top: 1rem; background-color: transparent;

[github-actions]

PR Code Suggestions ✨

Latest suggestions up to 9eb59a3
Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Fix invalid ARIA and tabIndex Using logical AND returns a boolean when onIconClick is falsy, which sets invalid values for role and tabIndex. Restore conditional expressions that yield undefined when not clickable to preserve accessibility and avoid React warnings. This ensures correct ARIA semantics and keyboard focus behavior. forms-flow-components/src/components/CustomComponents/CustomTextArea.tsx [68-70] -role={onIconClick && "button"} -tabIndex={onIconClick && 0 } +role={onIconClick ? "button" : undefined} +tabIndex={onIconClick ? 0 : undefined} Suggestion importance[1-10]: 8 __ Why: The current use of onIconClick && ... can pass false to role/tabIndex, which is invalid and harms accessibility; reverting to conditional undefined is correct and impactful.	Medium
	Fix SCSS nesting scope The closing braces after .modal-body appear misaligned, moving .modal-footer out of the .reusable-standard-modal scope. This changes specificity and may break modal styling. Re-nest .modal-footer inside the parent block and remove the stray brace. forms-flow-theme/scss/v8-scss/_mixins.scss [349-373] -.modal-body { +.reusable-standard-modal { + ... + .modal-body { padding: 0; overflow-y: auto; max-height: calc(48.875rem - 200px); margin: 0; border-top: 1px solid var(--gray-x-light); border-bottom: 1px solid var(--gray-x-light); } - - + + .modal-footer { + padding-top: 1rem; + background-color: transparent; + display: flex; + gap: 0.5rem; + border-top: none; + width: 100%; + align-items: center; + justify-content: flex-end; + + &:has(> *:nth-child(3):last-child), + &[data-three-buttons="true"] { + justify-content: space-between; + } + } } -.modal-footer { - padding-top: 1rem; Suggestion importance[1-10]: 3 __ Why: The suggestion claims mis-nesting, but the new hunk shows .modal-footer correctly nested; this is mostly a stylistic clarification with limited impact given current braces are balanced.	Low
General	Correct and alias misspelled prop allignButtons appears to be a misspelling of "align" and may cause confusion or inconsistent API usage. Rename the prop to alignButtons while keeping a backward-compatible mapping to avoid breaking callers. forms-flow-components/src/components/CustomComponents/ReusableStandardModal.tsx [195] -<Modal.Footer className={`mt-3 ${allignButtons ? "justify-content-between" : ""}`}> +// props interface +export interface ReusableStandardModalProps { + ... + alignButtons?: boolean; + // deprecated: kept for backward compatibility + allignButtons?: boolean; +} +// component signature +export const ReusableStandardModal: React.FC<ReusableStandardModalProps> = ({ + ... + alignButtons, + allignButtons, +}) => { + const effectiveAlignButtons = alignButtons ?? allignButtons; + ... + return ( + ... + <Modal.Footer className={`mt-3 ${effectiveAlignButtons ? "justify-content-between" : ""}`}> + ... + </Modal.Footer> + ); +}; + Suggestion importance[1-10]: 6 __ Why: Identifying allignButtons as a misspelling is accurate; proposing a backward-compatible alias improves API clarity without breaking changes, though it's not critical.	Low

---

Previous suggestions

Suggestions up to commit 38a1d4a

Category	Suggestion	Impact
Possible issue	Resolve merge conflict markers Unresolved merge conflict markers will break the build. Resolve the conflict and explicitly choose the intended exports; remove any reference to deleted components to avoid dead imports. forms-flow-components/src/components/index.ts [61-65] -<<<<<<< Updated upstream export * from "./CustomComponents/SelectWithCustomValue"; -export * from "./CustomComponents/SingleVariableSelectionModal"; -======= ->>>>>>> Stashed changes +// Note: SingleVariableSelectionModal was removed in this PR; do not export it. Suggestion importance[1-10]: 9 __ Why: The file contains unresolved conflict markers which will break builds and tooling. Removing markers and choosing consistent exports is critical; also dropping the removed SingleVariableSelectionModal export aligns with the PR changes.	High
	Fix ARIA and tabIndex logic Using logical AND here can set role/tabIndex to false, which results in invalid attribute values and breaks accessibility/keyboard focus. Restore conditional assignment so these attributes are only present when clickable, otherwise undefined. forms-flow-components/src/components/CustomComponents/CustomTextArea.tsx [68-69] -role={onIconClick && "button"} -tabIndex={onIconClick && 0 } +role={onIconClick ? "button" : undefined} +tabIndex={onIconClick ? 0 : undefined} Suggestion importance[1-10]: 8 __ Why: The new logic uses &&, which passes false when onIconClick is falsy, resulting in invalid role/tabIndex values and accessibility issues. Restoring the ternary to yield undefined when inactive is correct and important for keyboard navigation.	Medium
General	Correct misspelled prop name The prop name allignButtons is misspelled and will cause confusion or misuse by consumers. Correct the spelling and keep backward compatibility by mapping the old prop to the new one. forms-flow-components/src/components/CustomComponents/ReusableStandardModal.tsx [38-39] export interface ReusableStandardModalProps { ... secondoryBtnariaLabel?: string; - allignButtons?: boolean; + alignButtons?: boolean; + allignButtons?: boolean; // deprecated } Suggestion importance[1-10]: 6 __ Why: The prop allignButtons is introduced misspelled at line 38 and used later; suggesting alignButtons with backward compatibility improves API clarity and avoids consumer mistakes, though it's a minor naming fix.	Low

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

Persistent review updated to latest commit 9eb59a3