fix(docs): light API Reference at the bottom of every component page - #158
Merged
Conversation
The table of contents' bottom-of-page rule picked the first section title still on screen. In a tall window on a short page, Usage's title is still visible at the bottom, so Usage stayed lit and API Reference never did. Measured at 1329px tall, 11 of 15 component pages missed. Once a page that scrolls can scroll no further, the last section is now current. The rule moves out of the hook into current-section.ts as a pure function over the measurements, with tests in plain Node. The hook only reads the DOM once a frame and hands the numbers over. The chosen-section hold from the menu stays as designed and the hook comment says why: after this fix it can only pin a non-last row at the bottom when a menu jump landed there.
Resting rules draw at 18px and the current section's at 24px, so the current section reads by shape as well as by color. Both changes ease at the 100ms step, the width on a duration token and the color on a fade token, so Reduce Motion snaps the width and keeps the fade. Animating width runs layout, which the site otherwise avoids. The stack is three 2px rules in a fixed-width column that nothing else depends on, the same trade the props table's panel makes on height. animation.md records the exception beside that one.
Contributor
|
React Doctor found no new issues. 🎉 Reviewed by React Doctor for commit |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Advanced Run ID: 📒 Files selected for processing (5)
Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review. 📝 SummarySummary by CodeRabbit
WalkthroughThe change extracts page table of contents section selection into a tested helper. It adds bottom-of-page and chosen-section handling, integrates the helper into the hook, and animates active line width with updated documentation. ChangesPage table of contents
Priority: ⬇️ Low Estimated code review effort: 3 (Moderate) | ~20 minutes Merge Risk: ⚪ Minimal · up to The page table of contents now highlights the final section at the end of scrollable pages and adds an animated active rule. The behavior is covered by focused tests and is ready to merge. Sequence Diagram(s)sequenceDiagram
participant useCurrentSection
participant pickCurrentSection
participant chosenRef
participant PageTocLine
useCurrentSection->>pickCurrentSection: pass section and scroll measurements
pickCurrentSection->>chosenRef: evaluate chosen section visibility
pickCurrentSection-->>useCurrentSection: return index and held
useCurrentSection->>chosenRef: clear chosen index when held is false
useCurrentSection->>PageTocLine: update active section
PageTocLine->>PageTocLine: transition width and background color
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
Warning Some tools did not complete. Review the errors below. 🔧 ESLint
ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration. Comment |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
Scrolling to the bottom of a component page sometimes left Usage lit in the table of contents instead of API Reference (SHA-131). It looked intermittent because it depends on window height, not timing.
What changes
The bottom rule picks the last section
useCurrentSectiontreated the first section title still on screen as current once the page could scroll no further. On a short page in a tall window, Usage's title is still visible at the bottom, so Usage won. Measured with a Playwright probe against every component page, 7 of 15 missed at 1100px tall and 11 of 15 at 1329px. All 15 passed at 800px, which is why it came and went. The rule now lights the last section at the bottom of a page that scrolls. A page that fits its window has no bottom to reach and keeps the reading-line behavior, so it still lights the component on load.The rule is a pure function with tests
The three rules move out of the hook into
current-section.ts, a function over the measured tops and scroll geometry, so they run in the docs Vitest with no DOM. Seven cases cover the Grain measurement that reproduced the bug, the fits-the-window guard, the fractional-scroll tolerance, and the chosen-section hold. The hook is now a measurement loop that reads the DOM once a frame.The hold on a section chosen from the menu stays as designed. After this fix it pins a non-last row at the bottom only when the jump itself landed there, and the hook comment says why releasing it on the next wheel nudge would be worse.
The active rule grows to 24px
Resting rules are 18px and the current one is 24px, eased at the 100ms step alongside the existing color change. Width rides a duration token and color a fade token, so Reduce Motion snaps the width and keeps the fade. Animating width runs layout, the same trade the props table's panel makes on height, and
docs/development/animation.mdrecords the exception beside that one.