From 228adc9dec459af75c641069df1810bf6291c070 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 1 Jun 2022 19:29:34 +0900
Subject: [PATCH] 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
---
 packages/components/CHANGELOG.md              |  1 +
 .../components/src/color-palette/index.js     | 15 ++++++++---
 .../src/color-palette/stories/index.js        | 26 ++++++++++++++++++-
 .../src/color-palette/test/utils.ts           | 24 +++++++++++++++++
 4 files changed, 61 insertions(+), 5 deletions(-)
 create mode 100644 packages/components/src/color-palette/test/utils.ts

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index d686ce975cd98..69537cd3208f5 100644
--- 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
index 4c92fd35b1822..9d3be9e463d83 100644
--- 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
index 1b59df587eb5c..736b597ad426c 100644
--- 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
new file mode 100644
index 0000000000000..32103883a11ea
--- /dev/null
+++ 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' );
+		} );
+	} );
+} );