edgevoid/vue-tui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(runtime): backgroundColor="" on a Text opts out of the inherited Box bg (Ink parity) (#83)

Browse Source 
An explicit backgroundColor="" on a descendant Text now renders bare glyphs instead of
bleeding the inherited Box background. Mirrors Ink Text.tsx:103-106 (effectiveBg =
backgroundColor ?? inheritedBg; colorize only when truthy): undefined inherits, ""
opts out. The trailing padding still uses the inherited Box bg (Box fill), so glyphs
carry their effective bg while the Box fills the rest -- byte-identical to Ink.

Corrects the background-color.test.tsx mixed snapshot, which had encoded the buggy
green-bleed output. Adds the opt-out test.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yunfei He
2026-05-31 06:13:18 +08:00
committed by GitHub
parent 32b99da7a0
commit 9abc531dca
2 changed files with 43 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/runtime-tests/integration/components/background-color.test.tsx
+21 -1
View File
@@ -146,6 +146,24 @@ test("Multiple Text elements inherit same background", async ({ expect }) => {
expect(lastFrame()).toMatchInlineSnapshot(`"Hello World"`);
});
// Ink parity (Text.tsx:103-106): a child <Text>'s effective background is
// `backgroundColor ?? inheritedBackgroundColor`, and the bg wrap is applied only
// when that value is truthy. An explicit `backgroundColor=""` is NOT undefined,
// so it does NOT inherit — it resolves to `""` (falsy) and OPTS OUT of the
// inherited Box background, rendering the glyphs with no bg.
test("Text backgroundColor='' opts out of inherited Box background", async ({ expect }) => {
const { lastFrame } = await render(
defineComponent(() => () => (
<Box backgroundColor="green" alignSelf="flex-start">
<Text backgroundColor="">No BG</Text>
</Box>
)),
{ columns: 100 },
);
// Bare text, no green (42) bleed and no bg reset (49) at all.
expect(lastFrame()).toBe("No BG");
});
test("Mixed text with and without background inheritance", async ({ expect }) => {
const { lastFrame } = await render(
defineComponent(() => () => (
@@ -157,7 +175,9 @@ test("Mixed text with and without background inheritance", async ({ expect }) =>
)),
{ columns: 100 },
);
expect(lastFrame()).toMatchInlineSnapshot(`"Inherited No BG Red BG"`);
// Matches Ink background.tsx:106-116: bgGreen('Inherited ') + 'No BG ' + bgRed('Red BG').
// The "" Text opts out, so green is reset (49) before "No BG " and it renders bare.
expect(lastFrame()).toMatchInlineSnapshot(`"Inherited No BG Red BG"`);
});
test("Complex nested structure with background inheritance", async ({ expect }) => {