This issue written with ChatGPT models' help
Overview
The client/src/components/UI/ folder contains shared UI components that should be reviewed for compatibility with MUI v7.
Details
⚠️ Important workflow note:
This work should be done on a dedicated feature branch and must not be merged directly into develop or main until the MUI v7 migration epic is complete.
Most files in this folder have already been converted to TypeScript, but they should still be reviewed for MUI v7 compatibility. Some components may already work without modification, while others may benefit from adopting newer MUI patterns or removing legacy implementation details.
This migration may include:
- Reviewing reusable MUI wrapper components for compatibility with MUI v7
- Verifying
sx usage follows current recommended patterns
- Checking custom Button, IconButton, Box, Alert, Snackbar, Typography, and Collapse wrappers for deprecated props or behavior
- Reviewing spacing, sizing, color, and typography consistency
- Ensuring custom wrapper components continue to expose the correct MUI props
- Verifying accessibility (
aria-* attributes, focus behavior, keyboard navigation)
- Confirming Snackbar and Alert behavior still functions correctly after upgrading
- Reviewing icon imports and ensuring they use current MUI package conventions
- Removing obsolete workarounds or compatibility code if no longer needed
- Performing manual QA for visual regressions
Known files in scope include (non-exhaustive):
Particular attention should be given to AnnouncementSnackbar.tsx, since it combines several MUI components (Alert, Collapse, Box, Typography, IconButton) together. During migration, developers should verify:
- Alert severity rendering remains unchanged
- Collapse animations continue working correctly
sx styling behaves consistently- Snackbar dismissal state stored in
sessionStorage still behaves correctly
- Accessibility and keyboard interaction remain intact
If no MUI v7 code changes are ultimately required for some components, that should be documented after verifying compatibility rather than assuming the components require modification.
Action Items
[PLEASE ADD ACTION ITEMS (Dev lead/developer will add)]
Resources
This issue written with ChatGPT models' help
Overview
The
client/src/components/UI/folder contains shared UI components that should be reviewed for compatibility with MUI v7.Details
This work should be done on a dedicated feature branch and must not be merged directly into
developormainuntil the MUI v7 migration epic is complete.Most files in this folder have already been converted to TypeScript, but they should still be reviewed for MUI v7 compatibility. Some components may already work without modification, while others may benefit from adopting newer MUI patterns or removing legacy implementation details.
This migration may include:
sxusage follows current recommended patternsaria-*attributes, focus behavior, keyboard navigation)Known files in scope include (non-exhaustive):
client/src/components/UI/AnnouncementSnackbar.tsxclient/src/components/UI/Box.tsxclient/src/components/UI/InternalLink.tsxclient/src/components/UI/PasswordInput.tsxclient/src/components/UI/StandardButton.tsxclient/src/components/UI/SurveySnackbar.tsxclient/src/components/UI/Toast.tsxclient/src/components/UI/iconLookup.tsclient/src/components/UI/index.tsParticular attention should be given to
AnnouncementSnackbar.tsx, since it combines several MUI components (Alert,Collapse,Box,Typography,IconButton) together. During migration, developers should verify:sxstyling behaves consistentlysessionStoragestill behaves correctlyIf no MUI v7 code changes are ultimately required for some components, that should be documented after verifying compatibility rather than assuming the components require modification.
Action Items
[PLEASE ADD ACTION ITEMS (Dev lead/developer will add)]
Resources
sxdocumentation: https://mui.com/system/getting-started/the-sx-prop/