Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Nov 20, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
171ab06
Disable `Clear` button if there's no color value.
juanfra Nov 19, 2024
6a950e4
Add changelog entry.
juanfra Nov 19, 2024
731cce4
Add PR to changelog entry.
juanfra Nov 19, 2024
50d781e
Set gradient and duotone clear button as disabled if there's no value…
juanfra Nov 19, 2024
bdb36e2
Merge branch 'trunk' into fix/67107-color-clear-button
juanfra Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 5 additions & 1 deletion packages/components/src/color-palette/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,11 @@ function UnforwardedColorPalette(
};

const actions = !! clearable && (
<CircularOptionPicker.ButtonAction onClick={ clearColor }>
<CircularOptionPicker.ButtonAction
onClick={ clearColor }
accessibleWhenDisabled
disabled={ ! value }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's also add accessibleWhenDisabled prop here.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the review. I've added it. I also applied the same logic to the GradientPicker and DuotonePicker.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's also add accessibleWhenDisabled prop here.

Thanks for catching that.

>
{ __( 'Clear' ) }
</CircularOptionPicker.ButtonAction>
);
Expand Down
2 changes: 2 additions & 0 deletions packages/components/src/duotone-picker/duotone-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,8 @@ function DuotonePicker( {
!! clearable && (
<CircularOptionPicker.ButtonAction
onClick={ () => onChange( undefined ) }
accessibleWhenDisabled
disabled={ ! value }
>
{ __( 'Clear' ) }
</CircularOptionPicker.ButtonAction>
Expand Down
2 changes: 2 additions & 0 deletions packages/components/src/gradient-picker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,8 @@ export function GradientPicker( {
! disableCustomGradients && (
<CircularOptionPicker.ButtonAction
onClick={ clearGradient }
accessibleWhenDisabled
disabled={ ! value }
>
{ __( 'Clear' ) }
</CircularOptionPicker.ButtonAction>
Expand Down
Loading