Commit 7d624b3

committed

Improve heading support in tabs

1 parent 255d56a commit 7d624b3Copy full SHA for 7d624b3

File tree

2 files changed

+23

-10

lines changed

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

2 files changed

+23

-10

lines changed

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

Lines changed: 2 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,8 @@ export function HashLinkButton(props: {`
`29`	`29`	`'h-[1em]',`
`30`	`30`	`'border-0',`
`31`	`31`	`'opacity-0',`
	`32`	`+ 'site-background',`
	`33`	`+ 'rounded',`
`32`	`34`	`'group-hover/hash:opacity-[0]',`
`33`	`35`	`'group-focus/hash:opacity-[0]',`
`34`	`36`	`'md:group-hover/hash:opacity-[1]',`

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

Lines changed: 21 additions & 10 deletions

Original file line number	Diff line number	Diff line change
`@@ -163,26 +163,34 @@ export function DynamicTabs(props: {`
`163`	`163`	`'straight-corners:rounded-xs',`
`164`	`164`	`'ring-1 ring-tint-subtle ring-inset',`
`165`	`165`	`'flex flex-col',`
`166`		`- 'overflow-hidden',`
`167`	`166`	`className`
`168`	`167`	`)}`
`169`	`168`	`>`
`170`	`169`	`<TabItemList tabs={tabs} activeTabId={active?.id ?? null} onSelect={selectTab} />`
`171`	`170`	`{tabs.map((tab) => (`
`172`		`- <div`
`173`		`- key={tab.id}`
`174`		`- role="tabpanel"`
`175`		`- id={tab.id}`
`176`		`- aria-labelledby={getTabButtonId(tab.id)}`
`177`		`- className={tcls('p-4', tab.id !== active?.id ? 'hidden' : null)}`
`178`		`- >`
`179`		`- {tab.body}`
`180`		`- </div>`
	`171`	`+ <TabPanel key={tab.id} tab={tab} isActive={tab.id === active?.id} />`
`181`	`172`	`))}`
`182`	`173`	`</div>`
`183`	`174`	`);`
`184`	`175`	`}`
`185`	`176`
	`177`	`+const TabPanel = memo(function TabPanel(props: {`
	`178`	`+ tab: TabsItem;`
	`179`	`+ isActive: boolean;`
	`180`	`+}) {`
	`181`	`+ const { tab, isActive } = props;`
	`182`	`+ return (`
	`183`	`+ <div`
	`184`	`+ role="tabpanel"`
	`185`	`+ id={tab.id}`
	`186`	`+ aria-labelledby={getTabButtonId(tab.id)}`
	`187`	`+ className={tcls('p-4', isActive ? null : 'hidden')}`
	`188`	`+ >`
	`189`	`+ {tab.body}`
	`190`	`+ </div>`
	`191`	`+ );`
	`192`	`+});`
	`193`	`+`
`186`	`194`	`const TabItemList = memo(function TabItemList(props: {`
`187`	`195`	`tabs: TabsItem[];`
`188`	`196`	`activeTabId: string \| null;`
`@@ -204,6 +212,9 @@ const TabItemList = memo(function TabItemList(props: {`
`204`	`212`	`role="tablist"`
`205`	`213`	`className={tcls(`
`206`	`214`	`'group/tabs',`
	`215`	`+ 'overflow-hidden',`
	`216`	`+ 'rounded-t-lg',`
	`217`	`+ 'straight-corners:rounded-t-xs',`
`207`	`218`	`'inline-flex',`
`208`	`219`	`'self-stretch',`
`209`	`220`	`'after:flex-1',`

0 commit comments

Comments

(0)

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Commit 7d624b3

File tree

2 files changed

2 files changed

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

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

0 commit comments