Snackbar component UX/UI

srenault-meeds commented 11 months ago

Rationale

Two concerns regarding the snackbar:

Mobile:

When using mobile and receiving a notification like a success one, an info one, etc. Problem is that the notification is displayed behind the bottom tab bar AND we cannot do anything until the notification closes
Desktop:

Notifications that are displayed when error, info, success or warning are not following UX guidelines as expected. Currently: -> text is centered aligned -> the width of the notification is not dynamic depending on the text length -> close icon must not have same style as the colored vertical bar

1. Functional Requirements

Impacts

Any existing snackbar must use this component

Gamification

NA

Notifications

NA

Analytics

NA

Unified Search

NA

2. Technical Requirements

Extensibility

The Toast notification component is added globally in all pages with a single instance and can be called using directives:

this.$root.$emit('alert-message', MESSAGE, TYPE);
this.$root.$emit('alert-message-html', HTML_MESSAGE, TYPE);
this.$root.$emit('alert-message-html-confeti', HTML_MESSAGE, TYPE);
....
// for advanced usage, to display a link by example, we can use document.dispatchEvent
document.dispatchEvent(new CustomEvent('alert-message', {detail: {
  useHtml: true/false,
  confeti: true/false,
  alertType: 'success' | 'error' | 'warning' | 'info',
  alertMessage: MESSAGE,
  alertLink: URL,
  alertLinkText: LINK_TEXT,
  alertLinkTarget: '_blank' | '_self' ...,
  alertLinkIcon: 'fa-...',
  alertLinkTooltip: LINK_TITLE,
  alertLinkCallback: () => FUNCTION(),
}}));

This flexibility will be kept and we will have just to rework all existing notifications to re-use this component through the existing API.

Upgradability

An cleanup of existing alerts has to be made to reuse this component through existing API. In addition, the overridden style of v-alert will have to be removed to allow using v-alert as predefined in Vuetify.

Feature Flags

No feature flag.

4. Software Architecture

Access

All snackbar alerts in all Meeds modules will have to be removed in favor of this component in order to centralize the UX for a better maintainability and product design evolution. In addition, the existing overridden v-alert style of Vuetify will have to be removed to allow using v-alert in page. The current Snackbar z-index has to be reviewed as well to make it on top of all UI components.

srenault-meeds commented 11 months ago

@margondicco Can you please take a look at it please? We started to work it as enhancements but we suggest to make it a MIP to make sure you can take it into account.

margondicco commented 11 months ago

Hello ok cc @Julien-Dubois-eXo

srenault-meeds commented 11 months ago

Thanks Go-Fonc added