Add SideSheet component, refactor TOC and AIChat to use it #3835
+631
−485
Conversation
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
🦋 Changeset detectedLatest commit: 1586444 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
zenoachtig
had a problem deploying
to
2v-preview
GitHub Actions
Failure
zenoachtig
had a problem deploying
to
2c-preview
GitHub Actions
Failure
(not enabled for now)
zenoachtig
had a problem deploying
to
2v-preview
GitHub Actions
Failure
Contributor
There was a problem hiding this comment.
Pull request overview
This pull request introduces a new reusable SideSheet component to standardize the behavior of slide-in panels and refactors the Table of Contents (TOC) and AI Chat to use it. The PR also improves the ScrollContainer component API and adds comprehensive support for devices with notches using safe-area-insets.
Key Changes
- Adds a new
SideSheetcomponent with both controlled and uncontrolled modes, supporting modal behavior with scrim and close button - Refactors
ScrollContainerto accept query selectors instead of just IDs for active elements, and restructures the API with leading/trailing configuration objects - Consolidates layout logic for TOC's inner header into
SpaceLayoutand improves mobile/desktop responsiveness
Reviewed changes
Copilot reviewed 29 out of 29 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/gitbook/src/components/primitives/SideSheet.tsx | New component providing reusable slide-in panel functionality with modal support, animations, and dual control modes |
| packages/gitbook/src/components/primitives/ScrollContainer.tsx | Enhanced to support query selectors for active items and restructured leading/trailing edge configuration |
| packages/gitbook/src/components/TableOfContents/TableOfContents.tsx | Refactored to use SideSheet component instead of custom positioning, integrated with ScrollContainer |
| packages/gitbook/src/components/TableOfContents/TOCScroller.tsx | Removed custom scroll context in favor of standard ScrollContainer |
| packages/gitbook/src/components/TableOfContents/Trademark.tsx | Simplified from Link-based to Button-based component, removed complex wrapper styling |
| packages/gitbook/src/components/AIChat/AIChat.tsx | Refactored to use SideSheet for consistent modal behavior and positioning |
| packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx | Consolidated TOC header and inner header layout logic into a single location |
| packages/gitbook/src/components/layout.ts | Added safe-area-inset support with max() functions for notched devices |
| packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx | Added separate htmlClassName and bodyClassName props for better class management |
| packages/gitbook/tailwind.config.ts | Updated animations to use 'display: inherit' instead of 'block', added sheet-open variant, adjusted timing from 250ms to 300ms |
| packages/icons/src/IconsProvider.tsx | Added defensive check to ensure icon parameter is always a string |
| packages/gitbook/src/components/primitives/HoverCard.tsx | Increased z-index from 40 to 50 to appear above side sheet scrim |
| packages/gitbook/src/components/Header/HeaderMobileMenu.tsx | Simplified by removing scroll tracking and active state management |
| packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx | Wrapped content in additional div to fix positioning with safe-area-insets |
| packages/gitbook/src/components/SiteLayout/SiteLayout.tsx | Added viewportFit: 'cover' to viewport metadata for notch support |
| packages/gitbook/src/components/Header/Header.tsx | Added top padding using safe-area-inset-top |
| packages/gitbook/src/components/Cookies/CookiesToast.tsx | Updated positioning to use safe-area-insets |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
packages/gitbook/src/components/TableOfContents/TableOfContents.tsx
Outdated
Show resolved
Hide resolved
packages/gitbook/src/components/TableOfContents/TableOfContents.tsx
Outdated
Show resolved
Hide resolved
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This pull request introduces a new
SideSheetcomponent and refactors the TOC and AIChat to use it.SideSheet component
SideSheetcomponent, responsible for rendering a component in a fixed sidebar (with optional backdrop) on the left or right of the screen. It can be controlled with anopenprop (needed forAIChat) or watch for changes on the body (needed forTableOfContents).TableOfContentsandAIChatto useSideSheetScrollContainer component
TableOfContentsto useScrollContainer, removed the customTOCScrollContainerin favour of the standard component we use elsewhere. This gives us goodies like faded edges and scroll buttons, in addition to standardising the component.activeprop onScrollContainerto take any query selector instead of an ID.Other layout updates
innerHeaderto live in one place, namelySpaceLayout, instead of splitting across two filesHeaderMobileMenuto no longer haveCustomizationRootLayout,SiteDynamicLayout,SiteStaticLayout) to accept both ahtmlClassNameandbodyClassName, needed to set some sheet-related classes that only work onhtmlorbody.viewportFit: coverto the viewport meta tag.HeaderMobileMenubutton by removing scroll tracking and state management now it's always occluded by a sidesheet.AnnouncementBannerwhen using safe-area-insets