ColorPicker: Style without accessing InputControl internals (#59069)

* ColorPicker: Use internal API for borderless select * Set width without touching internals * Update changelog
WordPress · Feb 15, 2024 · f33e8b6 · f33e8b6 · github-actions · Feb 15, 2024
1 parent 109947d
commit f33e8b6
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 26 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -6,6 +6,10 @@
 
 -   `CustomSelectControl`: Remove deprecated `__nextUnconstrainedWidth` prop and promote to default behavior ([#58974](https://github.com/WordPress/gutenberg/pull/58974)).
 
+### Internal
+
+-   `ColorPicker`: Style without accessing internal `InputControl` classes ([#59069](https://github.com/WordPress/gutenberg/pull/59069)).
+
 ## 26.0.1 (2024-02-13)
 
 ### Bug Fix

diff --git a/packages/components/src/color-picker/component.tsx b/packages/components/src/color-picker/component.tsx
@@ -16,7 +16,11 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { useContextSystem, contextConnect } from '../context';
+import {
+	useContextSystem,
+	contextConnect,
+	ContextSystemProvider,
+} from '../context';
 import {
 	ColorfulWrapper,
 	SelectControl,
@@ -39,6 +43,9 @@ const options = [
 	{ label: 'Hex', value: 'hex' as const },
 ];
 
+// `isBorderless` is still experimental and not a public prop for InputControl yet.
+const BORDERLESS_SELECT_CONTROL_CONTEXT = { InputBase: { isBorderless: true } };
+
 const UnconnectedColorPicker = (
 	props: ColorPickerProps,
 	forwardedRef: ForwardedRef< any >
@@ -107,16 +114,20 @@ const UnconnectedColorPicker = (
 			/>
 			<AuxiliaryColorArtefactWrapper>
 				<AuxiliaryColorArtefactHStackHeader justify="space-between">
-					<SelectControl
-						__nextHasNoMarginBottom
-						options={ options }
-						value={ colorType }
-						onChange={ ( nextColorType ) =>
-							setColorType( nextColorType as ColorType )
-						}
-						label={ __( 'Color format' ) }
-						hideLabelFromVision
-					/>
+					<ContextSystemProvider
+						value={ BORDERLESS_SELECT_CONTROL_CONTEXT }
+					>
+						<SelectControl
+							__nextHasNoMarginBottom
+							options={ options }
+							value={ colorType }
+							onChange={ ( nextColorType ) =>
+								setColorType( nextColorType as ColorType )
+							}
+							label={ __( 'Color format' ) }
+							hideLabelFromVision
+						/>
+					</ContextSystemProvider>
 					<ColorCopyButton
 						color={ safeColordColor }
 						colorType={ copyFormat || colorType }

diff --git a/packages/components/src/color-picker/styles.ts b/packages/components/src/color-picker/styles.ts
@@ -14,29 +14,15 @@ import { boxSizingReset } from '../utils';
 import Button from '../button';
 import { Flex } from '../flex';
 import { HStack } from '../h-stack';
-import {
-	BackdropUI,
-	Container as InputControlContainer,
-} from '../input-control/styles/input-control-styles';
 import CONFIG from '../utils/config-values';
 
 export const NumberControlWrapper = styled( NumberControl )`
-	${ InputControlContainer } {
-		width: ${ space( 24 ) };
-	}
+	width: ${ space( 24 ) };
 `;
 
 export const SelectControl = styled( InnerSelectControl )`
 	margin-left: ${ space( -2 ) };
 	width: 5em;
-	/*
-	 * Remove border, but preserve focus styles
-	 * TODO: this override should be removed,
-	 * see https://github.com/WordPress/gutenberg/pull/50609
-	 */
-	select:not( :focus ) ~ ${ BackdropUI }${ BackdropUI }${ BackdropUI } {
-		border-color: transparent;
-	}
 `;
 
 export const RangeControl = styled( InnerRangeControl )`