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

feat: maintain page position for clicked grouped tabs #5618

Merged

Conversation

Shrugsy
Copy link
Contributor

@Shrugsy Shrugsy commented Sep 26, 2021

Breaking changes

  • Theme/swizzle: replace import useScrollPosition from '@theme/hooks/useScrollPosition'; by import {useScrollPosition} from '@docusaurus/theme-common';

Motivation

Attempts to address issues such as #3728

When using tab groups for content with significantly different heights in each group, switching between the tabs can cause the page content to appear to jump around.

We use this feature on the Redux Toolkit docs, with the intent to begin using it for the core Redux docs shortly. We use it to show Typescript and Javascript snippets in separate tab groups, and are affected by this as often the Typescript snippet will contain extra lines compared to the Javascript snippets.

e.g. switch between the typescript & javascript tabs in the snippet here and observe the page shift: https://redux-toolkit.js.org/rtk-query/usage/cache-behavior#re-fetching-on-network-reconnection-with-refetchonreconnect

My understanding is that #4209 was introduced to alleviate some of the symptoms, but we still find it to have a jarring effect.

The goal here is to replace the implementation of #4209 by maintaining the position of the clicked tab completely.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

  • Alter the snippets on the local copy of the docusaurus site under the syncing tab choices section such that the groups have noticeably different snippet heights
  • Toggle between tabs and observe the behaviour
before after
grouped-tabs-demo-before grouped-tabs-demo-after

As shown above:

  • before: the shifting content is jarring and disorienting when toggling between tabs
  • after: maintaining the position relative to the viewport of the tab that was clicked avoids the disorienting behaviour

Related PRs

Previous iteration which is removed as part of this PR: #4209

@netlify
Copy link

netlify bot commented Sep 26, 2021

✔️ [V2]

🔨 Explore the source changes: 105370d

🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/616710458cd59800071d122b

😎 Browse the preview: https://deploy-preview-5618--docusaurus-2.netlify.app

@github-actions
Copy link

github-actions bot commented Sep 26, 2021

⚡️ Lighthouse report for the changes in this PR:

Category Score
🟢 Performance 94
🟢 Accessibility 98
🟢 Best practices 100
🟢 SEO 100
🟢 PWA 95

Lighthouse ran on https://deploy-preview-5618--docusaurus-2.netlify.app/

Copy link
Collaborator

@slorber slorber left a comment

Choose a reason for hiding this comment

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

Thanks

I don't under how this works yet, but it seems to work in a case we have on Docusaurus site:

Will need more time to test/review this properly but this seems pretty good.

Can you move all the code that is not coupled to the classic theme / Infima to the theme-common package? This will be useful in the future to provide multiple themes, all using this tab behavior. (file name doesn't matter much as long as the export names are good)

Copy link
Collaborator

@slorber slorber left a comment

Choose a reason for hiding this comment

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

Refactored a bit the code to make things more explicit and more "colocated".

Also moving things in theme-common for future reusability

@slorber slorber added pr: new feature This PR adds a new API or behavior. pr: breaking change Existing sites may not build successfully in the new version. Description contains more details. labels Oct 8, 2021
@Shrugsy
Copy link
Contributor Author

Shrugsy commented Oct 8, 2021

Refactored a bit the code to make things more explicit and more "colocated".

Also moving things in theme-common for future reusability

Thanks @slorber

Please let me know if there is anything else I can help with for this PR

@slorber
Copy link
Collaborator

slorber commented Oct 8, 2021

Hey @Shrugsy , I've refactored a bit more the code to encapsulate better this logic under a blockElementScrollPositionUntilNextRender method

It seems to work as before, without any magic value 150 or setTimeout.

I'll do some additional cleanup and test on multiple browsers before merging this for the next release

Let me know if you see any issue

@Shrugsy
Copy link
Contributor Author

Shrugsy commented Oct 10, 2021

Looks good @slorber, I can't see any issues with it

@slorber
Copy link
Collaborator

slorber commented Oct 13, 2021

LGTM 👍 seems to work on all major browsers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: breaking change Existing sites may not build successfully in the new version. Description contains more details. pr: new feature This PR adds a new API or behavior.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants