From 47668313c795bcf008e1a90ef2d97a15f4461350 Mon Sep 17 00:00:00 2001 From: Nate Finch Date: Wed, 15 Oct 2025 18:07:13 -0500 Subject: [PATCH 01/18] add logic for custom color boolean for borders --- .../src/components/global-styles/border-panel.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/block-editor/src/components/global-styles/border-panel.js b/packages/block-editor/src/components/global-styles/border-panel.js index f0e4cb00991212..c0a390ee2c82bf 100644 --- a/packages/block-editor/src/components/global-styles/border-panel.js +++ b/packages/block-editor/src/components/global-styles/border-panel.js @@ -39,6 +39,10 @@ export function useHasBorderPanelControls( settings ) { return controls; } +function useCustomSolids( settings ) { + return settings?.color?.custom; +} + function useHasBorderColorControl( settings ) { return settings?.border?.color; } @@ -104,6 +108,7 @@ export default function BorderPanel( { defaultControls = DEFAULT_CONTROLS, } ) { const colors = useColorsPerOrigin( settings ); + const areCustomSolidsEnabled = useCustomSolids( settings ); const decodeValue = useCallback( ( rawValue ) => getValueFromVariable( { settings }, '', rawValue ), [ settings ] @@ -265,6 +270,7 @@ export default function BorderPanel( { > Date: Thu, 16 Oct 2025 16:47:52 -0500 Subject: [PATCH 02/18] add tests to verify color picker is visible or not visible --- .../src/border-box-control/test/index.tsx | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/packages/components/src/border-box-control/test/index.tsx b/packages/components/src/border-box-control/test/index.tsx index 74501f7fccc7ac..11a302944e5299 100644 --- a/packages/components/src/border-box-control/test/index.tsx +++ b/packages/components/src/border-box-control/test/index.tsx @@ -216,6 +216,45 @@ describe( 'BorderBoxControl', () => { } ) ).not.toBeInTheDocument(); } ); + + it( 'should disable the custom color picker when disableCustomColors is true', async () => { + const user = userEvent.setup(); + + // disableCustomColors = true → custom picker should NOT appear + render( ); + + const colorButton = screen.getByLabelText( toggleLabelRegex ); + await user.click( colorButton ); + + // Wait to make sure the dropdown opens + await waitFor( () => + expect( + screen.queryByRole( 'button', { + name: 'Custom color picker', + } ) + ).not.toBeInTheDocument() + ); + } ); + + it( 'should show the custom color picker when disableCustomColors is false', async () => { + const user = userEvent.setup(); + + // disableCustomColors = false → custom picker SHOULD appear + render( + + ); + + const colorButton = screen.getByLabelText( toggleLabelRegex ); + await user.click( colorButton ); + + await waitFor( () => + expect( + screen.getByRole( 'button', { + name: 'Custom color picker', + } ) + ).toBeVisible() + ); + } ); } ); describe( 'Split view rendering', () => { From ba662c736e9a72057980e522c7a0e45b847e9d85 Mon Sep 17 00:00:00 2001 From: Nate Finch Date: Tue, 2 Jun 2026 11:30:19 -0500 Subject: [PATCH 03/18] add wrapper for color palette --- .../border-control-dropdown/component.tsx | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/components/src/border-control/border-control-dropdown/component.tsx b/packages/components/src/border-control/border-control-dropdown/component.tsx index c02da4d8ada2eb..51c035fba681a4 100644 --- a/packages/components/src/border-control/border-control-dropdown/component.tsx +++ b/packages/components/src/border-control/border-control-dropdown/component.tsx @@ -203,17 +203,19 @@ const BorderControlDropdown = ( const renderContent = () => ( - + { ( colors.length > 0 || ! disableCustomColors ) && ( + + ) } { enableStyle && isStyleSettable && ( Date: Wed, 3 Jun 2026 08:49:23 -0500 Subject: [PATCH 04/18] Update packages/components/src/border-box-control/test/index.tsx Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> --- packages/components/src/border-box-control/test/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/border-box-control/test/index.tsx b/packages/components/src/border-box-control/test/index.tsx index d5dd5f3150efba..e003f91e48d3ac 100644 --- a/packages/components/src/border-box-control/test/index.tsx +++ b/packages/components/src/border-box-control/test/index.tsx @@ -255,7 +255,7 @@ describe( 'BorderBoxControl', () => { // disableCustomColors = false → custom picker SHOULD appear render( - + ); const colorButton = screen.getByLabelText( toggleLabelRegex ); From 7d098b5f4410f9259969fb521a7d3b3a31abff91 Mon Sep 17 00:00:00 2001 From: Nate Finch Date: Wed, 3 Jun 2026 08:49:34 -0500 Subject: [PATCH 05/18] Update packages/components/src/border-box-control/test/index.tsx Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> --- packages/components/src/border-box-control/test/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/border-box-control/test/index.tsx b/packages/components/src/border-box-control/test/index.tsx index e003f91e48d3ac..5c940ae0eb7e81 100644 --- a/packages/components/src/border-box-control/test/index.tsx +++ b/packages/components/src/border-box-control/test/index.tsx @@ -235,7 +235,7 @@ describe( 'BorderBoxControl', () => { const user = userEvent.setup(); // disableCustomColors = true → custom picker should NOT appear - render( ); + render( ); const colorButton = screen.getByLabelText( toggleLabelRegex ); await user.click( colorButton ); From 6ddfc06c885613f915c4ee90d4bd9fa67abf7a81 Mon Sep 17 00:00:00 2001 From: Nate Finch Date: Wed, 3 Jun 2026 09:58:57 -0500 Subject: [PATCH 06/18] add tests to check that no colors will also disable the color picker --- .../src/border-box-control/test/index.tsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/components/src/border-box-control/test/index.tsx b/packages/components/src/border-box-control/test/index.tsx index 5c940ae0eb7e81..aa08fb6d58c2c8 100644 --- a/packages/components/src/border-box-control/test/index.tsx +++ b/packages/components/src/border-box-control/test/index.tsx @@ -269,6 +269,26 @@ describe( 'BorderBoxControl', () => { ).toBeVisible() ); } ); + + + it( 'should disable the custom color picker when colors.length is 0', async () => { + const user = userEvent.setup(); + + // colors.length = 0 → custom picker should NOT appear + render( ); + + const colorButton = screen.getByLabelText( toggleLabelRegex ); + await user.click( colorButton ); + + // Wait to make sure the dropdown opens + await waitFor( () => + expect( + screen.queryByRole( 'button', { + name: 'Custom color picker', + } ) + ).not.toBeInTheDocument() + ); + } ); } ); describe( 'Split view rendering', () => { From ffa793f6fc6f1c98aae6b295586e4eef6f1e8f05 Mon Sep 17 00:00:00 2001 From: Nate Finch Date: Thu, 4 Jun 2026 18:02:43 -0500 Subject: [PATCH 07/18] update tests to check color guard --- .../src/border-box-control/test/index.tsx | 27 +++++++++++++++---- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/packages/components/src/border-box-control/test/index.tsx b/packages/components/src/border-box-control/test/index.tsx index aa08fb6d58c2c8..cdd8c3a20cd85a 100644 --- a/packages/components/src/border-box-control/test/index.tsx +++ b/packages/components/src/border-box-control/test/index.tsx @@ -270,12 +270,28 @@ describe( 'BorderBoxControl', () => { ); } ); - - it( 'should disable the custom color picker when colors.length is 0', async () => { + it( 'should render the color palette when colors is greater than 0', async () => { const user = userEvent.setup(); + // colors is set to a non-empty array above, so the color palette should appear + render( ); - // colors.length = 0 → custom picker should NOT appear - render( ); + const colorButton = screen.getByLabelText( toggleLabelRegex ); + await user.click( colorButton ); + + // Wait to make sure the dropdown opens + await waitFor( () => + expect( + screen.getByRole( 'listbox', { + name: 'Custom color picker', + } ) + ).toBeVisible() + ); + } ); + + it( 'should not render the color palette when colors is 0', async () => { + const user = userEvent.setup(); + // colors is set to an empty array above, so the color palette should not appear + render( ); const colorButton = screen.getByLabelText( toggleLabelRegex ); await user.click( colorButton ); @@ -283,12 +299,13 @@ describe( 'BorderBoxControl', () => { // Wait to make sure the dropdown opens await waitFor( () => expect( - screen.queryByRole( 'button', { + screen.queryByRole( 'listbox', { name: 'Custom color picker', } ) ).not.toBeInTheDocument() ); } ); + } ); describe( 'Split view rendering', () => { From a04bdd7ca3ed57ba6e586dc11290902c1d824013 Mon Sep 17 00:00:00 2001 From: Nate Finch Date: Thu, 4 Jun 2026 18:06:40 -0500 Subject: [PATCH 08/18] remove single use function --- .../src/components/global-styles/border-panel.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/border-panel.js b/packages/block-editor/src/components/global-styles/border-panel.js index ea89ee518880b6..221b2b765ac508 100644 --- a/packages/block-editor/src/components/global-styles/border-panel.js +++ b/packages/block-editor/src/components/global-styles/border-panel.js @@ -40,10 +40,6 @@ export function useHasBorderPanelControls( settings ) { return controls; } -function useCustomSolids( settings ) { - return settings?.color?.custom; -} - function useHasBorderColorControl( settings ) { return settings?.border?.color; } @@ -109,7 +105,7 @@ export default function BorderPanel( { defaultControls = DEFAULT_CONTROLS, } ) { const colors = useColorsPerOrigin( settings ); - const areCustomSolidsEnabled = useCustomSolids( settings ); + const areCustomSolidsEnabled = settings?.color?.custom; const decodeValue = useCallback( ( rawValue ) => getValueFromVariable( { settings }, '', rawValue ), [ settings ] From 605653cfd7ca26807c8d771fc903883c7bb6f923 Mon Sep 17 00:00:00 2001 From: Nate Finch Date: Fri, 5 Jun 2026 10:40:18 -0500 Subject: [PATCH 09/18] remove tests from BorderBoxControl --- .../src/border-box-control/test/index.tsx | 76 ------------------- 1 file changed, 76 deletions(-) diff --git a/packages/components/src/border-box-control/test/index.tsx b/packages/components/src/border-box-control/test/index.tsx index cdd8c3a20cd85a..61d733cd3a812f 100644 --- a/packages/components/src/border-box-control/test/index.tsx +++ b/packages/components/src/border-box-control/test/index.tsx @@ -230,82 +230,6 @@ describe( 'BorderBoxControl', () => { } ) ).not.toBeInTheDocument(); } ); - - it( 'should disable the custom color picker when disableCustomColors is true', async () => { - const user = userEvent.setup(); - - // disableCustomColors = true → custom picker should NOT appear - render( ); - - const colorButton = screen.getByLabelText( toggleLabelRegex ); - await user.click( colorButton ); - - // Wait to make sure the dropdown opens - await waitFor( () => - expect( - screen.queryByRole( 'button', { - name: 'Custom color picker', - } ) - ).not.toBeInTheDocument() - ); - } ); - - it( 'should show the custom color picker when disableCustomColors is false', async () => { - const user = userEvent.setup(); - - // disableCustomColors = false → custom picker SHOULD appear - render( - - ); - - const colorButton = screen.getByLabelText( toggleLabelRegex ); - await user.click( colorButton ); - - await waitFor( () => - expect( - screen.getByRole( 'button', { - name: 'Custom color picker', - } ) - ).toBeVisible() - ); - } ); - - it( 'should render the color palette when colors is greater than 0', async () => { - const user = userEvent.setup(); - // colors is set to a non-empty array above, so the color palette should appear - render( ); - - const colorButton = screen.getByLabelText( toggleLabelRegex ); - await user.click( colorButton ); - - // Wait to make sure the dropdown opens - await waitFor( () => - expect( - screen.getByRole( 'listbox', { - name: 'Custom color picker', - } ) - ).toBeVisible() - ); - } ); - - it( 'should not render the color palette when colors is 0', async () => { - const user = userEvent.setup(); - // colors is set to an empty array above, so the color palette should not appear - render( ); - - const colorButton = screen.getByLabelText( toggleLabelRegex ); - await user.click( colorButton ); - - // Wait to make sure the dropdown opens - await waitFor( () => - expect( - screen.queryByRole( 'listbox', { - name: 'Custom color picker', - } ) - ).not.toBeInTheDocument() - ); - } ); - } ); describe( 'Split view rendering', () => { From 3834cb7bb93e18b0e8d92baa4a495aa3971e2b65 Mon Sep 17 00:00:00 2001 From: Nate Finch Date: Fri, 5 Jun 2026 12:05:24 -0500 Subject: [PATCH 10/18] update tests and location --- .../src/border-control/test/index.js | 55 +++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/packages/components/src/border-control/test/index.js b/packages/components/src/border-control/test/index.js index dc697fffca19ca..6342292d0753bd 100644 --- a/packages/components/src/border-control/test/index.js +++ b/packages/components/src/border-control/test/index.js @@ -176,6 +176,61 @@ describe( 'BorderControl', () => { expect( dashedButton ).not.toBeInTheDocument(); expect( dottedButton ).not.toBeInTheDocument(); } ); + + it( 'should not render ColorPalette if colors is empty and disableCustomColors is true', async () => { + const user = userEvent.setup(); + const props = createProps( { colors: [], disableCustomColors: true } ); + render( ); + + const toggleButton = screen.getByLabelText( toggleLabelRegex ); + await user.click( toggleButton ); + + // Wait for the popover to appear by checking for the style picker. + await waitFor( () => + expect( screen.getByText( 'Style' ) ).toBeInTheDocument() + ); + // The ColorPalette contains both the custom color picker button and the listbox of color options, so neither should be rendered when there are no colors and custom colors are disabled. + expect( + screen.queryByRole( 'button', { + name: /^Custom color picker/, + } ) + ).not.toBeInTheDocument(); + expect( + screen.queryByRole( 'listbox', { + name: 'Custom color picker', + } ) + ).not.toBeInTheDocument(); + } ); + + it( 'should not render custom color picker when opted out of', async () => { + const user = userEvent.setup(); + // Even when colors are provided, if `disableCustomColors` is true, the custom color picker should not be rendered. + const props = createProps( { colors: colors, disableCustomColors: true } ); + render( ); + + const toggleButton = screen.getByLabelText( toggleLabelRegex ); + await user.click( toggleButton ); + + // Wait for the popover to appear by checking for the style picker. + await waitFor( () => + expect( screen.getByText( 'Style' ) ).toBeInTheDocument() + ); + + // Color swatches should still render. + const circularOptionPicker = screen.getByRole( 'listbox', { + name: 'Custom color picker', + } ); + const colorSwatchButtons = + within( circularOptionPicker ).getAllByRole( 'option' ); + expect( colorSwatchButtons.length ).toEqual( colors.length ); + + // But the custom color picker button should not. + expect( + screen.queryByRole( 'button', { + name: /^Custom color picker/, + } ) + ).not.toBeInTheDocument(); + } ); } ); describe( 'color and style picker aria labels', () => { From f57c190ac5f283d393670cad07bebd5f8082000e Mon Sep 17 00:00:00 2001 From: Nate Finch Date: Fri, 5 Jun 2026 12:12:33 -0500 Subject: [PATCH 11/18] remove custom prop --- packages/components/src/border-control/test/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/border-control/test/index.js b/packages/components/src/border-control/test/index.js index 6342292d0753bd..1f701fb90437e7 100644 --- a/packages/components/src/border-control/test/index.js +++ b/packages/components/src/border-control/test/index.js @@ -205,7 +205,7 @@ describe( 'BorderControl', () => { it( 'should not render custom color picker when opted out of', async () => { const user = userEvent.setup(); // Even when colors are provided, if `disableCustomColors` is true, the custom color picker should not be rendered. - const props = createProps( { colors: colors, disableCustomColors: true } ); + const props = createProps( { disableCustomColors: true } ); render( ); const toggleButton = screen.getByLabelText( toggleLabelRegex ); From 3346ca98f3105b047a2effd2dedaa2ffb8e6cd56 Mon Sep 17 00:00:00 2001 From: Nate Finch Date: Mon, 8 Jun 2026 09:56:06 -0500 Subject: [PATCH 12/18] lint files --- .../components/src/border-control/test/index.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/components/src/border-control/test/index.js b/packages/components/src/border-control/test/index.js index 1f701fb90437e7..4ce0068fac561d 100644 --- a/packages/components/src/border-control/test/index.js +++ b/packages/components/src/border-control/test/index.js @@ -179,16 +179,17 @@ describe( 'BorderControl', () => { it( 'should not render ColorPalette if colors is empty and disableCustomColors is true', async () => { const user = userEvent.setup(); - const props = createProps( { colors: [], disableCustomColors: true } ); + const props = createProps( { + colors: [], + disableCustomColors: true, + } ); render( ); const toggleButton = screen.getByLabelText( toggleLabelRegex ); await user.click( toggleButton ); // Wait for the popover to appear by checking for the style picker. - await waitFor( () => - expect( screen.getByText( 'Style' ) ).toBeInTheDocument() - ); + expect( await screen.findByText( 'Style' ) ).toBeInTheDocument(); // The ColorPalette contains both the custom color picker button and the listbox of color options, so neither should be rendered when there are no colors and custom colors are disabled. expect( screen.queryByRole( 'button', { @@ -212,9 +213,7 @@ describe( 'BorderControl', () => { await user.click( toggleButton ); // Wait for the popover to appear by checking for the style picker. - await waitFor( () => - expect( screen.getByText( 'Style' ) ).toBeInTheDocument() - ); + expect( await screen.findByText( 'Style' ) ).toBeInTheDocument(); // Color swatches should still render. const circularOptionPicker = screen.getByRole( 'listbox', { From 83afdd52bf34b2e716f57e9807b371f8c853b790 Mon Sep 17 00:00:00 2001 From: Nate Finch Date: Mon, 8 Jun 2026 16:01:58 -0500 Subject: [PATCH 13/18] update check to return null Vstack --- .../border-control-dropdown/component.tsx | 24 +++++++++---------- .../components/src/color-palette/index.tsx | 5 ++++ 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/packages/components/src/border-control/border-control-dropdown/component.tsx b/packages/components/src/border-control/border-control-dropdown/component.tsx index 93908331dbf1d2..23ee902df5ffc3 100644 --- a/packages/components/src/border-control/border-control-dropdown/component.tsx +++ b/packages/components/src/border-control/border-control-dropdown/component.tsx @@ -203,19 +203,17 @@ const BorderControlDropdown = ( <> - { ( colors.length > 0 || ! disableCustomColors ) && ( - - ) } + { enableStyle && isStyleSettable && ( { ! disableCustomColors && ( From 3e2e58bd5f055236eb5771730d61651711c7e07a Mon Sep 17 00:00:00 2001 From: Nate Finch Date: Mon, 8 Jun 2026 16:07:50 -0500 Subject: [PATCH 14/18] update changelog --- packages/components/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index fe8436ee66fa70..a799479dc30fe3 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -14,6 +14,10 @@ - `Tooltip`: Use `--wpds-border-radius-md` for portaled popup surfaces, aligning with menus and popovers ([#78983](https://github.com/WordPress/gutenberg/pull/78983)). +### Bug Fixes + +- Fix bug displaying custom color option even when opted out ([74402](https://github.com/WordPress/gutenberg/pull/72402)) + ## 34.0.0 (2026-05-27) ### Breaking Changes From 6bcb5dbbba1ae086b3f190ee5fc92b9360de824b Mon Sep 17 00:00:00 2001 From: Nate Finch Date: Tue, 9 Jun 2026 08:09:53 -0500 Subject: [PATCH 15/18] Update packages/components/CHANGELOG.md Co-authored-by: Marco Ciampini --- packages/components/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index a799479dc30fe3..9e9ff6ae49035c 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -16,7 +16,7 @@ ### Bug Fixes -- Fix bug displaying custom color option even when opted out ([74402](https://github.com/WordPress/gutenberg/pull/72402)) +- - `ColorPalette`: Avoid rendering an empty palette when custom colors are disabled and no color presets are available ([#72402](https://github.com/WordPress/gutenberg/pull/72402)). ## 34.0.0 (2026-05-27) From a01c105496fa24afc366327c3f7419a22af41ed7 Mon Sep 17 00:00:00 2001 From: Nate Finch Date: Tue, 9 Jun 2026 08:10:22 -0500 Subject: [PATCH 16/18] Update packages/components/src/color-palette/index.tsx Co-authored-by: Marco Ciampini --- packages/components/src/color-palette/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx index 6270067708a2b9..d24acc5b6b1093 100644 --- a/packages/components/src/color-palette/index.tsx +++ b/packages/components/src/color-palette/index.tsx @@ -277,7 +277,7 @@ function UnforwardedColorPalette( ); // If disableCustomColors is true and colors.length is 0, return null to avoid rendering an empty circular option picker. - if ( disableCustomColors && colors.length === 0 ) { + if ( disableCustomColors && colors.length === 0 && ! actions ) { return null; } From e68122d50bb7055e94464a6437bec4163929ad46 Mon Sep 17 00:00:00 2001 From: Nate Finch Date: Tue, 9 Jun 2026 08:49:32 -0500 Subject: [PATCH 17/18] update tests to ColorPalette --- .../src/border-control/test/index.js | 54 ------------------- .../src/color-palette/test/index.tsx | 30 +++++++++++ 2 files changed, 30 insertions(+), 54 deletions(-) diff --git a/packages/components/src/border-control/test/index.js b/packages/components/src/border-control/test/index.js index 4ce0068fac561d..dc697fffca19ca 100644 --- a/packages/components/src/border-control/test/index.js +++ b/packages/components/src/border-control/test/index.js @@ -176,60 +176,6 @@ describe( 'BorderControl', () => { expect( dashedButton ).not.toBeInTheDocument(); expect( dottedButton ).not.toBeInTheDocument(); } ); - - it( 'should not render ColorPalette if colors is empty and disableCustomColors is true', async () => { - const user = userEvent.setup(); - const props = createProps( { - colors: [], - disableCustomColors: true, - } ); - render( ); - - const toggleButton = screen.getByLabelText( toggleLabelRegex ); - await user.click( toggleButton ); - - // Wait for the popover to appear by checking for the style picker. - expect( await screen.findByText( 'Style' ) ).toBeInTheDocument(); - // The ColorPalette contains both the custom color picker button and the listbox of color options, so neither should be rendered when there are no colors and custom colors are disabled. - expect( - screen.queryByRole( 'button', { - name: /^Custom color picker/, - } ) - ).not.toBeInTheDocument(); - expect( - screen.queryByRole( 'listbox', { - name: 'Custom color picker', - } ) - ).not.toBeInTheDocument(); - } ); - - it( 'should not render custom color picker when opted out of', async () => { - const user = userEvent.setup(); - // Even when colors are provided, if `disableCustomColors` is true, the custom color picker should not be rendered. - const props = createProps( { disableCustomColors: true } ); - render( ); - - const toggleButton = screen.getByLabelText( toggleLabelRegex ); - await user.click( toggleButton ); - - // Wait for the popover to appear by checking for the style picker. - expect( await screen.findByText( 'Style' ) ).toBeInTheDocument(); - - // Color swatches should still render. - const circularOptionPicker = screen.getByRole( 'listbox', { - name: 'Custom color picker', - } ); - const colorSwatchButtons = - within( circularOptionPicker ).getAllByRole( 'option' ); - expect( colorSwatchButtons.length ).toEqual( colors.length ); - - // But the custom color picker button should not. - expect( - screen.queryByRole( 'button', { - name: /^Custom color picker/, - } ) - ).not.toBeInTheDocument(); - } ); } ); describe( 'color and style picker aria labels', () => { diff --git a/packages/components/src/color-palette/test/index.tsx b/packages/components/src/color-palette/test/index.tsx index 34ba249b7949f7..7f124047dd2ef5 100644 --- a/packages/components/src/color-palette/test/index.tsx +++ b/packages/components/src/color-palette/test/index.tsx @@ -151,6 +151,20 @@ describe( 'ColorPalette', () => { ).not.toBeInTheDocument(); } ); + it( 'should render nothing when custom colors are disabled, there are no colors, and it is not clearable', () => { + const onChange = jest.fn(); + const { container } = render( + + ); + + expect( container ).toBeEmptyDOMElement(); + } ); + it( 'should render dropdown and its content', async () => { const user = userEvent.setup(); const onChange = jest.fn(); @@ -217,6 +231,22 @@ describe( 'ColorPalette', () => { ).toBeInTheDocument(); } ); + it( 'should still show the clear button when colors is empty and custom colors are disabled', () => { + const onChange = jest.fn(); + + render( + + ); + + expect( + screen.getByRole( 'button', { name: 'Clear' } ) + ).toBeInTheDocument(); + } ); + it( 'should display the selected color name and value', async () => { const user = userEvent.setup(); From 626556506683abf27fa53b7696cebbc433bb3cb8 Mon Sep 17 00:00:00 2001 From: Nate Finch Date: Tue, 9 Jun 2026 12:53:51 -0500 Subject: [PATCH 18/18] Update packages/components/src/color-palette/index.tsx Co-authored-by: Marco Ciampini --- packages/components/src/color-palette/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx index d24acc5b6b1093..5a720520f3dcec 100644 --- a/packages/components/src/color-palette/index.tsx +++ b/packages/components/src/color-palette/index.tsx @@ -276,7 +276,7 @@ function UnforwardedColorPalette( ariaLabelledby ); - // If disableCustomColors is true and colors.length is 0, return null to avoid rendering an empty circular option picker. + // If disableCustomColors is true and colors.length is 0, return null to avoid rendering an empty palette wrapper. if ( disableCustomColors && colors.length === 0 && ! actions ) { return null; }