Skip to content

Commit 4942928

Browse files
RobinMalfaitRobinMalfait
authored
Improve transition naming (#331)
* rename Transition to TransitionRoot This will allow us to write it as: - TransitionRoot - TransitionChild This has the added benefit that it doesn't collide with the internal Transition component from Vue itself. * alias Transition.Root to Transition This allows us to write: - Transition.Root - Transition.Child If you have a standalone Transition, then you can still use <Transition /> as is. * drop unusued import * update changelog
1 parent 11a5942 commit 4942928

File tree

7 files changed

+43
-28
lines changed

7 files changed

+43
-28
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1212
- Fixed `outside click` not re-focusing the `Menu.Button` ([#220](https://github.com/tailwindlabs/headlessui/pull/220), [#256](https://github.com/tailwindlabs/headlessui/pull/256))
1313
- Fixed `outside click` not re-focusing the `Listbox.Button` ([#220](https://github.com/tailwindlabs/headlessui/pull/220), [#256](https://github.com/tailwindlabs/headlessui/pull/256))
1414
- Fixed `outside click` not re-focusing the `Popover` ([#261](https://github.com/tailwindlabs/headlessui/pull/220), [#256](https://github.com/tailwindlabs/headlessui/pull/261))
15-
- Fix incorrect type error `unique symbol` ([#248](https://github.com/tailwindlabs/headlessui/pull/248), [#240](https://github.com/tailwindlabs/headlessui/issues/240))
1615
- Force focus in `Menu.Items` and `Listbox.Options` from within the component itself ([#261](https://github.com/tailwindlabs/headlessui/pull/261))
1716
- Fix `undefined` values in id's for the `Dialog` component ([#261](https://github.com/tailwindlabs/headlessui/pull/261))
1817
- Ensure `useInertOthers` works when used in a shared parent ([#261](https://github.com/tailwindlabs/headlessui/pull/261))
@@ -34,7 +33,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
3433
### Fixes
3534

3635
- Fix incorrect `DOM` node from ref ([#249](https://github.com/tailwindlabs/headlessui/pull/249))
37-
- Fix broken behaviour since Vue 3.0.5 ([#279](https://github.com/tailwindlabs/headlessui/pull/279))
3836
- Stop propagating keyboard/mouse events ([#282](https://github.com/tailwindlabs/headlessui/pull/282))
3937

4038
### Added
@@ -46,6 +44,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
4644
- Add `FocusTrap` component ([#282](https://github.com/tailwindlabs/headlessui/pull/282))
4745
- Add `Popover`, `PopoverButton`, `PopoverOverlay`, `PopoverPanel` and `PopoverGroup` components ([#282](https://github.com/tailwindlabs/headlessui/pull/282))
4846
- Add `RadioGroup`, `RadioGroupOption`, `RadioGroupLabel` and `RadioGroupDescription` components ([#282](https://github.com/tailwindlabs/headlessui/pull/282))
47+
- Add `TransitionRoot` and `TransitionChild` components ([#326](https://github.com/tailwindlabs/headlessui/pull/326))
4948

5049
## [@headlessui/react@v0.3.2] - 2021-04-02
5150

‎packages/@headlessui-react/src/components/transitions/transition.test.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ describe('Setup API', () => {
167167
</div>
168168
)
169169
}).toThrowErrorMatchingInlineSnapshot(
170-
`"A <Transition.Child /> is used but it is missing a parent <Transition />."`
170+
`"A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />."`
171171
)
172172
})
173173
)
@@ -181,6 +181,15 @@ describe('Setup API', () => {
181181
expect(document.getElementsByClassName('transition')).not.toBeNull()
182182
})
183183

184+
it('should be possible to use a Transition.Root and a Transition.Child', () => {
185+
render(
186+
<Transition.Root show={true}>
187+
<Transition.Child className="transition" />
188+
</Transition.Root>
189+
)
190+
expect(document.getElementsByClassName('transition')).not.toBeNull()
191+
})
192+
184193
it('should be possible to nest transition components', () => {
185194
let { container } = render(
186195
<div className="My Page">

‎packages/@headlessui-react/src/components/transitions/transition.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,9 @@ function useTransitionContext() {
6868
let context = useContext(TransitionContext)
6969

7070
if (context === null) {
71-
throw new Error('A <Transition.Child /> is used but it is missing a parent <Transition />.')
71+
throw new Error(
72+
'A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.'
73+
)
7274
}
7375

7476
return context
@@ -78,7 +80,9 @@ function useParentNesting() {
7880
let context = useContext(NestingContext)
7981

8082
if (context === null) {
81-
throw new Error('A <Transition.Child /> is used but it is missing a parent <Transition />.')
83+
throw new Error(
84+
'A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.'
85+
)
8286
}
8387

8488
return context
@@ -377,3 +381,4 @@ export function Transition<TTag extends ElementType = typeof DEFAULT_TRANSITION_
377381
}
378382

379383
Transition.Child = TransitionChild
384+
Transition.Root = Transition

‎packages/@headlessui-vue/examples/src/components/dialog/dialog.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ import {
176176
MenuItems,
177177
MenuItem,
178178
Portal,
179-
Transition,
179+
TransitionRoot,
180180
TransitionChild,
181181
} from '@headlessui/vue'
182182
import { usePopper } from '../../playground-utils/hooks/use-popper'
@@ -203,7 +203,7 @@ export default {
203203
MenuItems,
204204
MenuItem,
205205
Portal,
206-
TransitionRoot: Transition,
206+
TransitionRoot,
207207
TransitionChild,
208208
},
209209
setup() {

‎packages/@headlessui-vue/src/components/transitions/transition.test.ts‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { defineComponent, ref, onMounted, h } from 'vue'
1+
import { defineComponent, ref, onMounted } from 'vue'
22
import { render, fireEvent } from '../../test-utils/vue-testing-library'
33

44
import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
5-
import { Transition, TransitionChild } from './transition'
5+
import { TransitionRoot, TransitionChild } from './transition'
66

77
import { executeTimeline } from '../../test-utils/execute-timeline'
88
import { html } from '../../test-utils/html'
@@ -12,7 +12,7 @@ jest.mock('../../hooks/use-id')
1212
afterAll(() => jest.restoreAllMocks())
1313

1414
function renderTemplate(input: string | Partial<Parameters<typeof defineComponent>[0]>) {
15-
let defaultComponents = { TransitionRoot: Transition, TransitionChild }
15+
let defaultComponents = { TransitionRoot, TransitionChild }
1616

1717
if (typeof input === 'string') {
1818
return render(defineComponent({ template: input, components: defaultComponents }))
@@ -198,7 +198,9 @@ describe('Setup API', () => {
198198
`,
199199
errorCaptured(err) {
200200
expect(err as Error).toEqual(
201-
new Error('A <TransitionChild /> is used but it is missing a parent <Transition />.')
201+
new Error(
202+
'A <TransitionChild /> is used but it is missing a parent <TransitionRoot />.'
203+
)
202204
)
203205
return false
204206
},
@@ -375,7 +377,7 @@ describe('Setup API', () => {
375377
})
376378

377379
renderTemplate({
378-
components: { TransitionRoot: Transition, TransitionChild, Dummy },
380+
components: { TransitionRoot, TransitionChild, Dummy },
379381
template: html`
380382
<div class="My Page">
381383
<TransitionRoot :show="true">
@@ -398,7 +400,7 @@ describe('Setup API', () => {
398400
describe('transition classes', () => {
399401
it('should be possible to passthrough the transition classes', () => {
400402
let { container } = renderTemplate({
401-
components: { TransitionRoot: Transition },
403+
components: { TransitionRoot },
402404
template: html`
403405
<TransitionRoot
404406
:show="true"
@@ -462,7 +464,7 @@ describe('Transitions', () => {
462464
`)
463465

464466
let Example = defineComponent({
465-
components: { TransitionRoot: Transition },
467+
components: { TransitionRoot },
466468
template: html`
467469
<TransitionRoot :show="show" enter="enter" enterFrom="from" enterTo="to">
468470
<span>Hello!</span>
@@ -517,7 +519,7 @@ describe('Transitions', () => {
517519
`)
518520

519521
let Example = defineComponent({
520-
components: { TransitionRoot: Transition },
522+
components: { TransitionRoot },
521523
template: html`
522524
<TransitionRoot :show="show" enter="enter" enterFrom="from" enterTo="to">
523525
<span>Hello!</span>
@@ -572,7 +574,7 @@ describe('Transitions', () => {
572574
`)
573575

574576
let Example = defineComponent({
575-
components: { TransitionRoot: Transition },
577+
components: { TransitionRoot },
576578
template: html`
577579
<TransitionRoot :show="show" :unmount="false" enter="enter" enterFrom="from" enterTo="to">
578580
<span>Hello!</span>
@@ -622,7 +624,7 @@ describe('Transitions', () => {
622624
`)
623625

624626
let Example = defineComponent({
625-
components: { TransitionRoot: Transition },
627+
components: { TransitionRoot },
626628
template: html`
627629
<TransitionRoot :show="show" enter="enter" enterFrom="from" enterTo="to">
628630
<span>Hello!</span>
@@ -679,7 +681,7 @@ describe('Transitions', () => {
679681
`)
680682

681683
let Example = defineComponent({
682-
components: { TransitionRoot: Transition },
684+
components: { TransitionRoot },
683685
template: html`
684686
<TransitionRoot :show="show" leave="leave" leaveFrom="from" leaveTo="to">
685687
<span>Hello!</span>
@@ -739,7 +741,7 @@ describe('Transitions', () => {
739741
`)
740742

741743
let Example = defineComponent({
742-
components: { TransitionRoot: Transition },
744+
components: { TransitionRoot },
743745
template: html`
744746
<TransitionRoot
745747
:show="show"
@@ -806,7 +808,7 @@ describe('Transitions', () => {
806808
`)
807809

808810
let Example = defineComponent({
809-
components: { TransitionRoot: Transition },
811+
components: { TransitionRoot },
810812
template: html`
811813
<TransitionRoot
812814
:show="show"
@@ -901,7 +903,7 @@ describe('Transitions', () => {
901903
`)
902904

903905
let Example = defineComponent({
904-
components: { TransitionRoot: Transition },
906+
components: { TransitionRoot },
905907
template: html`
906908
<TransitionRoot
907909
:show="show"
@@ -1008,7 +1010,7 @@ describe('Transitions', () => {
10081010
`)
10091011

10101012
let Example = defineComponent({
1011-
components: { TransitionRoot: Transition, TransitionChild },
1013+
components: { TransitionRoot, TransitionChild },
10121014
template: html`
10131015
<TransitionRoot :show="show">
10141016
<TransitionChild leave="leave-fast" leaveFrom="leave-from" leaveTo="leave-to">
@@ -1097,7 +1099,7 @@ describe('Transitions', () => {
10971099
`)
10981100

10991101
let Example = defineComponent({
1100-
components: { TransitionRoot: Transition, TransitionChild },
1102+
components: { TransitionRoot, TransitionChild },
11011103
template: html`
11021104
<TransitionRoot :show="show">
11031105
<TransitionChild leave="leave-fast" leaveFrom="leave-from" leaveTo="leave-to">
@@ -1207,7 +1209,7 @@ describe('Events', () => {
12071209
`)
12081210

12091211
let Example = defineComponent({
1210-
components: { TransitionRoot: Transition },
1212+
components: { TransitionRoot },
12111213
template: html`
12121214
<TransitionRoot
12131215
:show="show"

‎packages/@headlessui-vue/src/components/transitions/transition.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ function useTransitionContext() {
4343
let context = inject(TransitionContext, null)
4444

4545
if (context === null) {
46-
throw new Error('A <TransitionChild /> is used but it is missing a parent <Transition />.')
46+
throw new Error('A <TransitionChild /> is used but it is missing a parent <TransitionRoot />.')
4747
}
4848

4949
return context
@@ -53,7 +53,7 @@ function useParentNesting() {
5353
let context = inject(NestingContext, null)
5454

5555
if (context === null) {
56-
throw new Error('A <TransitionChild /> is used but it is missing a parent <Transition />.')
56+
throw new Error('A <TransitionChild /> is used but it is missing a parent <TransitionRoot />.')
5757
}
5858

5959
return context
@@ -287,7 +287,7 @@ export let TransitionChild = defineComponent({
287287

288288
// ---
289289

290-
export let Transition = defineComponent({
290+
export let TransitionRoot = defineComponent({
291291
inheritAttrs: false,
292292
props: {
293293
as: { type: [Object, String], default: 'div' },

‎packages/@headlessui-vue/src/index.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,6 @@ it('should expose the correct components', () => {
5858

5959
// Transition
6060
'TransitionChild',
61-
'Transition',
61+
'TransitionRoot',
6262
])
6363
})

0 commit comments

Comments
 (0)