mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-11 13:52:20 +00:00
Marc-André Bombeck
6d83115d16
Verified UI-consistency findings from the campaign's design audit, each pixel-faithful except the intended correction: - insights hero band: off-scale py-5/gap-5 → the standard scale; H1 font-semibold → font-bold; sm:text-[28px] → sm:text-3xl. - medication-compliance-chart + recent-achievements-card: hand-rolled muted h-4 icon + text-sm headers → the standard TileHeader primitive so they match sibling tiles. - achievements stat tiles + clinician-view shells: p-5 → p-4 md:p-6. - two text-primary header glyphs (research-mode dialog, enroll-mfa) → text-foreground (never accent on a header glyph); the deliberate badge-boxed icons left untouched. - SheetHeader now reserves the trailing close-X gutter like DialogHeader, closing the latent overlap class for future raw-Sheet consumers. - five raw Dialogs on phone-reachable surfaces → ResponsiveSheet. - new bg-card-scoped healthlog/spacing-scale lint (flags p-5/gap-5 etc. only on card shells; list-marker insets + half-steps excluded) at error, with the five offenders it flagged swept. - dropped the stale CLAUDE.md '18 PascalCase outliers' line (0 remain). Every data-slot preserved. No migration.
31 lines
1.2 KiB
TypeScript
31 lines
1.2 KiB
TypeScript
import { describe, expect, it } from "vitest";
|
|
import { renderToStaticMarkup } from "react-dom/server";
|
|
|
|
import { SheetHeader } from "../sheet";
|
|
|
|
/**
|
|
* The raw `SheetHeader` reserves a trailing gutter for the sheet's absolute
|
|
* close-X the way `DialogHeader` (pr-9) does — sized to the sheet close
|
|
* button (`right-4`, min-w-9…11) so a long raw-`<Sheet>` title never slides
|
|
* under the X. Latent hardening (every current consumer passes its own
|
|
* header/close), but it forecloses the Documents-class overlap at the
|
|
* primitive. Consumers that render no close-X drop the reserve via className,
|
|
* and tailwind-merge keeps the later value.
|
|
*/
|
|
describe("<SheetHeader>", () => {
|
|
it("reserves the trailing close-X gutter (pr-12) by default", () => {
|
|
const html = renderToStaticMarkup(<SheetHeader>Title</SheetHeader>);
|
|
expect(html).toContain('data-slot="sheet-header"');
|
|
expect(html).toContain("pr-12");
|
|
});
|
|
|
|
it("lets a consumer className override the reserve", () => {
|
|
const html = renderToStaticMarkup(
|
|
<SheetHeader className="p-3">Title</SheetHeader>,
|
|
);
|
|
// A later padding utility from the consumer wins under tailwind-merge.
|
|
expect(html).toContain("p-3");
|
|
expect(html).not.toMatch(/class="[^"]*\bpr-12\b/);
|
|
});
|
|
});
|