Problem
ol-search-bar has _renderFacetBar() with .pf-* CSS class names.
ol-search-page has _renderFilterBar() with .rf-* CSS class names.
They do the same thing: six facet buttons with auto-alignment, ol-facet-drop children, active-state badges, and a cog/help button. Changes to facet behaviour (alignment logic, ARIA, new facet types) must be made in both places.
Proposed approach
Extract a new ol-facet-bar LitElement that:
- Accepts a
facets array prop (name, label, active-count, right-align flag)
- Renders the button row and owns the
.pf-bar / dropdown coordination
- Fires
ol-facet-toggle and ol-facet-change events upward
- Owns the
.pf-bar overflow: visible mobile fix internally
Both ol-search-bar and ol-search-page import and render <ol-facet-bar>, removing ~80 lines of duplicated template logic each.
Tests needed
- Unit:
ol-facet-bar renders correct number of buttons
- Unit: first-half buttons have no
[right] attr, second-half do
- Unit: active-count badge appears when filter is set
- Playwright: existing facet-alignment tests in
mobile-facet-layout.spec.js continue to pass unchanged (they test the rendered output, not the implementation)
Risk
Low–medium. The refactor is purely internal — external event names and prop shapes don't change. The main risk is the CSS class rename (.pf-* → shared names); any consumer CSS targeting those classes would break.
Best done after the component split so the shared component has a clean home.
Problem
ol-search-barhas_renderFacetBar()with.pf-*CSS class names.ol-search-pagehas_renderFilterBar()with.rf-*CSS class names.They do the same thing: six facet buttons with auto-alignment,
ol-facet-dropchildren, active-state badges, and a cog/help button. Changes to facet behaviour (alignment logic, ARIA, new facet types) must be made in both places.Proposed approach
Extract a new
ol-facet-barLitElement that:facetsarray prop (name, label, active-count, right-align flag).pf-bar/ dropdown coordinationol-facet-toggleandol-facet-changeevents upward.pf-bar overflow: visiblemobile fix internallyBoth
ol-search-barandol-search-pageimport and render<ol-facet-bar>, removing ~80 lines of duplicated template logic each.Tests needed
ol-facet-barrenders correct number of buttons[right]attr, second-half domobile-facet-layout.spec.jscontinue to pass unchanged (they test the rendered output, not the implementation)Risk
Low–medium. The refactor is purely internal — external event names and prop shapes don't change. The main risk is the CSS class rename (
.pf-*→ shared names); any consumer CSS targeting those classes would break.Best done after the component split so the shared component has a clean home.