Incorporate Design System SnackBar Component into the Flagship App - Global

[kellylein]

Project Status Overview

Project Objective:

• The Design System team will be creating a new SnackBar component. This Epic covers the Flagship Global team implementing that new component in the Global sections of the app.
• The Flagship team will give feedback on the process to the Design System team to help them improve the Design System.

Current Dependencies / Blockers

Blockers

Blocker	Team / Owner	Est to Resolution

Monthly Updates

Updates

Month	Progress & Key Accomplishments	Issues/Risks/Blockers
date	update

Implementation Notes:
some technical recommendations from tech discovery (may change during implementation):

• Remove bottomOffset from redux and generally remove the SnackBar (app level name, design system is Snackbar) component slice
• Design system Snackbar component will handle setting when showing Snackbar (since it is dismissed on navigation, should not need updating height)
• Should be able to clean up global.d.ts and src/App.tsx of custom config alongside plugging in the design system Snackbar per documentation
• While calling the Snackbar directly via snackbar.show(...) and snackbar.hideAll() will be possible, it is recommended to use design system provided convenience functions when possible as they bake in logic and automatically adjust to changes where manual calls may need more updating
• No longer true due to revisions during Snackbar creation such that now Snackbar manipulation is handled via the useSnackbar hook and not defined globally
• Remove SnackBarConstants from src/constants/common.ts as no longer relevant
• Recommend removal of SnackbarMessages typing that mandates success-/error-Msg properties and conditionally includes undo(Error)Msg
• Depends on screen, but rarely seems to be beneficial vs just plugging in the translation text--context both from surrounding logic and translation name clarifies what the Snackbar is appearing for
• Should be able to clean up appreciable snackbar-related parts of app-level theme

Additional note:

• When testing announcing the Snackbar for accessibility, some conflicting behavior with app-level setting focus to the back button was observed as documented on this PR in secure messaging around moving a message to a different folder

Unclear how this should be resolved, but something to be cognizant during implementation into flagship and discuss with design system team if needed

• Snackbar accessibility functions correctly with RN 0.74 or higher. Flagship is currently on 0.73.