@wordpress/components 25.11.1-next.f8d8eceb.0 → 25.12.0

package/src/tabs/test/index.tsx

@@ -7,7 +7,6 @@ import userEvent from '@testing-library/user-event';
 /**
  * WordPress dependencies
  */
-import { wordpress, category, media } from '@wordpress/icons';
 import { useState } from '@wordpress/element';
 
 /**
@@ -15,7 +14,6 @@ import { useState } from '@wordpress/element';
  */
 import Tabs from '..';
 import type { TabsProps } from '../types';
-import type { IconType } from '../../icon';
 
 type Tab = {
 	id: string;
@@ -23,9 +21,11 @@ type Tab = {
 	content: React.ReactNode;
 	tab: {
 		className?: string;
-		icon?: IconType;
 		disabled?: boolean;
 	};
+	tabpanel?: {
+		focusable?: boolean;
+	};
 };
 
 const TABS: Tab[] = [
@@ -33,19 +33,19 @@ const TABS: Tab[] = [
 		id: 'alpha',
 		title: 'Alpha',
 		content: 'Selected tab: Alpha',
-		tab: { className: 'alpha-class', icon: wordpress },
+		tab: { className: 'alpha-class' },
 	},
 	{
 		id: 'beta',
 		title: 'Beta',
 		content: 'Selected tab: Beta',
-		tab: { className: 'beta-class', icon: category },
+		tab: { className: 'beta-class' },
 	},
 	{
 		id: 'gamma',
 		title: 'Gamma',
 		content: 'Selected tab: Gamma',
-		tab: { className: 'gamma-class', icon: media },
+		tab: { className: 'gamma-class' },
 	},
 ];
 
@@ -55,17 +55,15 @@ const TABS_WITH_DELTA: Tab[] = [
 		id: 'delta',
 		title: 'Delta',
 		content: 'Selected tab: Delta',
-		tab: { className: 'delta-class', icon: media },
+		tab: { className: 'delta-class' },
 	},
 ];
 
 const UncontrolledTabs = ( {
 	tabs,
-	showTabIcons = false,
 	...props
 }: Omit< TabsProps, 'children' > & {
 	tabs: Tab[];
-	showTabIcons?: boolean;
 } ) => {
 	return (
 		<Tabs { ...props }>
@@ -76,14 +74,17 @@ const UncontrolledTabs = ( {
 						id={ tabObj.id }
 						className={ tabObj.tab.className }
 						disabled={ tabObj.tab.disabled }
-						icon={ showTabIcons ? tabObj.tab.icon : undefined }
 					>
-						{ showTabIcons ? null : tabObj.title }
+						{ tabObj.title }
 					</Tabs.Tab>
 				) ) }
 			</Tabs.TabList>
 			{ tabs.map( ( tabObj ) => (
-				<Tabs.TabPanel key={ tabObj.id } id={ tabObj.id }>
+				<Tabs.TabPanel
+					key={ tabObj.id }
+					id={ tabObj.id }
+					focusable={ tabObj.tabpanel?.focusable }
+				>
 					{ tabObj.content }
 				</Tabs.TabPanel>
 			) ) }
@@ -93,11 +94,9 @@ const UncontrolledTabs = ( {
 
 const ControlledTabs = ( {
 	tabs,
-	showTabIcons = false,
 	...props
 }: Omit< TabsProps, 'children' > & {
 	tabs: Tab[];
-	showTabIcons?: boolean;
 } ) => {
 	const [ selectedTabId, setSelectedTabId ] = useState<
 		string | undefined | null
@@ -119,9 +118,8 @@ const ControlledTabs = ( {
 						id={ tabObj.id }
 						className={ tabObj.tab.className }
 						disabled={ tabObj.tab.disabled }
-						icon={ showTabIcons ? tabObj.tab.icon : undefined }
 					>
-						{ showTabIcons ? null : tabObj.title }
+						{ tabObj.title }
 					</Tabs.Tab>
 				) ) }
 			</Tabs.TabList>
@@ -184,6 +182,63 @@ describe( 'Tabs', () => {
 			);
 		} );
 	} );
+	describe( 'Focus Behavior', () => {
+		it( 'should focus on the related TabPanel when pressing the Tab key', async () => {
+			const user = userEvent.setup();
+
+			render( <UncontrolledTabs tabs={ TABS } /> );
+
+			const selectedTabPanel = await screen.findByRole( 'tabpanel' );
+
+			// Tab should initially focus the first tab in the tablist, which
+			// is Alpha.
+			await user.keyboard( '[Tab]' );
+			expect(
+				await screen.findByRole( 'tab', { name: 'Alpha' } )
+			).toHaveFocus();
+
+			// By default the tabpanel should receive focus
+			await user.keyboard( '[Tab]' );
+			expect( selectedTabPanel ).toHaveFocus();
+		} );
+		it( 'should not focus on the related TabPanel when pressing the Tab key if `focusable: false` is set', async () => {
+			const user = userEvent.setup();
+
+			const TABS_WITH_ALPHA_FOCUSABLE_FALSE = TABS.map( ( tabObj ) =>
+				tabObj.id === 'alpha'
+					? {
+							...tabObj,
+							content: (
+								<>
+									Selected Tab: Alpha
+									<button>Alpha Button</button>
+								</>
+							),
+							tabpanel: { focusable: false },
+					  }
+					: tabObj
+			);
+
+			render(
+				<UncontrolledTabs tabs={ TABS_WITH_ALPHA_FOCUSABLE_FALSE } />
+			);
+
+			const alphaButton = await screen.findByRole( 'button', {
+				name: /alpha button/i,
+			} );
+
+			// Tab should initially focus the first tab in the tablist, which
+			// is Alpha.
+			await user.keyboard( '[Tab]' );
+			expect(
+				await screen.findByRole( 'tab', { name: 'Alpha' } )
+			).toHaveFocus();
+			// Because the alpha tabpanel is set to `focusable: false`, pressing
+			// the Tab key should focus the button, not the tabpanel
+			await user.keyboard( '[Tab]' );
+			expect( alphaButton ).toHaveFocus();
+		} );
+	} );
 
 	describe( 'Tab Attributes', () => {
 		it( "should apply the tab's `className` to the tab button", async () => {

package/src/tabs/types.ts

@@ -4,11 +4,6 @@
 // eslint-disable-next-line no-restricted-imports
 import type * as Ariakit from '@ariakit/react';
 
-/**
- * Internal dependencies
- */
-import type { IconType } from '../icon';
-
 export type TabsContextProps =
 	| {
 			/**
@@ -78,14 +73,6 @@ export type TabListProps = {
 	 * The children elements, which should be a series of `Tabs.TabPanel` components.
 	 */
 	children?: React.ReactNode;
-	/**
-	 * The class name to apply to the tablist.
-	 */
-	className?: string;
-	/**
-	 * Custom CSS styles for the rendered tablist.
-	 */
-	style?: React.CSSProperties;
 };
 
 export type TabProps = {
@@ -93,22 +80,10 @@ export type TabProps = {
 	 * The id of the tab, which is prepended with the `Tabs` instanceId.
 	 */
 	id: string;
-	/**
-	 * Custom CSS styles for the tab.
-	 */
-	style?: React.CSSProperties;
 	/**
 	 * The children elements, generally the text to display on the tab.
 	 */
 	children?: React.ReactNode;
-	/**
-	 * The class name to apply to the tab button.
-	 */
-	className?: string;
-	/**
-	 * The icon used for the tab button.
-	 */
-	icon?: IconType;
 	/**
 	 * Determines if the tab button should be disabled.
 	 *
@@ -128,15 +103,15 @@ export type TabPanelProps = {
 	 */
 	children?: React.ReactNode;
 	/**
-	 * A unique identifier for the TabPanel, which is used to generate a unique `id` for the underlying element.
+	 * A unique identifier for the tabpanel, which is used to generate a unique `id` for the underlying element.
 	 */
 	id: string;
 	/**
-	 * The class name to apply to the tabpanel.
-	 */
-	className?: string;
-	/**
-	 * Custom CSS styles for the rendered `TabPanel` component.
+	 * Determines whether or not the tabpanel element should be focusable.
+	 * If `false`, pressing the tab key will skip over the tabpanel, and instead
+	 * focus on the first focusable element in the panel (if there is one).
+	 *
+	 * @default true
 	 */
-	style?: React.CSSProperties;
+	focusable?: boolean;
 };

package/src/text-control/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import type { ChangeEvent, ForwardedRef } from 'react';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -22,6 +23,7 @@ function UnforwardedTextControl(
 ) {
 	const {
 		__nextHasNoMarginBottom,
+		__next40pxDefaultSize = false,
 		label,
 		hideLabelFromVision,
 		value,
@@ -46,7 +48,9 @@ function UnforwardedTextControl(
 			className={ className }
 		>
 			<input
-				className="components-text-control__input"
+				className={ classnames( 'components-text-control__input', {
+					'is-next-40px-default-size': __next40pxDefaultSize,
+				} ) }
 				type={ type }
 				id={ id }
 				value={ value }

package/src/text-control/style.scss

@@ -13,5 +13,10 @@
 .components-text-control__input[type="month"],
 .components-text-control__input[type="number"] {
 	width: 100%;
+	height: $grid-unit-40;
 	@include input-control;
+
+	&.is-next-40px-default-size {
+		height: $grid-unit-50;
+	}
 }

package/src/text-control/types.ts

@@ -25,4 +25,10 @@ export type TextControlProps = Pick<
 	 * @default 'text'
 	 */
 	type?: 'email' | 'number' | 'password' | 'tel' | 'text' | 'search' | 'url';
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 };

package/src/toggle-group-control/toggle-group-control/component.tsx

@@ -31,6 +31,7 @@ function UnconnectedToggleGroupControl(
 ) {
 	const {
 		__nextHasNoMarginBottom = false,
+		__next40pxDefaultSize = false,
 		className,
 		isAdaptiveWidth = false,
 		isBlock = false,
@@ -52,11 +53,16 @@ function UnconnectedToggleGroupControl(
 	const classes = useMemo(
 		() =>
 			cx(
-				styles.toggleGroupControl( { isBlock, isDeselectable, size } ),
+				styles.toggleGroupControl( {
+					isBlock,
+					isDeselectable,
+					size,
+					__next40pxDefaultSize,
+				} ),
 				isBlock && styles.block,
 				className
 			),
-		[ className, cx, isBlock, isDeselectable, size ]
+		[ className, cx, isBlock, isDeselectable, size, __next40pxDefaultSize ]
 	);
 
 	const MainControl = isDeselectable

package/src/toggle-group-control/toggle-group-control/styles.ts

@@ -14,7 +14,11 @@ export const toggleGroupControl = ( {
 	isBlock,
 	isDeselectable,
 	size,
-}: Pick< ToggleGroupControlProps, 'isBlock' | 'isDeselectable' > & {
+	__next40pxDefaultSize,
+}: Pick<
+	ToggleGroupControlProps,
+	'isBlock' | 'isDeselectable' | '__next40pxDefaultSize'
+> & {
 	size: NonNullable< ToggleGroupControlProps[ 'size' ] >;
 } ) => css`
 	background: ${ COLORS.ui.background };
@@ -25,7 +29,7 @@ export const toggleGroupControl = ( {
 	padding: 2px;
 	position: relative;
 
-	${ toggleGroupControlSize( size ) }
+	${ toggleGroupControlSize( size, __next40pxDefaultSize ) }
 	${ ! isDeselectable && enclosingBorders( isBlock ) }
 `;
 
@@ -53,13 +57,18 @@ const enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {
 };
 
 export const toggleGroupControlSize = (
-	size: NonNullable< ToggleGroupControlProps[ 'size' ] >
+	size: NonNullable< ToggleGroupControlProps[ 'size' ] >,
+	__next40pxDefaultSize: ToggleGroupControlProps[ '__next40pxDefaultSize' ]
 ) => {
 	const heights = {
-		default: '36px',
+		default: '40px',
 		'__unstable-large': '40px',
 	};
 
+	if ( ! __next40pxDefaultSize ) {
+		heights.default = '36px';
+	}
+
 	return css`
 		min-height: ${ heights[ size ] };
 	`;

package/src/toggle-group-control/types.ts

@@ -122,6 +122,12 @@ export type ToggleGroupControlProps = Pick<
 	 * @default 'default'
 	 */
 	size?: 'default' | '__unstable-large';
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 };
 
 export type ToggleGroupControlContextProps = {

package/src/toolbar/toolbar-button/style.scss

@@ -17,11 +17,6 @@
 		bottom: 10px;
 	}
 
-	// Hide focus rectangle on click.
-	&:active::before {
-		display: none;
-	}
-
 	&:not(:disabled).is-pressed[data-subscript]::after {
 		color: $white;
 	}