fix(runtime): don't paint Box backgroundColor onto border glyphs (Ink parity, G04) (#30)
Ink's render-border.ts computes each border edge's background from border<Edge>BackgroundColor ?? borderBackgroundColor only — it never falls back to the Box's own backgroundColor. vue-tui's colorizeEdge had an extra `?? bgColor` fallback, so a Box with backgroundColor but no explicit border background painted its background onto the border glyphs too. Drop the fallback. Background still fills the inner content area; border glyphs are now uncolored unless an explicit border background is set. Tests rewritten to match Ink (per maintainer's align-to-Ink policy; see .agents/docs/parity-ledger.md Decisions log): - add failing-first repro "Box backgroundColor does not bleed onto border glyphs (Ink parity)" - "wrapped text preserves backgroundColor on every content line": assert inner rows carry bg, border rows don't (height 4->5 so text fits) - "Box background with border fills content area": snapshot updated so border rows have no bg Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -343,17 +343,17 @@ function drawBorder(
|
||||
const right = props["borderRight"] !== false;
|
||||
|
||||
const borderColor = props["borderColor"] as string | undefined;
|
||||
const bgColor = props["backgroundColor"] as string | undefined;
|
||||
const dimAll = !!props["borderDimColor"];
|
||||
|
||||
function colorizeEdge(s: string, edge: "top" | "bottom" | "left" | "right"): string {
|
||||
const capEdge = edge.charAt(0).toUpperCase() + edge.slice(1);
|
||||
const edgeColor = (props[`border${capEdge}Color`] as string | undefined) ?? borderColor;
|
||||
const edgeDim = (props[`border${capEdge}DimColor`] as boolean | undefined) || dimAll;
|
||||
// Ink parity (render-border.ts:44-52): an edge's background comes only from the
|
||||
// per-edge or general border background — never from the Box's own backgroundColor.
|
||||
const edgeBg =
|
||||
(props[`border${capEdge}BackgroundColor`] as string | undefined) ??
|
||||
(props["borderBackgroundColor"] as string | undefined) ??
|
||||
bgColor;
|
||||
(props["borderBackgroundColor"] as string | undefined);
|
||||
const p: TextProps = {};
|
||||
if (edgeColor) p.color = edgeColor;
|
||||
if (edgeBg) p.backgroundColor = edgeBg;
|
||||
|
||||
Reference in New Issue
Block a user