From b53cb1d2b3ae8007288cc3535afb6fe2925501c9 Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Wed, 14 Jan 2026 13:07:45 +0100 Subject: [PATCH 1/3] Align styling of PageLinkItem and PageDocumentItem (#3903) --- .changeset/funky-actors-lie.md | 5 +++ .../TableOfContents/PageDocumentItem.tsx | 10 +---- .../TableOfContents/PageLinkItem.tsx | 37 +++++++++++-------- .../TableOfContents/ToggleableLinkItem.tsx | 3 +- .../src/components/TableOfContents/styles.ts | 22 +---------- .../components/primitives/StyleProvider.tsx | 2 - 6 files changed, 31 insertions(+), 48 deletions(-) create mode 100644 .changeset/funky-actors-lie.md diff --git a/.changeset/funky-actors-lie.md b/.changeset/funky-actors-lie.md new file mode 100644 index 000000000..1f437a4f0 --- /dev/null +++ b/.changeset/funky-actors-lie.md @@ -0,0 +1,5 @@ +--- +"gitbook": patch +--- + +Align styling of PageLinkItem and PageDocumentItem diff --git a/packages/gitbook/src/components/TableOfContents/PageDocumentItem.tsx b/packages/gitbook/src/components/TableOfContents/PageDocumentItem.tsx index 13b398887..7bd05e409 100644 --- a/packages/gitbook/src/components/TableOfContents/PageDocumentItem.tsx +++ b/packages/gitbook/src/components/TableOfContents/PageDocumentItem.tsx @@ -38,14 +38,8 @@ export function PageDocumentItem(props: { page: ClientTOCPageDocument }) { ) : null } > - {page.emoji || page.icon ? ( - - - {page.title} - - ) : ( - page.title - )} + + {page.title} ); diff --git a/packages/gitbook/src/components/TableOfContents/PageLinkItem.tsx b/packages/gitbook/src/components/TableOfContents/PageLinkItem.tsx index bf14adf9d..04d14ef94 100644 --- a/packages/gitbook/src/components/TableOfContents/PageLinkItem.tsx +++ b/packages/gitbook/src/components/TableOfContents/PageLinkItem.tsx @@ -12,11 +12,13 @@ import { TOCPageIcon } from './TOCPageIcon'; export function PageLinkItem(props: { page: ClientTOCPageLink }) { const { page } = props; + const isExternal = page.target.kind === 'url'; + return (
  • {page.title} - path]:transition-opacity', - '[&>path]:opacity-[0.4]', - 'group-hover:[&>path]:opacity-11' - )} - /> + {isExternal ? ( + + ) : null}
    • ); diff --git a/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx b/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx index 4d222da04..b2843aca8 100644 --- a/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx +++ b/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx @@ -142,6 +142,7 @@ function Toggler(props: { return ( diff --git a/packages/gitbook/src/components/TableOfContents/styles.ts b/packages/gitbook/src/components/TableOfContents/styles.ts index 8f30c0f99..e50bc9e11 100644 --- a/packages/gitbook/src/components/TableOfContents/styles.ts +++ b/packages/gitbook/src/components/TableOfContents/styles.ts @@ -1,26 +1,6 @@ -export const PageLinkItemStyles = [ - 'flex', - 'justify-start', - 'items-center', - 'gap-3', - 'p-1.5', - 'pl-3', - 'text-sm', - 'transition-colors', - 'duration-100', - 'text-tint-strong/7', - 'rounded-md', - 'straight-corners:rounded-none', - 'circular-corners:rounded-xl', - 'before:content-none', - 'font-normal', - 'hover:bg-tint', - 'hover:text-tint-strong', -]; - export const ToggleableLinkItemStyles = [ 'group/toclink toclink relative transition-colors', - 'flex flex-row justify-between', + 'flex flex-row justify-start items-center gap-3', 'circular-corners:rounded-2xl rounded-md straight-corners:rounded-none p-1.5 pl-3', 'text-balance font-normal text-sm text-tint-strong/7 hover:bg-tint-hover hover:text-tint-strong contrast-more:text-tint-strong', 'contrast-more:hover:text-tint-strong contrast-more:hover:ring-1 contrast-more:hover:ring-tint-12', diff --git a/packages/gitbook/src/components/primitives/StyleProvider.tsx b/packages/gitbook/src/components/primitives/StyleProvider.tsx index a1e1b1fe0..61909fd7d 100644 --- a/packages/gitbook/src/components/primitives/StyleProvider.tsx +++ b/packages/gitbook/src/components/primitives/StyleProvider.tsx @@ -3,7 +3,6 @@ import type { ClassValue } from '@/lib/tailwind'; import { RecordCardStyles } from '../DocumentView/Table/styles'; import { - PageLinkItemStyles, ToggleableLinkItemActiveStyles, ToggleableLinkItemStyles, } from '../TableOfContents/styles'; @@ -14,7 +13,6 @@ const styles = { CardStyles, ButtonStyles, RecordCardStyles, - PageLinkItemStyles, ToggleableLinkItemStyles, ToggleableLinkItemActiveStyles, }; From a5ef44ab2ab95729762a06003fc21c05b2ff991a Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Wed, 14 Jan 2026 13:21:47 +0100 Subject: [PATCH 2/3] Better conditional display of page actions (#3900) Co-authored-by: Claire Chabas --- .changeset/grumpy-dogs-cough.md | 5 +++++ .../components/PageActions/PageActionsDropdown.tsx | 2 +- .../gitbook/src/components/PageBody/PageHeader.tsx | 11 +++++++++-- 3 files changed, 15 insertions(+), 3 deletions(-) create mode 100644 .changeset/grumpy-dogs-cough.md diff --git a/.changeset/grumpy-dogs-cough.md b/.changeset/grumpy-dogs-cough.md new file mode 100644 index 000000000..8165924af --- /dev/null +++ b/.changeset/grumpy-dogs-cough.md @@ -0,0 +1,5 @@ +--- +"gitbook": patch +--- + +Better conditional display of page actions diff --git a/packages/gitbook/src/components/PageActions/PageActionsDropdown.tsx b/packages/gitbook/src/components/PageActions/PageActionsDropdown.tsx index f2c66e641..f713d38ba 100644 --- a/packages/gitbook/src/components/PageActions/PageActionsDropdown.tsx +++ b/packages/gitbook/src/components/PageActions/PageActionsDropdown.tsx @@ -51,7 +51,7 @@ export function PageActionsDropdown(props: PageActionsDropdownProps) { return defaultAction || dropdownActions.length > 0 ? ( {defaultAction} - {dropdownActions.length > 0 ? ( + {!defaultAction || dropdownActions.length > 1 ? ( 0; + // Show page actions if *any* of the actions are enabled + const hasPageActions = [ + ...Object.values(context.customization.pageActions), + context.customization.pdf.enabled, + context.customization.git.showEditLink, + withRSSFeed, + ].some(Boolean); + return (
    - {page.layout.tableOfContents ? ( - // Show page actions if *any* of the actions are enabled + {page.layout.tableOfContents && hasPageActions ? ( Date: Wed, 14 Jan 2026 13:46:47 +0100 Subject: [PATCH 3/3] Standardise toggle chevrons across the app (#3904) --- .changeset/rare-ties-find.md | 5 ++ packages/gitbook/e2e/internal.spec.ts | 10 ++-- .../CodeBlock/ClientCodeBlock.tsx | 4 +- .../DocumentView/Expandable/Expandable.tsx | 7 +-- .../src/components/Header/HeaderLink.tsx | 7 ++- .../src/components/Header/HeaderLinkMore.tsx | 10 ++-- .../src/components/Header/SpacesDropdown.tsx | 6 +-- .../PageActions/PageActionsDropdown.tsx | 9 +--- .../components/Search/SearchScopeControl.tsx | 6 +-- .../SiteSections/SiteSectionList.tsx | 15 +++--- .../SiteSections/SiteSectionTabs.tsx | 4 +- .../TableOfContents/ToggleableLinkItem.tsx | 54 ++++++------------- .../components/primitives/DropdownMenu.tsx | 23 +------- .../components/primitives/ToggleChevron.tsx | 44 +++++++++++++++ .../src/components/primitives/index.ts | 1 + 15 files changed, 102 insertions(+), 103 deletions(-) create mode 100644 .changeset/rare-ties-find.md create mode 100644 packages/gitbook/src/components/primitives/ToggleChevron.tsx diff --git a/.changeset/rare-ties-find.md b/.changeset/rare-ties-find.md new file mode 100644 index 000000000..3c7de54c2 --- /dev/null +++ b/.changeset/rare-ties-find.md @@ -0,0 +1,5 @@ +--- +"gitbook": patch +--- + +Standardise toggle chevrons across the app diff --git a/packages/gitbook/e2e/internal.spec.ts b/packages/gitbook/e2e/internal.spec.ts index e3e1aa076..ad403bae4 100644 --- a/packages/gitbook/e2e/internal.spec.ts +++ b/packages/gitbook/e2e/internal.spec.ts @@ -273,10 +273,10 @@ const testCases: TestsCase[] = [ await expect(navigationLink).not.toBeVisible(); // Find and click the chevron element that is next to "Editor" in the TOC - // It is a span inside the link + // It is a button inside the link const editorChevron = page .getByRole('link', { name: 'Editor' }) - .locator('span'); + .locator('button'); await editorChevron.click(); // Verify "Navigation" link becomes visible after expansion @@ -295,10 +295,10 @@ const testCases: TestsCase[] = [ await expect(navigationLink).not.toBeVisible(); // Find and click the chevron element that is next to "Editor" in the TOC - // It is a span inside the link + // It is a button inside the link const editorChevron = page .getByRole('link', { name: 'Editor' }) - .locator('span'); + .locator('button'); await editorChevron.click(); // At this stage the link should still not be visible @@ -307,7 +307,7 @@ const testCases: TestsCase[] = [ // Then we click 'Content Structure' chevron to expand further const contentStructureChevron = page .getByRole('link', { name: 'Content Structure' }) - .locator('span'); + .locator('button'); await contentStructureChevron.click(); // Verify "Spaces" link becomes visible after expansion diff --git a/packages/gitbook/src/components/DocumentView/CodeBlock/ClientCodeBlock.tsx b/packages/gitbook/src/components/DocumentView/CodeBlock/ClientCodeBlock.tsx index b9d79be41..09219f191 100644 --- a/packages/gitbook/src/components/DocumentView/CodeBlock/ClientCodeBlock.tsx +++ b/packages/gitbook/src/components/DocumentView/CodeBlock/ClientCodeBlock.tsx @@ -6,7 +6,7 @@ import { useEffect, useId, useMemo, useRef, useState } from 'react'; import { useAdaptiveVisitor } from '@/components/Adaptive'; import { useInViewportListener } from '@/components/hooks/useInViewportListener'; import { useScrollListener } from '@/components/hooks/useScrollListener'; -import { Button } from '@/components/primitives'; +import { Button, ToggleChevron } from '@/components/primitives'; import { t, useLanguage } from '@/intl/client'; import { tcls } from '@/lib/tailwind'; import { useDebounceCallback } from 'usehooks-ts'; @@ -183,7 +183,7 @@ function CodeBlockExpandable(props: {
    ); diff --git a/packages/gitbook/src/components/Header/SpacesDropdown.tsx b/packages/gitbook/src/components/Header/SpacesDropdown.tsx index 4224ea26f..d4a628dbe 100644 --- a/packages/gitbook/src/components/Header/SpacesDropdown.tsx +++ b/packages/gitbook/src/components/Header/SpacesDropdown.tsx @@ -4,8 +4,8 @@ import { useMemo } from 'react'; import type { GitBookSiteContext } from '@/lib/context'; import { getSiteSpaceURL } from '@/lib/sites'; import { tcls } from '@/lib/tailwind'; -import { Button, type ButtonProps } from '../primitives'; -import { DropdownChevron, DropdownMenu } from '../primitives/DropdownMenu'; +import { Button, type ButtonProps, ToggleChevron } from '../primitives'; +import { DropdownMenu } from '../primitives/DropdownMenu'; import { SpacesDropdownMenuItems } from './SpacesDropdownMenuItem'; // Memoized regex for checking if a string starts with an emoji @@ -37,7 +37,7 @@ export function SpacesDropdown(props: { data-testid="space-dropdown-button" size="small" variant={variant} - trailing={} + trailing={} className={tcls('bg-tint-base', className)} > {siteSpace.title} diff --git a/packages/gitbook/src/components/PageActions/PageActionsDropdown.tsx b/packages/gitbook/src/components/PageActions/PageActionsDropdown.tsx index f713d38ba..2a041ea74 100644 --- a/packages/gitbook/src/components/PageActions/PageActionsDropdown.tsx +++ b/packages/gitbook/src/components/PageActions/PageActionsDropdown.tsx @@ -4,9 +4,9 @@ import { Button, ButtonGroup } from '@/components/primitives/Button'; import { DropdownMenu, DropdownMenuSeparator } from '@/components/primitives/DropdownMenu'; import { tString, useLanguage } from '@/intl/client'; import type { GitSyncState, SiteCustomizationSettings } from '@gitbook/api'; -import { Icon } from '@gitbook/icons'; import React, { useRef } from 'react'; import { useAI } from '../AI'; +import { ToggleChevron } from '../primitives'; import { ActionCopyMCPURL, ActionCopyMarkdown, @@ -57,12 +57,7 @@ export function PageActionsDropdown(props: PageActionsDropdownProps) { className="!min-w-60 max-w-max" button={