4.3.1 Design — estimation surfaces: inline-editable estimate badge + scale picker, epic roll-up badge, sprint committed-points roll-up (backlog header), project Estimation settings panel (NEW design/estimation/)
Estimate: 46m
The design asset EVERY UI subtask of this story builds against. The estimation surfaces are unspecified — design/ has the backlog row estimate slot + the sprint committed-points slot + the board .pts chip drawn only as RESERVED dashed seams / a static chip (never the click-to-edit picker), the issue detail draws only the TIME Estimate (not story points), and there is no epic roll-up badge and no project Estimation settings panel. Whole elements unspecified == NO design under the gate, so this subtask CREATES it FIRST (mirrors 1.0.5 / 1.2.1 / 1.3.3 / 1.5.1 / 4.2.1). Output: a NEW area design/estimation/ with estimation.mock.html (the badge + picker + roll-up displays across surfaces) + estimation-settings.mock.html (the project Estimation settings panel) + PNG exports + design/estimation/design-notes.md naming every composing primitive, copy string, and placement. Built from the real design system (components/ui/* + the --el-* tokens + element shape tokens — no Pencil→code gap); --el-* only (no Tier-0 --color-*); shape via the element shape tokens; AA-safe; the Jira story-point field + board Estimation settings as the mirror.
This surface REUSES existing vocabularies — reference, don't redraw. The estimate badge reuses the chip/Pill vocabulary + the backlog row (4.2.1) + the board card .pts chip (design/boards/) + the issue-detail core-fields rail (design/work-items/detail.pen); the settings panel reuses the project-settings page chrome + FormField / Segmented / the settings-card pattern (settings/project/board + workflow). Draw the NET-NEW: the click-to-edit picker, the roll-up badges, and the Estimation settings form.
Specify, panel by panel (estimation.mock.html):
- Estimate badge — display states — the chip showing the configured statistic (a story-point value, e.g.
5; the muted—/ empty-slot when unestimated), in the FIXED slot the 4.2 backlog row reserved (so 4.3 drops it in with no relayout), and on the board card (the.ptschip, mono) + the list row + the issue-detail rail. Show it is the SAME component across surfaces. - Estimate picker — edit state — the click-to-edit popover: the configured scale deck as quick-pick chips (Fibonacci default — 1,2,3,5,8,13,21,…), a free numeric input (decimals allowed), a Clear action, and the keyboard affordance. Draw the popover anchored to the badge on a backlog row AND in the detail rail.
- Issue-detail story-points field — the rail field, DISTINCT from the existing TIME Estimate (clock glyph) field — a hash/points glyph + the value + the inline picker. Specify where it sits in the core-fields rail (
design/work-items/detail.pen). - Epic roll-up badge — the rolled-up subtree total on an epic (and any parent), e.g.
Story Points · 34or a34 ptssummary, on the issue detail header/rail AND the list/tree parent row. Distinct from the parent's OWN estimate (a roll-up of descendants). - Sprint committed-points roll-up — the figure that FILLS the Story-4.2 sprint-container committed-points slot (the dashed seam
design/backlog/design-notes.mdreserved): the committed (and the seam for completed / remaining) points in the sprint header. Match the 4.2.1 slot placement so it drops in with no relayout. Note its relationship to the scrum header's fuller points summary (Story 4.5 draws the scrum variant). - Degradation + states — unestimated issue (muted
—, neverNaN); unestimated sprint/epic (—roll-up); the badge in a read-only (no-permission) state.
Specify (estimation-settings.mock.html):
- Project Estimation settings panel (
settings/project/estimation) — the settings page chrome + a card with: the estimation statistic selector (Story Points default · Time estimate · Issue count — aSegmentedor radio group), the point scale selector (Fibonacci · linear · custom), the custom-scale editor (an editable list of numeric values, shown only when scale = custom), helper copy explaining each, and the Save affordance. Plus the settings-hub nav card entry (sibling of Board + Workflow). Admin-only state. Mirror Jira board Estimation settings.
Acceptance criteria
- A NEW
design/estimation/area exists withestimation.mock.html+estimation-settings.mock.html+ PNG export(s) +design/estimation/design-notes.md; built fromcomponents/ui/*+--el-*/element-shape tokens only (no Tier-0--color-*, no rawrounded-*/p-*for control shape), passing the render checklist (icon viewBox, no nested buttons, prettier), AA-safe. estimation.mock.htmldraws: the estimate badge display states (with the unestimated—), the click-to-edit picker (scale-deck quick chips + free numeric + clear), the issue-detail story-points field (distinct from the time Estimate), the epic roll-up badge (subtree total), the sprint committed-points roll-up filling the 4.2 sprint-header slot, and the degradation/read-only states.estimation-settings.mock.htmldraws the project Estimation settings panel (statistic selector + scale selector + custom-scale editor + helper copy + Save) and the settings-hub nav-card entry; admin-only.design-notes.mdnames each composing primitive (Pill/chip, the picker popover primitive,FormField,Segmented, the settings card, the backlog row, the detail rail) AND documents: the badge fills the Story-4.2 estimate slot + committed-points slot (with no relayout), the statistic switch (Story Points default), the project-scoped-config justified deviation, and thatrollupForSprintis the reusable aggregate Story 4.5.2 consumes for its scrumSprintSummaryDto.points.- The asset REUSES (references, does not redraw) the backlog row, the board
.ptschip, the detail rail, and the settings-page chrome; it specifies only the net-new picker + roll-up badges + settings form.
Context refs
design/backlog/backlog.mock.html+design-notes.md(the row estimate slot + the sprint committed-points slot this fills — named "filled by Story 4.3") — match the reserved slot placementdesign/boards/design-notes.md(the card.ptschip) +design/boards/scrum.mock.html(the scrum sprint-header points summary 4.5 draws) — the chip + points vocabulary to align withdesign/work-items/detail.pen+design/work-items/design-notes.md(the core-fields rail with the TIME Estimate field) — where the story-points field + epic roll-up sitapp/(authed)/settings/project/board+workflow+design/projects/— the settings-page chrome + settings-card + nav-card pattern the Estimation panel mirrorscomponents/ui/*(Pill,FormField,Segmented, the menu/popover primitive,Button) +app/globals.css--el-*+ element-shape tokens; the/tokensspecimen route- The Jira story-point field + board Estimation settings (statistic + scale) as the mirror; findings #57 (bounded roll-ups), #35 (read as text), #54 (use the palette)