refactor: deprecate tabs shorthand API (#995)

Author: maiieul

.changeset/dirty-foxes-glow.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': minor
+---
+
+We deprecated the Tabs shorthand API as it was less composable and more maintenance. We might add that API as copy/paste in the future.

apps/website/src/routes/docs/headless/tabs/index.mdx

@@ -215,16 +215,6 @@ const CustomTabs = (props: PropsOf<typeof Tabs.Root>) => (
       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',
-    },
   ]}
 />
 
@@ -260,11 +250,6 @@ const CustomTabs = (props: PropsOf<typeof Tabs.Root>) => (
 
 <APITable
   propDescriptors={[
-    {
-      name: 'label',
-      type: 'element',
-      description: 'Shorthand for `<Tab>{label}</Tab>`',
-    },
     {
       name: 'selected',
       type: 'boolean',

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

@@ -5,6 +5,7 @@ import { tabsContextId } from './tabs-context-id';
 
 export type TabPanelProps = {
   /** Optional tab contents. */
+  /** @deprecated This prop was used for the shorthand API that we decided to no longer support as part of the headless kit */
   label?: PropsOf<'div'>['children'];
   selected?: boolean;
   disabled?: boolean;

packages/kit-headless/src/components/tabs/tabs.test.ts

@@ -480,21 +480,6 @@ test.describe('Disabled tabs', () => {
   });
 });
 
-test.skip('Shorthand API', () => {
-  test(`GIVEN 3 tabs written using shorthand
-      WHEN clicking the middle one
-      THEN render the middle panel`, async ({ page }) => {
-    const { driver: d } = await setup(page, 'shorthand-api-tabs');
-
-    await expect(d.getAllTabs()).toHaveCount(3);
-
-    await expect(d.getTabPanel()).toContainText('Panel 3');
-    await d.getTab(1).click();
-    await expect(d.getTabPanel()).toContainText('Panel 2');
-    await expect(d.getTabList()).toBeVisible();
-  });
-});
-
 test.describe.skip('User-defined reusable TabList/Tab/TabPanel components', () => {
   test(`GIVEN a user-defined TabList to Tabs
       WHEN clicking the middle Tab

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

@@ -35,12 +35,6 @@ import { HTabList as InternalTabList } 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
   *
  */
 
@@ -55,7 +49,9 @@ export type TabsProps = PropsOf<'div'> & {
   onSelectedTabIdChange$?: (tabId: string) => void;
   'bind:selectedIndex'?: Signal<number | undefined>;
   'bind:selectedTabId'?: Signal<string | undefined>;
+  /** @deprecated was for the shorthand API that we decided to no longer support as part of the headless kit */
   tabClass?: PropsOf<'div'>['class'];
+  /** @deprecated was for the shorthand API that we decided to no longer support as part of the headless kit */
   panelClass?: PropsOf<'div'>['class'];
 
   tabListComponent?: typeof InternalTabList;
@@ -76,8 +72,6 @@ export type TabInfo = {
 export const HTabs: FunctionComponent<TabsProps> = (props) => {
   const {
     children,
-    tabClass,
-    panelClass,
     tabListComponent: UserTabList,
     tabComponent: UserTab,
     tabPanelComponent: UserTabPanel,
@@ -134,6 +128,7 @@ export const HTabs: FunctionComponent<TabsProps> = (props) => {
           (matchedTabComponent?.props as TabProps).tabId || matchedTabComponent?.key;
         const tabId: string = tabIdFromTabMaybe || child.key || `${panelIndex}`;
 
+        // This will be removed on v1 release
         if (label) {
           tabComponents.push((<Tab>{label}</Tab>) as JSXNode<typeof Tab>);
         }
@@ -146,7 +141,6 @@ export const HTabs: FunctionComponent<TabsProps> = (props) => {
         child.key = tabId;
         // Add props but don't replace the object
         child.props._tabId = tabId;
-        child.props._extraClass = panelClass;
 
         panelComponents.push(child);
         tabInfoList.push({
@@ -175,7 +169,6 @@ export const HTabs: FunctionComponent<TabsProps> = (props) => {
     const tabId = tabInfoList[index]?.tabId;
     tab.key = tabId;
     tab.props.tabId = tabId;
-    tab.props._extraClass = tabClass;
     if (
       tabInfoList[index].panelProps.disabled !== undefined &&
       tab.props.disabled === undefined