Initial commit:

- Add changelog for changes merged in #45681 - Test case for Popover
WordPress · Nov 27, 2022 · 428bc8e · 428bc8e
1 parent 0b1998c
commit 428bc8e
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 3 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -8,7 +8,8 @@
 
 ### Enhancements
 
--   `TabPanel`: Add ability to set icon only tab buttons ([#45005](https://github.com/WordPress/gutenberg/pull/45005)).
+- `TabPanel`: Add ability to set icon only tab buttons ([#45005](https://github.com/WordPress/gutenberg/pull/45005)).
+- `PaletteEdit`: Global styles: add onChange actions to color palette items [#45681](https://github.com/WordPress/gutenberg/pull/45681)
 
 ### Internal
 

diff --git a/packages/components/src/palette-edit/index.js b/packages/components/src/palette-edit/index.js
@@ -89,7 +89,7 @@ export function getNameForPosition( elements, slugPrefix ) {
 	);
 }
 
-function ColorPickerPopover( {
+export function ColorPickerPopover( {
 	isGradient,
 	element,
 	onChange,
@@ -101,6 +101,11 @@ function ColorPickerPopover( {
 			offset={ 20 }
 			className="components-palette-edit__popover"
 			onClose={ onClose }
+			aria-label={
+				! isGradient
+					? __( 'Select a new color' )
+					: __( 'Select a new gradient' )
+			}
 		>
 			{ ! isGradient && (
 				<ColorPicker

diff --git a/packages/components/src/palette-edit/test/index.js b/packages/components/src/palette-edit/test/index.js
@@ -1,7 +1,12 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
 /**
  * Internal dependencies
  */
-import { getNameForPosition } from '../';
+import PaletteEdit, { getNameForPosition, ColorPickerPopover } from '../';
 
 describe( 'getNameForPosition', () => {
 	test( 'should return 1 by default', () => {
@@ -61,3 +66,35 @@ describe( 'getNameForPosition', () => {
 		);
 	} );
 } );
+
+describe( 'ColorPickerPopover', () => {
+	it( 'renders the color picker', () => {
+		render(
+			<ColorPickerPopover
+				isGradient={ false }
+				element={ {
+					color: '#FFFFFF',
+				} }
+				onChange={ () => {} }
+			/>
+		);
+		expect(
+			screen.getByLabelText( 'Select a new color' )
+		).toBeInTheDocument();
+	} );
+
+	it( 'renders the gradient picker', () => {
+		render(
+			<ColorPickerPopover
+				isGradient={ true }
+				element={ {
+					gradient: 'linear-gradient(160deg, #D1D1E4, #D1DFE4)',
+				} }
+				onChange={ () => {} }
+			/>
+		);
+		expect(
+			screen.getByLabelText( 'Select a new gradient' )
+		).toBeInTheDocument();
+	} );
+} );