Merge pull request #17574 from ckeditor/ck/17386

Fix (ui): No longer add surrounding spaces to colors produced by hex inputs. Closes #17386
ckeditor · Dec 3, 2024 · e639cb6 · e639cb6
2 parents 6549a36 + 7bc33de
commit e639cb6
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 22 deletions.
diff --git a/packages/ckeditor5-font/tests/integration.js b/packages/ckeditor5-font/tests/integration.js
@@ -232,7 +232,7 @@ describe( 'Integration test Font', () => {
 
 			dropdown.colorSelectorView.colorPickerFragmentView.colorPickerView.picker.dispatchEvent( event );
 
-			expect( getData( model ) ).to.equal( '<paragraph>[<$text fontColor="hsl( 150, 50%, 13% )">foo</$text>]</paragraph>' );
+			expect( getData( model ) ).to.equal( '<paragraph>[<$text fontColor="hsl(150, 50%, 13%)">foo</$text>]</paragraph>' );
 		} );
 
 		it( 'should set colors in model in configured format', async () => {
@@ -266,28 +266,28 @@ describe( 'Integration test Font', () => {
 
 			dropdown.colorSelectorView.colorPickerFragmentView.colorPickerView.picker.dispatchEvent( event );
 
-			expect( getData( editor.model ) ).to.equal( '<paragraph>[<$text fontColor="lab( 18% -17 7 )">foo</$text>]</paragraph>' );
+			expect( getData( editor.model ) ).to.equal( '<paragraph>[<$text fontColor="lab(18% -17 7)">foo</$text>]</paragraph>' );
 
 			await editor.destroy();
 		} );
 
 		it( 'should properly discard changes', () => {
 			setModelData( model,
 				'<paragraph>' +
-					'[<$text fontColor="hsl( 50, 10%, 23% )">foo</$text><$text fontColor="hsl( 150, 50%, 13% )">foo</$text>]' +
+					'[<$text fontColor="hsl(50, 10%, 23%)">foo</$text><$text fontColor="hsl(150, 50%, 13%)">foo</$text>]' +
 				'</paragraph>'
 			);
 
 			const dropdown = editor.ui.componentFactory.create( 'fontColor' );
 
 			dropdown.isOpen = true;
 			dropdown.colorSelectorView.fire( 'colorPicker:show' );
-			dropdown.colorSelectorView.colorPickerFragmentView.colorPickerView.color = 'hsl( 100, 30%, 43% )';
+			dropdown.colorSelectorView.colorPickerFragmentView.colorPickerView.color = 'hsl(100, 30%, 43%)';
 
 			dropdown.colorSelectorView.colorPickerFragmentView.cancelButtonView.fire( 'execute' );
 
 			expect( getData( model ) ).to.equal( '<paragraph>' +
-			'[<$text fontColor="hsl( 50, 10%, 23% )">foo</$text><$text fontColor="hsl( 150, 50%, 13% )">foo</$text>]' +
+			'[<$text fontColor="hsl(50, 10%, 23%)">foo</$text><$text fontColor="hsl(150, 50%, 13%)">foo</$text>]' +
 			'</paragraph>' );
 		} );
 

diff --git a/packages/ckeditor5-ui/src/colorpicker/utils.ts b/packages/ckeditor5-ui/src/colorpicker/utils.ts
@@ -126,11 +126,11 @@ export function registerCustomElement( elementName: string, constructor: CustomE
 function formatColorOutput( values: FormatTableColor, format: ColorPickerOutputFormat ): string {
 	switch ( format ) {
 		case 'hex': return `#${ values }`;
-		case 'rgb': return `rgb( ${ values[ 0 ] }, ${ values[ 1 ] }, ${ values[ 2 ] } )`;
-		case 'hsl': return `hsl( ${ values[ 0 ] }, ${ values[ 1 ] }%, ${ values[ 2 ] }% )`;
-		case 'hwb': return `hwb( ${ values[ 0 ] }, ${ values[ 1 ] }, ${ values[ 2 ] } )`;
-		case 'lab': return `lab( ${ values[ 0 ] }% ${ values[ 1 ] } ${ values[ 2 ] } )`;
-		case 'lch': return `lch( ${ values[ 0 ] }% ${ values[ 1 ] } ${ values[ 2 ] } )`;
+		case 'rgb': return `rgb(${ values[ 0 ] }, ${ values[ 1 ] }, ${ values[ 2 ] })`;
+		case 'hsl': return `hsl(${ values[ 0 ] }, ${ values[ 1 ] }%, ${ values[ 2 ] }%)`;
+		case 'hwb': return `hwb(${ values[ 0 ] }, ${ values[ 1 ] }, ${ values[ 2 ] })`;
+		case 'lab': return `lab(${ values[ 0 ] }% ${ values[ 1 ] } ${ values[ 2 ] })`;
+		case 'lch': return `lch(${ values[ 0 ] }% ${ values[ 1 ] } ${ values[ 2 ] })`;
 
 		default: return '';
 	}

diff --git a/packages/ckeditor5-ui/tests/colorpicker/colorpickerview.js b/packages/ckeditor5-ui/tests/colorpicker/colorpickerview.js
@@ -44,7 +44,7 @@ describe( 'ColorPickerView', () => {
 
 			view.color = 'red';
 
-			expect( view.color ).to.equal( 'hsl( 0, 100%, 50% )' );
+			expect( view.color ).to.equal( 'hsl(0, 100%, 50%)' );
 
 			view.destroy();
 		} );
@@ -277,15 +277,15 @@ describe( 'ColorPickerView', () => {
 				describe( 'wrong color format', () => {
 					testColorUpdateFromInput( {
 						name: 'rgb',
-						inputValue: 'rgb( 100, 100, 100 )',
-						expectedInput: 'rgb( 100, 100, 100 )',
+						inputValue: 'rgb(100, 100, 100)',
+						expectedInput: 'rgb(100, 100, 100)',
 						expectedColorProperty: '#000000'
 					} );
 
 					testColorUpdateFromInput( {
 						name: 'hsl',
-						inputValue: 'hsl( 30, 75%, 60 % )',
-						expectedInput: 'hsl( 30, 75%, 60 % )',
+						inputValue: 'hsl(30, 75%, 60 %)',
+						expectedInput: 'hsl(30, 75%, 60 %)',
 						expectedColorProperty: '#000000'
 					} );
 
@@ -419,27 +419,27 @@ describe( 'ColorPickerView', () => {
 
 		describe( 'output format integration', () => {
 			it( 'respects rgb output format', () => {
-				testOutputFormat( 'rgb', '#001000', 'rgb( 0, 16, 0 )' );
+				testOutputFormat( 'rgb', '#001000', 'rgb(0, 16, 0)' );
 			} );
 
 			it( 'respects hex output format', () => {
 				testOutputFormat( 'hex', '#0000f1', '#0000f1' );
 			} );
 
 			it( 'respects hsl output format', () => {
-				testOutputFormat( 'hsl', '#3D9BFF', 'hsl( 211, 100%, 62% )' );
+				testOutputFormat( 'hsl', '#3D9BFF', 'hsl(211, 100%, 62%)' );
 			} );
 
 			it( 'respects hwb output format', () => {
-				testOutputFormat( 'hwb', '#5cb291', 'hwb( 157, 36, 30 )' );
+				testOutputFormat( 'hwb', '#5cb291', 'hwb(157, 36, 30)' );
 			} );
 
 			it( 'respects lab output format', () => {
-				testOutputFormat( 'lab', '#bfe972', 'lab( 87% -32 53 )' );
+				testOutputFormat( 'lab', '#bfe972', 'lab(87% -32 53)' );
 			} );
 
 			it( 'respects lch output format', () => {
-				testOutputFormat( 'lch', '#be0909', 'lch( 40% 81 39 )' );
+				testOutputFormat( 'lch', '#be0909', 'lch(40% 81 39)' );
 			} );
 
 			function testOutputFormat( format, inputColor, outputColor ) {

diff --git a/packages/ckeditor5-ui/tests/colorselector/colorselectorview.js b/packages/ckeditor5-ui/tests/colorselector/colorselectorview.js
@@ -367,7 +367,7 @@ describe( 'ColorSelectorView', () => {
 
 			const colorPicker = colorSelectorView.colorPickerFragmentView.colorPickerView;
 
-			expect( colorPicker.color, '`color` property value is incorrect' ).to.equal( 'hsl( 0, 100%, 20% )' );
+			expect( colorPicker.color, '`color` property value is incorrect' ).to.equal( 'hsl(0, 100%, 20%)' );
 			expect( colorPicker._hexColor, '`_hexColor` property value is incorrect' ).to.equal( '#660000' );
 		} );
 
@@ -378,7 +378,7 @@ describe( 'ColorSelectorView', () => {
 
 			const colorPicker = colorSelectorView.colorPickerFragmentView.colorPickerView;
 
-			expect( colorPicker.color, '`color` property value is incorrect' ).to.equal( 'hsl( 310, 100%, 20% )' );
+			expect( colorPicker.color, '`color` property value is incorrect' ).to.equal( 'hsl(310, 100%, 20%)' );
 			expect( colorPicker._hexColor, '`_hexColor` property value is incorrect' ).to.equal( '#660055' );
 		} );