Skip to content

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

Merged
jcfranco merged 11 commits intomainfrom
jcfranco/add-transition-animation-waiting-utils
Jun 7, 2024
Merged

refactor(dom): consolidate transition/animation waiting utils#9341
jcfranco merged 11 commits intomainfrom
jcfranco/add-transition-animation-waiting-utils

Conversation

@jcfranco
Copy link
Copy Markdown
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 a team, benelan, driskull and geospatialem as code owners May 19, 2024 14:11
@github-actions
Copy link
Copy Markdown
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
Copy Markdown
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!

Comment thread packages/calcite-components/src/utils/dom.ts Outdated
Comment thread packages/calcite-components/src/utils/dom.spec.ts
Comment thread packages/calcite-components/src/utils/dom.spec.ts
Comment thread packages/calcite-components/src/utils/dom.ts Outdated
Comment thread packages/calcite-components/src/utils/dom.ts Outdated
* @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
Copy Markdown
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
Copy Markdown
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.

Comment thread patches/@types+jsdom+21.1.6.patch
@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
Copy Markdown
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
@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