Expose wrapper styles

Author: clairechabas

packages/gitbook/src/components/DocumentView/HashLinkButton.tsx

@@ -5,7 +5,10 @@ import { getBlockTextStyle } from './spacing';
 
 /**
  * A hash icon which adds the block or active block item's ID in the URL hash.
+ * The button needs to be wrapped in a container with `hashLinkButtonWrapperStyles`.
  */
+export const hashLinkButtonWrapperStyles = tcls('relative', 'group');
+
 export function HashLinkButton(props: {
     id: string;
     block: DocumentBlockTabs | DocumentBlockHeading;
@@ -20,9 +23,6 @@ export function HashLinkButton(props: {
                 'hash',
                 'grid',
                 'grid-area-1-1',
-                // 'absolute',
-                // 'left-0',
-                // 'top-1',
                 'w-7',
                 'border-0',
                 'opacity-0',

packages/gitbook/src/components/DocumentView/Heading.tsx

@@ -3,7 +3,7 @@ import type { DocumentBlockHeading } from '@gitbook/api';
 import { tcls } from '@/lib/tailwind';
 
 import type { BlockProps } from './Block';
-import { HashLinkButton } from './HashLinkButton';
+import { HashLinkButton, hashLinkButtonWrapperStyles } from './HashLinkButton';
 import { Inlines } from './Inlines';
 import { getBlockTextStyle } from './spacing';
 
@@ -23,10 +23,9 @@ export function Heading(props: BlockProps<DocumentBlockHeading>) {
             className={tcls(
                 textStyle.textSize,
                 'heading',
-                'group',
-                'relative',
                 'grid',
                 'scroll-m-12',
+                hashLinkButtonWrapperStyles,
                 style
             )}
         >

packages/gitbook/src/components/DocumentView/Tabs/DynamicTabs.tsx

@@ -6,7 +6,7 @@ import { useHash, useIsMounted } from '@/components/hooks';
 import * as storage from '@/lib/local-storage';
 import { type ClassValue, tcls } from '@/lib/tailwind';
 import type { DocumentBlockTabs } from '@gitbook/api';
-import { HashLinkButton } from '../HashLinkButton';
+import { HashLinkButton, hashLinkButtonWrapperStyles } from '../HashLinkButton';
 
 interface TabsState {
     activeIds: {
@@ -141,7 +141,7 @@ export function DynamicTabs(
     }, [hash, tabs, onSelectTab]);
 
     return (
-        <div className={tcls('relative', 'group')}>
+        <div className={hashLinkButtonWrapperStyles}>
             <HashLinkButton
                 id={getTabButtonId(active.id)}
                 block={block}