Merge pull request #702 from tailwindlabs/develop

Next release

CHANGELOG.md

@@ -7,11 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased - React]
 
-- Nothing yet!
+### Added
+
+- 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))
+- Expose `close` function from the render prop for `Disclosure`, `Disclosure.Panel`, `Popover` and `Popover.Panel` ([#697](https://github.com/tailwindlabs/headlessui/pull/697))
 
 ## [Unreleased - Vue]
 
-- Nothing yet!
+### Added
+
+- 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))
+- Expose `close` function from the scoped slot for `Disclosure`, `DisclosurePanel`, `Popover` and `PopoverPanel` ([#697](https://github.com/tailwindlabs/headlessui/pull/697))
 
 ## [@headlessui/react@v1.3.0] - 2021-06-21
 

packages/@headlessui-react/pages/tabs/tabs-with-pure-tailwind.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react'
+import { Tab, Switch } from '@headlessui/react'
+
+import { classNames } from '../../src/utils/class-names'
+
+export default function Home() {
+  let tabs = [
+    { name: 'My Account', content: 'Tab content for my account' },
+    { name: 'Company', content: 'Tab content for company', disabled: true },
+    { name: 'Team Members', content: 'Tab content for team members' },
+    { name: 'Billing', content: 'Tab content for billing' },
+  ]
+
+  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">
+      <Switch.Group as="div" className="flex items-center space-x-4">
+        <Switch.Label>Manual keyboard activation</Switch.Label>
+
+        <Switch
+          as="button"
+          checked={manual}
+          onChange={setManual}
+          className={({ checked }) =>
+            classNames(
+              'relative inline-flex flex-shrink-0 h-6 border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline transition-colors ease-in-out duration-200',
+              checked ? 'bg-indigo-600' : 'bg-gray-200'
+            )
+          }
+        >
+          {({ checked }) => (
+            <span
+              className={classNames(
+                'inline-block w-5 h-5 bg-white rounded-full transform transition ease-in-out duration-200',
+                checked ? 'translate-x-5' : 'translate-x-0'
+              )}
+            />
+          )}
+        </Switch>
+      </Switch.Group>
+
+      <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) => (
+            <Tab
+              key={tab.name}
+              disabled={tab.disabled}
+              className={({ selected }) =>
+                classNames(
+                  selected ? 'text-gray-900' : 'text-gray-500 hover:text-gray-700',
+                  tabIdx === 0 ? 'rounded-l-lg' : '',
+                  tabIdx === tabs.length - 1 ? 'rounded-r-lg' : '',
+                  tab.disabled && 'opacity-50',
+                  'group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center hover:bg-gray-50 focus:z-10'
+                )
+              }
+            >
+              {({ selected }) => (
+                <>
+                  <span>{tab.name}</span>
+                  {tab.disabled && <small className="inline-block px-4 text-xs">(disabled)</small>}
+                  <span
+                    aria-hidden="true"
+                    className={classNames(
+                      selected ? 'bg-indigo-500' : 'bg-transparent',
+                      'absolute inset-x-0 bottom-0 h-0.5'
+                    )}
+                  />
+                </>
+              )}
+            </Tab>
+          ))}
+        </Tab.List>
+
+        <Tab.Panels className="mt-4">
+          {tabs.map(tab => (
+            <Tab.Panel className="bg-white rounded-lg p-4 shadow" key={tab.name}>
+              {tab.content}
+            </Tab.Panel>
+          ))}
+        </Tab.Panels>
+      </Tab.Group>
+    </div>
+  )
+}