Skip to content

Commit

Permalink
Expose disabled state on <Tab /> component (#2918)
Browse files Browse the repository at this point in the history
* expose `disabled` on `<Tab/>` 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

* update changelog
  • Loading branch information
RobinMalfait committed Apr 15, 2024
1 parent 2b161b3 commit 369be39
Show file tree
Hide file tree
Showing 6 changed files with 23 additions and 16 deletions.
1 change: 1 addition & 0 deletions packages/@headlessui-react/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed

- Make sure panels re-register when IDs are calculated in React < 18 ([#2883](https://github.com/tailwindlabs/headlessui/pull/2883))
- Expose `disabled` state on `<Tab />` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918))

## [1.7.18] - 2024-01-08

Expand Down
12 changes: 6 additions & 6 deletions packages/@headlessui-react/src/components/tabs/tabs.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -538,25 +538,25 @@ describe('Rendering', () => {
)

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 })
)
})
)
Expand Down
8 changes: 6 additions & 2 deletions packages/@headlessui-react/src/components/tabs/tabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -374,6 +374,7 @@ function ListFn<TTag extends ElementType = typeof DEFAULT_LIST_TAG>(
let DEFAULT_TAB_TAG = 'button' as const
interface TabRenderPropArg {
selected: boolean
disabled: boolean
}
type TabPropsWeControl = 'aria-controls' | 'aria-selected' | 'role' | 'tabIndex'

Expand All @@ -382,7 +383,7 @@ export type TabProps<TTag extends ElementType> = Props<
TabRenderPropArg,
TabPropsWeControl
> & {
//
disabled?: boolean
}

function TabFn<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(
Expand Down Expand Up @@ -484,7 +485,10 @@ function TabFn<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(
event.preventDefault()
})

let slot = useMemo(() => ({ selected }), [selected])
let slot = useMemo(
() => ({ selected, disabled: props.disabled ?? false }),
[selected, props.disabled]
)

let ourProps = {
ref: tabRef,
Expand Down
4 changes: 3 additions & 1 deletion packages/@headlessui-vue/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<Tab />` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918))

## [1.7.19] - 2024-02-07

Expand Down
12 changes: 6 additions & 6 deletions packages/@headlessui-vue/src/components/tabs/tabs.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -463,25 +463,25 @@ describe('Rendering', () => {
await new Promise<void>(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 })
)
})

Expand Down
2 changes: 1 addition & 1 deletion packages/@headlessui-vue/src/components/tabs/tabs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -425,7 +425,7 @@ export let Tab = defineComponent({
)

return () => {
let slot = { selected: selected.value }
let slot = { selected: selected.value, disabled: props.disabled ?? false }
let { ...theirProps } = props
let ourProps = {
ref: internalTabRef,
Expand Down

0 comments on commit 369be39

Please sign in to comment.