From 8e75e3bec579a0586f0b98ed94fca006e8d88aa9 Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Wed, 11 Jun 2025 16:50:09 +0200 Subject: [PATCH 1/3] First iteration --- .../DocumentView/Tabs/DynamicTabs.tsx | 140 +++++++++++------- 1 file changed, 83 insertions(+), 57 deletions(-) diff --git a/packages/gitbook/src/components/DocumentView/Tabs/DynamicTabs.tsx b/packages/gitbook/src/components/DocumentView/Tabs/DynamicTabs.tsx index e4465b303..8c6966975 100644 --- a/packages/gitbook/src/components/DocumentView/Tabs/DynamicTabs.tsx +++ b/packages/gitbook/src/components/DocumentView/Tabs/DynamicTabs.tsx @@ -84,6 +84,8 @@ export function DynamicTabs( ); }, [id, tabs, tabsState]); + const position: string = 'top'; + // To avoid issue with hydration, we only use the state from localStorage // once the component has been mounted. // Otherwise because of the streaming/suspense approach, tabs can be first-rendered at different time @@ -143,13 +145,14 @@ export function DynamicTabs( return (
{tabs.map((tab) => ( @@ -174,49 +180,41 @@ export function DynamicTabs( hashLinkButtonWrapperStyles, 'flex', 'items-center', - 'gap-3.5', + 'relative', + position === 'left' && 'pr-1.5', + position === 'right' && 'pl-1.5', + position === 'top' && 'max-w-full overflow-hidden pb-1.5', + 'min-w-16', //prev from active-tab - '[&:has(+_.active-tab)]:rounded-br-md', + // '[&:has(+_.active-tab)]:rounded-br-md', //next from active-tab - '[.active-tab_+_&]:rounded-bl-md', + // '[.active-tab_+_&]:rounded-bl-md', //next from active-tab - '[.active-tab_+_:after]:rounded-br-md', + // '[.active-tab_+_:after]:rounded-br-md', - 'after:transition-colors', - 'after:border-r', - 'after:absolute', - 'after:left-[unset]', - 'after:right-0', - 'after:border-tint', - 'after:top-[15%]', - 'after:h-[70%]', - 'after:w-[1px]', + // 'after:transition-colors', + // 'after:border-r', + // 'after:absolute', + // 'after:left-[unset]', + // 'after:right-0', + // 'after:border-tint', + // 'after:top-[15%]', + // 'after:h-[70%]', + // 'after:w-[1px]', - 'px-3.5', - 'py-2', - - 'last:after:border-transparent', + // 'last:after:border-transparent', 'text-tint', - 'bg-tint-12/1', - 'hover:text-tint-strong', - 'max-w-full', - 'truncate', + // 'bg-tint-subtle', + // 'bg-tint-12/1', + // 'hover:text-tint-strong', + 'text-sm', + 'font-medium', - active.id === tab.id - ? [ - 'shrink-0', - 'active-tab', - 'text-tint-strong', - 'bg-transparent', - 'after:[&.active-tab]:border-transparent', - 'after:[:has(+_&.active-tab)]:border-transparent', - 'after:[:has(&_+)]:border-transparent', - ] - : null + active.id === tab.id ? 'active-tab text-primary-subtle' : '' )} > - + {active.id === tab.id ? ( +
+ ) : null}
))}
@@ -255,7 +271,17 @@ export function DynamicTabs( role="tabpanel" id={getTabPanelId(tab.id)} aria-labelledby={getTabButtonId(tab.id)} - className={tcls('p-4', tab.id !== active.id ? 'hidden' : null)} + className={tcls( + 'p-4', + 'rounded-lg', + 'straight-corners:rounded-none', + 'circular-corners:rounded-2xl', + 'grow', + 'ring-1', + 'ring-inset', + 'ring-tint-subtle', + tab.id !== active.id ? 'hidden' : null + )} > {tabsBody[index]} From 8e3e5147cf4be97d87100d613960b1df57bead25 Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Thu, 12 Jun 2025 19:38:31 +0200 Subject: [PATCH 2/3] Second iteration, ready --- .../DocumentView/Tabs/DynamicTabs.tsx | 171 +++++++++--------- 1 file changed, 85 insertions(+), 86 deletions(-) diff --git a/packages/gitbook/src/components/DocumentView/Tabs/DynamicTabs.tsx b/packages/gitbook/src/components/DocumentView/Tabs/DynamicTabs.tsx index 8c6966975..0638e5ba1 100644 --- a/packages/gitbook/src/components/DocumentView/Tabs/DynamicTabs.tsx +++ b/packages/gitbook/src/components/DocumentView/Tabs/DynamicTabs.tsx @@ -84,7 +84,8 @@ export function DynamicTabs( ); }, [id, tabs, tabsState]); - const position: string = 'top'; + const position: string = 'top'; // TODO: Get position from tab block options + const description = null; // TODO: Get description from tabs // To avoid issue with hydration, we only use the state from localStorage // once the component has been mounted. @@ -145,16 +146,23 @@ export function DynamicTabs( return (
3 ? 'md:flex-wrap' : '', - // 'after:bg-tint-12/1', - // if last tab is selected, apply rounded to :after element - // '[&:has(button.active-tab:last-of-type):after]:rounded-bl-md' + 'overflow-x-auto', + 'md:overflow-hidden', + + 'gap-1', + 'pb-2', + 'flex-row', + + position === 'left' || position === 'right' + ? 'gap-2 md:max-w-[40%] md:flex-col' + : '', + 'snap-x', + 'snap-mandatory', + + // We need to inset the tablist to make edge-to-edge scrolling work. + '-mx-4', + 'px-4', + 'scroll-px-4', + 'sm:-mx-6', + 'sm:px-6', + 'sm:scroll-px-6', + 'md:mx-0', + 'md:px-0', + 'md:scroll-px-0' )} > {tabs.map((tab) => ( - + ))}
{tabs.map((tab, index) => ( @@ -274,6 +272,7 @@ export function DynamicTabs( className={tcls( 'p-4', 'rounded-lg', + 'flex-1', 'straight-corners:rounded-none', 'circular-corners:rounded-2xl', 'grow', From 60015f58078be6548c8a7ccb7d6aaec5b3b8cd96 Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Thu, 12 Jun 2025 19:39:12 +0200 Subject: [PATCH 3/3] Changeset --- .changeset/tough-lobsters-perform.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tough-lobsters-perform.md diff --git a/.changeset/tough-lobsters-perform.md b/.changeset/tough-lobsters-perform.md new file mode 100644 index 000000000..ea3debd6a --- /dev/null +++ b/.changeset/tough-lobsters-perform.md @@ -0,0 +1,5 @@ +--- +"gitbook": minor +--- + +New design for tab blocks