Skip to content

fix(carousel): animate items with the same direction#9325

Merged
jcfranco merged 2 commits intohotfixfrom
jcfranco/9232-fix-carousel-slide-animation
May 14, 2024
Merged

fix(carousel): animate items with the same direction#9325
jcfranco merged 2 commits intohotfixfrom
jcfranco/9232-fix-carousel-slide-animation

Conversation

@jcfranco
Copy link
Copy Markdown
Member

@jcfranco jcfranco commented May 14, 2024 •
edited
Loading

Related Issue: #9232

Summary

Updates carousel to wait for item animations before each slide.

Note: I'll submit a follow-up PR to refactor openCloseComponent.onToggleOpenCloseComponent to use the same DOM util as carousel.

@github-actions github-actions Bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label May 14, 2024
@jcfranco jcfranco marked this pull request as ready for review May 14, 2024 00:13
@jcfranco jcfranco requested a review from a team as a code owner May 14, 2024 00:13
@jcfranco jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label May 14, 2024
benelan
benelan approved these changes May 14, 2024
View reviewed changes
Copy link
Copy Markdown
Contributor

@benelan benelan left a comment

Choose a reason for hiding this comment

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

LGTM!

macandcheese
macandcheese approved these changes May 14, 2024
View reviewed changes
Copy link
Copy Markdown
Contributor

@macandcheese macandcheese left a comment

Choose a reason for hiding this comment

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

Awesome !

Comment thread packages/calcite-components/src/utils/dom.ts
return children.indexOf(a) < children.indexOf(b);
}

