gsadmin/gitbook
1
0
Fork 0
mirror of https://github.com/GitbookIO/gitbook.git synced 2026-09-22 10:33:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve wrapping of tags within TOC item (#4075)

Browse Source
This commit is contained in:
Viktor Renkema
2026-03-03 15:26:44 +01:00
committed by GitHub
parent bf1f11794e
commit 5b9f5fa991
2 changed files with 30 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/gitbook/src/components/TableOfContents/PageDocumentItem.tsx
+3 -5
View File
@@ -38,12 +38,10 @@ export function PageDocumentItem(props: { page: ClientTOCPageDocument }) {
/>
) : null
}
icon={<TOCPageIcon page={page} />}
tag={page.primaryTag ? <Tag tag={page.primaryTag} /> : null}
>
<TOCPageIcon page={page} />
<span className="flex items-center gap-2">
{page.title}
{page.primaryTag ? <Tag tag={page.primaryTag} /> : null}
</span>
{page.title}
</ToggleableLinkItem>
</li>
);
packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx
+27 -4
View File
@@ -13,9 +13,11 @@ export function ToggleableLinkItem(
pathnames: string[];
children: React.ReactNode;
descendants: React.ReactNode;
icon?: React.ReactNode;
tag?: React.ReactNode;
} & LinkInsightsProps
) {
const { href, children, descendants, pathnames, insights } = props;
const { href, children, descendants, pathnames, insights, icon, tag } = props;
const currentPagePath = useCurrentPagePath();
const isActive = pathnames.some((pathname) => pathname === currentPagePath);
@@ -43,7 +45,15 @@ export function ToggleableLinkItem(
if (!descendants) {
return (
<LinkItem href={href} insights={insights} isActive={isActive}>
{children}
{icon}
{tag ? (
<div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
{children}
<div className="flex shrink-0 items-center">{tag}</div>
</div>
) : (
children
)}
</LinkItem>
);
}
@@ -58,8 +68,21 @@ export function ToggleableLinkItem(
isActive={isActive}
onActiveClick={() => handleToggle(!isOpen)}
>
{children}
{toggler}
{icon}
{tag ? (
<div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
{children}
<div className="flex shrink-0 items-center">
{tag}
{toggler}
</div>
</div>
) : (
<>
{children}
{toggler}
</>
)}
</LinkItem>
{descendants}
</>