From 67672e6c471693079abe99a6c51dc5c651a8fe58 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 9 Jan 2024 15:38:39 +0100 Subject: [PATCH 1/2] expose `disabled` on `` component This will expose it such that you can use it with `ui-disabled`. In the Alpha version of React, you can also use `data-[disabled]` because it will be exposed as `data-disabled` over there as well. Fixes: #2864 --- .../src/components/tabs/tabs.test.tsx | 6 ++++++ .../@headlessui-react/src/components/tabs/tabs.tsx | 4 +++- .../@headlessui-vue/src/components/tabs/tabs.test.ts | 12 ++++++------ packages/@headlessui-vue/src/components/tabs/tabs.ts | 2 +- 4 files changed, 16 insertions(+), 8 deletions(-) diff --git a/packages/@headlessui-react/src/components/tabs/tabs.test.tsx b/packages/@headlessui-react/src/components/tabs/tabs.test.tsx index 679a4cb63d..9cb78f274c 100644 --- a/packages/@headlessui-react/src/components/tabs/tabs.test.tsx +++ b/packages/@headlessui-react/src/components/tabs/tabs.test.tsx @@ -544,6 +544,7 @@ describe('Rendering', () => { active: false, focus: false, autofocus: false, + disabled: false, }) ) expect(document.querySelector('[data-tab="1"]')).toHaveTextContent( @@ -553,6 +554,7 @@ describe('Rendering', () => { active: false, focus: false, autofocus: false, + disabled: false, }) ) expect(document.querySelector('[data-tab="2"]')).toHaveTextContent( @@ -562,6 +564,7 @@ describe('Rendering', () => { active: false, focus: false, autofocus: false, + disabled: false, }) ) @@ -574,6 +577,7 @@ describe('Rendering', () => { active: false, focus: false, autofocus: false, + disabled: false, }) ) expect(document.querySelector('[data-tab="1"]')).toHaveTextContent( @@ -583,6 +587,7 @@ describe('Rendering', () => { active: false, focus: false, autofocus: false, + disabled: false, }) ) expect(document.querySelector('[data-tab="2"]')).toHaveTextContent( @@ -592,6 +597,7 @@ describe('Rendering', () => { active: false, focus: false, autofocus: false, + disabled: false, }) ) }) diff --git a/packages/@headlessui-react/src/components/tabs/tabs.tsx b/packages/@headlessui-react/src/components/tabs/tabs.tsx index 24ea4983b7..e4de17faa5 100644 --- a/packages/@headlessui-react/src/components/tabs/tabs.tsx +++ b/packages/@headlessui-react/src/components/tabs/tabs.tsx @@ -388,6 +388,7 @@ type TabRenderPropArg = { active: boolean autofocus: boolean selected: boolean + disabled: boolean } type TabPropsWeControl = 'aria-controls' | 'aria-selected' | 'role' | 'tabIndex' @@ -512,8 +513,9 @@ function TabFn( active, focus, autofocus: props.autoFocus ?? false, + disabled: props.disabled ?? false, }) satisfies TabRenderPropArg, - [selected, hover, focus, active, props.autoFocus] + [selected, hover, focus, active, props.autoFocus, props.disabled] ) let ourProps = mergeProps( diff --git a/packages/@headlessui-vue/src/components/tabs/tabs.test.ts b/packages/@headlessui-vue/src/components/tabs/tabs.test.ts index 96a152e6ff..28a5896b6d 100644 --- a/packages/@headlessui-vue/src/components/tabs/tabs.test.ts +++ b/packages/@headlessui-vue/src/components/tabs/tabs.test.ts @@ -463,25 +463,25 @@ describe('Rendering', () => { await new Promise(nextTick) expect(document.querySelector('[data-tab="0"]')).toHaveTextContent( - JSON.stringify({ selected: true }) + JSON.stringify({ selected: true, disabled: false }) ) expect(document.querySelector('[data-tab="1"]')).toHaveTextContent( - JSON.stringify({ selected: false }) + JSON.stringify({ selected: false, disabled: false }) ) expect(document.querySelector('[data-tab="2"]')).toHaveTextContent( - JSON.stringify({ selected: false }) + JSON.stringify({ selected: false, disabled: false }) ) await click(getTabs()[1]) expect(document.querySelector('[data-tab="0"]')).toHaveTextContent( - JSON.stringify({ selected: false }) + JSON.stringify({ selected: false, disabled: false }) ) expect(document.querySelector('[data-tab="1"]')).toHaveTextContent( - JSON.stringify({ selected: true }) + JSON.stringify({ selected: true, disabled: false }) ) expect(document.querySelector('[data-tab="2"]')).toHaveTextContent( - JSON.stringify({ selected: false }) + JSON.stringify({ selected: false, disabled: false }) ) }) diff --git a/packages/@headlessui-vue/src/components/tabs/tabs.ts b/packages/@headlessui-vue/src/components/tabs/tabs.ts index 4e5156e0e7..591c92c436 100644 --- a/packages/@headlessui-vue/src/components/tabs/tabs.ts +++ b/packages/@headlessui-vue/src/components/tabs/tabs.ts @@ -423,7 +423,7 @@ export let Tab = defineComponent({ ) return () => { - let slot = { selected: selected.value } + let slot = { selected: selected.value, disabled: props.disabled ?? false } let { id, ...theirProps } = props let ourProps = { ref: internalTabRef, From 4801d16bb5e52448afbed2b0d29b5ff4e6442829 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 9 Jan 2024 15:40:32 +0100 Subject: [PATCH 2/2] update changelog --- packages/@headlessui-react/CHANGELOG.md | 4 +++- packages/@headlessui-vue/CHANGELOG.md | 4 ++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index faa061ee05..1b7359e1c0 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +### Fixed + +- Expose `disabled` state on `` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918)) ## [2.0.0-alpha.4] - 2024-01-03 diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md index a372c352f5..5ac8cff7d3 100644 --- a/packages/@headlessui-vue/CHANGELOG.md +++ b/packages/@headlessui-vue/CHANGELOG.md @@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `immediate` prop to `` for immediately opening the Combobox when the `input` receives focus ([#2686](https://github.com/tailwindlabs/headlessui/pull/2686)) - Add `virtual` prop to `Combobox` component ([#2779](https://github.com/tailwindlabs/headlessui/pull/2779)) +### Fixed + +- Expose `disabled` state on `` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918)) + ## [1.7.17] - 2024-01-08 ### Fixed