chore(docs,tabs): update API docs, fix CSS spacing

Author: wmertens

apps/website/src/routes/docs.css

@@ -3,9 +3,9 @@
     @apply lg:ml-80 w-full lg:max-w-4xl xl:max-w-6xl py-8 px-8 lg:px-16;
   }
 
-  /* 
+  /*
     Styles that are direct descendents of .docs
-    this should not affect the styles inside of the tabpanel 
+    this should not affect the styles inside of the tabpanel
     A.K.A the components
   */
   & > {
@@ -31,11 +31,11 @@
     }
 
     h3 {
-      @apply text-xl font-bold  mb-6;
+      @apply text-xl font-bold mt-4 mb-6;
     }
 
     h4 {
-      @apply text-lg mb-6;
+      @apply text-lg mt-4 mb-6;
     }
 
     h5 {

apps/website/src/routes/docs/_components/api-table/api-table.tsx

@@ -12,7 +12,7 @@ type APITableProps = {
 export const APITable = component$(({ propDescriptors }: APITableProps) => {
   return (
     <div class="overflow-auto">
-      <table class="w-full min-w-[540px] border-b border-gray-700 text-left sm:min-w-full">
+      <table class="w-full min-w-[540px] border-b border-gray-700 text-left sm:min-w-full mb-6">
         <tbody class="divide-y divide-gray-700">
           <tr class="w-1/4 dark:text-white ">
             <td class="w-1/6 whitespace-nowrap py-2 pl-4 text-sm font-medium sm:pl-0">

apps/website/src/routes/docs/headless/(components)/tabs/index.mdx

@@ -60,7 +60,7 @@ import { APITable } from '../../../_components/api-table/api-table';
 
       return (
         <>
-          <Tabs>
+          <Tabs seletedIndex={1}>
             <TabList>
               <Tab>Tab 1</Tab>
               <Tab>Tab 2</Tab>
@@ -91,7 +91,7 @@ import { APITable } from '../../../_components/api-table/api-table';
         <>
           <Tabs>
             <TabPanel title="Tab 1">Content 1</TabPanel>
-            <TabPanel title="Tab 2">Content 2</TabPanel>
+            <TabPanel title="Tab 2" selected>Content 2</TabPanel>
             <TabPanel title="Tab 3">Content 3</TabPanel>
           </Tabs>
         </>
@@ -406,6 +406,11 @@ return <div>
       type: 'number',
       description: 'A way to set the selected index programmatically',
     },
+    {
+      name: 'selectedTabId',
+      type: 'number',
+      description: 'A way to set the selected tabId programmatically. The tabId is set by the `key` prop of the Tab or TabPanel',
+    },
     {
       name: 'vertical',
       type: 'boolean',
@@ -417,7 +422,38 @@ return <div>
       type: 'function',
       info: '(index: number) => void',
       description:
-        'An event hook that getting notified whenever the selected index changes',
+        'An event hook that gets notified whenever the selected index changes',
+    },
+    {
+      name: 'onSelectedTabIdChange$',
+      type: 'function',
+      info: '(index: string) => void',
+      description:
+        'An event hook that gets notified whenever the selected tabId changes',
+    },
+    {
+      name: 'bind:selectedIndex',
+      type: 'signal',
+      info: 'Signal<number | undefined>',
+      description:
+        'A signal that binds the selected index. This is a more efficient version of `selectedIndex` + `onSelectedIndexChange$`',
+    },
+    {
+      name: 'bind:selectedTabId',
+      type: 'signal',
+      info: 'Signal<string | undefined>',
+      description:
+        'A signal that binds the selected tabId. This is a more efficient version of `selectedTabId` + `onSelectedTabIdChange$`',
+    },
+    {
+      name: 'tabClass',
+      type: 'string',
+      description: 'The class name to apply to tabs',
+    },
+    {
+      name: 'panelClass',
+      type: 'string',
+      description: 'The class name to apply to panels',
     },
   ]}
 />
@@ -432,10 +468,9 @@ return <div>
       description: 'The class name to apply when the tab is selected',
     },
     {
-      name: 'onClick',
-      info: '(event: QwikMouseEvent) => void',
-      type: 'function',
-      description: 'A custom click handler to wire to tab click event',
+      name: 'selected',
+      type: 'boolean',
+      description: 'Select this tab by default',
     },
     {
       name: 'disabled',
@@ -444,4 +479,20 @@ return <div>
     },
   ]}
 />
-```
+
+### TabPanel
+
+<APITable
+  propDescriptors={[
+    {
+      name: 'label',
+      type: 'element',
+      description: 'Shorthand for `<Tab>{label}</Tab>`',
+    },
+    {
+      name: 'selected',
+      type: 'boolean',
+      description: 'Select this tab by default',
+    },
+  ]}
+/>

packages/kit-headless/src/components/tabs/tabs.spec.tsx

@@ -160,7 +160,8 @@ describe('Tabs', () => {
                 ))}
               </TabList>
               {tabsState.map((tab) => (
-                <TabPanel key={tab}>{tab} Panel</TabPanel>
+                // Making sure the key is taken from the tab
+                <TabPanel key={'panel' + tab}>{tab} Panel</TabPanel>
               ))}
             </Tabs>
             <button onClick$={() => tabsState.splice(tabIndexToDelete, 1)}>

packages/kit-headless/src/components/tabs/tabs.tsx

@@ -34,6 +34,13 @@ import { TabList } from './tabs-list';
  *  NOTE: scrolling support? or multiple lines? (probably not for headless but for tailwind / material )
  * Add ability to close tabs with an ❌ icon (and keyboard support)
 
+* TO DISCUSS
+ - name of the components, e.g. Tabs, Tabs.Trigger, Tabs.Panel
+ - selectedClassname => selectedClass
+ - do we keep all current props (tabId callbacks?)
+ - shorthand for tab: "label" or "tab"?
+ - the TODOs
+ - why id and data-tab-id? we don't need any of them
  *
  */
 
@@ -149,7 +156,7 @@ export const Tabs: FunctionComponent<TabsProps> = (props) => {
       case TabPanel: {
         const { label, selected } = child.props;
         // The consumer must provide a key if they change the order
-        const tabId = child.key || `${panelIndex}`;
+        const tabId = tabComponents[panelIndex]?.key || child.key || `${panelIndex}`;
 
         if (label) {
           tabComponents.push(<Tab>{label}</Tab>);