Enhance Confirmation Toast for default overlay and centering [NUXE-134]
Closed this issue · 4 comments
Is your feature request related to a problem? Please describe.
Our team was prompted to consider using the new fixed confirmation toast pattern but have run into complexities with it. We tend to trigger it from a form submission within the page, and the designs always standardize the toast as a centered hover overlay near the top. Dropping the kit in directly makes it appear on the left within the top of the given partial, expanding space to insert it (instead of overlay). Also, if the page is long, the toast appears out of view above the current page scroll (since form submission is at the bottom).
Describe the solution you'd like
A more standardized approach to overlay the toast in the center of the page within view over existing content instead of inserting it into the top of page content on the left (potentially out of view).
Describe alternatives you've considered
After discussing this with our UX designer, we were told that this has come up before and our dev's mentioned the cost to write custom code for this page to convert to this new pattern... instead, we have fallen back on the approach we had before, which is a flash banner across the top of the page that slides down and back up.
Additional context
For Birds of Prey, this came up when converting the Team Settings page for a team from Ruby to React as it seemed like a good time to investigate this. I'm unaware of the specifics Eva was mentioning that had come up in other areas/uses in Nitro in the past.
We have a story in our backlog to explore more patterns for positioning the confirmation toast. Another quick solution would be to update the "NItro Flash Messages" to use confirmation toasts. That would be a NItro solution. That said I'll add this idea to the existing story so we can track it.
Runway story: https://nitro.powerhrg.com/runway/backlog_items/NUXE-134
This positioning shipped a while back. Closing now