Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TabPanel: Add prop to allow disabling of a tab button #46471

Merged
merged 12 commits into from
Jan 2, 2023
3 changes: 3 additions & 0 deletions packages/components/src/tab-panel/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const TabButton = ( {
onClick,
children,
selected,
disabled,
...rest
joshuatf marked this conversation as resolved.
Show resolved Hide resolved
}: TabButtonProps ) => (
<Button
Expand All @@ -31,6 +32,7 @@ const TabButton = ( {
aria-selected={ selected }
id={ tabId }
onClick={ onClick }
disabled={ disabled }
joshuatf marked this conversation as resolved.
Show resolved Hide resolved
{ ...rest }
>
{ children }
Expand Down Expand Up @@ -135,6 +137,7 @@ export function TabPanel( {
selected={ tab.name === selected }
key={ tab.name }
onClick={ () => handleTabSelection( tab.name ) }
disabled={ tab.disabled }
label={ tab.icon && tab.title }
icon={ tab.icon }
showTooltip={ !! tab.icon }
Expand Down
22 changes: 22 additions & 0 deletions packages/components/src/tab-panel/test/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,28 @@ describe( 'TabPanel', () => {
expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
} );

it( 'should disable the tab when `disabled` is true', () => {
const mockOnSelect = jest.fn();

render(
<TabPanel
tabs={ [
...TABS,
{
name: 'delta',
title: 'Delta',
className: 'delta-class',
disabled: true,
},
] }
children={ () => undefined }
onSelect={ mockOnSelect }
/>
);

expect( screen.getByRole( 'tab', { name: 'Delta' } ) ).toBeDisabled();
joshuatf marked this conversation as resolved.
Show resolved Hide resolved
} );

describe( 'fallbacks when new tab list invalidates current selection', () => {
it( 'should select `initialTabName` if defined', async () => {
const user = setupUser();
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/tab-panel/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export type TabButtonProps< IconProps = unknown > = {
selected: boolean;
showTooltip?: boolean;
tabId: string;
disabled?: boolean;
joshuatf marked this conversation as resolved.
Show resolved Hide resolved
};

export type TabPanelProps = {
Expand Down