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: auto scroll for tabs and accordion on opening #2288

Merged
merged 1 commit into from
Jul 30, 2024

Conversation

Soare-Robert-Daniel
Copy link
Contributor

@Soare-Robert-Daniel Soare-Robert-Daniel commented Jul 29, 2024

Closes https://github.com/Codeinwp/otter-internals/issues/193

Summary

If the tab that is going to be open is not visible after the others are closed, scroll to it.

Screenshots

Before

2024-07-29_14-57-49.mp4

After

2024-07-29_14-59-24.mp4

Test instructions

  1. Insert some huge paragraphs.
  2. In the middle add an accordion and a tab block
  3. Fill him also with huge content.
  4. When you open a tab, it should make sure that the beginning is always visible like in the video

Checklist before the final review

  • Included E2E or unit tests for the changes in this PR.
  • Visual elements are not affected by independent changes.
  • It is at least compatible with the minimum WordPress version.
  • It loads additional script in frontend only if it is required.
  • Does not impact the Core Web Vitals.
  • In case of deprecation, old blocks are safely migrated.
  • It is usable in Widgets and FSE.
  • Copy/Paste is working if the attributes are modified.
  • PR is following the best practices

@Soare-Robert-Daniel Soare-Robert-Daniel self-assigned this Jul 29, 2024
@Soare-Robert-Daniel Soare-Robert-Daniel added the pr-checklist-skip Allow this Pull Request to skip checklist. label Jul 29, 2024
@Soare-Robert-Daniel Soare-Robert-Daniel marked this pull request as ready for review July 29, 2024 12:07
@pirate-bot
Copy link
Contributor

Bundle Size Diff

Package Old Size New Size Diff
Animations 264.29 KB 264.29 KB 0 B (0.00%)
Blocks 1.52 MB 1.52 MB 585 B (0.04%)
CSS 93.54 KB 93.54 KB 0 B (0.00%)
Dashboard 195.83 KB 195.83 KB 0 B (0.00%)
Onboarding 153.95 KB 153.95 KB 0 B (0.00%)
Export Import 91.01 KB 91.01 KB 0 B (0.00%)
Pro 362.24 KB 362.24 KB 0 B (0.00%)

@pirate-bot
Copy link
Contributor

E2E Tests

Playwright Test Status:

Performance Results serverResponse: 244.45, firstPaint: 149.95, domContentLoaded: 1578.9, loaded: 1579.45, firstContentfulPaint: 3527, firstBlock: 6824.8, type: 13.83, minType: 11.43, maxType: 17.35, typeContainer: 9.31, minTypeContainer: 7.45, maxTypeContainer: 12.5, focus: 33.71, minFocus: 28.38, maxFocus: 39.7, inserterOpen: 24.65, minInserterOpen: 21.17, maxInserterOpen: 42.11, inserterSearch: 0.73, minInserterSearch: 0.62, maxInserterSearch: 0.84, inserterHover: 4.39, minInserterHover: 3.71, maxInserterHover: 5.5, listViewOpen: 148.55, minListViewOpen: 132.71, maxListViewOpen: 170.55

@Soare-Robert-Daniel Soare-Robert-Daniel merged commit feae8a5 into development Jul 30, 2024
29 of 30 checks passed
@Soare-Robert-Daniel Soare-Robert-Daniel deleted the fix/accordion-layout-shift branch July 30, 2024 07:02
@pirate-bot
Copy link
Contributor

🎉 This PR is included in version 3.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

@pirate-bot pirate-bot added released Indicate that an issue has been resolved and released in a particular version of the product. pr-checklist-complete The Pull Request checklist is complete. (automatic label) labels Aug 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pr-checklist-complete The Pull Request checklist is complete. (automatic label) pr-checklist-skip Allow this Pull Request to skip checklist. released Indicate that an issue has been resolved and released in a particular version of the product.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants