Change Tabs api (#698)

* Change Tabs API (React)

| Before        | After        |
| ------------- | ------------ |
| `Tabs`        | `Tab.Group`  |
| `Tabs.List`   | `Tab.List`   |
| `Tabs.Tab`    | `Tab`        |
| `Tabs.Panels` | `Tab.Panels` |
| `Tabs.Panel`  | `Tab.Panel`  |

* Change Tabs API (Vue)

| Before       | After       |
| ------------ | ----------- |
| `Tabs`       | `TabGroup`  |
| `TabsList`   | `TabList`   |
| `TabsTab`    | `Tab`       |
| `TabsPanels` | `TabPanels` |
| `TabsPanel`  | `TabPanel`  |

* change playground example for Tabs (React)

* update changelog

Author: RobinMalfait

CHANGELOG.md

@@ -9,15 +9,15 @@ 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))
 
 ## [Unreleased - Vue]
 
 ### 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))
 

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 (
     <div className="flex flex-col items-start w-screen h-full p-12 bg-gray-50 space-y-12">
@@ -40,10 +40,10 @@ export default function Home() {
         </Switch>
       </Switch.Group>
 
-      <Tabs className="flex flex-col max-w-3xl w-full" as="div" manual={manual}>
-        <Tabs.List className="relative z-0 rounded-lg shadow flex divide-x divide-gray-200">
+      <Tab.Group className="flex flex-col max-w-3xl w-full" as="div" manual={manual}>
+        <Tab.List className="relative z-0 rounded-lg shadow flex divide-x divide-gray-200">
           {tabs.map((tab, tabIdx) => (
-            <Tabs.Tab
+            <Tab
               key={tab.name}
               disabled={tab.disabled}
               className={({ selected }) =>
@@ -69,18 +69,18 @@ export default function Home() {
                   />
                 </>
               )}
-            </Tabs.Tab>
+            </Tab>
           ))}
-        </Tabs.List>
+        </Tab.List>
 
-        <Tabs.Panels className="mt-4">
+        <Tab.Panels className="mt-4">
           {tabs.map(tab => (
-            <Tabs.Panel className="bg-white rounded-lg p-4 shadow" key={tab.name}>
+            <Tab.Panel className="bg-white rounded-lg p-4 shadow" key={tab.name}>
               {tab.content}
-            </Tabs.Panel>
+            </Tab.Panel>
           ))}
-        </Tabs.Panels>
-      </Tabs>
+        </Tab.Panels>
+      </Tab.Group>
     </div>
   )
 }