From acfcf185dd66e4ddb5fee49b51e0c2d12c952756 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 28 Jul 2021 11:04:39 +0200 Subject: [PATCH 1/4] Change Tabs API (React) | Before | After | | ------------- | ------------ | | `Tabs` | `Tab.Group` | | `Tabs.List` | `Tab.List` | | `Tabs.Tab` | `Tab` | | `Tabs.Panels` | `Tab.Panels` | | `Tabs.Panel` | `Tab.Panel` | --- .../src/components/tabs/tabs.test.tsx | 1336 ++++++++--------- .../src/components/tabs/tabs.tsx | 22 +- packages/@headlessui-react/src/index.test.ts | 2 +- 3 files changed, 680 insertions(+), 680 deletions(-) diff --git a/packages/@headlessui-react/src/components/tabs/tabs.test.tsx b/packages/@headlessui-react/src/components/tabs/tabs.test.tsx index bdee66bdd5..c9214ab3fd 100644 --- a/packages/@headlessui-react/src/components/tabs/tabs.test.tsx +++ b/packages/@headlessui-react/src/components/tabs/tabs.test.tsx @@ -1,7 +1,7 @@ import React, { createElement } from 'react' import { render } from '@testing-library/react' -import { Tabs } from './tabs' +import { Tab } from './tabs' import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs' import { assertTabs, @@ -20,34 +20,34 @@ beforeAll(() => { describe('safeguards', () => { it.each([ - ['Tabs.List', Tabs.List], - ['Tabs.Tab', Tabs.Tab], - ['Tabs.Panels', Tabs.Panels], - ['Tabs.Panel', Tabs.Panel], + ['Tab.List', Tab.List], + ['Tab', Tab], + ['Tab.Panels', Tab.Panels], + ['Tab.Panel', Tab.Panel], ])( - 'should error when we are using a <%s /> without a parent component', + 'should error when we are using a <%s /> without a parent component', suppressConsoleLogs((name, Component) => { expect(() => render(createElement(Component))).toThrowError( - `<${name} /> is missing a parent component.` + `<${name} /> is missing a parent component.` ) }) ) - it('should be possible to render Tabs without crashing', async () => { + it('should be possible to render Tab.Group without crashing', async () => { render( - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ) assertTabs({ active: 0 }) @@ -55,48 +55,48 @@ describe('safeguards', () => { }) describe('Rendering', () => { - it('should be possible to render the Tabs.Panels first, then the Tabs.List', async () => { + it('should be possible to render the Tab.Panels first, then the Tab.List', async () => { render( - - - Content 1 - Content 2 - Content 3 - - - - Tab 1 - Tab 2 - Tab 3 - - + + + Content 1 + Content 2 + Content 3 + + + + Tab 1 + Tab 2 + Tab 3 + + ) assertTabs({ active: 0 }) }) describe('`renderProps`', () => { - it('should expose the `selectedIndex` on the `Tabs` component', async () => { + it('should expose the `selectedIndex` on the `Tab.Group` component', async () => { render( - + {data => ( <> 
{JSON.stringify(data)}
- - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + )} - + ) expect(document.getElementById('exposed')).toHaveTextContent( @@ -110,26 +110,26 @@ describe('Rendering', () => { ) }) - it('should expose the `selectedIndex` on the `Tabs.List` component', async () => { + it('should expose the `selectedIndex` on the `Tab.List` component', async () => { render( - - + + {data => ( <> 
{JSON.stringify(data)}
- Tab 1 - Tab 2 - Tab 3 + Tab 1 + Tab 2 + Tab 3 )} - + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + ) expect(document.getElementById('exposed')).toHaveTextContent( @@ -143,26 +143,26 @@ describe('Rendering', () => { ) }) - it('should expose the `selectedIndex` on the `Tabs.Panels` component', async () => { + it('should expose the `selectedIndex` on the `Tab.Panels` component', async () => { render( - - - Tab 1 - Tab 2 - Tab 3 - - - + + + Tab 1 + Tab 2 + Tab 3 + + + {data => ( <> 
{JSON.stringify(data)}
- Content 1 - Content 2 - Content 3 + Content 1 + Content 2 + Content 3 )} - - + + ) expect(document.getElementById('exposed')).toHaveTextContent( @@ -176,42 +176,42 @@ describe('Rendering', () => { ) }) - it('should expose the `selected` state on the `Tabs.Tab` components', async () => { + it('should expose the `selected` state on the `Tab` components', async () => { render( - - - + + + {data => ( <> 
{JSON.stringify(data)}
Tab 1 )} - - + + {data => ( <> 
{JSON.stringify(data)}
Tab 2 )} - - + + {data => ( <> 
{JSON.stringify(data)}
Tab 3 )} - - + + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + ) expect(document.querySelector('[data-tab="0"]')).toHaveTextContent( @@ -237,42 +237,42 @@ describe('Rendering', () => { ) }) - it('should expose the `selected` state on the `Tabs.Panel` components', async () => { + it('should expose the `selected` state on the `Tab.Panel` components', async () => { render( - - - Tab 1 - Tab 2 - Tab 3 - - - - + + + Tab 1 + Tab 2 + Tab 3 + + + + {data => ( <> 
{JSON.stringify(data)}
Content 1 )} - - + + {data => ( <> 
{JSON.stringify(data)}
Content 2 )} - - + + {data => ( <> 
{JSON.stringify(data)}
Content 3 )} - - - + + + ) expect(document.querySelector('[data-panel="0"]')).toHaveTextContent( @@ -303,19 +303,19 @@ describe('Rendering', () => { it('should jump to the nearest tab when the defaultIndex is out of bounds (-2)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -332,19 +332,19 @@ describe('Rendering', () => { it('should jump to the nearest tab when the defaultIndex is out of bounds (+5)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -361,19 +361,19 @@ describe('Rendering', () => { it('should jump to the next available tab when the defaultIndex is a disabled tab', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -390,19 +390,19 @@ describe('Rendering', () => { it('should jump to the next available tab when the defaultIndex is a disabled tab and wrap around', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -423,19 +423,19 @@ describe('Keyboard interactions', () => { it('should be possible to tab to the default initial first tab', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -464,19 +464,19 @@ describe('Keyboard interactions', () => { it('should be possible to tab to the default index tab', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -507,19 +507,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the next item (activation = `auto`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -540,19 +540,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the next item (activation = `manual`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -577,19 +577,19 @@ describe('Keyboard interactions', () => { it('should wrap around at the end (activation = `auto`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -616,19 +616,19 @@ describe('Keyboard interactions', () => { it('should wrap around at the end (activation = `manual`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -663,19 +663,19 @@ describe('Keyboard interactions', () => { it('should not be possible to go right when in vertical mode (activation = `auto`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -694,19 +694,19 @@ describe('Keyboard interactions', () => { it('should not be possible to go right when in vertical mode (activation = `manual`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -729,19 +729,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the previous item (activation = `auto`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -762,19 +762,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the previous item (activation = `manual`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -799,19 +799,19 @@ describe('Keyboard interactions', () => { it('should wrap around at the beginning (activation = `auto`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -838,19 +838,19 @@ describe('Keyboard interactions', () => { it('should wrap around at the beginning (activation = `manual`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -885,19 +885,19 @@ describe('Keyboard interactions', () => { it('should not be possible to go left when in vertical mode (activation = `auto`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -916,19 +916,19 @@ describe('Keyboard interactions', () => { it('should not be possible to go left when in vertical mode (activation = `manual`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -952,19 +952,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the next item (activation = `auto`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -985,19 +985,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the next item (activation = `manual`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1022,19 +1022,19 @@ describe('Keyboard interactions', () => { it('should wrap around at the end (activation = `auto`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1061,19 +1061,19 @@ describe('Keyboard interactions', () => { it('should wrap around at the end (activation = `manual`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1108,19 +1108,19 @@ describe('Keyboard interactions', () => { it('should not be possible to go down when in horizontal mode (activation = `auto`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1139,19 +1139,19 @@ describe('Keyboard interactions', () => { it('should not be possible to go down when in horizontal mode (activation = `manual`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1175,19 +1175,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the previous item (activation = `auto`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1208,19 +1208,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the previous item (activation = `manual`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1245,19 +1245,19 @@ describe('Keyboard interactions', () => { it('should wrap around at the beginning (activation = `auto`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1284,19 +1284,19 @@ describe('Keyboard interactions', () => { it('should wrap around at the beginning (activation = `manual`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1331,19 +1331,19 @@ describe('Keyboard interactions', () => { it('should not be possible to go left when in vertical mode (activation = `auto`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1362,19 +1362,19 @@ describe('Keyboard interactions', () => { it('should not be possible to go left when in vertical mode (activation = `manual`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1398,19 +1398,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the first focusable item (activation = `auto`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1428,19 +1428,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the first focusable item (activation = `manual`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1462,19 +1462,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the first focusable item (activation = `auto`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1492,19 +1492,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the first focusable item (activation = `manual`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1526,19 +1526,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the first focusable item (activation = `auto`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1556,19 +1556,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the first focusable item (activation = `manual`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1590,19 +1590,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the first focusable item (activation = `auto`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1620,19 +1620,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the first focusable item (activation = `manual`)', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1654,19 +1654,19 @@ describe('Keyboard interactions', () => { it('should be possible to activate the focused tab', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1688,19 +1688,19 @@ describe('Keyboard interactions', () => { it('should be possible to activate the focused tab', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1723,19 +1723,19 @@ describe('Mouse interactions', () => { it('should be possible to click on a tab to focus it', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1758,19 +1758,19 @@ describe('Mouse interactions', () => { it('should be a no-op when clicking on a disabled tab', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + @@ -1791,19 +1791,19 @@ it('should trigger the `onChange` when the tab changes', async () => { render( <> - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + diff --git a/packages/@headlessui-react/src/components/tabs/tabs.tsx b/packages/@headlessui-react/src/components/tabs/tabs.tsx index 590a0779f4..d5c2e8322a 100644 --- a/packages/@headlessui-react/src/components/tabs/tabs.tsx +++ b/packages/@headlessui-react/src/components/tabs/tabs.tsx @@ -104,7 +104,7 @@ TabsContext.displayName = 'TabsContext' function useTabsContext(component: string) { let context = useContext(TabsContext) if (context === null) { - let err = new Error(`<${component} /> is missing a parent <${Tabs.name} /> component.`) + let err = new Error(`<${component} /> is missing a parent component.`) if (Error.captureStackTrace) Error.captureStackTrace(err, useTabsContext) throw err } @@ -122,7 +122,7 @@ interface TabsRenderPropArg { selectedIndex: number } -export function Tabs( +function Tabs( props: Props & { defaultIndex?: number onChange?: (index: number) => void @@ -230,7 +230,7 @@ type ListPropsWeControl = 'role' | 'aria-orientation' function List( props: Props & {} ) { - let [{ selectedIndex, orientation }] = useTabsContext([Tabs.name, List.name].join('.')) + let [{ selectedIndex, orientation }] = useTabsContext([Tab.name, List.name].join('.')) let slot = { selectedIndex } let propsWeControl = { @@ -255,7 +255,7 @@ interface TabRenderPropArg { } type TabPropsWeControl = 'id' | 'role' | 'type' | 'aria-controls' | 'aria-selected' | 'tabIndex' -function Tab( +export function Tab( props: Props ) { let id = `headlessui-tabs-tab-${useId()}` @@ -263,7 +263,7 @@ function Tab( let [ { selectedIndex, tabs, panels, orientation, activation }, { dispatch, change }, - ] = useTabsContext([Tabs.name, Tab.name].join('.')) + ] = useTabsContext(Tab.name) let internalTabRef = useRef(null) let tabRef = useSyncRefs(internalTabRef, element => { @@ -371,7 +371,7 @@ interface PanelsRenderPropArg { function Panels( props: Props ) { - let [{ selectedIndex }] = useTabsContext([Tabs.name, Panels.name].join('.')) + let [{ selectedIndex }] = useTabsContext([Tab.name, Panels.name].join('.')) let slot = useMemo(() => ({ selectedIndex }), [selectedIndex]) @@ -397,7 +397,7 @@ function Panel( PropsForFeatures ) { let [{ selectedIndex, tabs, panels }, { dispatch }] = useTabsContext( - [Tabs.name, Panel.name].join('.') + [Tab.name, Panel.name].join('.') ) let id = `headlessui-tabs-panel-${useId()}` @@ -442,7 +442,7 @@ function Panel( // --- -Tabs.List = List -Tabs.Tab = Tab -Tabs.Panels = Panels -Tabs.Panel = Panel +Tab.Group = Tabs +Tab.List = List +Tab.Panels = Panels +Tab.Panel = Panel diff --git a/packages/@headlessui-react/src/index.test.ts b/packages/@headlessui-react/src/index.test.ts index 2771e0f12a..145b355530 100644 --- a/packages/@headlessui-react/src/index.test.ts +++ b/packages/@headlessui-react/src/index.test.ts @@ -15,7 +15,7 @@ it('should expose the correct components', () => { 'Portal', 'RadioGroup', 'Switch', - 'Tabs', + 'Tab', 'Transition', ]) }) From 9204a3379a62bfe6b669ac6ef0bb2ec89b6e88ec Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 28 Jul 2021 11:07:33 +0200 Subject: [PATCH 2/4] Change Tabs API (Vue) | Before | After | | ------------ | ----------- | | `Tabs` | `TabGroup` | | `TabsList` | `TabList` | | `TabsTab` | `Tab` | | `TabsPanels` | `TabPanels` | | `TabsPanel` | `TabPanel` | --- .../src/components/tabs/tabs.test.ts | 1340 ++++++++--------- .../src/components/tabs/tabs.ts | 44 +- packages/@headlessui-vue/src/index.test.ts | 10 +- 3 files changed, 697 insertions(+), 697 deletions(-) diff --git a/packages/@headlessui-vue/src/components/tabs/tabs.test.ts b/packages/@headlessui-vue/src/components/tabs/tabs.test.ts index 8d07b3e050..74b12f42f8 100644 --- a/packages/@headlessui-vue/src/components/tabs/tabs.test.ts +++ b/packages/@headlessui-vue/src/components/tabs/tabs.test.ts @@ -1,6 +1,6 @@ import { defineComponent, nextTick } from 'vue' import { render } from '../../test-utils/vue-testing-library' -import { Tabs, TabsList, TabsTab, TabsPanels, TabsPanel } from './tabs' +import { TabGroup, TabList, Tab, TabPanels, TabPanel } from './tabs' import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs' import { assertActiveElement, @@ -21,7 +21,7 @@ beforeAll(() => { afterAll(() => jest.restoreAllMocks()) function renderTemplate(input: string | Partial[0]>) { - let defaultComponents = { Tabs, TabsList, TabsTab, TabsPanels, TabsPanel } + let defaultComponents = { TabGroup, TabList, Tab, TabPanels, TabPanel } if (typeof input === 'string') { return render(defineComponent({ template: input, components: defaultComponents })) @@ -38,35 +38,35 @@ function renderTemplate(input: string | Partial { it.each([ - ['TabsList', TabsList], - ['TabsTab', TabsTab], - ['TabsPanels', TabsPanels], - ['TabsPanel', TabsPanel], + ['TabList', TabList], + ['Tab', Tab], + ['TabPanels', TabPanels], + ['TabPanel', TabPanel], ])( - 'should error when we are using a <%s /> without a parent component', + 'should error when we are using a <%s /> without a parent component', suppressConsoleLogs((name, Component) => { expect(() => render(Component)).toThrowError( - `<${name} /> is missing a parent component.` + `<${name} /> is missing a parent component.` ) }) ) - it('should be possible to render Tabs without crashing', async () => { + it('should be possible to render TabGroup without crashing', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` ) @@ -77,22 +77,22 @@ describe('safeguards', () => { }) describe('Rendering', () => { - it('should be possible to render the TabsPanels first, then the TabsList', async () => { + it('should be possible to render the TabPanels first, then the TabList', async () => { renderTemplate( html` - - - Content 1 - Content 2 - Content 3 - - - - Tab 1 - Tab 2 - Tab 3 - - + + + Content 1 + Content 2 + Content 3 + + + + Tab 1 + Tab 2 + Tab 3 + + ` ) @@ -105,21 +105,21 @@ describe('Rendering', () => { it('should expose the `selectedIndex` on the `Tabs` component', async () => { renderTemplate( html` - + 
{{JSON.stringify(data)}}
- - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` ) @@ -136,23 +136,23 @@ describe('Rendering', () => { ) }) - it('should expose the `selectedIndex` on the `TabsList` component', async () => { + it('should expose the `selectedIndex` on the `TabList` component', async () => { renderTemplate( html` - - + + 
{{JSON.stringify(data)}}
- Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` ) @@ -169,23 +169,23 @@ describe('Rendering', () => { ) }) - it('should expose the `selectedIndex` on the `TabsPanels` component', async () => { + it('should expose the `selectedIndex` on the `TabPanels` component', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - + + + Tab 1 + Tab 2 + Tab 3 + + + 
{{JSON.stringify(data)}}
- Content 1 - Content 2 - Content 3 - - + Content 1 + Content 2 + Content 3 + + ` ) @@ -202,31 +202,31 @@ describe('Rendering', () => { ) }) - it('should expose the `selected` state on the `TabsTab` components', async () => { + it('should expose the `selected` state on the `Tab` components', async () => { renderTemplate( html` - - - + + + 
{{JSON.stringify(data)}}
Tab 1 - - + + 
{{JSON.stringify(data)}}
Tab 2 - - + + 
{{JSON.stringify(data)}}
Tab 3 - - - - - Content 1 - Content 2 - Content 3 - - + + + + + Content 1 + Content 2 + Content 3 + + ` ) @@ -255,31 +255,31 @@ describe('Rendering', () => { ) }) - it('should expose the `selected` state on the `TabsPanel` components', async () => { + it('should expose the `selected` state on the `TabPanel` components', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - + + + Tab 1 + Tab 2 + Tab 3 + + + + 
{{JSON.stringify(data)}}
Content 1 - - + + 
{{JSON.stringify(data)}}
Content 2 - - + + 
{{JSON.stringify(data)}}
Content 3 - - - + + + ` ) @@ -313,19 +313,19 @@ describe('Rendering', () => { it('should jump to the nearest tab when the defaultIndex is out of bounds (-2)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -344,19 +344,19 @@ describe('Rendering', () => { it('should jump to the nearest tab when the defaultIndex is out of bounds (+5)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -375,19 +375,19 @@ describe('Rendering', () => { it('should jump to the next available tab when the defaultIndex is a disabled tab', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -406,19 +406,19 @@ describe('Rendering', () => { it('should jump to the next available tab when the defaultIndex is a disabled tab and wrap around', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -441,19 +441,19 @@ describe('Keyboard interactions', () => { it('should be possible to tab to the default initial first tab', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -484,19 +484,19 @@ describe('Keyboard interactions', () => { it('should be possible to tab to the default index tab', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -529,19 +529,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the next item (activation = `auto`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -564,19 +564,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the next item (activation = `manual`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -603,19 +603,19 @@ describe('Keyboard interactions', () => { it('should wrap around at the end (activation = `auto`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -644,19 +644,19 @@ describe('Keyboard interactions', () => { it('should wrap around at the end (activation = `manual`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -693,19 +693,19 @@ describe('Keyboard interactions', () => { it('should not be possible to go right when in vertical mode (activation = `auto`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -726,19 +726,19 @@ describe('Keyboard interactions', () => { it('should not be possible to go right when in vertical mode (activation = `manual`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -763,19 +763,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the previous item (activation = `auto`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -798,19 +798,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the previous item (activation = `manual`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -837,19 +837,19 @@ describe('Keyboard interactions', () => { it('should wrap around at the beginning (activation = `auto`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -878,19 +878,19 @@ describe('Keyboard interactions', () => { it('should wrap around at the beginning (activation = `manual`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -927,19 +927,19 @@ describe('Keyboard interactions', () => { it('should not be possible to go left when in vertical mode (activation = `auto`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -960,19 +960,19 @@ describe('Keyboard interactions', () => { it('should not be possible to go left when in vertical mode (activation = `manual`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -998,19 +998,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the next item (activation = `auto`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1033,19 +1033,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the next item (activation = `manual`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1072,19 +1072,19 @@ describe('Keyboard interactions', () => { it('should wrap around at the end (activation = `auto`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1113,19 +1113,19 @@ describe('Keyboard interactions', () => { it('should wrap around at the end (activation = `manual`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1162,19 +1162,19 @@ describe('Keyboard interactions', () => { it('should not be possible to go down when in horizontal mode (activation = `auto`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1195,19 +1195,19 @@ describe('Keyboard interactions', () => { it('should not be possible to go down when in horizontal mode (activation = `manual`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1233,19 +1233,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the previous item (activation = `auto`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1268,19 +1268,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the previous item (activation = `manual`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1307,19 +1307,19 @@ describe('Keyboard interactions', () => { it('should wrap around at the beginning (activation = `auto`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1348,19 +1348,19 @@ describe('Keyboard interactions', () => { it('should wrap around at the beginning (activation = `manual`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1397,19 +1397,19 @@ describe('Keyboard interactions', () => { it('should not be possible to go left when in vertical mode (activation = `auto`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1430,19 +1430,19 @@ describe('Keyboard interactions', () => { it('should not be possible to go left when in vertical mode (activation = `manual`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1468,19 +1468,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the first focusable item (activation = `auto`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1500,19 +1500,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the first focusable item (activation = `manual`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1536,19 +1536,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the first focusable item (activation = `auto`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1568,19 +1568,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the first focusable item (activation = `manual`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1604,19 +1604,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the first focusable item (activation = `auto`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1636,19 +1636,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the first focusable item (activation = `manual`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1672,19 +1672,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the first focusable item (activation = `auto`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1704,19 +1704,19 @@ describe('Keyboard interactions', () => { it('should be possible to go to the first focusable item (activation = `manual`)', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1740,19 +1740,19 @@ describe('Keyboard interactions', () => { it('should be possible to activate the focused tab', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1776,19 +1776,19 @@ describe('Keyboard interactions', () => { it('should be possible to activate the focused tab', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1813,19 +1813,19 @@ describe('Mouse interactions', () => { it('should be possible to click on a tab to focus it', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1850,19 +1850,19 @@ describe('Mouse interactions', () => { it('should be a no-op when clicking on a disabled tab', async () => { renderTemplate( html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + ` @@ -1885,19 +1885,19 @@ it('should trigger the `onChange` when the tab changes', async () => { renderTemplate({ template: html` - - - Tab 1 - Tab 2 - Tab 3 - - - - Content 1 - Content 2 - Content 3 - - + + + Tab 1 + Tab 2 + Tab 3 + + + + Content 1 + Content 2 + Content 3 + + `, diff --git a/packages/@headlessui-vue/src/components/tabs/tabs.ts b/packages/@headlessui-vue/src/components/tabs/tabs.ts index a37fd52aa7..b13361e9b7 100644 --- a/packages/@headlessui-vue/src/components/tabs/tabs.ts +++ b/packages/@headlessui-vue/src/components/tabs/tabs.ts @@ -40,7 +40,7 @@ function useTabsContext(component: string) { let context = inject(TabsContext, null) if (context === null) { - let err = new Error(`<${component} /> is missing a parent component.`) + let err = new Error(`<${component} /> is missing a parent component.`) if (Error.captureStackTrace) Error.captureStackTrace(err, useTabsContext) throw err } @@ -50,8 +50,8 @@ function useTabsContext(component: string) { // --- -export let Tabs = defineComponent({ - name: 'Tabs', +export let TabGroup = defineComponent({ + name: 'TabGroup', emits: ['change'], props: { as: { type: [Object, String], default: 'template' }, @@ -130,7 +130,7 @@ export let Tabs = defineComponent({ slot, slots, attrs, - name: 'Tabs', + name: 'TabGroup', }) } }, @@ -138,13 +138,13 @@ export let Tabs = defineComponent({ // --- -export let TabsList = defineComponent({ - name: 'TabsList', +export let TabList = defineComponent({ + name: 'TabList', props: { as: { type: [Object, String], default: 'div' }, }, setup(props, { attrs, slots }) { - let api = useTabsContext('TabsList') + let api = useTabsContext('TabList') return () => { let slot = { selectedIndex: api.selectedIndex.value } @@ -160,7 +160,7 @@ export let TabsList = defineComponent({ slot, attrs, slots, - name: 'TabsList', + name: 'TabList', }) } }, @@ -168,14 +168,14 @@ export let TabsList = defineComponent({ // --- -export let TabsTab = defineComponent({ - name: 'TabsTab', +export let Tab = defineComponent({ + name: 'Tab', props: { as: { type: [Object, String], default: 'button' }, disabled: { type: [Boolean], default: false }, }, render() { - let api = useTabsContext('TabsTab') + let api = useTabsContext('Tab') let slot = { selected: this.selected } let propsWeControl = { @@ -201,11 +201,11 @@ export let TabsTab = defineComponent({ slot, attrs: this.$attrs, slots: this.$slots, - name: 'TabsTab', + name: 'Tab', }) }, setup(props, { attrs }) { - let api = useTabsContext('TabsTab') + let api = useTabsContext('Tab') let id = `headlessui-tabs-tab-${useId()}` let tabRef = ref() @@ -284,13 +284,13 @@ export let TabsTab = defineComponent({ // --- -export let TabsPanels = defineComponent({ - name: 'TabsPanels', +export let TabPanels = defineComponent({ + name: 'TabPanels', props: { as: { type: [Object, String], default: 'div' }, }, setup(props, { slots, attrs }) { - let api = useTabsContext('TabsPanels') + let api = useTabsContext('TabPanels') return () => { let slot = { selectedIndex: api.selectedIndex.value } @@ -300,21 +300,21 @@ export let TabsPanels = defineComponent({ slot, attrs, slots, - name: 'TabsPanels', + name: 'TabPanels', }) } }, }) -export let TabsPanel = defineComponent({ - name: 'TabsPanel', +export let TabPanel = defineComponent({ + name: 'TabPanel', props: { as: { type: [Object, String], default: 'div' }, static: { type: Boolean, default: false }, unmount: { type: Boolean, default: true }, }, render() { - let api = useTabsContext('TabsPanel') + let api = useTabsContext('TabPanel') let slot = { selected: this.selected } let propsWeControl = { @@ -336,11 +336,11 @@ export let TabsPanel = defineComponent({ slots: this.$slots, features: Features.Static | Features.RenderStrategy, visible: this.selected, - name: 'TabsPanel', + name: 'TabPanel', }) }, setup() { - let api = useTabsContext('TabsPanel') + let api = useTabsContext('TabPanel') let id = `headlessui-tabs-panel-${useId()}` let panelRef = ref() diff --git a/packages/@headlessui-vue/src/index.test.ts b/packages/@headlessui-vue/src/index.test.ts index efa7b8d5e5..97ddbee3e8 100644 --- a/packages/@headlessui-vue/src/index.test.ts +++ b/packages/@headlessui-vue/src/index.test.ts @@ -57,11 +57,11 @@ it('should expose the correct components', () => { 'SwitchDescription', // Tabs - 'Tabs', - 'TabsList', - 'TabsTab', - 'TabsPanels', - 'TabsPanel', + 'TabGroup', + 'TabList', + 'Tab', + 'TabPanels', + 'TabPanel', // Transition 'TransitionChild', From 8a10fe61c1890df331f248c801ef48c8da1ff4fc Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 28 Jul 2021 11:12:03 +0200 Subject: [PATCH 3/4] change playground example for Tabs (React) --- .../pages/tabs/tabs-with-pure-tailwind.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/@headlessui-react/pages/tabs/tabs-with-pure-tailwind.tsx b/packages/@headlessui-react/pages/tabs/tabs-with-pure-tailwind.tsx index fefe911bf6..c6c7f84b99 100644 --- a/packages/@headlessui-react/pages/tabs/tabs-with-pure-tailwind.tsx +++ b/packages/@headlessui-react/pages/tabs/tabs-with-pure-tailwind.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react' -import { Tabs, Switch } from '@headlessui/react' +import { Tab, Switch } from '@headlessui/react' import { classNames } from '../../src/utils/class-names' @@ -11,7 +11,7 @@ export default function Home() { { name: 'Billing', content: 'Tab content for billing' }, ] - let [manual, setManual] = useState(true) + let [manual, setManual] = useState(false) return (
@@ -40,10 +40,10 @@ export default function Home() { - - + + {tabs.map((tab, tabIdx) => ( - @@ -69,18 +69,18 @@ export default function Home() { /> )} - + ))} - + - + {tabs.map(tab => ( - + {tab.content} - + ))} - - + +
) } From 57b46970deee28b519b2704604a7fa6e9b330b6a Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 28 Jul 2021 11:13:42 +0200 Subject: [PATCH 4/4] update changelog --- CHANGELOG.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d1013637dc..5402551f12 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added -- Add new `Tabs` component ([#674](https://github.com/tailwindlabs/headlessui/pull/674)) +- Add new `Tabs` component ([#674](https://github.com/tailwindlabs/headlessui/pull/674), [#698](https://github.com/tailwindlabs/headlessui/pull/698)) - Make `Disclosure.Button` close the disclosure inside a `Disclosure.Panel` ([#682](https://github.com/tailwindlabs/headlessui/pull/682)) - Add `aria-orientation` to `Listbox`, which swaps Up/Down with Left/Right keys ([#683](https://github.com/tailwindlabs/headlessui/pull/683)) @@ -17,7 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added -- Add new `Tabs` component ([#674](https://github.com/tailwindlabs/headlessui/pull/674)) +- Add new `Tabs` component ([#674](https://github.com/tailwindlabs/headlessui/pull/674), [#698](https://github.com/tailwindlabs/headlessui/pull/698)) - Make `DisclosureButton` close the disclosure inside a `DisclosurePanel` ([#682](https://github.com/tailwindlabs/headlessui/pull/682)) - Add `aria-orientation` to `Listbox`, which swaps Up/Down with Left/Right keys ([#683](https://github.com/tailwindlabs/headlessui/pull/683))