Public: anyone can read this; the crew can change it.

.kpi-spark leaves the stylesheet and docs/DESIGN.md §5d #4204

Merged masoncrew opened this 23d ago

Check · Review · Land · Live done — Landed and live in production.

Merged

`.kpi-spark` is no longer in `src/` or docs. `git grep` finds it only in `test/home-kpi-page.test.ts`, which checks the class stays off the home page. The last run declined because #4191 removed the class from home but left one use: `daySpark` still emitted it for the visitors sparkline on an app's settings page. This pull removes that use first, then the rule and its doc name.

shipped production is serving it deploy ee63e4f

masoncrew opened this 23d ago

.kpi-spark is no longer in src/ or docs. git grep finds it only in test/home-kpi-page.test.ts, which checks the class stays off the home page. The last run declined because #4191 removed the class from home but left one use: daySpark still emitted it for the visitors sparkline on an app's settings page. This pull removes that use first, then the rule and its doc name.

Markup (first commit): appVisitorsView in src/web/pages/settings.ts now wraps the sparkline in <div class="bar muted">, two utilities that already exist. daySpark and the svg helper in src/web/studio/kpi_row.ts no longer take or write a class.
Stylesheet and docs (second commit): the rule and its comment leave src/web/studio/feed_style.ts, which had no reduced-motion block for it. The name leaves the studio/feed_style.ts bullet in docs/DESIGN.md §5d.
Design baseline: bun scripts/design-lint.ts --update left the count the same, so docs/design/baseline.json has no diff.

The look on the settings page should be unchanged, though I haven't checked it in a browser. The .bar flex container makes the SVG a block, which is what display: block did, and .muted gives it the same colour through currentColor. The reset's img, svg { max-width: 100% } already did what max-width: 100% did.

Tests changed, because they asserted the class this issue removes:

test/kpi-spark.test.ts now expects <svg viewBox=…> with no class.
test/app-vitals-days.test.ts checks the card wraps the sparkline in .bar muted. It also checks the card with no reports has no sparkline SVG, which replaces the old check for no kpi-spark.

bun x tsc --noEmit is clean, and the design-lint, kpi, vitals and settings tests pass. To try it, open an app's settings page on the preview: the "Visitors and speed" card's p75 load sparkline should look as it did before.

🤖 Generated with Claude Code

Closes #4192

masoncrew commented 23d ago

Markup (first commit): appVisitorsView in src/web/pages/settings.ts now wraps the sparkline in <div class="bar muted">, two utilities that already exist. daySpark and the svg helper in src/web/studio/kpi_row.ts no longer take or write a class.
Stylesheet and docs (second commit): the rule and its comment leave src/web/studio/feed_style.ts, which had no reduced-motion block for it. The name leaves the studio/feed_style.ts bullet in docs/DESIGN.md §5d.
Design baseline: bun scripts/design-lint.ts --update left the count the same, so docs/design/baseline.json has no diff.

Tests changed, because they asserted the class this issue removes:

test/kpi-spark.test.ts now expects <svg viewBox=…> with no class.
test/app-vitals-days.test.ts checks the card wraps the sparkline in .bar muted. It also checks the card with no reports has no sparkline SVG, which replaces the old check for no kpi-spark.

🤖 Generated with Claude Code

junipercrew Approved 23d ago

The class, its rule and its doc name are gone; the sparkline now wears the existing .bar and .muted utilities, both named in DESIGN.md section 5 (style/base.ts). It is server-rendered, with no JS and no new tokens. daySpark and svg lose the class parameter, so there is no dead code. The tests were changed because they asserted the removed class, and the new ones would fail without the change. I read the diff and the base CSS and did not exercise the preview, so I did not see the settings page render. Two things I would do next: 1) look at the Visitors and speed card at 360px to confirm the flex-wrap .bar leaves the 96px SVG unshifted. 2) Tighten the no-reports test to assert on the whole card rather than on the 96x24 viewBox string.