Skip to content

Snackbar: Keep visible while touched or hovered#8334

Merged
henon merged 14 commits intoMudBlazor:devfrom
danielchalmers:snackbar-hover
Mar 15, 2024
Merged

Snackbar: Keep visible while touched or hovered#8334
henon merged 14 commits intoMudBlazor:devfrom
danielchalmers:snackbar-hover

Conversation

@danielchalmers
Copy link
Member

@danielchalmers danielchalmers commented Mar 11, 2024

Description

Resolves #6764

How Has This Been Tested?

visually

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

Snackbar will now go visible and stay like that if the mouse enters or touched. When left, it will finish the rest of the visible duration then start the hide animation.

onmouseover, onmouseleave

Video3.mp4

ontouchstart, ontouchend

Video3.mp4

Checklist:

  • The PR is submitted to the correct branch (dev).
  • My code follows the code style of this project.
  • I've added relevant tests.

@github-actions github-actions bot added enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library PR: needs review labels Mar 11, 2024
@danielchalmers danielchalmers changed the title Keep Snackbar open while touched or hovered Snackbar: Keep visible while touched or hovered Mar 11, 2024
@codecov
Copy link

codecov bot commented Mar 11, 2024

Codecov Report

Attention: Patch coverage is 79.06977% with 9 lines in your changes are missing coverage. Please review.

Project coverage is 88.90%. Comparing base (74e5562) to head (048e15d).
Report is 5 commits behind head on dev.

Files Patch % Lines
src/MudBlazor/Components/Snackbar/Snackbar.cs 76.92% 3 Missing and 6 partials ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##              dev    #8334      +/-   ##
==========================================
+ Coverage   88.64%   88.90%   +0.25%     
==========================================
  Files         407      407              
  Lines       12179    12218      +39     
  Branches     2431     2440       +9     
==========================================
+ Hits        10796    10862      +66     
+ Misses        858      828      -30     
- Partials      525      528       +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@ScarletKuro
Copy link
Member

ScarletKuro commented Mar 11, 2024

We would need to cover the new lines with unit tests, if possible to simulate that the mouse is on the snackbar.
Also adding @henon for review.
I'm also not sure about the UserCanAffectTransitions name, it's like saying me I can influence the state but what state and when? Also since it's true does it means that this feature is enabled by default? If yes it should be the opposite. But I will let @henon to decide about the naming, Really shame that CommonSnackbarOptions has no XML comments at all what this options do.

@henon
Copy link
Contributor

henon commented Mar 11, 2024

I think this is a pretty useful feature and I'd say we can even make it the default. I mean, what is the worst that can happen to any existing apps, that the user hovers over a message and it will not fade. I wouldn't call that a breaking change.

Parameter name ideas: KeepVisibleThroughInteraction, HoverToPreventFadeout, AllowUserToPreventFadeout, UserCanPreventFadeout or just Interactive.

@mikes-gh
Copy link
Contributor

mikes-gh commented Mar 11, 2024

PreventTransitionOnInteraction is another option (default false). I wouldn't mind dropping the API completely since it just makes sense to me.

@danielchalmers
Copy link
Member Author

@ScarletKuro @henon @mikes-gh

So remove the option and make this new behavior hardcoded? Everything else looks good?

Does anyone has pointers on testing mouse hover and touches?

@henon
Copy link
Contributor

henon commented Mar 11, 2024

@danielchalmers what about the use-case of clicking a snackbar message to hide it? That would collide with this new behavior, right?

@henon
Copy link
Contributor

henon commented Mar 11, 2024

Does anyone has pointers on testing mouse hover and touches?

Any mouse or touch event can be simulated easily in bUnit.

@danielchalmers
Copy link
Member Author

@danielchalmers what about the use-case of clicking a snackbar message to hide it? That would collide with this new behavior, right?

That will perform the same action as the close button and is thus uncancellable and ignores further interaction.

