diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index d20f381aa8fe9..5bb3adce50c29 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -16,10 +16,11 @@ ### Enhancements -- `TabPanel`: Add ability to set icon only tab buttons ([#45005](https://github.com/WordPress/gutenberg/pull/45005)). -- `InputControl`, `NumberControl`, `UnitControl`: Add `help` prop for additional description ([#45931](https://github.com/WordPress/gutenberg/pull/45931)). -- `BorderControl`, `ColorPicker` & `QueryControls`: Replace bottom margin overrides with `__nextHasNoMarginBottom` ([#45985](https://github.com/WordPress/gutenberg/pull/45985)). -- `CustomSelectControl`, `UnitControl`: Add `onFocus` and `onBlur` props ([#46096](https://github.com/WordPress/gutenberg/pull/46096)). +- `TabPanel`: Add ability to set icon only tab buttons ([#45005](https://github.com/WordPress/gutenberg/pull/45005)). +- `InputControl`, `NumberControl`, `UnitControl`: Add `help` prop for additional description ([#45931](https://github.com/WordPress/gutenberg/pull/45931)). +- `BorderControl`, `ColorPicker` & `QueryControls`: Replace bottom margin overrides with `__nextHasNoMarginBottom` ([#45985](https://github.com/WordPress/gutenberg/pull/45985)). +- `CustomSelectControl`, `UnitControl`: Add `onFocus` and `onBlur` props ([#46096](https://github.com/WordPress/gutenberg/pull/46096)). +- `PaletteEdit`: Global styles: add onChange actions to color palette items [#45681](https://github.com/WordPress/gutenberg/pull/45681) ### Experimental diff --git a/packages/components/src/palette-edit/index.js b/packages/components/src/palette-edit/index.js index 5beccbeebfb85..0fce9bd60f73f 100644 --- 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 && ( { test( 'should return 1 by default', () => { @@ -61,3 +66,46 @@ describe( 'getNameForPosition', () => { ); } ); } ); + +describe( 'PaletteEdit', () => { + const defaultProps = { + gradients: false, + colors: [ { color: '#ffffff', name: 'Base', slug: 'base' } ], + onChange: jest.fn(), + paletteLabel: 'Test label', + emptyMessage: 'Test empty message', + canOnlyChangeValues: true, + canReset: true, + slugPrefix: '', + }; + + it( 'opens color selector for color palettes', async () => { + render( ); + fireEvent.click( screen.getByLabelText( 'Color: Base' ) ); + expect( + screen.getByLabelText( 'Select a new color' ) + ).toBeInTheDocument(); + } ); + + it( 'opens gradient selector for gradient palettes', () => { + const gradientProps = { + ...defaultProps, + colors: undefined, + gradients: [ + { + gradient: + 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)', + name: 'Vivid cyan blue to vivid purple', + slug: 'vivid-cyan-blue-to-vivid-purple', + }, + ], + }; + render( ); + fireEvent.click( + screen.getByLabelText( 'Gradient: Vivid cyan blue to vivid purple' ) + ); + expect( + screen.getByLabelText( 'Select a new gradient' ) + ).toBeInTheDocument(); + } ); +} );