mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-11 05:42:19 +00:00
refactor(ui): mint the text-2xs token and the neutral TagChip
Three integration cards carried the same hand-copied chip literal in the card-header accessory slot, each free to drift on the next touch; the size itself was an arbitrary value repeated at three slightly different spellings across the tree. - Mint `--text-2xs` (0.6875rem with a matched line-height) as the one sanctioned step below `text-xs`. - Mint `TagChip` and adopt it on the Fitbit, Google Health, and Nightscout cards. It stays distinct from `Badge`, which carries status meaning. - Sweep the arbitrary micro sizes: the stepper label and the two dose-ledger outline badges move onto the token; the muted target caption and the muted ledger meta row move up to the `text-xs` muted floor. No visible change beyond the two muted rows gaining a fraction of a pixel.
This commit is contained in:
1 parent
405bebf1a0
commit
933dfcfdfb
9 files changed
+90
-16
No files matched your search
@@ -0,0 +1,30 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { renderToStaticMarkup } from "react-dom/server";
|
||||
|
||||
import { TagChip } from "../tag-chip";
|
||||
|
||||
describe("<TagChip>", () => {
|
||||
it("renders the neutral chip shape on the text-2xs token", () => {
|
||||
const html = renderToStaticMarkup(<TagChip>Glucose</TagChip>);
|
||||
expect(html).toContain("Glucose");
|
||||
expect(html).toContain('data-slot="tag-chip"');
|
||||
expect(html).toContain("bg-muted");
|
||||
expect(html).toContain("text-foreground");
|
||||
expect(html).toContain("rounded-full");
|
||||
expect(html).toContain("text-2xs");
|
||||
// The arbitrary value the three hand-copied sites carried is gone.
|
||||
expect(html).not.toContain("text-[0.6875rem]");
|
||||
});
|
||||
|
||||
it("merges caller classes and forwards span props", () => {
|
||||
const html = renderToStaticMarkup(
|
||||
<TagChip className="ml-2" title="source label">
|
||||
Steps
|
||||
</TagChip>,
|
||||
);
|
||||
expect(html).toContain("ml-2");
|
||||
expect(html).toContain('title="source label"');
|
||||
// The base shape survives the merge.
|
||||
expect(html).toContain("rounded-full");
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user