[feat] Create <rh-search-filters> component/pattern

[KrystalMoore16]

Description

Improvements for this pattern: https://ux.redhat.com/patterns/filter/#style

@marionnegp

Acceptance Criteria

• Design done
• Development done

Images

No response

Design file

No response

Other resources

No response

[markcaron]

Discovery spike!

@bennypowers @zeroedin @adamjohnson let's chat with @marionnegp and @KrystalMoore16 about what this <rh-filter-box> or maybe <rh-search-filters> component may look like, and if we need to break it out into separate components.

[bennypowers]

Because the checkboxes are related, @adamjohnson might want RTI to obtain. Adam would you please check my intuition here?

@coreyvickery @markcaron @KrystalMoore16 is Disclosure (I.E. singular accordion) a requirement here?

[coreyvickery]

@bennypowers I feel like it's not because <rh-disclosure> might be intended to be a bit stylistically different according to what's in Figma. I'd assume we just stick with <rh-accordion-panel> (if that exists) within <rh-filter>/<rh-filter-box>.

[adamjohnson]

RTI not required here. It should follow the tab order outlined under Tab Order in the Filter pattern docs.

[KrystalMoore16]

We'll have to work through that, @coreyvickery (cc: @marionnegp). Someone could technically use this component and only add one filter category. In that case, there wouldn't be multiple panels. I would assume that would be based on our guidelines.

Ultimately, I think the design will dictate the outcome, right? @marionnegp and I talked about improving what we currently have outlined on ux.redhat.com recently.

[bennypowers]

The resource counter requires some javascript, which perhaps indicates a custom element, however it seems to me that the amount of js required for that interactivity may be small enough to allow us to call it a pattern script (like link-to-tab, or actve-tab-in-localstorage)

A compromise position could be a new generic custom element like this:

<rh-checkbox-counter target="my-pattern-container">

Is that something we would have use for else where?