Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(dom): consolidate transition/animation waiting utils #9341

Open
wants to merge 9 commits into
base: main
Choose a base branch
from

Conversation

jcfranco
Copy link
Member

Related Issue: N/A

Summary

Stems from #9325 (comment).

Consolidates transition/animation waiting logic and adds whenTransitionDone to DOM utils to complement whenAnimationDone.

@github-actions github-actions bot added the refactor Issues tied to code that needs to be significantly reworked. label May 14, 2024
@jcfranco jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label May 17, 2024
@jcfranco jcfranco marked this pull request as ready for review May 19, 2024 14:11
Copy link
Contributor

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

@github-actions github-actions bot added the Stale Issues or pull requests that have not had recent activity. label May 28, 2024
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

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

Almost there!

packages/calcite-components/src/utils/dom.ts Outdated Show resolved Hide resolved
) => void;

beforeEach(() => {
// we clobber Stencil's custom Mock document implementation
Copy link
Member

Choose a reason for hiding this comment

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

🔨


element.style.transition = testTransition;

// need to mock due to JSDOM issue with getComputedStyle - https://github.com/jsdom/jsdom/issues/3090
Copy link
Member

Choose a reason for hiding this comment

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

🎭

packages/calcite-components/src/utils/dom.ts Outdated Show resolved Hide resolved
packages/calcite-components/src/utils/dom.ts Outdated Show resolved Hide resolved
* @param targetEl The element to watch for the transition to complete.
* @param transitionProp The name of the transition to watch for completion.
*/
export async function whenTransitionDone(targetEl: HTMLElement, transitionProp: string): Promise<void> {
Copy link
Member

Choose a reason for hiding this comment

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

Can't we just use onTransitionEnd on a VNode in most cases? Should we specify that?

Copy link
Member Author

Choose a reason for hiding this comment

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

I think we can tweak the name and doc to better explain its usage.

patches/@types+jsdom+21.1.6.patch Show resolved Hide resolved
@github-actions github-actions bot removed the Stale Issues or pull requests that have not had recent activity. label May 30, 2024
@jcfranco jcfranco requested a review from driskull May 31, 2024 08:00
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

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

👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pr ready for visual snapshots Adding this label will run visual snapshot testing. refactor Issues tied to code that needs to be significantly reworked.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants