fix(dialog): fade-out animation when lazy loaded on popover overlays

mizgaionutalexandru commented 1 week ago

Description

This PR updates the moment of the close event dispatch from the DialogBase to happen after all the component is done animating. If the transition duration is 0, the event will dispatch instantly as before.

Related issue(s)

N/A

Motivation and context

Using a DialogBase inside a lazy-loaded overlay content would not always allow for the fade-out animations to complete. Unsure why this issue happens only with the popover overlay, but this fix seems more in line with the documentation stating that the close event "announces that the dialog has been closed".

How has this been tested?

[ ] Test case 1
1. Go to the lazy loaded DialogBase storybook
2. Click on the button to open the dialog
3. Click the button inside the dialog to close it
4. Observe that the animation happens smoothly
5. Repeat
[ ] Test case 2
1. Go to the lazy loaded DialogBase storybook
2. Activate the "Reduce Motion" switch from the storybook decorator
3. Click on the button to open the dialog
4. Click the button inside the dialog to close it
5. Observe that the the dialog closes instantly
6. Repeat
[x] Did it pass in Desktop?
[x] Did it pass in Mobile?
[x] Did it pass in iPad?

Screenshots (if appropriate)

Before:

https://github.com/user-attachments/assets/6b25d1bd-f382-4fe0-86b3-d36c48e295b1

After:

https://github.com/user-attachments/assets/cdddf104-eb57-48f7-ab5f-8aeb612b41f6

Types of changes

[x] Bug fix (non-breaking change which fixes an issue)
[ ] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to change)
[ ] Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

[x] I have signed the Adobe Open Source CLA.
[x] My code follows the code style of this project.
[ ] If my change required a change to the documentation, I have updated the documentation in this pull request.
[x] I have read the CONTRIBUTING document.
[ ] I have added tests to cover my changes.
[x] All new and existing tests passed.
[x] I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

github-actions[bot] commented 1 week ago

Branch preview

Review the following VRT differences

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file. If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

github-actions[bot] commented 1 week ago

Lighthouse scores

Category	Latest (report)	Main (report)	Branch (report)
Performance	0.99	0.97	0.98
Accessibility	1	1	1
Best Practices	1	1	1
SEO	1	0.92	0.92
PWA	1	1	1

What is this?

[Lighthouse](https://github.com/GoogleChrome/lighthouse) scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but *note that the SEO scores on Netlify URLs are artifically constrained to 0.92.*

Transfer Size

Category	Latest	Main	Branch
Total	250.276 kB	236.655 kB	236.551 kB 🏆
Scripts	60.614 kB	54.294 kB	54.128 kB 🏆
Stylesheet	53.844 kB	47.901 kB 🏆	48.003 kB
Document	6.214 kB	5.468 kB	5.468 kB
Font	126.782 kB	126.641 kB	126.604 kB 🏆

Request Count

Category	Latest	Main	Branch
Total	52	52	52
Scripts	41	41	41
Stylesheet	5	5	5
Document	1	1	1
Font	2	2	2

github-actions[bot] commented 1 week ago

Tachometer results

Chrome

## contextual-help [_permalink_](#user-content-contextual-help) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 944 kB | 52.85ms - 55.16ms | - | faster ✔
5% - 11%
2.88ms - 6.32ms | | branch | 898 kB | 57.33ms - 59.88ms | slower ❌
5% - 12%
2.88ms - 6.32ms | - | ## dialog [_permalink_](#user-content-dialog) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 802 kB | 79.42ms - 79.96ms | - | faster ✔
1% - 3%
0.39ms - 2.40ms | | branch | 759 kB | 80.12ms - 82.05ms | slower ❌
0% - 3%
0.39ms - 2.40ms | - |

Firefox

## contextual-help [_permalink_](#user-content-contextual-help) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 944 kB | 116.57ms - 122.31ms | - | faster ✔
1% - 7%
1.01ms - 9.31ms | | branch | 898 kB | 121.60ms - 127.60ms | slower ❌
1% - 8%
1.01ms - 9.31ms | - | ## dialog [_permalink_](#user-content-dialog) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 802 kB | 131.25ms - 141.15ms | - | unsure 🔍
-6% - +4%
-8.18ms - +5.06ms | | branch | 759 kB | 133.35ms - 142.17ms | unsure 🔍
-4% - +6%
-5.06ms - +8.18ms | - |

coveralls commented 1 week ago

Pull Request Test Coverage Report for Build 11907435888

Details

21 of 26 (80.77%) changed or added relevant lines in 1 file are covered.
No unchanged relevant lines lost coverage.
Overall coverage decreased (-0.01%) to 98.183%

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/dialog/src/DialogBase.ts	21	26	80.77%
<!--	Total:	21	26	80.77%	-->

Totals
Change from base Build 11859867829:	-0.01%
Covered Lines:	32346
Relevant Lines:	32768

💛 - Coveralls

Rajdeepc commented 6 days ago

Good work here @mizgaionutalexandru. Let me know if we can land this now?

adobe / spectrum-web-components