From 171ab06b8b8218e6bf7ef7355b49794dd481ac50 Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Tue, 19 Nov 2024 10:59:29 +0100 Subject: [PATCH 1/4] Disable `Clear` button if there's no color value. --- packages/components/src/color-palette/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx index a65508d8278c5f..e67c540365241c 100644 --- a/packages/components/src/color-palette/index.tsx +++ b/packages/components/src/color-palette/index.tsx @@ -249,7 +249,10 @@ function UnforwardedColorPalette( }; const actions = !! clearable && ( - + { __( 'Clear' ) } ); From 6a950e4f5826e2ef2824e2e8b2eee98f634a7c7a Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Tue, 19 Nov 2024 11:06:04 +0100 Subject: [PATCH 2/4] Add changelog entry. --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index d93eb30ac0ec50..4f28bedfd9c1e6 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -11,6 +11,7 @@ - `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. ([TBD](TBD)). ### Experimental From 731cce4122c86a63bfa6bdedf4e4845ba22d02a3 Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Tue, 19 Nov 2024 11:07:23 +0100 Subject: [PATCH 3/4] Add PR to changelog entry. --- 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 4f28bedfd9c1e6..a3886b4b640bff 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -11,7 +11,7 @@ - `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. ([TBD](TBD)). +- `ColorPalette`: Disable `Clear` button if there's no color value. ([#67108](https://github.com/WordPress/gutenberg/pull/67108)). ### Experimental From 50d781e8aae86ade99e7c9b0b80c3ce7daf661ee Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Tue, 19 Nov 2024 15:53:28 +0100 Subject: [PATCH 4/4] Set gradient and duotone clear button as disabled if there's no value. Add `accessibleWhenDisabled` for all the changes. --- packages/components/CHANGELOG.md | 2 ++ packages/components/src/color-palette/index.tsx | 1 + packages/components/src/duotone-picker/duotone-picker.tsx | 2 ++ packages/components/src/gradient-picker/index.tsx | 2 ++ 4 files changed, 7 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index a3886b4b640bff..51ca7eb2e6ee96 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -12,6 +12,8 @@ - `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)). ### Experimental diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx index e67c540365241c..ed3e9039704179 100644 --- a/packages/components/src/color-palette/index.tsx +++ b/packages/components/src/color-palette/index.tsx @@ -251,6 +251,7 @@ function UnforwardedColorPalette( const actions = !! clearable && ( { __( 'Clear' ) } diff --git a/packages/components/src/duotone-picker/duotone-picker.tsx b/packages/components/src/duotone-picker/duotone-picker.tsx index ee54c9cdf4235e..8764b401c38296 100644 --- 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 && ( onChange( undefined ) } + accessibleWhenDisabled + disabled={ ! value } > { __( 'Clear' ) } diff --git a/packages/components/src/gradient-picker/index.tsx b/packages/components/src/gradient-picker/index.tsx index 8368279b8afd70..f0607badd1b03a 100644 --- a/packages/components/src/gradient-picker/index.tsx +++ b/packages/components/src/gradient-picker/index.tsx @@ -247,6 +247,8 @@ export function GradientPicker( { ! disableCustomGradients && ( { __( 'Clear' ) }