[do not merge] Search UX v2 #3: active filter chips & multi-select#663
Draft
hoyla wants to merge 1 commit intoljh-searchux-v2-pr2-shared-utilitiesfrom
Draft
[do not merge] Search UX v2 #3: active filter chips & multi-select#663hoyla wants to merge 1 commit intoljh-searchux-v2-pr2-shared-utilitiesfrom
hoyla wants to merge 1 commit intoljh-searchux-v2-pr2-shared-utilitiesfrom
Conversation
hoyla
changed the title
hoyla
force-pushed
the
ljh-searchux-v2-pr2-shared-utilities
branch
from
6b54f1a to
a0e965e
Compare
Add ActiveFilterChip — functional component rendering a segmented
filter chip with name, value editor, negate toggle, and remove
button. Supports single-value, multi-value, and date range chips
in both active and dormant (prompt) states.
Add ActiveFiltersBar — renders active filter chips and dormant
defaults (Dataset, Workspace, Date Range, File Type) as prompts
when no filters are active. Includes a 'More filters' button for
the AddFilterModal (wired in a later PR).
Add MultiSelectDropdown — powered by Downshift's useSelect hook
which handles keyboard navigation, ARIA attributes, and focus
management automatically. Replaces ~100 lines of custom keyboard
handling with Downshift's stateReducer pattern to keep the menu
open after selection (multi-select behaviour).
Widen SuggestedField.options and chip options types to accept both
string[] and {value, label}[] shapes for consistency between
sidebar-derived and hardcoded option sources.
Add SCSS for active filter chip styling and multi-select dropdown.
hoyla
force-pushed
the
ljh-searchux-v2-pr3-active-filter-chips
branch
from
e16147c to
0a8ff34
Compare
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
1 participant
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.
Context
Part of the Search UX Improvements epic. Closes #636.
Important
This is the third of five PRs in the Search UX Improvements epic.
Changes to the user experience
No visible changes yet — these components are built but not wired into the search page until PR4.
What's included
ActiveFilterChip.tsx) — interactive pill component supporting three chip kinds (single-value, multi-value, date-range), with in-place text editing, negate toggling, dormant/active states, and a multi-select dropdown for multi-value chips.ActiveFiltersBar.tsx) — container that renders active chips or dormant defaults (Dataset, Workspace, Date Range, File Type) with a "More filters" button.MultiSelectDropdown.tsx) — Downshift-powered multi-select dropdown with keyboard navigation, ARIA attributes, and keep-open-on-select behaviour.mimeTypeOptions.ts) — 17 MIME type options with friendly labels (PDF, Word, Excel, Email, etc.)._active-filters.scss) — styling for chips and the filter bar.Automated tests
ActiveFilterChip.spec.ts— tests forisMultiValueChip(6 positive cases, 3 negative cases) andtruncateChipDisplayutility.Manual tests
No visible changes to test.