[interesttarget] Are `popover-show-delay` and `popover-hide-delay` needed? Can they be abstracted?
Nobody has claimed this yet.
- Dominant language
- MDX
- Stars
- 4.5k
- Forks
- 226
- Avg merge
- 2d 22h
- Merged PRs (30d)
- 4
Description
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-delayis somewhat replicable withanimation-delayortransition-delaybutpopover-hide-delayis 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-delayI'm not sure this can be done withanimation-delay- can you prove me wrong? My concern is that the behavior wouldn't be de-bounced in that case. I.e. setpopover-show-delayto 0.5 seconds, and have the user hover and then de-hover the element only for 0.2 seconds. Nothing should happen, but I thinkanimation-delaywould cause the popover to just be shown after 0.5 seconds, right?
@keithamus
https://codepen.io/keithamus/pen/yLQabJK this usesanimation-delayto ensure that as you hover and de-hover (or focus/defocus) thebuttonfor less than0.5s, thedivwill 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:focusto 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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Begin with the discussion in this issue, the referenced changes in PR #766, and the related CSSWG issue #9062. Determine whether the popover delay properties should remain specific or become a more general CSS behavior, and document the resulting design decision; no implementation file or test is named.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100