Skip to content

Commit 396f889

Browse files
RobinMalfaitRobinMalfait
authored
Merge pull request #501 from tailwindlabs/develop
Next release
2 parents 91007b7 + 084a249 commit 396f889

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+2148
-620
lines changed

‎.github/workflows/main.yml‎

Lines changed: 45 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,73 @@
11
name: CI
2+
23
on: [push]
4+
5+
env:
6+
NODE_VERSION: 12.x
7+
38
jobs:
4-
build:
9+
install:
510
runs-on: ubuntu-latest
611

712
steps:
813
- name: Begin CI...
914
uses: actions/checkout@v2
10-
11-
- name: Use Node 12
15+
- name: Use Node ${{ env.NODE_VERSION }}
1216
uses: actions/setup-node@v2
1317
with:
14-
node-version: 12
15-
16-
# - name: Use cached node_modules
17-
# id: cache
18-
# uses: actions/cache@v2
19-
# with:
20-
# path: node_modules
21-
# key: nodeModules-${{ hashFiles('**/yarn.lock') }}
22-
# restore-keys: |
23-
# nodeModules-
24-
18+
node-version: ${{ env.NODE_VERSION }}
19+
- uses: actions/cache@v2
20+
with:
21+
path: '**/node_modules'
22+
key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/yarn.lock') }}
2523
- name: Install dependencies
26-
# if: steps.cache.outputs.cache-hit != 'true'
2724
run: yarn install --frozen-lockfile
2825
env:
2926
CI: true
3027

28+
lint:
29+
runs-on: ubuntu-latest
30+
needs: [install]
31+
32+
steps:
33+
- name: Begin CI...
34+
uses: actions/checkout@v2
35+
- uses: actions/cache@v2
36+
with:
37+
path: '**/node_modules'
38+
key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/yarn.lock') }}
3139
- name: Lint
3240
run: yarn lint
3341
env:
3442
CI: true
3543

44+
test:
45+
runs-on: ubuntu-latest
46+
needs: [install]
47+
48+
steps:
49+
- name: Begin CI...
50+
uses: actions/checkout@v2
51+
- uses: actions/cache@v2
52+
with:
53+
path: '**/node_modules'
54+
key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/yarn.lock') }}
3655
- name: Test
3756
run: yarn test
3857
env:
3958
CI: true
4059

60+
build:
61+
runs-on: ubuntu-latest
62+
needs: [install]
63+
64+
steps:
65+
- name: Begin CI...
66+
uses: actions/checkout@v2
67+
- uses: actions/cache@v2
68+
with:
69+
path: '**/node_modules'
70+
key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/yarn.lock') }}
4171
- name: Build
4272
run: yarn build
4373
env:

‎CHANGELOG.md‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased - React]
99

