use className of selected tab and add visual test in dogfooding

facebook · Jun 17, 2024 · b013ea9 · b013ea9
1 parent 03cd3d9
commit b013ea9
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
@@ -107,7 +107,6 @@ function TabList({
 }
 
 function TabContent({
-  className,
   lazy,
   children,
   selectedValue,
@@ -124,7 +123,7 @@ function TabContent({
       return null;
     }
     return cloneElement(selectedTabItem, {
-      className: clsx('margin-top--md', className),
+      className: clsx('margin-top--md', selectedTabItem.props.className),
     });
   }
   return (

diff --git a/website/_dogfooding/_pages tests/tabs-tests.mdx b/website/_dogfooding/_pages tests/tabs-tests.mdx
@@ -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.
+
+## 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>