-
Notifications
You must be signed in to change notification settings - Fork 4k
Add language selector to site header #3622
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
Conversation
🦋 Changeset detectedLatest commit: 564a2b7 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 |
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
Simplifies flex layout & positioning
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
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.
Pull Request Overview
This PR adds language selector functionality to the site header by reworking the variant system to distinguish between generic variants (shown in TOC) and translation variants (shown in header).
- Replaces
isMultiVariantsboolean with a more comprehensivewithVariants: "generic" | "translations" | undefinedproperty - Positions translation variants in the site header (either next to sections or header links) while keeping generic variants in the TOC
- Refactors
SpacesDropdownto useButtoncomponent and adds a newTranslationsDropdownwith globe icon
Reviewed Changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/gitbook/tailwind.config.ts | Comments out CSS variant for page-no-toc with variants |
| packages/gitbook/src/components/primitives/styles.ts | Adds button state styling for open dropdowns |
| packages/gitbook/src/components/primitives/DropdownMenu.tsx | Removes margin from dropdown chevron |
| packages/gitbook/src/components/primitives/Button.tsx | Exports ButtonProps type and adds styling classes for button icons |
| packages/gitbook/src/components/TableOfContents/TableOfContents.tsx | Updates CSS positioning for outline elements |
| packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx | Implements withVariants logic and updates variant positioning |
| packages/gitbook/src/components/RootLayout/globals.css | Adds site-background utility class |
| packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx | Uses new site-background utility class |
| packages/gitbook/src/components/Header/SpacesDropdown.tsx | Refactors to use Button component and adds TranslationsDropdown |
| packages/gitbook/src/components/Header/HeaderLink.tsx | Adds gap spacing to header link items |
| packages/gitbook/src/components/Header/Header.tsx | Integrates translation variants in header layout |
| .changeset/four-roses-live.md | Adds changeset for the feature |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
Uh oh!
There was an error while loading. Please reload this page.
Rework the
isMultiVariantsproperty into a more comprehensivewithVariants: "generic" | "translations" | undefined. This way simple checks can still be made against it (useful for search) but more specific checks on the type of variants can also be made.
Screenshot 2025年09月04日 at 15 09 44Genericvariants are now always shown inside the TOC. This reverts the behaviour of Consistently show variant selector in section bar if site has sections #3349 .Translationsvariants are shown in the header, either to the right of sections (if there are sections) or to the right of header links.Screenshot 2025年09月04日 at 15 11 08 Screenshot 2025年09月04日 at 15 12 14
Restyle the
SpacesDropdownto use a<Button>instead of a custom component.Translationsvariants get aSpacesDropdownwith a globe 🌐 icon prepended to it. If the variant (= translation) starts with an emoji, we don't show the globe icon as we assume there's a flag to represent the language instead.Fixes RND-8021, RND-5840