feat(ui): smooth and tidy the filter category accordion in the new UI#15106
Open
ksitton58 wants to merge 1 commit into
Open
feat(ui): smooth and tidy the filter category accordion in the new UI#15106ksitton58 wants to merge 1 commit into
ksitton58 wants to merge 1 commit into
Conversation
The new-UI filter categories used native <details>: the chevron animated but the body snapped open/closed, the header bars jumped to new positions instead of sliding together, and the categories packed inconsistently two-per-row (the filter form is display:flex/wrap), which was hard to scan. - Convert each category to a small Alpine toggle: a <button> with aria-expanded and type=button (so it never submits the filter form), with the body wrapped in an overflow-clipped grid that animates grid-template-rows 0fr->1fr. Animating the real layout height makes the whole header stack slide together smoothly and collapse fully to 0. Works in all browsers; default-open groups server-render the open state so there is no flash on load. - Give each category flex: 0 0 100% so they stack as full-width rows instead of packing two-per-row, making the filter panel easy to scan.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Addresses maintainer feedback that the new-UI filter panel felt "funky" to expand/collapse and was hard to read.
The filter categories used native
<details>: the chevron animated but the body snapped open/closed, the header bars jumped to new positions instead of sliding together, and the categories packed inconsistently two-per-row (the filter form isdisplay: flex; flex-wrap: wrap).Changes:
<button>witharia-expandedandtype="button", so it never submits the filter form). The body sits in an overflow-clipped grid that animatesgrid-template-rows: 0frto1fr. Animating the real layout height makes the whole header stack slide together smoothly and collapse fully to 0. This works in all browsers (nointerpolate-sizedependency). Default-open groups server-render the open state, so there is no flash on load.flex: 0 0 100%so they stack as full-width rows instead of packing two-per-row, making the panel easy to scan.No filter behavior changes: same fields, same form submission.
Test results
Verified on a local build at the Findings filter panel: categories stack as full-width rows; toggling slides the body and the header stack together (collapses to 0px, expands to content height); clicking a header does not submit the form (
type="button");aria-expandedreflects state. No Python changed, so no unit tests added.Documentation
N/A.
Checklist
dev.