@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

package/src/custom-gradient-picker/index.tsx

@@ -1,13 +1,11 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
 import type gradientParser from 'gradient-parser';
 
 /**
  * WordPress dependencies
  */
-import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -60,7 +58,6 @@ const GradientAnglePicker = ( {
 	};
 	return (
 		<AnglePickerControl
-			__nextHasNoMarginBottom
 			onChange={ onAngleChange }
 			value={ hasGradient ? angle : '' }
 		/>
@@ -141,8 +138,6 @@ const GradientTypePicker = ( {
  * ```
  */
 export function CustomGradientPicker( {
-	/** Start opting into the new margin-free styles that will become the default in a future version. */
-	__nextHasNoMargin = false,
 	value,
 	onChange,
 	__experimentalIsRenderedInSidebar = false,
@@ -166,24 +161,8 @@ export function CustomGradientPicker( {
 		};
 	} );
 
-	if ( ! __nextHasNoMargin ) {
-		deprecated(
-			'Outer margin styles for wp.components.CustomGradientPicker',
-			{
-				since: '6.1',
-				version: '6.4',
-				hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',
-			}
-		);
-	}
-
 	return (
-		<VStack
-			spacing={ 4 }
-			className={ classnames( 'components-custom-gradient-picker', {
-				'is-next-has-no-margin': __nextHasNoMargin,
-			} ) }
-		>
+		<VStack spacing={ 4 } className="components-custom-gradient-picker">
 			<CustomGradientBar
 				__experimentalIsRenderedInSidebar={
 					__experimentalIsRenderedInSidebar

package/src/custom-gradient-picker/stories/index.story.tsx

@@ -40,6 +40,3 @@ const CustomGradientPickerWithState: StoryFn<
 };
 
 export const Default = CustomGradientPickerWithState.bind( {} );
-Default.args = {
-	__nextHasNoMargin: true,
-};

package/src/custom-gradient-picker/style.scss

@@ -1,12 +1,5 @@
 $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 16px handles inside, that leaves 32px padding, half of which is 1å6.
 
-.components-custom-gradient-picker {
-	&:not(.is-next-has-no-margin) {
-		margin-top: $grid-unit-15;
-		margin-bottom: $grid-unit-30;
-	}
-}
-
 .components-custom-gradient-picker__gradient-bar {
 	border-radius: $radius-block-ui;
 	width: 100%;

package/src/custom-gradient-picker/types.ts

@@ -10,6 +10,8 @@ export type CustomGradientPickerProps = {
 	 * can be safely removed once this happens.)
 	 *
 	 * @default false
+	 * @deprecated Default behavior since WP 6.5. Prop can be safely removed.
+	 * @ignore
 	 */
 	__nextHasNoMargin?: boolean;
 	/**

package/src/custom-select-control/README.md

@@ -2,12 +2,6 @@
 
 `CustomSelectControl` allows users to select an item from a single-option menu just like [`SelectControl`](/packages/components/src/select-control/readme.md), with the addition of being able to provide custom styles for each item in the menu. This means it does not use a native `<select>`, so should only be used if the custom styling is necessary.
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 These are the same as [the ones for `SelectControl`s](/packages/components/src/select-control/readme.md#design-guidelines).
@@ -17,11 +11,8 @@ These are the same as [the ones for `SelectControl`s](/packages/components/src/s
 ### Usage
 
 ```jsx
-/**
- * WordPress dependencies
- */
+import { useState } from 'react';
 import { CustomSelectControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const options = [
 	{

package/src/custom-select-control/index.js

@@ -21,6 +21,7 @@ import { Select as SelectControlSelect } from '../select-control/styles/select-c
 import SelectControlChevronDown from '../select-control/chevron-down';
 import { InputBaseWithBackCompatMinWidth } from './styles';
 import { StyledLabel } from '../base-control/styles/base-control-styles';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 const itemToString = ( item ) => item?.name;
 // This is needed so that in Windows, where
@@ -65,7 +66,7 @@ const stateReducer = (
 export default function CustomSelectControl( props ) {
 	const {
 		/** Start opting into the larger default height that will become the default size in a future version. */
-		__next36pxDefaultSize = false,
+		__next40pxDefaultSize = false,
 		/** Start opting into the unconstrained width that will become the default in a future version. */
 		__nextUnconstrainedWidth = false,
 		className,
@@ -82,7 +83,7 @@ export default function CustomSelectControl( props ) {
 		onFocus,
 		onBlur,
 		__experimentalShowSelectedHint = false,
-	} = props;
+	} = useDeprecated36pxDefaultSizeProp( props );
 
 	const {
 		getLabelProps,
@@ -180,7 +181,7 @@ export default function CustomSelectControl( props ) {
 				</StyledLabel>
 			) }
 			<InputBaseWithBackCompatMinWidth
-				__next36pxDefaultSize={ __next36pxDefaultSize }
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				__nextUnconstrainedWidth={ __nextUnconstrainedWidth }
 				isFocused={ isOpen || isFocused }
 				__unstableInputWidth={
@@ -197,7 +198,7 @@ export default function CustomSelectControl( props ) {
 					onFocus={ handleOnFocus }
 					onBlur={ handleOnBlur }
 					selectSize={ size }
-					__next36pxDefaultSize={ __next36pxDefaultSize }
+					__next40pxDefaultSize={ __next40pxDefaultSize }
 					{ ...getToggleButtonProps( {
 						// This is needed because some speech recognition software don't support `aria-labelledby`.
 						'aria-label': label,
@@ -232,8 +233,8 @@ export default function CustomSelectControl( props ) {
 										'is-highlighted':
 											index === highlightedIndex,
 										'has-hint': !! item.__experimentalHint,
-										'is-next-36px-default-size':
-											__next36pxDefaultSize,
+										'is-next-40px-default-size':
+											__next40pxDefaultSize,
 									}
 								),
 								style: item.style,

package/src/custom-select-control/stories/index.story.js

@@ -7,7 +7,7 @@ export default {
 	title: 'Components/CustomSelectControl',
 	component: CustomSelectControl,
 	argTypes: {
-		__next36pxDefaultSize: { control: { type: 'boolean' } },
+		__next40pxDefaultSize: { control: { type: 'boolean' } },
 		__experimentalShowSelectedHint: { control: { type: 'boolean' } },
 		size: {
 			options: [ 'small', 'default', '__unstable-large' ],

package/src/custom-select-control/style.scss

@@ -44,7 +44,7 @@
 	cursor: default;
 	line-height: $icon-size + $grid-unit-05;
 
-	&:not(.is-next-36px-default-size) {
+	&:not(.is-next-40px-default-size) {
 		padding: $grid-unit-10;
 	}
 

package/src/custom-select-control/test/index.js

@@ -4,54 +4,205 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import CustomSelectControl from '..';
 
-describe( 'CustomSelectControl', () => {
-	it( 'Captures the keypress event and does not let it propagate', async () => {
-		const user = userEvent.setup();
-		const onKeyDown = jest.fn();
-		const options = [
-			{
-				key: 'one',
-				name: 'Option one',
-			},
-			{
-				key: 'two',
-				name: 'Option two',
-			},
-			{
-				key: 'three',
-				name: 'Option three',
+const customClass = 'amber-skies';
+
+const props = {
+	label: 'label!',
+	options: [
+		{
+			key: 'flower1',
+			name: 'violets',
+		},
+		{
+			key: 'flower2',
+			name: 'crimson clover',
+			className: customClass,
+		},
+		{
+			key: 'flower3',
+			name: 'poppy',
+		},
+		{
+			key: 'color1',
+			name: 'amber',
+			className: customClass,
+		},
+		{
+			key: 'color2',
+			name: 'aquamarine',
+			style: {
+				backgroundColor: 'rgb(127, 255, 212)',
+				rotate: '13deg',
 			},
-		];
+		},
+	],
+	__nextUnconstrainedWidth: true,
+};
 
-		render(
-			<div
-				// This role="none" is required to prevent an eslint warning about accessibility.
-				role="none"
-				onKeyDown={ onKeyDown }
-			>
-				<CustomSelectControl
-					options={ options }
-					__nextUnconstrainedWidth
-				/>
-			</div>
+const ControlledCustomSelectControl = ( { options } ) => {
+	const [ value, setValue ] = useState( options[ 0 ] );
+	return (
+		<CustomSelectControl
+			{ ...props }
+			onChange={ ( { selectedItem } ) => setValue( selectedItem ) }
+			value={ options.find( ( option ) => option.key === value.key ) }
+		/>
+	);
+};
+
+describe.each( [
+	[ 'uncontrolled', CustomSelectControl ],
+	[ 'controlled', ControlledCustomSelectControl ],
+] )( 'CustomSelectControl %s', ( ...modeAndComponent ) => {
+	const [ , Component ] = modeAndComponent;
+
+	it( 'Should replace the initial selection when a new item is selected', async () => {
+		const user = userEvent.setup();
+
+		render( <Component { ...props } /> );
+
+		const currentSelectedItem = screen.getByRole( 'button', {
+			expanded: false,
+		} );
+
+		await user.click( currentSelectedItem );
+
+		await user.click(
+			screen.getByRole( 'option', {
+				name: 'crimson clover',
+			} )
+		);
+
+		expect( currentSelectedItem ).toHaveTextContent( 'crimson clover' );
+
+		await user.click( currentSelectedItem );
+
+		await user.click(
+			screen.getByRole( 'option', {
+				name: 'poppy',
+			} )
+		);
+
+		expect( currentSelectedItem ).toHaveTextContent( 'poppy' );
+	} );
+
+	it( 'Should keep current selection if dropdown is closed without changing selection', async () => {
+		const user = userEvent.setup();
+
+		render( <CustomSelectControl { ...props } /> );
+
+		const currentSelectedItem = screen.getByRole( 'button', {
+			expanded: false,
+		} );
+
+		await user.tab();
+		await user.keyboard( '{enter}' );
+		expect(
+			screen.getByRole( 'listbox', {
+				name: 'label!',
+			} )
+		).toBeVisible();
+
+		await user.keyboard( '{escape}' );
+		expect(
+			screen.queryByRole( 'listbox', {
+				name: 'label!',
+			} )
+		).not.toBeInTheDocument();
+
+		expect( currentSelectedItem ).toHaveTextContent(
+			props.options[ 0 ].name
+		);
+	} );
+
+	it( 'Should apply class only to options that have a className defined', async () => {
+		const user = userEvent.setup();
+
+		render( <CustomSelectControl { ...props } /> );
+
+		await user.click(
+			screen.getByRole( 'button', {
+				expanded: false,
+			} )
+		);
+
+		// return an array of items _with_ a className added
+		const itemsWithClass = props.options.filter(
+			( option ) => option.className !== undefined
+		);
+
+		// assert against filtered array
+		itemsWithClass.map( ( { name } ) =>
+			expect( screen.getByRole( 'option', { name } ) ).toHaveClass(
+				customClass
+			)
+		);
+
+		// return an array of items _without_ a className added
+		const itemsWithoutClass = props.options.filter(
+			( option ) => option.className === undefined
+		);
+
+		// assert against filtered array
+		itemsWithoutClass.map( ( { name } ) =>
+			expect( screen.getByRole( 'option', { name } ) ).not.toHaveClass(
+				customClass
+			)
+		);
+	} );
+
+	it( 'Should apply styles only to options that have styles defined', async () => {
+		const user = userEvent.setup();
+		const customStyles =
+			'background-color: rgb(127, 255, 212); rotate: 13deg;';
+
+		render( <CustomSelectControl { ...props } /> );
+
+		await user.click(
+			screen.getByRole( 'button', {
+				expanded: false,
+			} )
+		);
+
+		// return an array of items _with_ styles added
+		const styledItems = props.options.filter(
+			( option ) => option.style !== undefined
 		);
-		const toggleButton = screen.getByRole( 'button' );
-		await user.click( toggleButton );
 
-		const customSelect = screen.getByRole( 'listbox' );
-		await user.type( customSelect, '{enter}' );
+		// assert against filtered array
+		styledItems.map( ( { name } ) =>
+			expect( screen.getByRole( 'option', { name } ) ).toHaveStyle(
+				customStyles
+			)
+		);
+
+		// return an array of items _without_ styles added
+		const unstyledItems = props.options.filter(
+			( option ) => option.style === undefined
+		);
 
-		expect( onKeyDown ).toHaveBeenCalledTimes( 0 );
+		// assert against filtered array
+		unstyledItems.map( ( { name } ) =>
+			expect( screen.getByRole( 'option', { name } ) ).not.toHaveStyle(
+				customStyles
+			)
+		);
 	} );
 
 	it( 'does not show selected hint by default', () => {
 		render(
 			<CustomSelectControl
+				{ ...props }
 				label="Custom select"
 				options={ [
 					{
@@ -60,7 +211,6 @@ describe( 'CustomSelectControl', () => {
 						__experimentalHint: 'Hint',
 					},
 				] }
-				__nextUnconstrainedWidth
 			/>
 		);
 		expect(
@@ -71,6 +221,7 @@ describe( 'CustomSelectControl', () => {
 	it( 'shows selected hint when __experimentalShowSelectedHint is set', () => {
 		render(
 			<CustomSelectControl
+				{ ...props }
 				label="Custom select"
 				options={ [
 					{
@@ -80,11 +231,192 @@ describe( 'CustomSelectControl', () => {
 					},
 				] }
 				__experimentalShowSelectedHint
-				__nextUnconstrainedWidth
 			/>
 		);
 		expect(
 			screen.getByRole( 'button', { name: 'Custom select' } )
 		).toHaveTextContent( 'Hint' );
 	} );
+
+	describe( 'Keyboard behavior and accessibility', () => {
+		it( 'Captures the keypress event and does not let it propagate', async () => {
+			const user = userEvent.setup();
+			const onKeyDown = jest.fn();
+
+			render(
+				<div
+					// This role="none" is required to prevent an eslint warning about accessibility.
+					role="none"
+					onKeyDown={ onKeyDown }
+				>
+					<CustomSelectControl { ...props } />
+				</div>
+			);
+			const currentSelectedItem = screen.getByRole( 'button', {
+				expanded: false,
+			} );
+			await user.click( currentSelectedItem );
+
+			const customSelect = screen.getByRole( 'listbox', {
+				name: 'label!',
+			} );
+			await user.type( customSelect, '{enter}' );
+
+			expect( onKeyDown ).toHaveBeenCalledTimes( 0 );
+		} );
+
+		it( 'Should be able to change selection using keyboard', async () => {
+			const user = userEvent.setup();
+
+			render( <CustomSelectControl { ...props } /> );
+
+			const currentSelectedItem = screen.getByRole( 'button', {
+				expanded: false,
+			} );
+
+			await user.tab();
+			expect( currentSelectedItem ).toHaveFocus();
+
+			await user.keyboard( '{enter}' );
+			expect(
+				screen.getByRole( 'listbox', {
+					name: 'label!',
+				} )
+			).toHaveFocus();
+
+			await user.keyboard( '{arrowdown}' );
+			await user.keyboard( '{enter}' );
+
+			expect( currentSelectedItem ).toHaveTextContent( 'crimson clover' );
+		} );
+
+		it( 'Should be able to type characters to select matching options', async () => {
+			const user = userEvent.setup();
+
+			render( <CustomSelectControl { ...props } /> );
+
+			const currentSelectedItem = screen.getByRole( 'button', {
+				expanded: false,
+			} );
+
+			await user.tab();
+			await user.keyboard( '{enter}' );
+			expect(
+				screen.getByRole( 'listbox', {
+					name: 'label!',
+				} )
+			).toHaveFocus();
+
+			await user.keyboard( '{a}' );
+			await user.keyboard( '{enter}' );
+			expect( currentSelectedItem ).toHaveTextContent( 'amber' );
+		} );
+
+		it( 'Can change selection with a focused input and closed dropdown if typed characters match an option', async () => {
+			const user = userEvent.setup();
+
+			render( <CustomSelectControl { ...props } /> );
+
+			const currentSelectedItem = screen.getByRole( 'button', {
+				expanded: false,
+			} );
+
+			await user.tab();
+			expect( currentSelectedItem ).toHaveFocus();
+
+			await user.keyboard( '{a}' );
+			await user.keyboard( '{q}' );
+
+			expect(
+				screen.queryByRole( 'listbox', {
+					name: 'label!',
+					hidden: true,
+				} )
+			).not.toBeInTheDocument();
+
+			await user.keyboard( '{enter}' );
+			expect( currentSelectedItem ).toHaveTextContent( 'aquamarine' );
+		} );
+
+		it( 'Should have correct aria-selected value for selections', async () => {
+			const user = userEvent.setup();
+
+			render( <CustomSelectControl { ...props } /> );
+
+			const currentSelectedItem = screen.getByRole( 'button', {
+				expanded: false,
+			} );
+
+			await user.click( currentSelectedItem );
+
+			// get all items except for first option
+			const unselectedItems = props.options.filter(
+				( { name } ) => name !== props.options[ 0 ].name
+			);
+
+			// assert that all other items have aria-selected="false"
+			unselectedItems.map( ( { name } ) =>
+				expect(
+					screen.getByRole( 'option', { name, selected: false } )
+				).toBeVisible()
+			);
+
+			// assert that first item has aria-selected="true"
+			expect(
+				screen.getByRole( 'option', {
+					name: props.options[ 0 ].name,
+					selected: true,
+				} )
+			).toBeVisible();
+
+			// change the current selection
+			await user.click( screen.getByRole( 'option', { name: 'poppy' } ) );
+
+			// click button to mount listbox with options again
+			await user.click( currentSelectedItem );
+
+			// check that first item is has aria-selected="false" after new selection
+			expect(
+				screen.getByRole( 'option', {
+					name: props.options[ 0 ].name,
+					selected: false,
+				} )
+			).toBeVisible();
+
+			// check that new selected item now has aria-selected="true"
+			expect(
+				screen.getByRole( 'option', {
+					name: 'poppy',
+					selected: true,
+				} )
+			).toBeVisible();
+		} );
+
+		it( 'Should call custom event handlers', async () => {
+			const user = userEvent.setup();
+			const onFocusMock = jest.fn();
+			const onBlurMock = jest.fn();
+
+			render(
+				<CustomSelectControl
+					{ ...props }
+					onFocus={ onFocusMock }
+					onBlur={ onBlurMock }
+				/>
+			);
+
+			const currentSelectedItem = screen.getByRole( 'button', {
+				expanded: false,
+			} );
+
+			await user.tab();
+
+			expect( currentSelectedItem ).toHaveFocus();
+			expect( onFocusMock ).toHaveBeenCalledTimes( 1 );
+
+			await user.tab();
+			expect( currentSelectedItem ).not.toHaveFocus();
+			expect( onBlurMock ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
 } );