Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Global SnackBar Implementation #9630

Open
ajsarkar28 opened this issue Sep 19, 2024 · 9 comments · May be fixed by #10298
Open

Global SnackBar Implementation #9630

ajsarkar28 opened this issue Sep 19, 2024 · 9 comments · May be fixed by #10298
Assignees
@rbontrager @oddballdave
Labels
design-system-implementation front-end Ticket requires front-end work global Issues for the global team mobile-feature-support QA Tickets require QA work / review QA 3 QA work sized as a 3

Comments

@ajsarkar28
Copy link

ajsarkar28 commented Sep 19, 2024 •
edited
Loading

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.
@ajsarkar28 ajsarkar28 added QA Tickets require QA work / review global Issues for the global team front-end Ticket requires front-end work labels Sep 19, 2024
@timwright12 timwright12 mentioned this issue Oct 2, 2024
Open
4 tasks
@oddballdave oddballdave linked a pull request Dec 3, 2024 that will close this issue
Chore/9630-UseDesignSystemSnackbarComponent #10298
Open
8 tasks
@oddballdave oddballdave mentioned this issue Dec 3, 2024
Open
@oddballdave
Copy link
Contributor

Duplicate of #9561

@oddballdave oddballdave marked this as a duplicate of #9561 Dec 3, 2024
@rbontrager rbontrager added the QA 3 QA work sized as a 3 label Dec 4, 2024
@kellylein
Copy link
Contributor

@oddballdave #9561 is the parent Epic for this ticket, not a duplicate.

@oddballdave
Copy link
Contributor

@oddballdave #9561 is the parent Epic for this ticket, not a duplicate.

My bad, I didn't see that sub-issue.

@oddballdave oddballdave marked this as not a duplicate of #9561 Dec 6, 2024
@rbontrager
Copy link
Contributor

@oddballdave I'm seeing two issues

  1. The issue discussed in the meeting where error snackbars are not flush with the bottom for fullScreenSubtasks. I'm seeing this with the claims > upload files/upload photos screen, personal info > gender identity/preferred name, draft messages.
    Image

  2. I'm also seeing multiple instances where the error snackbars are not going away upon navigation. This also looks to be affecting the fullScreenSubtasks screens. I can reproduce with the error snackbars on personal info > gender identity/preferred name and the error snackbar for messages > start new message if the message fails to send
    https://github.com/user-attachments/assets/874406b9-fe65-4755-8270-f6e8babac49f

@jennb33
Copy link

jennb33 commented Dec 9, 2024

12/9/2024 - this ticket is in PR; there were two issues:

  1. Disappearing Snackbar that was not dismissing the full-service modals
  2. Snackbar is supposed to appear at different places on the screen

Dave is working on this right now; the existing codebase is also incorrect. He is looking for more guidance and is looking for the Figma layout for the Snackbar. Natasha will look into this to see if she can share it with Dave, specifically to the bottom nav.

@jennb33
Copy link

jennb33 commented Dec 10, 2024

12/10/2024 - Dave has submitted a bunch of commits and has requested QA review on this ticket.
He had to do another deep dive on the SnackBar component. There is a concept of a "safe area" and they differ between Android and iPhone. Referencing Figma and now has a way to get everything consistent (nav bar placement, etc). Forced errors.

@jennb33
Copy link

jennb33 commented Dec 11, 2024

12/11/2024 - Dave got some feedback on the PR. Created a patch for DS Snackbar because it wasn't a plug & play replacement. TY Natasha for the Figma design; he did the work so that the spacing is aligned. Got some negative feedback about not really caring. Because this isn't a drop in replacement, Dave has to do additional work.

@jennb33
Copy link

jennb33 commented Dec 12, 2024

12/12/2024 - Dave made changes according to feedback. It seems like the SnackBar isn't going to be customizable. Tim approved PR, this still needs QA

@jennb33
Copy link

jennb33 commented Dec 12, 2024

12/12/2024 @oddballdave we will use this same ticket for Sprint 7, for the QA work that still needs to happen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@rbontrager rbontrager

@oddballdave oddballdave

Labels
design-system-implementation front-end Ticket requires front-end work global Issues for the global team mobile-feature-support QA Tickets require QA work / review QA 3 QA work sized as a 3
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Chore/9630-UseDesignSystemSnackbarComponent department-of-veterans-affairs/va-mobile-app
5 participants
@rbontrager @ajsarkar28 @kellylein @jennb33 @oddballdave