Vonage / vivid

Vonage's web UI 🎨 toolbelt
https://vivid.vonage.com
Apache License 2.0
38 stars 6 forks source link

[snackbar] allow margin range #1197

Closed alevy22 closed 1 year ago

alevy22 commented 2 years ago

Is your feature request related to a problem? Please describe. Yes, todat in meeting we use volta flash messages, we wish to use snackbar instead :) The issue we have with the snackbar is that the position is not good for us - we want it to come from the left-top which is 'TOP-START' this position cuts off our top buttons... we want to lower it a bit (40 px)

How the snackbar looks with position 'TOP-START'

Screen Shot 2022-01-16 at 15 24 58

in the native app it is worse... it is over the top buttons i_1642345739541471 How we want it to be (today we use volta)

Screen Shot 2022-01-16 at 15 25 04

Describe the solution you'd like We want to add 'top', 'botton', 'left', 'right' option sto the snacbar component that can be set on top of using the regular postion.

Describe alternatives you've considered Need to talk to Aviad but I think he won't even consider changing the position (top left)

Additional context Add any other context or screenshots about the feature request here.

yinonov commented 2 years ago

exposing top, bottom, left, right will quickly escalate to an incoherent design all over.

as the following applies 15px margin-inline-start 61px margin-block-start image

while the next clearly goes haywire by setting 8px margin-inline-start 55px margin-block-start image

These numbers aren't even in the platform scale.

I don't see how simple solutions (like positioning elsewhere in the viewport e.g. center, bottom etc') will be rejected or "not even considered" with the absence of good reasoning.

We may explore the margin range or, better yet, consider a predefined set of values. yet we still need to maintain consistency in the Vonage organization scale.

The objective here should be to fix what's broken 👆, and align to a single look & feel.

We must fall into line with best practices harvested from UI libs standards by replacing Volta with Vivid asap.

example - https://spectrum.adobe.com/page/toast/#Placement

Toast position differs depending on platform scale. By default, a toast is placed at the bottom end for desktop scale and at the bottom center for mobile scale, to avoid disrupting the user experience.

For desktop applications, a toast should be placed 16 px away from the bottom and to the right of the viewport.

For mobile applications, a toast should be placed at the bottom center, 16 px above the bottom toolbar. In smaller viewports, a toast is never larger than the viewport width (with 8 px left and right margins).

If a toast isn’t noticeable or doesn't disrupt the user experience, its placement can be changed to bottom center, bottom end, top end, or top center.

yinonov commented 2 years ago

vertically a multiplication can be expressed on a token to avoid positioning-over-navigation

snackbar can be anchored to an element and set its position relative to it. handled wrong can lead to damaged positioning.