feat(web): derive page-header into canonical context-header with unified header contract [SPRINT-027]
Enhance ContextHeaderComponent to be the single canonical header primitive: - Add configurable heading level (h1/h2/h3) for semantic HTML in nested shells - Add testId input for Playwright targeting (data-testid) - Add ARIA labels on return button and chip list (role=list/listitem) - Add back-arrow indicator for improved return-button affordance - Add JSDoc on all inputs for developer ergonomics Deprecate PageHeaderComponent to a thin compatibility wrapper that delegates to ContextHeaderComponent. Adopt canonical header on 4 representative pages: - RegistryAdminComponent (admin/setup surface) - PackRegistryBrowserComponent (operational surface) - DeadLetterDashboardComponent (operational surface) - OfflineKitComponent (operational surface) Each adopted page gains eyebrow breadcrumb context, consistent subtitle placement, and projected actions via the shared header-actions slot, replacing ~80 lines of repeated ad-hoc header markup. 15 focused component tests covering title rendering, eyebrow/subtitle display, chips with ARIA, back action, action slot projection, heading levels, testId, and responsive layout structure. All pass. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -20,7 +20,7 @@
|
||||
## Delivery Tracker
|
||||
|
||||
### FE-PHD-001 - Freeze the canonical header contract
|
||||
Status: TODO
|
||||
Status: DONE
|
||||
Dependency: none
|
||||
Owners: UX, Developer (FE)
|
||||
Task description:
|
||||
@@ -28,12 +28,12 @@ Task description:
|
||||
- Document which capabilities remain mandatory: contextual eyebrow, chips, back action, action slot strategy, supportive note, and responsive stacking behavior.
|
||||
|
||||
Completion criteria:
|
||||
- [ ] A single canonical header API is defined.
|
||||
- [ ] Unused or redundant `PageHeaderComponent` behavior is either absorbed or rejected explicitly.
|
||||
- [ ] Header semantics are described in UX terms, not only implementation terms.
|
||||
- [x] A single canonical header API is defined.
|
||||
- [x] Unused or redundant `PageHeaderComponent` behavior is either absorbed or rejected explicitly.
|
||||
- [x] Header semantics are described in UX terms, not only implementation terms.
|
||||
|
||||
### FE-PHD-002 - Derive the reusable header primitive
|
||||
Status: TODO
|
||||
Status: DONE
|
||||
Dependency: FE-PHD-001
|
||||
Owners: Developer (FE)
|
||||
Task description:
|
||||
@@ -41,12 +41,12 @@ Task description:
|
||||
- Keep the API small and expressive; avoid two near-identical shared header components.
|
||||
|
||||
Completion criteria:
|
||||
- [ ] The canonical header primitive supports the required title, metadata, and action variants.
|
||||
- [ ] `PageHeaderComponent` is either removed or reduced to a compatibility wrapper with a clear migration path.
|
||||
- [ ] Header behavior remains responsive and accessible.
|
||||
- [x] The canonical header primitive supports the required title, metadata, and action variants.
|
||||
- [x] `PageHeaderComponent` is either removed or reduced to a compatibility wrapper with a clear migration path.
|
||||
- [x] Header behavior remains responsive and accessible.
|
||||
|
||||
### FE-PHD-003 - Adopt the derived header on target pages
|
||||
Status: TODO
|
||||
Status: DONE
|
||||
Dependency: FE-PHD-002
|
||||
Owners: Developer (FE), UX
|
||||
Task description:
|
||||
@@ -54,33 +54,40 @@ Task description:
|
||||
- Use adoption to prove the pattern works for both dense operator surfaces and simpler settings/admin pages.
|
||||
|
||||
Completion criteria:
|
||||
- [ ] At least one simple settings/admin page and one richer operational page adopt the derived header pattern.
|
||||
- [ ] Repeated header markup is removed from adopted surfaces.
|
||||
- [ ] The adopted pages gain clearer context and action placement.
|
||||
- [x] At least one simple settings/admin page and one richer operational page adopt the derived header pattern.
|
||||
- [x] Repeated header markup is removed from adopted surfaces.
|
||||
- [x] The adopted pages gain clearer context and action placement.
|
||||
|
||||
### FE-PHD-004 - Verify, document, and retire the orphan path
|
||||
Status: TODO
|
||||
Status: DONE
|
||||
Dependency: FE-PHD-003
|
||||
Owners: Test Automation, Documentation author
|
||||
Task description:
|
||||
- Add focused tests for the canonical header behavior and record the derivation decision in UI docs so future reviews treat the old generic header as intentionally superseded.
|
||||
|
||||
Completion criteria:
|
||||
- [ ] Component or host tests cover the canonical header behavior.
|
||||
- [ ] UI docs explain the header derivation and adoption targets.
|
||||
- [ ] The old orphan path is no longer ambiguous in the shared inventory.
|
||||
- [x] Component or host tests cover the canonical header behavior.
|
||||
- [x] UI docs explain the header derivation and adoption targets.
|
||||
- [x] The old orphan path is no longer ambiguous in the shared inventory.
|
||||
|
||||
## Execution Log
|
||||
| Date (UTC) | Update | Owner |
|
||||
| --- | --- | --- |
|
||||
| 2026-03-08 | Sprint created to derive the unused generic page header into the mounted context-header pattern and adopt one canonical header primitive. | Codex |
|
||||
| 2026-03-08 | FE-PHD-001: Frozen the canonical header contract. `ContextHeaderComponent` is the single canonical header. `PageHeaderComponent` had only title, subtitle, and action slots; all useful bits absorbed. Canonical API: title (required), eyebrow (optional), subtitle (optional), contextNote (optional), chips (optional status indicators), backLabel+backClick (optional return action), headingLevel (1/2/3 for semantic HTML), testId (optional), header-actions content projection slot. | Developer (FE) |
|
||||
| 2026-03-08 | FE-PHD-002: Enhanced `ContextHeaderComponent` with configurable heading level (h1/h2/h3), testId, arrow in return button, ARIA labels on return button and chip list, JSDoc on all inputs. `PageHeaderComponent` reduced to deprecated compatibility wrapper delegating to `ContextHeaderComponent`. | Developer (FE) |
|
||||
| 2026-03-08 | FE-PHD-003: Adopted canonical header on 4 target pages: `RegistryAdminComponent` (admin/setup page), `PackRegistryBrowserComponent` (operational page), `DeadLetterDashboardComponent` (operational page), `OfflineKitComponent` (operational page). Removed repeated ad-hoc header markup from all 4. Each page now has eyebrow breadcrumb, consistent subtitle, and projected actions via the shared header. | Developer (FE) |
|
||||
| 2026-03-08 | FE-PHD-004: Added 15 focused component tests covering title rendering, eyebrow/subtitle display, chips with ARIA roles, back action behavior, action slot projection, heading level configurability (h1/h2/h3), testId attribute, and responsive layout structure. All 15 pass. Updated sprint and docs. Marked `PageHeaderComponent` as deprecated in the shared index. | Test Automation |
|
||||
|
||||
## Decisions & Risks
|
||||
- Decision target: one canonical header primitive, not parallel “simple” and “contextual” header abstractions.
|
||||
- **Decision: Single canonical header.** `ContextHeaderComponent` is the sole canonical header primitive. `PageHeaderComponent` is deprecated to a thin compatibility wrapper.
|
||||
- **Decision: Heading level configurability.** Added `headingLevel` input (1, 2, or 3) to support pages nested inside shells that already provide an h1. Default remains h1.
|
||||
- **Decision: Back button arrow.** Added a left arrow indicator to the return button for improved affordance and accessibility.
|
||||
- **Decision: testId support.** Added `testId` input that maps to `data-testid` on the header element for Playwright/test targeting.
|
||||
- **Decision: Adopted pages.** Registry Admin (admin/setup), Pack Registry Browser (operational), Dead-Letter Dashboard (operational), Offline Kit (operational). These four prove the pattern works across both simple admin and richer operational surfaces.
|
||||
- Risk: overfitting the header API to too many page variants could make the primitive hard to use.
|
||||
- Mitigation: validate the API on a small adoption set before broad rollout.
|
||||
- Mitigation: validated the API on a bounded 4-page adoption set. Future rollout should proceed incrementally.
|
||||
|
||||
## Next Checkpoints
|
||||
- Freeze the canonical header contract.
|
||||
- Prototype the derived shared header.
|
||||
- Adopt it on a bounded set of mounted pages.
|
||||
- Broader rollout of canonical header to remaining pages with ad-hoc headers (not scoped to this sprint).
|
||||
- Eventual removal of `PageHeaderComponent` once no references remain.
|
||||
|
||||
Reference in New Issue
Block a user