Skip to content

Design column header filter popovers #269

@Zhortein

Description

@Zhortein

Objective

Create a design proposal for column header filter popovers.

Context

Column filters currently render in the toolbar. The desired UX is to show a small filter icon in the column header and open a compact filter popover/dropdown when clicked.

This is more modern and saves toolbar space, but it impacts header rendering, filtering state, accessibility and Stimulus behavior.

Scope

  • Document the proposed UX.
  • Decide between Bootstrap dropdown and Bootstrap popover.
  • Define markup.
  • Define Stimulus behavior.
  • Define accessibility requirements.
  • Define request parameter behavior.
  • Define how active filter state is shown in headers.
  • Create follow-up implementation issues.

Out of scope

  • Implementation.
  • New JavaScript dependencies.
  • Complex SearchBuilder expressions.

Constraints

  • Bootstrap-first.
  • Vanilla JavaScript only.
  • No jQuery.
  • Keep filters explicit and typed.
  • Must remain accessible.

Acceptance criteria

  • Proposal document exists.
  • UX approach is chosen.
  • Implementation issues are created.
  • Current limitations are explicit.
  • QA passes.

Metadata

Metadata

Assignees

No one assigned

    Labels

    ai-readyIssue is scoped enough to be handled by an AI coding agentarea: stimulusStimulus controller and frontend behaviorarea: twigTwig rendering and templatespriority: mediumMedium prioritytype: architectureArchitecture or design decision

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions