Feat hide clear button

[dombesz]

What are you trying to accomplish?

Introduce a functionality to show and hide the clear button of the SubHeader component filter input. The clear button is shown when the filter input has some value typed in, and it is hidden when the input is empty.

Integration

No required, when the show_clear_button: true argument is passed to the component.with_filter_input, the added functionality will work automatically.

List the issues that this change affects.

https://community.openproject.org/projects/openproject/work_packages/57777/activity

Risk Assessment

• Low risk the change is small, highly observable, and easily rolled back.
• Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
• High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

What approach did you choose and why?

Added a new method toggleFilterInputClearButton to the SubHeaderElement which will decide whether the clear button should be displayed or not. This method is then triggered on the filter input focus and input events, ensuring that the clear button is shown only when there is content inside the input field.

Anything you want to highlight for special attention from reviewers?

Would be nice to have the PrimerTextFieldElement#clearContents method updated to emit an input event. That way the toggleFilterInputClearButton shouldn't be bound to both the focus and the input event, just the latter. This has been an issue for another functionality before, so I might need to make that change PR against the main primer repo, not this one.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Lookbook)
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

[changeset-bot]

🦋 Changeset detected

Latest commit: 7b3ed15

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@openproject/primer-view-components	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[HDinger]

I have some minor remarks. I think we should set show_clear_button to true as a default for text inputs in the SubHeaders. Wdyt?

[HDinger]

Good to merge once the CI is green