DS - SnackBar Component Flagship Work Setup

[kellylein]

Description

This is a ticket for Product to create an epic and work with Flagship to plan the work.

Notes

Acceptance Criteria

• Discuss with the team any specifics of implementing this component into the app
• A ticket has been created for the app teams to install the new component - #9560, #9561

[TimRoe]

For this AC:

Discuss with the team any specifics of implementing this component into the app

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

[TimRoe]

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

[kellylein]

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