-
-
Notifications
You must be signed in to change notification settings - Fork 8.7k
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
feat: maintain page position for clicked grouped tabs #5618
Conversation
✔️ [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 |
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-5618--docusaurus-2.netlify.app/ |
There was a problem hiding this 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:
- bad: https://docusaurus.io/docs/blog/#global-authors
- good: https://deploy-preview-5618--docusaurus-2.netlify.app/docs/blog/#global-authors
- good: http://localhost:3000/docs/blog#global-authors
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)
packages/docusaurus-theme-classic/src/theme/ScrollMonitorProvider/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/hooks/useScrollPosition.ts
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/ScrollMonitorProvider/index.tsx
Outdated
Show resolved
Hide resolved
# Conflicts: # packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
There was a problem hiding this 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
packages/docusaurus-theme-classic/src/theme/ScrollMonitorProvider/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/ScrollMonitorProvider/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/hooks/useScrollPosition.ts
Outdated
Show resolved
Hide resolved
Thanks @slorber Please let me know if there is anything else I can help with for this PR |
Hey @Shrugsy , I've refactored a bit more the code to encapsulate better this logic under a It seems to work as before, without any magic value 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 |
Looks good @slorber, I can't see any issues with it |
LGTM 👍 seems to work on all major browsers |
Breaking changes
import useScrollPosition from '@theme/hooks/useScrollPosition';
byimport {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
andJavascript
snippets in separate tab groups, and are affected by this as often theTypescript
snippet will contain extra lines compared to theJavascript
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-refetchonreconnectMy 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
As shown above:
Related PRs
Previous iteration which is removed as part of this PR: #4209