ColorPalette: Update label correctly when value is CSS variable (#41461)

* ColorPalette: Update label correctly when value is CSS variable * Add unit tests * Add story * Add changelog
WordPress · Jun 1, 2022 · 228adc9 · 228adc9
1 parent f131c8c
commit 228adc9
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 5 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 -   `Popover`, `Dropdown`, `CustomGradientPicker`: Fix dropdown positioning by always targeting the rendered toggle, and switch off width in the Popover size middleware to stop reducing the width of the popover. ([#41361](https://github.com/WordPress/gutenberg/pull/41361))
 -   Fix `InputControl` blocking undo/redo while focused. ([#40518](https://github.com/WordPress/gutenberg/pull/40518))
+-   `ColorPalette`: Correctly update color name label when CSS variables are involved ([#41461](https://github.com/WordPress/gutenberg/pull/41461)).
 
 ### Enhancements
 

diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js
@@ -126,7 +126,7 @@ export function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {
 	);
 }
 
-const extractColorNameFromCurrentValue = (
+export const extractColorNameFromCurrentValue = (
 	currentValue,
 	colors = [],
 	showMultiplePalettes = false
@@ -135,13 +135,20 @@ const extractColorNameFromCurrentValue = (
 		return '';
 	}
 
+	const currentValueIsCssVariable = /^var\(/.test( currentValue );
+	const normalizedCurrentValue = currentValueIsCssVariable
+		? currentValue
+		: colord( currentValue ).toHex();
+
 	// Normalize format of `colors` to simplify the following loop
 	const colorPalettes = showMultiplePalettes ? colors : [ { colors } ];
 	for ( const { colors: paletteColors } of colorPalettes ) {
 		for ( const { name: colorName, color: colorValue } of paletteColors ) {
-			if (
-				colord( currentValue ).toHex() === colord( colorValue ).toHex()
-			) {
+			const normalizedColorValue = currentValueIsCssVariable
+				? colorValue
+				: colord( colorValue ).toHex();
+
+			if ( normalizedCurrentValue === normalizedColorValue ) {
 				return colorName;
 			}
 		}

diff --git a/packages/components/src/color-palette/stories/index.js b/packages/components/src/color-palette/stories/index.js
@@ -43,7 +43,10 @@ const meta = {
 export default meta;
 
 const Template = ( args ) => {
-	const [ color, setColor ] = useState( '#f00' );
+	const firstColor =
+		args.colors[ 0 ].color || args.colors[ 0 ].colors[ 0 ].color;
+	const [ color, setColor ] = useState( firstColor );
+
 	return (
 		<SlotFillProvider>
 			<ColorPalette { ...args } value={ color } onChange={ setColor } />
@@ -88,3 +91,24 @@ MultipleOrigins.args = {
 		},
 	],
 };
+
+export const CSSVariables = ( args ) => {
+	return (
+		<div
+			style={ {
+				'--red': '#f00',
+				'--yellow': '#ff0',
+				'--blue': '#00f',
+			} }
+		>
+			<Template { ...args } />
+		</div>
+	);
+};
+CSSVariables.args = {
+	colors: [
+		{ name: 'Red', color: 'var(--red)' },
+		{ name: 'Yellow', color: 'var(--yellow)' },
+		{ name: 'Blue', color: 'var(--blue)' },
+	],
+};
diff --git a/packages/components/src/color-palette/test/utils.ts b/packages/components/src/color-palette/test/utils.ts
@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+import { extractColorNameFromCurrentValue } from '../';
+
+describe( 'ColorPalette: Utils', () => {
+	describe( 'extractColorNameFromCurrentValue', () => {
+		test( 'should support hex values', () => {
+			const result = extractColorNameFromCurrentValue( '#00f', [
+				{ name: 'Red', color: '#f00' },
+				{ name: 'Blue', color: '#00f' },
+			] );
+			expect( result ).toBe( 'Blue' );
+		} );
+
+		test( 'should support CSS variables', () => {
+			const result = extractColorNameFromCurrentValue( 'var(--blue)', [
+				{ name: 'Red', color: 'var(--red)' },
+				{ name: 'Blue', color: 'var(--blue)' },
+			] );
+			expect( result ).toBe( 'Blue' );
+		} );
+	} );
+} );