Duotone Settings: Add reset button and improve toggle rendering in FiltersPanel

[yogeshbhutkar]

What, Why and How?

This PR adds a Reset button to the Duotone Filter control, enhancing its functionality and ensuring consistency with other color control components.

The Reset button is conditionally rendered based on a newly introduced clearable prop.

Testing Instructions

1. Navigate to post edit page.
2. Create an Image block and insert an image.
3. Add Duotone filter to the image.
4. Confirm, the Duotone value can now be cleared with the reset button.

Screencast

Closes: #68671

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yogeshbhutkar <[email protected]>
Co-authored-by: t-hamano <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[t-hamano]

Thanks for the PR!

The reset button should be visible when hovering over the dropdown button, not the reset button itself. Otherwise, people won't be able to use the reset button unless they know there is a transparent reset button there. This is probably because the structure is different from the rest of the UI.

You will probably need to move away from using ItemGroup,Item components and align with other implementations.

Note that you will also need to deal with focus issues. See this comment.

[yogeshbhutkar]

You will probably need to move away from using ItemGroup,Item components and align with other implementations.

I reviewed the border-panel implementation and noticed that ItemGroup is used as a parent for the dropdown. Since ItemGroup provides the necessary border and separation, I refactored the code accordingly to align with the border-panel coding style.

Ref:

gutenberg/packages/block-editor/src/components/global-styles/border-panel.js

Line 301 in 23d6b4a

<ItemGroup isBordered isSeparated>

[yogeshbhutkar]

Thanks for the review.

I've applied all the suggestions. The changes are testing well for me.

changes.mov

Can you please review the PR when you get a moment?

Thanks!

[t-hamano]

Thanks for the update! I added a little bit of feedback at the end, but everything is working as expected.

[yogeshbhutkar]

Thanks for your suggestions! I've incorporated all of them. When you have a moment, could you take a look? Appreciate it!

P.S. The failing test is unrelated to the changes made.

[t-hamano]

LGTM 👍