open-ui icon indicating copy to clipboard operation
open-ui copied to clipboard

[popover=hint] Are `popover-show-delay` and `popover-hide-delay` needed? Can they be abstracted?

Open keithamus opened this issue 2 years ago • 3 comments

Pulling this out from https://github.com/openui/open-ui/pull/766/files/2232ac991582913f820d1a50709963a3d1f55c9c

@keithamus These two properties feel useful for more than this. What intrinsic behaviours are needed for these?

Another curiosity; popover-show-delay is somewhat replicable with animation-delay or transition-delay but popover-hide-delay is not. I wonder if there's a bigger problem that can be solved here, for example adding animation-exit states which trigger when a node moves out of a CSS state?

@mfreed7 Interesting feedback! I had envisioned these to work with popovers (and maybe dialogs?) only. How do you envision making them more general?

As to popover-show-delay I'm not sure this can be done with animation-delay - can you prove me wrong? My concern is that the behavior wouldn't be de-bounced in that case. I.e. set popover-show-delay to 0.5 seconds, and have the user hover and then de-hover the element only for 0.2 seconds. Nothing should happen, but I think animation-delay would cause the popover to just be shown after 0.5 seconds, right?

@keithamus https://codepen.io/keithamus/pen/yLQabJK this uses animation-delay to ensure that as you hover and de-hover (or focus/defocus) the button for less than 0.5s, the div will not be shown. I believe this is properly debounced as you describe. I don't know how to get the same effect upon exit of that state; transitions don't work quite the same, I believe.

@mfreed7 Ahh nice - I see that you get that by adding :focus to clear the animation if you de-hover. But you're right - not possible on the de-hover side of things.

Do you think this is worth opening a CSSWG issue to discuss? I mean about the "more general problem" question?

I've also filed https://github.com/w3c/csswg-drafts/issues/9062 to solicit some discussion from CSSWG about this.

keithamus avatar Jul 13 '23 11:07 keithamus

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

github-actions[bot] avatar Feb 21 '24 00:02 github-actions[bot]

Still relevant. Also related to #992

keithamus avatar Feb 21 '24 12:02 keithamus

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

github-actions[bot] avatar Aug 20 '24 00:08 github-actions[bot]