/**
Copy link
Copy Markdown
Contributor

@macandcheese macandcheese May 14, 2024

Choose a reason for hiding this comment

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

🎈

@jcfranco
Copy link
Copy Markdown
Member Author

jcfranco commented May 14, 2024

E2E test added!

@jcfranco jcfranco added skip visual snapshots Pull requests that do not need visual regression testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels May 14, 2024
@jcfranco jcfranco merged commit 6bf7b74 into hotfix May 14, 2024
@jcfranco jcfranco deleted the jcfranco/9232-fix-carousel-slide-animation branch May 14, 2024 07:02
@calcite-admin calcite-admin mentioned this pull request May 11, 2024
Merged
geospatialem pushed a commit that referenced this pull request May 14, 2024
@calcite-admin
chore: release hotfix (#9308)
d1f9381 
🤖 I have created a release *beep* *boop*
---


<details><summary>@esri/calcite-components: 2.8.1</summary>

##
[2.8.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.8.0...@esri/calcite-components@2.8.1)
(2024-05-14)


### Bug Fixes

* Add type-fest as dependency due to build error
([3819688](3819688))
* **carousel:** Animate items with the same direction
([#9325](#9325))
([6bf7b74](6bf7b74))
* **input, input-number, input-text:** Restore `autofocus`,
`enter-key-mode` and `input-mode` attributes
([#9245](#9245))
([#9306](#9306))
([0498c6e](0498c6e))
* **list-item:** Decrease horizontal spacing between selection icon and
content
([#9304](#9304))
([0e828b6](0e828b6))
</details>

<details><summary>@esri/calcite-components-angular: 2.8.1</summary>

##
[2.8.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.8.0...@esri/calcite-components-angular@2.8.1)
(2024-05-14)


### Miscellaneous Chores

* **@esri/calcite-components-angular:** Synchronize components versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from ^2.8.1-hotfix.0 to ^2.8.1
</details>

<details><summary>@esri/calcite-components-react: 2.8.1</summary>

##
[2.8.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.8.0...@esri/calcite-components-react@2.8.1)
(2024-05-14)


### Miscellaneous Chores

* **@esri/calcite-components-react:** Synchronize components versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from ^2.8.1-hotfix.0 to ^2.8.1
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).
benelan pushed a commit that referenced this pull request May 14, 2024
@jcfranco @benelan
fix(carousel): animate items with the same direction (#9325)
aab0336 
**Related Issue:** #9232

## Summary

Updates carousel to wait for item animations before each slide.

**Note**: I'll submit a follow-up PR to refactor
[`openCloseComponent.onToggleOpenCloseComponent`](https://github.com/Esri/calcite-design-system/blob/main/packages/calcite-components/src/utils/openCloseComponent.ts#L91)
to use the same DOM util as carousel.
benelan pushed a commit that referenced this pull request May 14, 2024
@calcite-admin @benelan
chore: release hotfix (#9308)
3a4f5ed 
🤖 I have created a release *beep* *boop*
---

<details><summary>@esri/calcite-components: 2.8.1</summary>

[2.8.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.8.0...@esri/calcite-components@2.8.1)
(2024-05-14)

* Add type-fest as dependency due to build error
([3819688](3819688))
* **carousel:** Animate items with the same direction
([#9325](#9325))
([6bf7b74](6bf7b74))
* **input, input-number, input-text:** Restore `autofocus`,
`enter-key-mode` and `input-mode` attributes
([#9245](#9245))
([#9306](#9306))
([0498c6e](0498c6e))
* **list-item:** Decrease horizontal spacing between selection icon and
content
([#9304](#9304))
([0e828b6](0e828b6))
</details>

<details><summary>@esri/calcite-components-angular: 2.8.1</summary>

[2.8.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.8.0...@esri/calcite-components-angular@2.8.1)
(2024-05-14)

* **@esri/calcite-components-angular:** Synchronize components versions

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from ^2.8.1-hotfix.0 to ^2.8.1
</details>

<details><summary>@esri/calcite-components-react: 2.8.1</summary>

[2.8.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.8.0...@esri/calcite-components-react@2.8.1)
(2024-05-14)

* **@esri/calcite-components-react:** Synchronize components versions

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from ^2.8.1-hotfix.0 to ^2.8.1
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).
@benelan benelan mentioned this pull request May 14, 2024
Merged
benelan added a commit that referenced this pull request May 14, 2024
@benelan @calcite-admin
chore: release hotfix (#9338)
3153012 
🤖 I have created a release *beep* *boop*
---

<details><summary>@esri/calcite-components: 2.8.1</summary>


[2.8.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.8.0...@esri/calcite-components@2.8.1)
(2024-05-14)

* Add type-fest as dependency due to build error
([3819688](3819688))
* **carousel:** Animate items with the same direction
([#9325](#9325))
([6bf7b74](6bf7b74))
* **input, input-number, input-text:** Restore `autofocus`,
`enter-key-mode` and `input-mode` attributes
([#9245](#9245))
([#9306](#9306))
([0498c6e](0498c6e))
* **list-item:** Decrease horizontal spacing between selection icon and
content
([#9304](#9304))
([0e828b6](0e828b6))
</details>

<details><summary>@esri/calcite-components-angular: 2.8.1</summary>


[2.8.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.8.0...@esri/calcite-components-angular@2.8.1)
(2024-05-14)

* **@esri/calcite-components-angular:** Synchronize components versions

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from ^2.8.1-hotfix.0 to ^2.8.1
</details>

<details><summary>@esri/calcite-components-react: 2.8.1</summary>


[2.8.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.8.0...@esri/calcite-components-react@2.8.1)
(2024-05-14)

* **@esri/calcite-components-react:** Synchronize components versions

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from ^2.8.1-hotfix.0 to ^2.8.1
</details>

---
This PR was generated with
[ReleasePlease](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

Co-authored-by: Calcite Admin <calcite-admin@esri.com>
@jcfranco jcfranco mentioned this pull request May 14, 2024
Merged
@calcite-admin calcite-admin mentioned this pull request May 28, 2024
Merged
jcfranco added a commit that referenced this pull request Jun 7, 2024
@jcfranco
refactor(dom): consolidate transition/animation waiting utils (#9341)
bb45bdb 
**Related Issue:** N/A

## Summary

Stems from
#9325 (comment).

Consolidates transition/animation waiting logic and adds
`whenTransitionDone` to DOM utils to complement `whenAnimationDone`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@macandcheese macandcheese macandcheese approved these changes

+1 more reviewer

@benelan benelan benelan approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@jcfranco jcfranco

Labels

bug Bug reports for broken functionality. Issues should include a reproduction of the bug. skip visual snapshots Pull requests that do not need visual regression testing.

Projects

None yet

Milestone

2024-05-14 - May maintenance release

Development

Successfully merging this pull request may close these issues.

4 participants

@jcfranco @macandcheese @benelan @geospatialem