@henon
Copy link
Contributor

henon commented Mar 11, 2024

So how do you do it on mobile? Touch and keep touching to keep the message from hiding?

@danielchalmers
Copy link
Member Author

So how do you do it on mobile? Touch and keep touching to keep the message from hiding?

A touch will keep it visible until somewhere else is touched

@ScarletKuro
Copy link
Member

ScarletKuro commented Mar 11, 2024

@henon
Copy link
Contributor

henon commented Mar 11, 2024

So how do you do it on mobile? Touch and keep touching to keep the message from hiding?

A touch will keep it visible until somewhere else is touched

Ok, I think in this scenario there is a collision between the use-cases and we would need the property. Some may want to just touch messages to make them go away on mobile.

@danielchalmers
Copy link
Member Author

So how do you do it on mobile? Touch and keep touching to keep the message from hiding?

A touch will keep it visible until somewhere else is touched

Ok, I think in this scenario there is a collision between the use-cases and we would need the property. Some may want to just touch messages to make them go away on mobile.

Video3.mp4

@mikes-gh
Copy link
Contributor

@danielchalmers Does this PR change the touch interaction? Touching twice to close a Snack bar would cause confusion.

@danielchalmers
Copy link
Member Author

danielchalmers commented Mar 11, 2024

@danielchalmers Does this PR change the touch interaction? Touching twice to close a Snack bar would cause confusion.

@mikes-gh @henon

just posted an example above. clicking/touching a clickable snackbar still closes it like normal. touching a regular snackbar keeps it open. anything that calls the close event will not let the animation be cancelled

i did not intend on making any UI/UX breaking changes so if any are found I will fix them

@henon
Copy link
Contributor

henon commented Mar 11, 2024

Sounds good, as long as it is well documented.

@danielchalmers
Copy link
Member Author

Sounds good, as long as it is well documented.

@henon Added this:

image

image

What other kind of documentation were you thinking?

I'll add tests after #8281 to avoid conflict. Anything I can do to help that PR? Not trying to rush anyone.

@ScarletKuro
Copy link
Member

I'll add tests after #8281 to avoid conflict. Anything I can do to help that PR? Not trying to rush anyone.

I will try to look it tmr

@henon
Copy link
Contributor

henon commented Mar 11, 2024

What other kind of documentation were you thinking?

For instance the difference in behavior between closable and non-closable snackbar messages could be explained.

And just to make it clear, I think from the discussion we can follow that we don't need a property to disable this new behavior as it doesn't interfere with closable messages. Do you agree @mikes-gh and @ScarletKuro? Thumbs up if you agree please.

@Yomodo
Copy link
Contributor

Yomodo commented Mar 11, 2024

May I suggest a little refinment?

Change:
It provides the user with a temporary closable snackbar
To:
It provides a temporary and closable snackbar

@danielchalmers
Copy link
Member Author

@henon @ScarletKuro Thank you so much for the work on #8281

I've done more on the snackbar and added comprehensive tests. Should be ready!

Copy link
Contributor

@henon henon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good!

@danielchalmers
Copy link
Member Author

New wording

image

I think it's much clearer

@henon henon merged commit 3395372 into MudBlazor:dev Mar 15, 2024
@henon
Copy link
Contributor

henon commented Mar 15, 2024

Thanks Daniel

@danielchalmers danielchalmers deleted the snackbar-hover branch April 4, 2024 23:45
biegehydra pushed a commit to biegehydra/MudBlazor that referenced this pull request Apr 26, 2024
* Keep Snackbar open while touched or hovered
* @ontouchcancel
* Fix ghosts by always giving close action priority

* Use better event

dotnet/aspnetcore#13104 (comment)

* Comprehensive hover and touch tests

* Fix ghosts when leaving mouse over during close

Close click animation wasn't forced to play and was respecting pause
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Keep Snackbar open if mouse is over

5 participants