feat(ui): re-clothe Bridge issue card onto the DS .cx-card (RIG-2126) - #403
Open
rigel-mintaka wants to merge 2 commits into
Open
feat(ui): re-clothe Bridge issue card onto the DS .cx-card (RIG-2126)#403rigel-mintaka wants to merge 2 commits into
rigel-mintaka wants to merge 2 commits into
Conversation
|
Compass engineering docs preview: https://compass-ux-rig-2126-bridge-c.compass-eng-docs.pages.dev Deployed from |
T3 of the Bridge re-clothe (RIG-2111). Adopts the design-system `.cx-card` primitive for the Bridge issue card, matching the rigel.build reference's flat, quiet-key board card (design record `docs/designs/product/compass-bridge-reclothe/design.md`, G5/G6).
### What changed
- **Wire `design/components/card.css` into the cascade** (`App.tsx`, after `base.css`/`badge-glyph.css`, before `app.css` — preserving the frozen cutover load order).
- **`IssueCard` container** flips `class="card"` + `classList={{ selected }}` → `class="cx-card"` + `data-selected` (presence toggle, mirroring the established `data-compact` idiom). The priority left-stripe is dropped — selection now owns the accent left rule (`card.css`).
- **`.card-issue` quieted** (G6): `--cx-text-faint` + 0.5px tracking, drop the accent color / 600 weight. `.card-title` is left to inherit `--cx-text` at rest and `--cx-text-bright` when the card is selected (bright-title by inheritance).
- **Board-scoped layout block (F3):** `.bridge-cell > .cx-card` re-adds the dense flex column (`gap: 6px`, `padding: 9px 10px`, left-aligned), overriding the DS card's block/12px default for the board only, scoped so it never leaks to other `.cx-card` surfaces.
- **Legacy `.card` rules deleted** from `app.css` (base/hover/active/selected/priority) — the grandfathered raw transitions die with them; the `.cx-card` transition is already tokenized. Sub-parts (`.card-top/-issue/-pr/-title/-foot/-author/-diff`) are kept.
### Cross-surface note (F6)
`DoneView` renders the shared `.card-issue`/`.card-pr`/`.card-diff` sub-parts, so the quiet-key restyle intentionally propagates to the Done view (one convention, not two). `done.png` is regenerated to cover it.
### Tests / baselines
- Three container-selector sites updated for the `.card` → `.cx-card` rename: `boot-fixture.test.ts`, `Bridge.test.tsx`, `visual-smoke.spec.ts`.
- Regenerated exactly the three card-bearing baselines (`bridge.png`, `bridge-card.png`, `done.png`); the other seven shots are byte-identical.
- vitest green (the 4 `env-secrecy` failures are the known secondary-workspace `.git` environmental pattern — pass in the default workspace + GHA CI); typecheck + stylelint green.
Spec-impact: none. Refs RIG-2126
Co-authored-by: Matt Wilkinson <matt@rigel.build>
Review follow-up (low finding, PR #403): the T3 selection encoding `data-selected={sel ? "" : undefined}` had no unit test, so an inverted toggle or a dropped attribute would ship green (the pre-T3 `classList={{ selected }}` had the same gap; this closes it). Selects a fixture issue via the store and asserts exactly one `.cx-card[data-selected]` renders, and that selecting a different issue keeps it at exactly one — red-checked by inverting the toggle (9 cards match instead of 1). Co-authored-by: Matt Wilkinson <matt@rigel.build>
rigel-mintaka
force-pushed
the
compass-ux/rig-2126-bridge-card-cx-card
branch
from
August 19, 2026 04:26
d72c6bc to
d58ad7e
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.
This PR is part of a stack containing 2 PRs:
mainT3 of the Bridge re-clothe (RIG-2111). Adopts the design-system
.cx-cardprimitive for the Bridge issue card, matching the rigel.build reference's flat, quiet-key board card (design recorddocs/designs/product/compass-bridge-reclothe/design.md, G5/G6).What changed
design/components/card.cssinto the cascade (App.tsx, afterbase.css/badge-glyph.css, beforeapp.css— preserving the frozen cutover load order).IssueCardcontainer flipsclass="card"+classList={{ selected }}→class="cx-card"+data-selected(presence toggle, mirroring the establisheddata-compactidiom). The priority left-stripe is dropped — selection now owns the accent left rule (card.css)..card-issuequieted (G6):--cx-text-faint+ 0.5px tracking, drop the accent color / 600 weight..card-titleis left to inherit--cx-textat rest and--cx-text-brightwhen the card is selected (bright-title by inheritance)..bridge-cell > .cx-cardre-adds the dense flex column (gap: 6px,padding: 9px 10px, left-aligned), overriding the DS card's block/12px default for the board only, scoped so it never leaks to other.cx-cardsurfaces..cardrules deleted fromapp.css(base/hover/active/selected/priority) — the grandfathered raw transitions die with them; the.cx-cardtransition is already tokenized. Sub-parts (.card-top/-issue/-pr/-title/-foot/-author/-diff) are kept.Cross-surface note (F6)
DoneViewrenders the shared.card-issue/.card-pr/.card-diffsub-parts, so the quiet-key restyle intentionally propagates to the Done view (one convention, not two).done.pngis regenerated to cover it.Tests / baselines
.card→.cx-cardrename:boot-fixture.test.ts,Bridge.test.tsx,visual-smoke.spec.ts.bridge.png,bridge-card.png,done.png); the other seven shots are byte-identical.env-secrecyfailures are the known secondary-workspace.gitenvironmental pattern — pass in the default workspace + GHA CI); typecheck + stylelint green.Spec-impact: none. Refs RIG-2126
Co-authored-by: Matt Wilkinson matt@rigel.build