huanld/headlessui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve transition naming (#331)

Browse Source 
* 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
This commit is contained in:
Robin Malfait
2021-04-13 19:01:07 +02:00
committed by GitHub
parent 11a5942142
commit 4942928db1
7 changed files with 43 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+1 -2
View File
@@ -12,7 +12,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- 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))
- 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))
- Fixed `outside click` not re-focusing the `Popover` ([#261](https://github.com/tailwindlabs/headlessui/pull/220), [#256](https://github.com/tailwindlabs/headlessui/pull/261))
- Fix incorrect type error `unique symbol` ([#248](https://github.com/tailwindlabs/headlessui/pull/248), [#240](https://github.com/tailwindlabs/headlessui/issues/240))
- Force focus in `Menu.Items` and `Listbox.Options` from within the component itself ([#261](https://github.com/tailwindlabs/headlessui/pull/261))
- Fix `undefined` values in id's for the `Dialog` component ([#261](https://github.com/tailwindlabs/headlessui/pull/261))
- 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
### Fixes
- Fix incorrect `DOM` node from ref ([#249](https://github.com/tailwindlabs/headlessui/pull/249))
- Fix broken behaviour since Vue 3.0.5 ([#279](https://github.com/tailwindlabs/headlessui/pull/279))
- Stop propagating keyboard/mouse events ([#282](https://github.com/tailwindlabs/headlessui/pull/282))
### Added
@@ -46,6 +44,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Add `FocusTrap` component ([#282](https://github.com/tailwindlabs/headlessui/pull/282))
- Add `Popover`, `PopoverButton`, `PopoverOverlay`, `PopoverPanel` and `PopoverGroup` components ([#282](https://github.com/tailwindlabs/headlessui/pull/282))
- Add `RadioGroup`, `RadioGroupOption`, `RadioGroupLabel` and `RadioGroupDescription` components ([#282](https://github.com/tailwindlabs/headlessui/pull/282))
- Add `TransitionRoot` and `TransitionChild` components ([#326](https://github.com/tailwindlabs/headlessui/pull/326))
## [@headlessui/react@v0.3.2] - 2021-04-02
packages/@headlessui-react/src/components/transitions/transition.test.tsx
+10 -1
View File
@@ -167,7 +167,7 @@ describe('Setup API', () => {
</div>
)
}).toThrowErrorMatchingInlineSnapshot(
`"A <Transition.Child /> is used but it is missing a parent <Transition />."`
`"A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />."`
)
})
)
@@ -181,6 +181,15 @@ describe('Setup API', () => {
expect(document.getElementsByClassName('transition')).not.toBeNull()
})
it('should be possible to use a Transition.Root and a Transition.Child', () => {
render(
<Transition.Root show={true}>
<Transition.Child className="transition" />
</Transition.Root>
)
expect(document.getElementsByClassName('transition')).not.toBeNull()
})
it('should be possible to nest transition components', () => {
let { container } = render(
<div className="My Page">
packages/@headlessui-react/src/components/transitions/transition.tsx
+7 -2
View File
@@ -68,7 +68,9 @@ function useTransitionContext() {
let context = useContext(TransitionContext)
if (context === null) {
throw new Error('A <Transition.Child /> is used but it is missing a parent <Transition />.')
throw new Error(
'A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.'
)
}
return context
@@ -78,7 +80,9 @@ function useParentNesting() {
let context = useContext(NestingContext)
if (context === null) {
throw new Error('A <Transition.Child /> is used but it is missing a parent <Transition />.')
throw new Error(
'A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.'
)
}
return context
@@ -377,3 +381,4 @@ export function Transition<TTag extends ElementType = typeof DEFAULT_TRANSITION_
}
Transition.Child = TransitionChild
Transition.Root = Transition
packages/@headlessui-vue/examples/src/components/dialog/dialog.vue
+2 -2
View File
@@ -176,7 +176,7 @@ import {
MenuItems,
MenuItem,
Portal,
Transition,
TransitionRoot,
TransitionChild,
} from '@headlessui/vue'
import { usePopper } from '../../playground-utils/hooks/use-popper'
@@ -203,7 +203,7 @@ export default {
MenuItems,
MenuItem,
Portal,
TransitionRoot: Transition,
TransitionRoot,
TransitionChild,
},
setup() {
packages/@headlessui-vue/src/components/transitions/transition.test.ts
+19 -17
View File
@@ -1,8 +1,8 @@
import { defineComponent, ref, onMounted, h } from 'vue'
import { defineComponent, ref, onMounted } from 'vue'
import { render, fireEvent } from '../../test-utils/vue-testing-library'
import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
import { Transition, TransitionChild } from './transition'
import { TransitionRoot, TransitionChild } from './transition'
import { executeTimeline } from '../../test-utils/execute-timeline'
import { html } from '../../test-utils/html'
@@ -12,7 +12,7 @@ jest.mock('../../hooks/use-id')
afterAll(() => jest.restoreAllMocks())
function renderTemplate(input: string | Partial<Parameters<typeof defineComponent>[0]>) {
let defaultComponents = { TransitionRoot: Transition, TransitionChild }
let defaultComponents = { TransitionRoot, TransitionChild }
if (typeof input === 'string') {
return render(defineComponent({ template: input, components: defaultComponents }))
@@ -198,7 +198,9 @@ describe('Setup API', () => {
`,
errorCaptured(err) {
expect(err as Error).toEqual(
new Error('A <TransitionChild /> is used but it is missing a parent <Transition />.')
new Error(
'A <TransitionChild /> is used but it is missing a parent <TransitionRoot />.'
)
)
return false
},
@@ -375,7 +377,7 @@ describe('Setup API', () => {
})
renderTemplate({
components: { TransitionRoot: Transition, TransitionChild, Dummy },
components: { TransitionRoot, TransitionChild, Dummy },
template: html`
<div class="My Page">
<TransitionRoot :show="true">
@@ -398,7 +400,7 @@ describe('Setup API', () => {
describe('transition classes', () => {
it('should be possible to passthrough the transition classes', () => {
let { container } = renderTemplate({
components: { TransitionRoot: Transition },
components: { TransitionRoot },
template: html`
<TransitionRoot
:show="true"
@@ -462,7 +464,7 @@ describe('Transitions', () => {
`)
let Example = defineComponent({
components: { TransitionRoot: Transition },
components: { TransitionRoot },
template: html`
<TransitionRoot :show="show" enter="enter" enterFrom="from" enterTo="to">
<span>Hello!</span>
@@ -517,7 +519,7 @@ describe('Transitions', () => {
`)
let Example = defineComponent({
components: { TransitionRoot: Transition },
components: { TransitionRoot },
template: html`
<TransitionRoot :show="show" enter="enter" enterFrom="from" enterTo="to">
<span>Hello!</span>
@@ -572,7 +574,7 @@ describe('Transitions', () => {
`)
let Example = defineComponent({
components: { TransitionRoot: Transition },
components: { TransitionRoot },
template: html`
<TransitionRoot :show="show" :unmount="false" enter="enter" enterFrom="from" enterTo="to">
<span>Hello!</span>
@@ -622,7 +624,7 @@ describe('Transitions', () => {
`)
let Example = defineComponent({
components: { TransitionRoot: Transition },
components: { TransitionRoot },
template: html`
<TransitionRoot :show="show" enter="enter" enterFrom="from" enterTo="to">
<span>Hello!</span>
@@ -679,7 +681,7 @@ describe('Transitions', () => {
`)
let Example = defineComponent({
components: { TransitionRoot: Transition },
components: { TransitionRoot },
template: html`
<TransitionRoot :show="show" leave="leave" leaveFrom="from" leaveTo="to">
<span>Hello!</span>
@@ -739,7 +741,7 @@ describe('Transitions', () => {
`)
let Example = defineComponent({
components: { TransitionRoot: Transition },
components: { TransitionRoot },
template: html`
<TransitionRoot
:show="show"
@@ -806,7 +808,7 @@ describe('Transitions', () => {
`)
let Example = defineComponent({
components: { TransitionRoot: Transition },
components: { TransitionRoot },
template: html`
<TransitionRoot
:show="show"
@@ -901,7 +903,7 @@ describe('Transitions', () => {
`)
let Example = defineComponent({
components: { TransitionRoot: Transition },
components: { TransitionRoot },
template: html`
<TransitionRoot
:show="show"
@@ -1008,7 +1010,7 @@ describe('Transitions', () => {
`)
let Example = defineComponent({
components: { TransitionRoot: Transition, TransitionChild },
components: { TransitionRoot, TransitionChild },
template: html`
<TransitionRoot :show="show">
<TransitionChild leave="leave-fast" leaveFrom="leave-from" leaveTo="leave-to">
@@ -1097,7 +1099,7 @@ describe('Transitions', () => {
`)
let Example = defineComponent({
components: { TransitionRoot: Transition, TransitionChild },
components: { TransitionRoot, TransitionChild },
template: html`
<TransitionRoot :show="show">
<TransitionChild leave="leave-fast" leaveFrom="leave-from" leaveTo="leave-to">
@@ -1207,7 +1209,7 @@ describe('Events', () => {
`)
let Example = defineComponent({
components: { TransitionRoot: Transition },
components: { TransitionRoot },
template: html`
<TransitionRoot
:show="show"
packages/@headlessui-vue/src/components/transitions/transition.ts
+3 -3
View File
@@ -43,7 +43,7 @@ function useTransitionContext() {
let context = inject(TransitionContext, null)
if (context === null) {
throw new Error('A <TransitionChild /> is used but it is missing a parent <Transition />.')
throw new Error('A <TransitionChild /> is used but it is missing a parent <TransitionRoot />.')
}
return context
@@ -53,7 +53,7 @@ function useParentNesting() {
let context = inject(NestingContext, null)
if (context === null) {
throw new Error('A <TransitionChild /> is used but it is missing a parent <Transition />.')
throw new Error('A <TransitionChild /> is used but it is missing a parent <TransitionRoot />.')
}
return context
@@ -287,7 +287,7 @@ export let TransitionChild = defineComponent({
// ---
export let Transition = defineComponent({
export let TransitionRoot = defineComponent({
inheritAttrs: false,
props: {
as: { type: [Object, String], default: 'div' },
packages/@headlessui-vue/src/index.test.ts
+1 -1
View File
@@ -58,6 +58,6 @@ it('should expose the correct components', () => {
// Transition
'TransitionChild',
'Transition',
'TransitionRoot',
])
})