lime-elements icon indicating copy to clipboard operation
lime-elements copied to clipboard

fix(snackbar): improve UX of dismissible snackbar

Open LucyChyzhova opened this issue 1 year ago • 1 comments

fix: https://github.com/Lundalogik/lime-elements/issues/2978

Screenshot 2024-05-20 at 10 06 08

Review:

  • [ ] Commits are atomic
  • [ ] Commits have the correct type for the changes made
  • [ ] Commits with breaking changes are marked as such

Browsers tested:

(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)

Windows:

  • [ ] Chrome
  • [ ] Edge
  • [ ] Firefox

Linux:

  • [ ] Chrome
  • [ ] Firefox

macOS:

  • [ ] Chrome
  • [ ] Firefox
  • [ ] Safari

Mobile:

  • [ ] Chrome on Android
  • [ ] iOS

LucyChyzhova avatar May 20 '24 08:05 LucyChyzhova

Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-2986/

github-actions[bot] avatar May 20 '24 08:05 github-actions[bot]

:tada: This PR is included in version 37.44.3 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

lime-opensource avatar May 28 '24 10:05 lime-opensource

Lucy I did a lot of refactoring in your PR for the Snackbar, divided it into several commit, and also improved styles. Got rid of the MDC styles. However, after a lot of thinking back and forth, I decided to keep the countdown timer animation on the dismiss button for now.

Because:

  1. I don’t think the user experiences the same thing now, since the button is moved to the top. I think the reason they experienced that they can “undo” some action was because the button was displayed in an irrelevant location. That location is always used to display “actions that users can take”, such as Undoing, or Moving forward. This was the confusing thing. Now we move the close button where all close buttons are conventionally located.
  2. We need to do a lot of refactoring if we wanna move the count down animation to the primary action button on the bottom-right corner of the snackbar. It takes time to do it right, which I don’t have right now.
    1. Even then, we don’t always have a primary action button. So sometimes we will end up not showing any countdown. I’d argue that this is still a useful information to display to the user (which was why we added it).
    2. We will have a persistent snackbar soon, which won’t have that countdown. This will help us differentiate between these two types. But also a persistent snackbar doesn’t need to have a primary action button.
    3. We also will need to add more actions (secondary actions) to the snackbar.
  3. We will soon work on notifications. I’m sure we will focus on the snackbar and its countless problems. There is so much I want to refactor in this component. So I think we need to wait with these kinds of changes.

Let’s live with the new position of the button and see how it feels. Maybe we think it’s fine now after all, or that we really need to change it. I just don’t wanna rush it.

Kiarokh avatar May 28 '24 10:05 Kiarokh