diff --git a/.changeset/dirty-foxes-glow.md b/.changeset/dirty-foxes-glow.md new file mode 100644 index 000000000..ab60d1137 --- /dev/null +++ b/.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. diff --git a/apps/website/src/routes/docs/headless/tabs/index.mdx b/apps/website/src/routes/docs/headless/tabs/index.mdx index 4c12c72d1..9a950c24b 100644 --- a/apps/website/src/routes/docs/headless/tabs/index.mdx +++ b/apps/website/src/routes/docs/headless/tabs/index.mdx @@ -215,16 +215,6 @@ const CustomTabs = (props: PropsOf) => ( 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) => ( {label}`', - }, { name: 'selected', type: 'boolean', diff --git a/packages/kit-headless/src/components/tabs/tab-panel.tsx b/packages/kit-headless/src/components/tabs/tab-panel.tsx index bb8997464..ae60824a0 100644 --- a/packages/kit-headless/src/components/tabs/tab-panel.tsx +++ b/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; diff --git a/packages/kit-headless/src/components/tabs/tabs.test.ts b/packages/kit-headless/src/components/tabs/tabs.test.ts index 249d93a5d..37e7a5700 100644 --- a/packages/kit-headless/src/components/tabs/tabs.test.ts +++ b/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 diff --git a/packages/kit-headless/src/components/tabs/tabs.tsx b/packages/kit-headless/src/components/tabs/tabs.tsx index 57e6a0bc3..ce10ea35e 100644 --- a/packages/kit-headless/src/components/tabs/tabs.tsx +++ b/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; 'bind:selectedTabId'?: Signal; + /** @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 = (props) => { const { children, - tabClass, - panelClass, tabListComponent: UserTabList, tabComponent: UserTab, tabPanelComponent: UserTabPanel, @@ -127,16 +121,13 @@ export const HTabs: FunctionComponent = (props) => { break; } case TabPanel: { - const { label, selected } = child.props as TabPanelProps; + const { selected } = child.props as TabPanelProps; // The consumer must provide a key if they change the order const matchedTabComponent = tabComponents[panelIndex]; const tabIdFromTabMaybe = (matchedTabComponent?.props as TabProps).tabId || matchedTabComponent?.key; const tabId: string = tabIdFromTabMaybe || child.key || `${panelIndex}`; - if (label) { - tabComponents.push(({label}) as JSXNode); - } if (selected) { selectedIndex = panelIndex; child.props.selected = undefined; @@ -146,7 +137,6 @@ export const HTabs: FunctionComponent = (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 +165,6 @@ export const HTabs: FunctionComponent = (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