mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 12:32:43 +00:00
fix(dashboard): lift medication-intake quick-add CTA + footer to 44 px floor
W-CI raised the onboarding checklist toggle and the intake-history pager to the 44 px mobile touch floor (WCAG 2.5.5). The new medication-intake quick-add sheet sibling shipped with an empty-state CTA at h-8 (size="sm" default) and footer Save/Cancel buttons at h-10, both below the project-wide floor and visibly inconsistent with the sibling MoodForm / MeasurementForm + the rest of the v1.4.37 surfaces. Apply the established min-h-11 sm:min-h-9 override to the empty-state CTA, the footer Save/Cancel, and the empty-state Close button. Extend the SSR contract test to count three min-h-11 floors instead of two so a future regression that drops one of the buttons back below 44 px trips before the release.
This commit is contained in:
1 parent
c0c1b6b86a
commit
de2bdd6fc8
2 files changed
+23
-4
No files matched your search
@@ -144,6 +144,11 @@ describe("<MedicationIntakeQuickAdd> — SSR contract", () => {
|
||||
expect(html).not.toContain(
|
||||
'data-testid="medication-intake-quick-add-form"',
|
||||
);
|
||||
// v1.4.37 W10 — the empty-state CTA must clear the 44 px touch
|
||||
// floor that W-CI raised on the onboarding checklist. The
|
||||
// `size="sm"` default would land at 32 px without an explicit
|
||||
// `min-h-11 sm:min-h-9` override.
|
||||
expect(html).toContain("min-h-11");
|
||||
});
|
||||
|
||||
it("renders the populated form with picker + dose + time fields", () => {
|
||||
@@ -164,8 +169,10 @@ describe("<MedicationIntakeQuickAdd> — SSR contract", () => {
|
||||
expect(html).toContain(
|
||||
'data-testid="medication-intake-quick-add-taken-at"',
|
||||
);
|
||||
// 44 px touch floor on every interactive field (WCAG 2.5.5).
|
||||
expect(html.match(/min-h-11/g)?.length ?? 0).toBeGreaterThanOrEqual(2);
|
||||
// 44 px touch floor on every interactive field + the footer Save
|
||||
// button (WCAG 2.5.5). v1.4.37 W10 added the floor to the footer
|
||||
// buttons; the form fields already carried it.
|
||||
expect(html.match(/min-h-11/g)?.length ?? 0).toBeGreaterThanOrEqual(3);
|
||||
});
|
||||
|
||||
it("does not leak raw i18n keys in either locale", () => {
|
||||
|
||||
@@ -272,6 +272,7 @@ export function MedicationIntakeQuickAdd({
|
||||
variant="outline"
|
||||
onClick={onCancel}
|
||||
disabled={loading}
|
||||
className="min-h-11 sm:min-h-9"
|
||||
>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
@@ -280,6 +281,7 @@ export function MedicationIntakeQuickAdd({
|
||||
type="submit"
|
||||
form={formId}
|
||||
disabled={loading || !medicationId || medications.length === 0}
|
||||
className="min-h-11 sm:min-h-9"
|
||||
>
|
||||
{loading ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
|
||||
@@ -299,7 +301,12 @@ export function MedicationIntakeQuickAdd({
|
||||
const emptyFooter = (
|
||||
<div className="flex w-full items-center justify-end gap-2">
|
||||
{onCancel && (
|
||||
<Button type="button" variant="outline" onClick={onCancel}>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onCancel}
|
||||
className="min-h-11 sm:min-h-9"
|
||||
>
|
||||
{t("common.close")}
|
||||
</Button>
|
||||
)}
|
||||
@@ -322,7 +329,12 @@ export function MedicationIntakeQuickAdd({
|
||||
{t("dashboard.medicationIntakeQuickAdd.emptyDescription")}
|
||||
</p>
|
||||
</div>
|
||||
<Button asChild size="sm" variant="outline">
|
||||
<Button
|
||||
asChild
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="min-h-11 sm:min-h-9"
|
||||
>
|
||||
<Link href="/medications">
|
||||
{t("dashboard.medicationIntakeQuickAdd.emptyCta")}
|
||||
</Link>
|
||||
|
||||
Reference in new issue
Block a user