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

Merged
merged 11 commits into from
Jun 7, 2024

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
@jcfranco jcfranco requested review from benelan, driskull, geospatialem and a team as code owners 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
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.

👍

@jcfranco jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jun 7, 2024
@jcfranco jcfranco merged commit bb45bdb into main Jun 7, 2024
12 checks passed
@jcfranco jcfranco deleted the jcfranco/add-transition-animation-waiting-utils branch June 7, 2024 20:10
@github-actions github-actions bot added this to the 2024-06-25 - Jun Release milestone Jun 7, 2024
benelan added a commit that referenced this pull request Jun 10, 2024
…orkflow

* origin/main: (26 commits)
  revert: refactor: add simpler `componentFocusable` util (deprecates `LoadableComponent`) (#9515)
  chore(linting): enable selector-pseudo-element-colon-notation rule (#9518)
  refactor(storybook): refactor tooltip simple story interface (#9538)
  refactor(dom): consolidate transition/animation waiting utils (#9341)
  refactor(storybook): build storybook simple story args interfaces using component class (#9457)
  chore: release next
  fix(block): add accessible label for slotted controls (#9502)
  feat(action-bar, action-pad): add expandLabel and collapseLabel to messages (#9497)
  chore: release next
  feat(action-menu, combobox, dropdown, input-date-picker, popover): allow logical placements for flipPlacements property. #8825 (#9490)
  fix(popover): correct border radius on close button (#9485)
  fix(list-item): hide nested list items by default (#9474)
  refactor: move component types into component specific interfaces files (#9527)
  chore: release next
  fix(alert): pause auto-close alert when link focused (#9503)
  refactor(storybook): consolidate storybook and component types (#9500)
  refactor(calcite-block-section,calcite-card): consolidate interfaces imports (#9517)
  chore: release next
  fix(block-section): restore block toggling when clicking on the header switch (#9472)
  chore: release next
  ...
jcfranco added a commit that referenced this pull request Jun 12, 2024
… order (#9560)

**Related Issue:** #9559

## Summary

This fixes `openCloseComponent.onToggleOpenCloseComponent` to emit
beforeOpen/Close events when the associated transition starts and emits
open/close when the transition ends.

This regression was introduced by
#9341 and would cause
`beforeOpen`/`open` or `beforeClose`/`close` to emit immediately after
another after the transition was done.

### Notable changes

* adds spec test to add coverage for `onToggleOpenCloseComponent`
* enhances `whenAnimationDone`/`whenTransitionDone` to accept callbacks
for both start and end phases
* exposes `readTask` from `openCloseComponent` to allow for stubbing
(stubbing Stencil's utility is not possible because the core module
getters are non-configurable)
* extracts animation/transition helpers for spec tests to individual
modules
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.

2 participants