ColorPalette: Disable Clear button if there's no color value. (#67108)

* Disable `Clear` button if there's no color value. * Add changelog entry. * Add PR to changelog entry. * Set gradient and duotone clear button as disabled if there's no value. Add `accessibleWhenDisabled` for all the changes. Co-authored-by: juanfra <[email protected]> Co-authored-by: ntsekouras <[email protected]> Co-authored-by: afercia <[email protected]>
WordPress · Nov 20, 2024 · b408e17 · b408e17 · github-actions · Nov 20, 2024
1 parent 7639ed8
commit b408e17
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 1 deletion.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -13,6 +13,9 @@
 
 -   `ToggleGroupControl`: Fix active background for `0` value ([#66855](https://github.com/WordPress/gutenberg/pull/66855)).
 -   `SlotFill`: Fix a bug where a stale value of `fillProps` could be used ([#67000](https://github.com/WordPress/gutenberg/pull/67000)).
+-   `ColorPalette`: Disable `Clear` button if there's no color value. ([#67108](https://github.com/WordPress/gutenberg/pull/67108)).
+-   `GradientPicker`: Disable `Clear` button if there's no value. ([#67108](https://github.com/WordPress/gutenberg/pull/67108)).
+-   `DuotonePicker`: Disable `Clear` button if there's no value. ([#67108](https://github.com/WordPress/gutenberg/pull/67108)).
 -   `ColorPicker`: Add accessible label for copy button ([#67094](https://github.com/WordPress/gutenberg/pull/67094)).
 
 ### Enhancements

diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
@@ -249,7 +249,11 @@ function UnforwardedColorPalette(
 	};
 
 	const actions = !! clearable && (
-		<CircularOptionPicker.ButtonAction onClick={ clearColor }>
+		<CircularOptionPicker.ButtonAction
+			onClick={ clearColor }
+			accessibleWhenDisabled
+			disabled={ ! value }
+		>
 			{ __( 'Clear' ) }
 		</CircularOptionPicker.ButtonAction>
 	);

diff --git a/packages/components/src/duotone-picker/duotone-picker.tsx b/packages/components/src/duotone-picker/duotone-picker.tsx
@@ -168,6 +168,8 @@ function DuotonePicker( {
 				!! clearable && (
 					<CircularOptionPicker.ButtonAction
 						onClick={ () => onChange( undefined ) }
+						accessibleWhenDisabled
+						disabled={ ! value }
 					>
 						{ __( 'Clear' ) }
 					</CircularOptionPicker.ButtonAction>

diff --git a/packages/components/src/gradient-picker/index.tsx b/packages/components/src/gradient-picker/index.tsx
@@ -247,6 +247,8 @@ export function GradientPicker( {
 						! disableCustomGradients && (
 							<CircularOptionPicker.ButtonAction
 								onClick={ clearGradient }
+								accessibleWhenDisabled
+								disabled={ ! value }
 							>
 								{ __( 'Clear' ) }
 							</CircularOptionPicker.ButtonAction>