10-
- Nothing yet!
10+
### Added
11+
12+
- Introduce Open/Closed state, to simplify component communication ([#466](https://github.com/tailwindlabs/headlessui/pull/466))
13+
14+
### Fixes
15+
16+
- Improve SSR for `Dialog` ([#477](https://github.com/tailwindlabs/headlessui/pull/477))
17+
- Delay focus trap initialization ([#477](https://github.com/tailwindlabs/headlessui/pull/477))
18+
- Improve incorrect behaviour for nesting `Dialog` components ([#560](https://github.com/tailwindlabs/headlessui/pull/560))
1119

1220
## [Unreleased - Vue]
1321

14-
- Nothing yet!
22+
### Added
23+
24+
- Introduce Open/Closed state, to simplify component communication ([#466](https://github.com/tailwindlabs/headlessui/pull/466))
1525

1626
## [@headlessui/react@v1.1.1] - 2021-04-28
1727

‎packages/@headlessui-react/pages/dialog/dialog.tsx‎

Lines changed: 71 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ function Nested({ onClose, level = 0 }) {
2020
return (
2121
<>
2222
<Dialog open={true} onClose={onClose} className="fixed z-10 inset-0">
23-
{true && <Dialog.Overlay className="fixed inset-0 bg-gray-500 opacity-25" />}
23+
<Dialog.Overlay className="fixed inset-0 bg-gray-500 opacity-25" />
2424
<div
2525
className="z-10 fixed left-12 top-24 bg-white w-96 p-4"
2626
style={{
@@ -69,8 +69,8 @@ export default function Home() {
6969
<button onClick={() => setNested(true)}>Show nested</button>
7070
{nested && <Nested onClose={() => setNested(false)} />}
7171

72-
<Transition show={isOpen} as={Fragment}>
73-
<Dialog open={isOpen} onClose={setIsOpen} static>
72+
<Transition show={isOpen} as={Fragment} afterLeave={() => console.log('done')}>
73+
<Dialog onClose={setIsOpen}>
7474
<div className="fixed z-10 inset-0 overflow-y-auto">
7575
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
7676
<Transition.Child
@@ -136,96 +136,78 @@ export default function Home() {
136136
</p>
137137
<div className="relative inline-block text-left mt-10">
138138
<Menu>
139-
{({ open }) => (
140-
<>
141-
<span className="rounded-md shadow-sm">
142-
<Menu.Button
143-
ref={trigger}
144-
className="inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800"
145-
>
146-
<span>Choose a reason</span>
147-
<svg
148-
className="w-5 h-5 ml-2 -mr-1"
149-
viewBox="0 0 20 20"
150-
fill="currentColor"
151-
>
152-
<path
153-
fillRule="evenodd"
154-
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
155-
clipRule="evenodd"
156-
/>
157-
</svg>
158-
</Menu.Button>
159-
</span>
139+
<span className="rounded-md shadow-sm">
140+
<Menu.Button
141+
ref={trigger}
142+
className="inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800"
143+
>
144+
<span>Choose a reason</span>
145+
<svg
146+
className="w-5 h-5 ml-2 -mr-1"
147+
viewBox="0 0 20 20"
148+
fill="currentColor"
149+
>
150+
<path
151+
fillRule="evenodd"
152+
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
153+
clipRule="evenodd"
154+
/>
155+
</svg>
156+
</Menu.Button>
157+
</span>
160158

161-
<Transition
162-
show={open}
163-
enter="transition duration-100 ease-out"
164-
enterFrom="transform scale-95 opacity-0"
165-
enterTo="transform scale-100 opacity-100"
166-
leave="transition duration-75 ease-out"
167-
leaveFrom="transform scale-100 opacity-100"
168-
leaveTo="transform scale-95 opacity-0"
159+
<Transition
160+
enter="transition duration-300 ease-out"
161+
enterFrom="transform scale-95 opacity-0"
162+
enterTo="transform scale-100 opacity-100"
163+
leave="transition duration-75 ease-out"
164+
leaveFrom="transform scale-100 opacity-100"
165+
leaveTo="transform scale-95 opacity-0"
166+
>
167+
<Portal>
168+
<Menu.Items
169+
ref={container}
170+
className="z-20 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none"
169171
>
170-
<Portal>
171-
<Menu.Items
172-
ref={container}
173-
static
174-
className="z-20 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none"
175-
>
176-
<div className="px-4 py-3">
177-
<p className="text-sm leading-5">Signed in as</p>
178-
<p className="text-sm font-medium leading-5 text-gray-900 truncate">
179-
[email protected]
180-
</p>
181-
</div>
172+
<div className="px-4 py-3">
173+
<p className="text-sm leading-5">Signed in as</p>
174+
<p className="text-sm font-medium leading-5 text-gray-900 truncate">
175+
[email protected]
176+
</p>
177+
</div>
182178

183-
<div className="py-1">
184-
<Menu.Item
185-
as="a"
186-
href="#account-settings"
187-
className={resolveClass}
188-
>
189-
Account settings
190-
</Menu.Item>
191-
<Menu.Item
192-
as="a"
193-
href="#support"
194-
className={resolveClass}
195-
>
196-
Support
197-
</Menu.Item>
198-
<Menu.Item
199-
as="a"
200-
disabled
201-
href="#new-feature"
202-
className={resolveClass}
203-
>
204-
New feature (soon)
205-
</Menu.Item>
206-
<Menu.Item
207-
as="a"
208-
href="#license"
209-
className={resolveClass}
210-
>
211-
License
212-
</Menu.Item>
213-
</div>
179+
<div className="py-1">
180+
<Menu.Item
181+
as="a"
182+
href="#account-settings"
183+
className={resolveClass}
184+
>
185+
Account settings
186+
</Menu.Item>
187+
<Menu.Item as="a" href="#support" className={resolveClass}>
188+
Support
189+
</Menu.Item>
190+
<Menu.Item
191+
as="a"
192+
disabled
193+
href="#new-feature"
194+
className={resolveClass}
195+
>
196+
New feature (soon)
197+
</Menu.Item>
198+
<Menu.Item as="a" href="#license" className={resolveClass}>
199+
License
200+
</Menu.Item>
201+
</div>
214202

215-
<div className="py-1">
216-
<Menu.Item
217-
as="a"
218-
href="#sign-out"
219-
className={resolveClass}
220-
>
221-
Sign out
222-
</Menu.Item>
223-
</div>
224-
</Menu.Items>
225-
</Portal>
226-
</Transition>
227-
</>
228-
)}
203+
<div className="py-1">
204+
<Menu.Item as="a" href="#sign-out" className={resolveClass}>
205+
Sign out
206+
</Menu.Item>
207+
</div>
208+
</Menu.Items>
209+
</Portal>
210+
</Transition>
229211
</Menu>
230212
</div>
231213
</div>

‎packages/@headlessui-react/pages/disclosure/disclosure.tsx‎

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,18 @@ export default function Home() {
66
<div className="flex justify-center w-screen h-full p-12 bg-gray-50">
77
<div className="w-full max-w-xs mx-auto">
88
<Disclosure>
9-
{({ open }) => (
10-
<>
11-
<Disclosure.Button>Trigger</Disclosure.Button>
9+
<Disclosure.Button>Trigger</Disclosure.Button>
1210

13-
<Transition
14-
show={open}
15-
enter="transition duration-100 ease-out"
16-
enterFrom="transform scale-95 opacity-0"
17-
enterTo="transform scale-100 opacity-100"
18-
leave="transition duration-75 ease-out"
19-
leaveFrom="transform scale-100 opacity-100"
20-
leaveTo="transform scale-95 opacity-0"
21-
>
22-
<Disclosure.Panel static className="p-4 bg-white mt-4">
23-
Content
24-
</Disclosure.Panel>
25-
</Transition>
26-
</>
27-
)}
11+
<Transition
12+
enter="transition duration-1000 ease-out"
13+
enterFrom="transform scale-95 opacity-0"
14+
enterTo="transform scale-100 opacity-100"
15+
leave="transition duration-1000 ease-out"
16+
leaveFrom="transform scale-100 opacity-100"
17+
leaveTo="transform scale-95 opacity-0"
18+
>
19+
<Disclosure.Panel className="p-4 bg-white mt-4">Content</Disclosure.Panel>
20+
</Transition>
2821
</Disclosure>
2922
</div>
3023
</div>

0 commit comments

Comments
 (0)