feat(search): display grid components and parity harness - #881
Open
danieltruong wants to merge 3 commits into
Open
feat(search): display grid components and parity harness#881danieltruong wants to merge 3 commits into
danieltruong wants to merge 3 commits into
Conversation
The shared grid behind the unified /search page: sortable header, a column filter row, a value picker, chips, an advanced filter panel, a toolbar, list rows, keyword highlighting and URL state. The table scrolls inside a bounded 560px box rather than with the page, which is what keeps the sticky header and filter rows pinned to the grid instead of the viewport, where they would sit under the site masthead. Follows the design prototype, including two borders that fall under the 3:1 non-text contrast floor; noted in the CSS and in TODO.md for a design decision before prod.
Holds the built /search page against the design prototype, state by state, at 924px and 400px. The expected images are screenshots of the prototype itself, captured on demand by `yarn parity:reference`, so the gate cannot pass by agreeing with the app. Both sides read the same rows from a fixture backend that answers /demi-search, shaped to the eagle-demi contract, so a screenshot difference is a rendering difference and never a data one. Every screenshot test skips itself until the page exists; the suite goes live when Phase 2 renders the grid. Running commands and where the references live: e2e/parity/README.md.
danieltruong
requested review from
Ckoelewyn,
tolkamps1 and
tom0827
as code owners
September 12, 2026 03:04
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| response.writeHead(403).end('outside the handoff folder'); | ||
| return; | ||
| } | ||
| readFile(file).then( |
- the panel kept a typed date after a chip or Clear all dropped the filter, so it showed a filter that was not applied - the value picker closed itself when its own option list scrolled - a page past the end of the results read "51-5 of 5 documents" - the page-size list now comes from the URL validator that checks it - drop the unused AdvancedFilters id override, which could not be reached by the toolbar's aria-controls Also documents that the parity recapture commands need the design handoff bundle, which is not in the repository.
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.
Phase 1 of the unified search redesign (PUBLIC-146). Adds the shared display grid and the parity gate that will hold the new
/searchpage to the design prototype. Nothing renders it yet: no route changes, no existing page touched, so this is additive.What is here
The grid (
src/app/components/display-grid/). Sortable header, a column filter row, a value picker, filter chips, an advanced filter panel, a toolbar with count, More filters, Columns and Copy link, list rows for activities, keyword highlighting, and a hook that keeps grid state in the URL. Each part has a spec.The table scrolls inside its own box, capped at 560px, rather than with the page. That is what keeps the sticky header and filter rows pinned to the grid: against the viewport they would sit under the site masthead instead.
The parity gate (
e2e/parity/). It drives the same list of states through two selector maps, one for the prototype and one for the built page, and compares screenshots at 924px and 400px. The expected images are screenshots of the prototype itself, recaptured on demand byyarn parity:reference, so the gate cannot pass by agreeing with whatever the app happens to draw. Both sides read the same rows from a fixture backend that answers/demi-search, shaped to the eagle-demisearchandsearch/countscontracts, so a difference is a rendering difference and never a data one.Every screenshot test skips itself until
.display-gridis on the page. The suite goes live with no change here the moment Phase 2 renders the grid.yarn test:parityis wired into the PR Checkse2ejob.Known gap
Two colours follow the prototype and fall under the WCAG 3:1 floor for non-text contrast: the control and popover borders (1.55:1) and the inactive sort arrow (1.54:1). They are left as drawn so the pixel gate compares like with like. Called out in
display-grid.cssand inTODO.md; it needs a design decision before the grid ships to prod.How to test
e2e/parity/README.mdcovers running the gate, recapturing references, and where the reference images live. Background and phase plan:docs/unified-search-plan.md.