3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-06 10:20:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(theme): ignored className attribute on lazy loaded TabItem (#10219)

Browse source
This commit is contained in:
Balthasar Hofer 2024-06-18 16:51:22 +02:00 • committed by GitHub
parent 88788cec90
commit 591914ca5c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 17 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
View file

@ -122,7 +122,9 @@ function TabContent({
// fail-safe or fail-fast? not sure what's best here // fail-safe or fail-fast? not sure what's best here
return null; return null;
} }
return cloneElement(selectedTabItem, {className: 'margin-top--md'}); return cloneElement(selectedTabItem, {
className: clsx('margin-top--md', selectedTabItem.props.className),
});
} }
return ( return (
<div className="margin-top--md"> <div className="margin-top--md">

14
website/_dogfooding/_pages tests/tabs-tests.mdx
View file

@ -46,3 +46,17 @@ export const isMacOS = typeof window !== 'undefined' && navigator.platform.start
``` ```
When clicking tabs above, they should stay under cursor and we should adjust the scroll position. When clicking tabs above, they should stay under cursor and we should adjust the scroll position.
## Tabs with className and lazy loading
<Tabs lazy>
<TabItem value="apple" label="Apple" className="alert alert--primary" default>
This is an apple 🍎
</TabItem>
<TabItem value="orange" label="Orange" className="alert alert--secondary">
This is an orange 🍊
</TabItem>
<TabItem value="banana" label="Banana" className="alert alert--success">
This is a banana 🍌
</TabItem>
</Tabs>