fix(big_number) :: preserve color and spacing (#1452)

* fix(big_number) :: preserve color and spacing

* refactor(big_number) :: keep spacing local

* Test big-number colors with real shell themes and verify rendered padding

Author: lovasoa

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## unreleased
 
+- Big number cards with a `color` once again display their main value in that color in light and dark themes, including values with a link. Their compact vertical padding has also been restored.
+
 ## v0.46.2
 
 - Numeric x values on Cartesian charts now explicitly use a continuous numeric axis, preventing fractional tick positions from being displayed as misleading rounded integers.

examples/official-site/sqlpage/migrations/49_big_number.sql

@@ -22,7 +22,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('progress_percent', 'The value of the progress (0-100).', 'INTEGER', FALSE, TRUE),
     ('progress_color', 'The color of the progress bar (e.g., "primary", "success", "danger").', 'TEXT', FALSE, TRUE),
     ('dropdown_item', 'A list of JSON objects containing links. e.g. {"label":"This week", "link":"?days=7"}', 'JSON', FALSE, TRUE),
-    ('color', 'The color of the card', 'COLOR', FALSE, TRUE)
+    ('color', 'The color of the card background and its main value.', 'COLOR', FALSE, TRUE)
 ) x;
 
 INSERT INTO example(component, description, properties) VALUES

sqlpage/templates/big_number.handlebars

@@ -8,7 +8,7 @@
   {{#unless ../columns}}style="min-width: 9rem;"{{/unless}}
   {{~#if id}} id="{{id}}"{{/if~}}
   >
-    <div class="card flex-fill {{#if color}}bg-{{color}}-lt{{/if}}">
+    <div class="card flex-fill {{#if color}}bg-{{color}}-lt{{/if}}" style="--tblr-card-spacer-y: 1rem;">
       <div class="card-body d-flex flex-column">
 
         {{#if title}}
@@ -47,7 +47,7 @@
         {{/if}}
 
         <div class="d-flex align-items-center mt-1">
-          <div class="h1 {{#if description}}mb-3{{else}}mb-0{{/if}} mt-auto text-nowrap text-truncate">
+          <div class="h1 {{#if description}}mb-3{{else}}mb-0{{/if}} mt-auto text-nowrap text-truncate {{#if color}}text-{{color}}{{/if}}">
             {{#if value_link}}
               <a href="{{value_link}}"
                  class="text-decoration-none"

tests/end-to-end/fixtures/big-number/index.sql

@@ -0,0 +1,23 @@
+SELECT 'shell' AS component, COALESCE($theme, 'light') AS theme;
+
+SELECT
+    'big_number' AS component,
+    2 AS columns;
+
+SELECT
+    'plain-color' AS id,
+    'Plain value' AS title,
+    '1,234' AS value,
+    'red' AS color;
+
+SELECT
+    'linked-color' AS id,
+    'Linked value' AS title,
+    '5,678' AS value,
+    'blue' AS color,
+    '#linked-color' AS value_link;
+
+SELECT
+    'default-color' AS id,
+    'Default value' AS title,
+    '9,012' AS value;

tests/end-to-end/fixtures/big-number/test.ts

@@ -0,0 +1,44 @@
+import { expect, test } from "../../fixture";
+
+for (const theme of ["light", "dark"]) {
+  test(`colored values match their cards in the ${theme} theme`, async ({
+    page,
+  }) => {
+    await page.goto(`/big-number/?theme=${theme}`);
+    await expect(page.locator("body")).toHaveAttribute("data-bs-theme", theme);
+    await expect(page.locator("body")).toHaveCSS("color-scheme", theme);
+
+    const defaultColor = await page
+      .locator("#default-color .h1")
+      .evaluate((value) => getComputedStyle(value).color);
+    const rem = await page
+      .locator("html")
+      .evaluate((html) => Number.parseFloat(getComputedStyle(html).fontSize));
+
+    for (const { id, linked } of [
+      { id: "plain-color", linked: false },
+      { id: "linked-color", linked: true },
+    ]) {
+      const item = page.locator(`#${id}`);
+      const cardColor = await item
+        .locator(".card")
+        .evaluate((card) => getComputedStyle(card).color);
+
+      // Matching two default-colored elements must not count as a color fix.
+      expect(cardColor).not.toBe(defaultColor);
+      await expect(item.locator(".h1")).toHaveCSS("color", cardColor);
+      await expect(item.locator(".h1 a")).toHaveCount(linked ? 1 : 0);
+      if (linked) {
+        await expect(item.locator(".h1 a")).toHaveCSS("color", cardColor);
+      }
+      await expect(item.locator(".card-body")).toHaveCSS(
+        "padding-top",
+        `${rem}px`,
+      );
+      await expect(item.locator(".card-body")).toHaveCSS(
+        "padding-bottom",
+        `${rem}px`,
+      );
+    }
+  });
+}