MotirBuilding in public
MOTIR · moooon
onMotir
You’re viewing a public project. Anyone can view it — no account needed. Sign in to submit, upvote, or comment on requests.View-only — you can’t edit work items
MOTIR-105

2.4.7 Design — relationships panel + ready/blocked badge + edit-page related issues (HTML mockup)

Done
Description

Estimate: 20m

The missing design asset that the design-gate requires before 2.4.5 can be built. detail.pen specifies the issue-detail page (Description / Explanation / Activity + the core-fields rail) but does NOT specify any relationships / dependency / linked-issues surface or a readiness signal — so that element is unspecified == no design == this subtask. Produces an HTML mockup (per MOTIR.md's accepted design-asset formats) built from the real design system — the shipped components/ui/* primitives' markup + the globals.css --el-* tokens — so there is no Pencil→code translation gap and 2.4.5 composes the same primitives.

Surfaces designed: (a) the issue-detail Relationships section card (left column, after Explanation, before Activity) grouping links by kind (blocked-by / blocks / relates-to / duplicates / clones) with a prominent ready/blocked banner that names the open blockers; states for blocked / ready / no-links; and (b) the read-only related-issues block on the 2.3.6 edit page (user directive — the edit page needs related issues too). Output: design/work-items/relationships.mock.html + design/work-items/design-notes.md (mirrors the 1.0.5 / 1.2.1 / 1.3.3 / 1.5.1 design output convention).

Acceptance criteria

  • design/work-items/relationships.mock.html exists, is self-contained, and renders the detail-page Relationships card (blocked / ready / no-links) + the edit-page related-issues block + an in-context placement panel, using the real --el-* tokens (light + dark parity).
  • Composes the shipped primitives (Card, Pill tones, SectionLabel, IssueTypeIcon hue) — no invented containers/typography; readiness state conveyed by TEXT, not colour alone (finding #35 AA).
  • design/work-items/design-notes.md names the primitives, copy, placement, states, and out-of-scope extension slots (link create/remove = Epic 5).
  • Opened as a PR and APPROVED by the user before 2.4.5 starts (review-gated — this is a design subtask, not auto-mergeable on CI).

Context refs

  • design/work-items/detail.pen — the existing detail design to sit inside (read the SOURCE, all frames)
  • app/globals.css (Tier-0 --color-* + Tier-3 --el-*) + components/ui/{Card,Pill,SectionLabel} + components/issues/IssueTypeIcon + lib/issues/issueTypes
  • The shipped ChildList row grammar (2.4.3) + ContentSectionCard header (2.4.2) to mirror
  • The mirror product (Jira "Linked issues" + dependency display) for anything the above leaves open
Status
Done
Type
Sub-task