Merge pull request #271 from RtlZeroMemory/fix/issue-270-badge-color

fix(core): correctly render badge recipe background/text

Author: RtlZeroMemory

packages/core/src/renderer/__tests__/sliderRecipeRendering.test.ts

@@ -46,12 +46,37 @@ describe("slider/badge/tag recipe rendering", () => {
       viewport: { cols: 24, rows: 2 },
       theme: dsTheme,
     });
+    const fill = ops.find((op) => op.kind === "fillRect" && op.style?.bg === dsTheme.colors.info);
     const text = firstDrawText(ops, (s) => s.includes("Info"));
+    assert.ok(fill && fill.kind === "fillRect");
     assert.ok(text && text.kind === "drawText");
-    if (!text || text.kind !== "drawText") return;
+    if (!fill || fill.kind !== "fillRect" || !text || text.kind !== "drawText") return;
+    assert.ok(text.text.includes("( Info )"));
+    assert.deepEqual(fill.style?.bg, dsTheme.colors.info);
+    assert.deepEqual(text.style?.bg, dsTheme.colors.info);
+    assert.deepEqual(text.style?.fg, dsTheme.colors["fg.inverse"]);
+    assert.equal(text.style?.bold, true);
+  });
+
+  test("badge explicit style overrides recipe fg/bg", () => {
+    const explicitFg = 0x11_88_ff;
+    const explicitBg = 0x22_33_44;
+    const ops = renderOps(
+      ui.badge("Info", { variant: "info", style: { fg: explicitFg, bg: explicitBg } }),
+      {
+        viewport: { cols: 24, rows: 2 },
+        theme: dsTheme,
+      },
+    );
+    const fill = ops.find((op) => op.kind === "fillRect" && op.style?.bg === explicitBg);
+    const text = firstDrawText(ops, (s) => s.includes("Info"));
+    assert.ok(fill && fill.kind === "fillRect");
+    assert.ok(text && text.kind === "drawText");
+    if (!fill || fill.kind !== "fillRect" || !text || text.kind !== "drawText") return;
     assert.ok(text.text.includes("( Info )"));
-    assert.deepEqual(text.style?.fg, dsTheme.colors.info);
-    assert.notEqual(text.style?.bg, dsTheme.colors.info);
+    assert.deepEqual(fill.style?.bg, explicitBg);
+    assert.deepEqual(text.style?.bg, explicitBg);
+    assert.deepEqual(text.style?.fg, explicitFg);
     assert.equal(text.style?.bold, true);
   });
 

packages/core/src/renderer/renderToDrawlist/widgets/renderTextWidgets.ts

@@ -541,19 +541,16 @@ function variantToRecipeTone(
   }
 }
 
-function resolveChipColor(theme: Theme, variant: unknown, kind: "badge" | "tag"): Rgb24 {
+function resolveTagColor(theme: Theme, variant: unknown): Rgb24 {
   const colorTokens = getColorTokens(theme);
   if (colorTokens !== null) {
     const tone = variantToRecipeTone(variant);
-    const bgStyle = (
-      kind === "badge" ? badgeRecipe(colorTokens, { tone }).bg : tagRecipe(colorTokens, { tone }).bg
-    ) as { bg?: unknown };
+    const bgStyle = tagRecipe(colorTokens, { tone }).bg as { bg?: unknown };
     if (typeof bgStyle.bg === "number") {
       return bgStyle.bg;
     }
   }
-  const fallbackTone =
-    kind === "badge" || variant === "primary" ? ("primary" as const) : ("secondary" as const);
+  const fallbackTone = variant === "primary" ? ("primary" as const) : ("secondary" as const);
   return variantToThemeColor(theme, variant, fallbackTone);
 }
 
@@ -887,12 +884,35 @@ export function renderTextWidgets(
       const props = vnode.props as { text?: unknown; variant?: unknown; style?: unknown };
       const text = readString(props.text) ?? "";
       const ownStyle = asTextStyle(props.style, theme);
-      const color = resolveChipColor(theme, props.variant, "badge");
-      const chipStyle = mergeTextStyle(
-        mergeTextStyle(parentStyle, { fg: color, bold: true }),
-        ownStyle,
-      );
-      maybeFillOwnBackground(builder, rect, ownStyle, chipStyle);
+      const colorTokens = getColorTokens(theme);
+      const recipeResult =
+        colorTokens !== null
+          ? badgeRecipe(colorTokens, { tone: variantToRecipeTone(props.variant) })
+          : null;
+      const fallbackStyle = mergeTextStyle(parentStyle, {
+        fg: variantToThemeColor(theme, props.variant, "primary"),
+        bold: true,
+      });
+      const chipBaseStyle =
+        recipeResult !== null
+          ? mergeTextStyle(
+              parentStyle,
+              recipeResult.bg.bg !== undefined
+                ? { ...recipeResult.text, bg: recipeResult.bg.bg }
+                : recipeResult.text,
+            )
+          : fallbackStyle;
+      const chipStyle = ownStyle ? mergeTextStyle(chipBaseStyle, ownStyle) : chipBaseStyle;
+      if (recipeResult?.bg.bg !== undefined) {
+        const bgBaseStyle = mergeTextStyle(parentStyle, recipeResult.bg);
+        const bgStyle = mergeTextStyle(
+          bgBaseStyle,
+          ownStyle && ownStyle.bg !== undefined ? { bg: ownStyle.bg } : undefined,
+        );
+        builder.fillRect(rect.x, rect.y, rect.w, rect.h, bgStyle);
+      } else {
+        maybeFillOwnBackground(builder, rect, ownStyle, chipStyle);
+      }
       const content = `( ${text} )`;
       const segments: StyledSegment[] = [{ text: content, style: chipStyle }];
 
@@ -1014,7 +1034,7 @@ export function renderTextWidgets(
       const text = readString(props.text) ?? "";
       const removable = props.removable === true;
       const ownStyle = asTextStyle(props.style, theme);
-      const variantColor = resolveChipColor(theme, props.variant, "tag");
+      const variantColor = resolveTagColor(theme, props.variant);
       const chipStyle = mergeTextStyle(
         mergeTextStyle(parentStyle, { fg: variantColor, bold: true }),
         ownStyle,

packages/core/src/widgets/__tests__/composition.animationOrchestration.test.ts

@@ -200,11 +200,14 @@ describe("composition animation hooks - orchestration", () => {
       pausedValue = render.result[0]?.value ?? 0;
       h.runPending(render.pendingEffects);
 
-      await sleep(80);
-      render = h.render((hooks) => useParallel(hooks, paused));
-      h.runPending(render.pendingEffects);
-      assert.ok(Math.abs((render.result[0]?.value ?? 0) - pausedValue) <= 0.1);
-      assert.equal(render.result[0]?.isAnimating, false);
+      await waitFor(() => {
+        const next = h.render((hooks) => useParallel(hooks, paused));
+        render = next;
+        h.runPending(next.pendingEffects);
+        const entry = next.result[0];
+        if (!entry) return false;
+        return Math.abs(entry.value - pausedValue) <= 0.1 && entry.isAnimating === false;
+      });
 
       render = h.render((hooks) => useParallel(hooks, running));
       h.runPending(render.pendingEffects);