Feedback application

WordPress · Oct 15, 2021 · 8706c2d · 8706c2d
1 parent 5240a49
commit 8706c2d
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 14 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -20,6 +20,7 @@
 ### Breaking Changes
 
 -   The `color` property a `tinycolor2` color object passed on `onChangeComplete` property of the `ColorPicker` component was removed. Please use the new `onChange` property that accepts a string color representation ([#35562](https://github.com/WordPress/gutenberg/pull/35562)).
+
 ## 18.0.0 (2021-10-12)
 
 ### Breaking Changes

diff --git a/packages/components/src/color-picker/component.tsx b/packages/components/src/color-picker/component.tsx
@@ -82,11 +82,7 @@ const ColorPicker = (
 
 	const handleChange = useCallback(
 		( nextValue: Colord ) => {
-			debouncedSetColor(
-				nextValue.alpha() < 1
-					? nextValue.toRgbString()
-					: nextValue.toHex()
-			);
+			debouncedSetColor( nextValue.toHex() );
 		},
 		[ debouncedSetColor ]
 	);

diff --git a/packages/components/src/color-picker/hex-input.tsx b/packages/components/src/color-picker/hex-input.tsx
@@ -29,8 +29,6 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 		}
 	};
 
-	const value = color.toHex();
-
 	return (
 		<ColorHexInputControl
 			prefix={
@@ -43,7 +41,7 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 					#
 				</Spacer>
 			}
-			value={ value.slice( 1 ).toUpperCase() }
+			value={ color.toHex().slice( 1 ).toUpperCase() }
 			onChange={ ( nextValue ) => {
 				onChange( colord( '#' + nextValue ) );
 			} }

diff --git a/packages/components/src/color-picker/stories/index.js b/packages/components/src/color-picker/stories/index.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { boolean, select } from '@storybook/addon-knobs';
-import { colord } from 'colord';
 
 /**
  * WordPress dependencies
@@ -48,9 +47,7 @@ const Example = () => {
 			marginTop={ space( 10 ) }
 		>
 			<ColorPicker { ...props } color={ color } onChange={ setColor } />
-			<div style={ { width: 200, textAlign: 'center' } }>
-				{ colord( color ).toHslString() }
-			</div>
+			<div style={ { width: 200, textAlign: 'center' } }>{ color }</div>
 			<ColorPicker { ...props } color={ color } onChange={ setColor } />
 		</Flex>
 	);

diff --git a/packages/components/src/color-picker/test/index.js b/packages/components/src/color-picker/test/index.js
@@ -121,7 +121,7 @@ describe( 'ColorPicker', () => {
 		await sleep( 1 );
 
 		expect( onChange ).toHaveBeenCalledWith(
-			expect.stringContaining( 'rgba' )
+			expect.stringMatching( /^#([a-fA-F0-9]{8})$/ )
 		);
 	} );
 
@@ -154,7 +154,7 @@ describe( 'ColorPicker', () => {
 		await sleep( 1 );
 
 		expect( onChange ).toHaveBeenCalledWith(
-			expect.stringContaining( '#' )
+			expect.stringMatching( /^#([a-fA-F0-9]{6})$/ )
 		);
 	} );
 } );