Snackbar component UX/UI

[srenault-meeds]

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

Top User Stories

Desktop:

Text:

• Left aligned
• 16px font-size
• If text cannot be displayed in one line due to width, then line break is done automatically
• padding-right: 30px

If CTA link

• font-size is 16px as well
• color of hyperlink text
• padding-right: 30px

Close icon

• to be only a cross (not times-circle, but times)
• color: allPagesGreyColorLighten1
• padding-right: 16px

Snackbar style:

• No icon before label
• Height: depending on text to be displayed
• Width is maximum 50% of screen resolution if desktop and minimum 400px
• border-radius: 4px
• colored vertical line to the left: 8px

Mobile

• The notification is displayed on behalf of the tabbar (width and height)
• With a horizontal line that is removing depending on the time it is displayed (see design)
• AND we can continue to browse the app
• AND we can swipe it to remove the snackbar

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]

@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]

Hello ok cc @Julien-Dubois-eXo

[srenault-meeds]

Thanks Go-Fonc added

[boubaker]

Ready for tech review by DAO members (eXo: @rdenarie )

[rdenarie]

Go tech

[boubaker]

All pr validated

Thanks @rdenarie , can you please review again Meeds-io/notes#779
A modification is made due to a rebase conflict

[boubaker]

All pr validated

Thanks @rdenarie . All PRs merged.