feat: Global: Notification Alert Revamp

[glespinosa]

Will close https://github.com/zesty-io/manager-ui/issues/2176

Resolved issues:

• [x] new revamp design of notifcation
• [x] stacking of notification (note the order of the notification is the bottom is always the latest) there's no currently functionality that will reverse that order in notistack
• [x] top center positioning of notification
• [x] there's a secondary type notification if the other properties will be available

screencast-8-aaeffee09b-7w6v22.manager.dev.zesty.io_8080-2024.02.16-10_04_07.webm

[agalin920]

@zcolah are we really going with stacking snack bars? Just making sure you are aware that strictly goes against the material design guidelines.

[zcolah]

@zcolah are we really going with stacking snack bars? Just making sure you are aware that strictly goes against the material design guidelines.

@agalin920 You are correct that Material UI guidelines state that the "snackbar" should appear one at a time. They also do state they should be at the bottom center. However showing one toast at a time can lead to a scenario where a user does not immediately see an error message since the previous snackbar is still being shown.

Hence we have instead decided to take the approach the Github Primer system is taking: https://primer.style/components/toast

Also you can see this discussion thread created to discuss this change: https://zesty-io.slack.com/archives/C03TKNN7XRN/p1704812236712669

[zcolah]

Note: This project cannot deploy until we improve the microcopy for the alerts. For us to improve the microcopy we need to complete the following issue first: https://github.com/zesty-io/manager-ui/issues/2416

So please mark this as blocked.

[agalin920]

Note: This project cannot deploy until we improve the microcopy for the alerts. For us to improve the microcopy we need to complete the following issue first: #2416

So please mark this as blocked.

I would NOT want this to be in the same body of work just fyi. I also don't see how this blocks this current ticket.

[agalin920]

@zcolah are we really going with stacking snack bars? Just making sure you are aware that strictly goes against the material design guidelines.

@agalin920 You are correct that Material UI guidelines state that the "snackbar" should appear one at a time. They also do state they should be at the bottom center. However showing one toast at a time can lead to a scenario where a user does not immediately see an error message since the previous snackbar is still being shown.

Hence we have instead decided to take the approach the Github Primer system is taking: https://primer.style/components/toast

Also you can see this discussion thread created to discuss this change: https://zesty-io.slack.com/archives/C03TKNN7XRN/p1704812236712669

I disagree with us taking the approach of a completely different design system that we have not been abiding to. If you have specific product needs for it thats fine but I don't expect the justification to be in another design system

[zcolah]

1. The sequence of the projects that were planned were are as follows:

a. We get an inventory (Google Sheet) of all the existing notifications from the dev in charge

b. We update the notification messages in the system (done by me once part a is done)

c. After which we would update the UI.

2. We made a team decision to ship this sequence of projects together as a rollup and expected the sequence to be followed. That being said doing part C first is still fine but we need to wait on the decisions.

3. Our design system is primarily based on Material UI. However we have taken inspiration for a variety of different design systems in the past as well when designing components. For example, our title bars, app sidebars, tabs, text inputs, amongst others have been heavily influenced from other design systems due to visual or usability needs.

When designing the notification system we looked at a variety of different systems and methods of communicating notifications. We analyzed multiple design systems and UIs as well for it.

And we also made a discussion post to receive feedback on the same in product. Only after our due diligence and a hand off review did we place this ticket in the Design Ready pile of the roadmap.

On Wed, Feb 28, 2024, 11:13 PM Andres Galindo @.***> wrote:

@zcolah https://github.com/zcolah are we really going with stacking snack bars? Just making sure you are aware that strictly goes against the material design guidelines.

@agalin920 https://github.com/agalin920 You are correct that Material UI guidelines state that the "snackbar" should appear one at a time. They also do state they should be at the bottom center. However showing one toast at a time can lead to a scenario where a user does not immediately see an error message since the previous snackbar is still being shown.

Hence we have instead decided to take the approach the Github Primer system is taking: https://primer.style/components/toast

Also you can see this discussion thread created to discuss this change: https://zesty-io.slack.com/archives/C03TKNN7XRN/p1704812236712669

I disagree with us taking the approach of a completely different design system that we have not been abiding to

— Reply to this email directly, view it on GitHub https://github.com/zesty-io/manager-ui/pull/2555#issuecomment-1969515559, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFMT477PMML2MXT27E6RHBTYV5UFJAVCNFSM6AAAAABDLKOK42VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNRZGUYTKNJVHE . You are receiving this because you were mentioned.Message ID: @.***>

[zcolah]

What is the status of this coming into Beta?

[glespinosa]

@agalin920 for your review regarding the fix on test suite. thank you