Use Select for remaining SelectControl variant="minimal" call sites

packages/components/CHANGELOG.md

@@ -24,6 +24,7 @@
 
 ### Enhancements
 
+-   `ColorPicker`: Use `Select` from `@wordpress/ui` for the color format selector ([#83035](https://github.com/WordPress/gutenberg/pull/83035)).
 -   `ExternalLink`: Use a small border radius for consistent focus rings ([#84697](https://github.com/WordPress/gutenberg/pull/84697)).
 -   `Menu`: Use WPDS motion tokens for popup transition durations and slide easing ([#84706](https://github.com/WordPress/gutenberg/pull/84706)).
 -   `TabPanel`: Add interaction backgrounds to unselected tabs, preserve keyboard focus rings, and size neutral vertical selection lines to the content ([#84572](https://github.com/WordPress/gutenberg/pull/84572)).

packages/components/src/color-palette/test/index.browser.test.tsx

@@ -5,6 +5,7 @@ import { render } from 'vitest-browser-react';
 import { useState } from '@wordpress/element';
 import { logged } from '@wordpress/deprecated';
 import ColorPalette from '..';
+import '../../popover/style.scss';
 
 const EXAMPLE_COLORS = [
 	{ name: 'red', color: '#f00' },
@@ -245,6 +246,44 @@ describe( 'ColorPalette', () => {
 		expect( container ).toBeEmptyDOMElement();
 	} );
 
+	it( 'keeps the color format selector above the ColorPalette popup and returns focus after dismissal', async () => {
+		const user = userEvent.setup();
+		delete (
+			window as Window & { __wpUiCompatOverlaySlotEnabled?: boolean }
+		 ).__wpUiCompatOverlaySlotEnabled;
+		await render( <ControlledColorPalette /> );
+		const pickerTrigger = screen.getByRole( 'button', {
+			name: /^Custom color picker/,
+		} );
+		await user.click( pickerTrigger );
+		const formatTrigger = screen.getByRole( 'combobox', {
+			name: 'Color format',
+		} );
+		await user.click( formatTrigger );
+		const hslOption = screen.getByRole( 'option', { name: 'HSL' } );
+		await waitFor( () => {
+			const { x, y, width, height } = hslOption.getBoundingClientRect();
+			expect(
+				hslOption.contains(
+					document.elementFromPoint( x + width / 2, y + height / 2 )
+				)
+			).toBe( true );
+		} );
+		await user.click( hslOption );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Hue (HSL H value)' } )
+		).toBeVisible();
+		expect( pickerTrigger ).toHaveAttribute( 'aria-expanded', 'true' );
+		await waitFor( () => expect( formatTrigger ).toHaveFocus() );
+		await user.click( formatTrigger );
+		await user.keyboard( '{Escape}' );
+		await waitFor( () => expect( formatTrigger ).toHaveFocus() );
+		expect(
+			screen.queryByRole( 'option', { name: 'HSL' } )
+		).not.toBeInTheDocument();
+		expect( pickerTrigger ).toHaveAttribute( 'aria-expanded', 'true' );
+	} );
+
 	it( 'should render dropdown and its content', async () => {
 		const user = userEvent.setup();
 		const onChange = vi.fn();

packages/components/src/color-picker/component.tsx

@@ -13,8 +13,8 @@ import {
 } from '@wordpress/element';
 import { useDebounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
+import { Select, useEnableWpCompatOverlaySlot } from '@wordpress/ui';
 import { useContextSystem, contextConnect } from '../context';
-import SelectControl from '../select-control';
 import { HStack } from '../h-stack';
 import { Flex } from '../flex';
 import { PolymorphicElement } from '../utils/polymorphic-element';
@@ -52,6 +52,8 @@ const UnconnectedColorPicker = (
 	props: ColorPickerProps,
 	forwardedRef: ForwardedRef< any >
 ) => {
+	useEnableWpCompatOverlaySlot();
+
 	const {
 		enableAlpha = false,
 		color: colorProp,
@@ -209,18 +211,34 @@ const UnconnectedColorPicker = (
 			/>
 			<div className={ styles.auxiliary }>
 				<HStack className={ styles.header } justify="space-between">
-					<SelectControl
-						className={ styles.select }
-						size="compact"
-						options={ options }
+					<Select.Root
+						items={ options }
 						value={ colorType }
-						onChange={ ( nextColorType ) =>
-							setColorType( nextColorType as ColorType )
-						}
-						label={ __( 'Color format' ) }
-						hideLabelFromVision
-						variant="minimal"
-					/>
+						onValueChange={ ( nextColorType ) => {
+							if ( nextColorType !== null ) {
+								setColorType( nextColorType );
+							}
+						} }
+					>
+						<Select.Trigger
+							size="compact"
+							variant="minimal"
+							aria-label={ __( 'Color format' ) }
+							className={ styles.select }
+						/>
+						<Select.Popup width="content">
+							{ options.map( ( option ) => (
+								<Select.Item
+									key={ option.value }
+									value={ option.value }
+								>
+									<Select.ItemLabel>
+										{ option.label }
+									</Select.ItemLabel>
+								</Select.Item>
+							) ) }
+						</Select.Popup>
+					</Select.Root>
 					<ColorCopyButton
 						color={ safeColordColor }
 						colorType={ copyFormat || colorType }