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

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

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

Conversation

mizgaionutalexandru
Copy link
Contributor

@mizgaionutalexandru mizgaionutalexandru commented Nov 15, 2024

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
  • Did it pass in Desktop?

  • Did it pass in Mobile?

  • Did it pass in iPad?

Screenshots (if appropriate)

Before:

before.mov

After:

after.mov

Types of changes

  • 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

  • I have signed the Adobe Open Source CLA.
  • 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.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.
  • 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.

Copy link

github-actions bot commented Nov 15, 2024

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.

Copy link

github-actions bot commented Nov 15, 2024

Lighthouse scores

Category Latest (report) Main (report) Branch (report)
Performance 0.99 0.98 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 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 252.343 kB 236.977 kB 236.573 kB 🏆
Scripts 62.316 kB 54.466 kB 54.26 kB 🏆
Stylesheet 53.895 kB 48.03 kB 47.90 kB 🏆
Document 6.24 kB 5.498 kB 5.466 kB 🏆
Font 126.878 kB 126.632 kB 126.596 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

Copy link

github-actions bot commented Nov 15, 2024

Tachometer results

Chrome

contextual-help permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 944 kB 55.05ms - 56.77ms - faster ✔
5% - 9%
2.90ms - 5.45ms
branch 898 kB 59.14ms - 61.03ms slower ❌
5% - 10%
2.90ms - 5.45ms
-

dialog permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 802 kB 81.53ms - 82.33ms - faster ✔
0% - 1%
0.14ms - 1.12ms
branch 759 kB 82.27ms - 82.85ms slower ❌
0% - 1%
0.14ms - 1.12ms
-
Firefox

contextual-help permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 944 kB 113.71ms - 120.17ms - faster ✔
0% - 7%
0.53ms - 9.07ms
branch 898 kB 118.96ms - 124.52ms slower ❌
0% - 8%
0.53ms - 9.07ms
-

dialog permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 802 kB 130.21ms - 138.99ms - unsure 🔍
-4% - +4%
-5.75ms - +6.03ms
branch 759 kB 130.54ms - 138.38ms unsure 🔍
-4% - +4%
-6.03ms - +5.75ms
-

@coveralls
Copy link
Collaborator

coveralls commented Nov 15, 2024

Pull Request Test Coverage Report for Build 11887314669

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.181%

Changes Missing Coverage Covered Lines Changed/Added Lines %
packages/dialog/src/DialogBase.ts 21 26 80.77%
Totals Coverage Status
Change from base Build 11859867829: -0.01%
Covered Lines: 32346
Relevant Lines: 32768

💛 - Coveralls

@mizgaionutalexandru mizgaionutalexandru marked this pull request as ready for review November 15, 2024 15:59
@mizgaionutalexandru mizgaionutalexandru requested a review from a team as a code owner November 15, 2024 15:59
import { alertDestructive } from './dialog.stories.js';
import { portrait } from './images.js';
import { disabledButtonDecorator } from './index.js';

const withOverlayDecorator = (story: () => TemplateResult): TemplateResult => {
Copy link
Contributor

Choose a reason for hiding this comment

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

This decorator needs to be initialized. This will create problems in VRT tests

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants