fix(Tabs): add possibility to define tab header through children

Author: sjschlapbach

src/Tabs.stories.tsx

@@ -30,6 +30,35 @@ export const Default = () => {
   )
 }
 
+export const Children = () => {
+  return (
+    <Tabs defaultValue="leaderboard">
+      <Tabs.TabList>
+        <Tabs.Tab key="leaderboard" value="leaderboard">
+          <div className="italic">Leaderboard</div>
+        </Tabs.Tab>
+        <Tabs.Tab key="create" value="create">
+          <div className="font-bold">Child Content</div>
+        </Tabs.Tab>
+      </Tabs.TabList>
+      <Tabs.TabContent
+        key="leaderboard"
+        value="leaderboard"
+        className={{ root: 'md:px-4' }}
+      >
+        Course Tab
+      </Tabs.TabContent>
+      <Tabs.TabContent
+        key="create"
+        value="create"
+        className={{ root: 'md:px-4' }}
+      >
+        Create Tab
+      </Tabs.TabContent>
+    </Tabs>
+  )
+}
+
 export const Controlled = () => {
   const [selectedTab, setSelectedTab] = useState('leaderboard')
   return (

src/Tabs.tsx

@@ -10,7 +10,8 @@ interface TabProps {
   }
   key?: string
   value: string
-  label: string
+  label?: string
+  children?: React.ReactNode
   disabled?: boolean
   className?: {
     override?: string
@@ -20,6 +21,16 @@ interface TabProps {
   }
 }
 
+interface TabPropsWithLabel extends TabProps {
+  label: string
+  children?: never
+}
+
+interface TabPropsWithChildren extends TabProps {
+  label?: never
+  children: React.ReactNode
+}
+
 /**
  * This function returns a pre-styled Tab trigger component to be used inside a Tabs.Tablist.
  * The value of this tab is required for both the internally and externally controlled state.
@@ -29,6 +40,7 @@ interface TabProps {
  * @param key - The key of the tab.
  * @param value - The value of the tab. This is required for the internal and external state.
  * @param label - The label of the tab.
+ * @param children - A child component of the tab header, which can optionally replace the label
  * @param disabled - The optional disabled property allows you to disable the tab.
  * @param className - The optional className object allows you to override the default styling.
  * @returns Tab trigger component
@@ -39,9 +51,10 @@ export function Tab({
   key,
   value,
   label,
+  children,
   disabled,
   className,
-}: TabProps) {
+}: TabPropsWithLabel | TabPropsWithChildren) {
   return (
     <TabsPrimitive.Trigger
       id={id}
@@ -64,7 +77,7 @@ export function Tab({
           className?.label
         )}
       >
-        {label}
+        {label ?? children}
       </span>
     </TabsPrimitive.Trigger>
   )