vwc-snackbar / vwc-snackbar-list

[gullerya]

vwc-snackbar - requirements and functional spec - P0

There is a feature request (and Volta parity as well) for the snackbar component.

See design specced in this Figma.

Distinctive features of snackbar:

• it is NOT inlined into the page, but 'floating' above it
• it MAY be configured with the preferred location: top / bottom; far / near / center
• it is dismissible
• it is temporary, so that if not pro-actively dismissed it'll disappear in the given period of time
• it bears customer application provided message and optionally icon

Additionally, in Vivid context, snackbar should have connotations supported.

Questionable:

• design of the snackbars allows them to be 'static'; I think that this is counter-intuitive and may cause an ever-stacked notification above some content - needs clarification and definition 🪔
• design of the snackbars allows optional action button; I think that this is a bad UX practice to allow any but Close actions on temporary elements (it might well bring user to the point when the action 'slips away' just from beneath of the pointer); right, we may say that this action is always used in conjunction with 'static', which should be discussed in it's own - needs clarification and definition 🪔
• shall the snackbars be shown always in context of the whole document, or an arbitrary chosen view; I'm voting for the latter - needs clarification and definition 🪔
• design allows usage of icon; this is highly discouraged in Material snackbar principles - needs clarification 🪔

API

<vwc-snackbar connotation="cta" location"top far" timeout="1300">Slotted text becomes an message...</vwc-snackbar>

Attribute	Property	Type	Default	Description
connotation	connotation	string	''	defines the connotation of the message, visually presented but some attributive color
location	location	string	top center	defines preferred location of snackbar, may consist of any white space separated tokens from top/bottom and far/near/center in any order
timeout	timeout	number	4000	number of milliseconds, before the snackbar will auto disappear (if not dismissed beforehand)

snackbars list - requirements and functional spec - P1

When several snackbars are shown at the same time they should be managed.
Most acceptable way (and this is what Volta allows) is to create 'stacking' effect (NOT to be confused with 'stacking' keyword of MWC, which means something absolutely different).

As of now this functionality is somewhat questionable and therefore I'd like to postpone it to P1.

We do like to gather info from LOBs of such a usages if any, so if anyone know about usage of multiple stacked snackbars in some LOB, please update the list below:

• AI
• Meetings
• Messaging
• Nexmo Customer Dashboard
• VCC

As of implementation - there are few ideas that I had in mind, nothing settled as of now:

• dedicated component vwc-snackbar-list that manages the snackbars appended to it - MY CURRENT FAVORITE
• JS service, that exposes APIs to add snackbars and manages them (cons: somewhat shifted API experience, inability to skip JS)
• snackbar self inner logic that knows to detect sibling snackbars and adjust self accordingly (cons: concern separation not looks good here)

[yinonov]

it is temporary, so that if not pro-actively dismissed it'll disappear in the given period of time

unless set to null

• can multiple instances stack in page? if so, is it still aligned to the snackbar archetype?
• in regards to the "slip away under pointer" behaviour, I suggest pausing the countdown on hover

before moving on, It feels our design deviate from the original snackbar recommendation and enforces bad practice in favor of parity.
this might damage UX and we should probably raise a flag at this point and validate the benefit of this exceeding real-estate and "complexity"

if yielding the title & icon we can steer back to stacked snackbar

[yaelrabi]

Just wanted to let you know, our snackbar in the studio contain volta callout and some custom design we did,
for example sometimes we want to show spinner in the snackbar as in the image.

[gullerya]

And no shadow?

Regarding the callout - I think that there is quite a wide agreement that snackbar should get some redesigned presence, not similar to note (the one that is in your image and called callout) + have some shadow etc.

Regarding the contents of the snackbar - again, it is a discussion now if to use icons or not.

[yaelrabi]

The shadow is the shadow of vlt-callout:
box-shadow: inset 0 0 0 1px #9b9da3;

I think it should have more noticeable shadow, as you suggested

[yinonov]

even if icons make it to our snackbar (like in adobe's spectrum toast) it is still not opening a gate to animated icons/spinner. I believe this also deviates from the simplicity and non-interruptive approach
@jshenkman FYI

[gullerya]

Everybody here - please pay attention that the snackbar design discussion / review is moving to the actual PR here.

Please see the preview of the PR here and review the readme.md in the changes to react on the APIs.

[gullerya]

The initial implementation of the vwc-snackbar is available in an alpha state. See relevant repo package and StoryBook entry for more details.