From 59b82650a6e3c4788d5197b7b53d1270fc8db1de Mon Sep 17 00:00:00 2001 From: Nico Date: Thu, 4 Jun 2026 02:22:52 -0700 Subject: [PATCH] fix: use toggle pills for map layers --- .../maps/LocationMapBottomSheet.jsx | 19 ++++++++++--------- .../src/styles/pages/LocationMapManager.css | 14 +++++++++----- frontend/tests/location-map-manager.spec.ts | 18 ++++++++++++------ 3 files changed, 31 insertions(+), 20 deletions(-) diff --git a/frontend/src/components/maps/LocationMapBottomSheet.jsx b/frontend/src/components/maps/LocationMapBottomSheet.jsx index 6c4f617..f084b0e 100644 --- a/frontend/src/components/maps/LocationMapBottomSheet.jsx +++ b/frontend/src/components/maps/LocationMapBottomSheet.jsx @@ -166,16 +166,17 @@ export default function LocationMapBottomSheet({
{DISPLAY_CONTROLS.map(([key, label]) => ( -
diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css index 2c9c165..44c651f 100644 --- a/frontend/src/styles/pages/LocationMapManager.css +++ b/frontend/src/styles/pages/LocationMapManager.css @@ -502,23 +502,27 @@ gap: 0.4rem; } -.location-map-display-controls label { +.location-map-display-controls button { min-height: 40px; display: flex; align-items: center; + justify-content: center; gap: 0.35rem; padding: 0.35rem 0.45rem; border: 1px solid var(--color-border-light); - border-radius: 8px; + border-radius: 999px; background: rgba(15, 23, 34, 0.58); color: #f8fafc; font-size: 0.82rem; font-weight: 700; + cursor: pointer; } -.location-map-display-controls input { - width: 16px; - height: 16px; +.location-map-display-controls button.active { + border-color: rgba(96, 165, 250, 0.76); + background: rgba(59, 130, 246, 0.32); + color: #f8fafc; + box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.18); } .location-map-editor-actions { diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts index a0ea14d..f30c28f 100644 --- a/frontend/tests/location-map-manager.spec.ts +++ b/frontend/tests/location-map-manager.spec.ts @@ -377,7 +377,7 @@ test("admin creates a map from zones, saves a draft, and publishes it", async ({ await expect(page.getByText("frozen salmon")).toHaveCount(0); await page.getByRole("button", { name: "Layers" }).click(); - await page.getByLabel("Unmapped").check(); + await page.getByRole("button", { name: "Unmapped" }).click(); await expect(page.getByText("loose batteries")).toBeVisible(); }); @@ -1392,7 +1392,10 @@ test("viewer wraps long zone labels and keeps item counts visible", async ({ pag await expect(page.locator(".location-map-pin")).toHaveCount(0); await page.getByRole("button", { name: "Layers" }).click(); - await page.getByLabel("Labels").uncheck(); + const labelsToggle = page.getByRole("button", { name: "Labels" }); + await expect(labelsToggle).toHaveAttribute("aria-pressed", "true"); + await labelsToggle.click(); + await expect(labelsToggle).toHaveAttribute("aria-pressed", "false"); await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toBeVisible(); await expect(produceArea.locator(".location-map-label")).toHaveCount(0); await expect(produceArea.locator(".location-map-count")).toHaveText("2 items"); @@ -1444,7 +1447,7 @@ test("viewer explains when the zones layer hides the map", async ({ page }) => { await expect(page.locator(".location-map-sheet-count")).toHaveText("2 items"); await page.getByRole("button", { name: "Layers" }).click(); - await page.getByLabel("Zones").uncheck(); + await page.getByRole("button", { name: "Zones" }).click(); await expect(page.getByRole("button", { name: "Map area Bakery" })).toHaveCount(0); await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Map Details"); @@ -1487,7 +1490,10 @@ test("viewer shows a compact overflow cue for long unmapped lists", async ({ pag await page.goto("/stores/100/locations/10/map"); await page.getByRole("button", { name: "Layers" }).click(); - await page.getByLabel("Unmapped").check(); + const unmappedToggle = page.getByRole("button", { name: "Unmapped" }); + await expect(unmappedToggle).toHaveAttribute("aria-pressed", "false"); + await unmappedToggle.click(); + await expect(unmappedToggle).toHaveAttribute("aria-pressed", "true"); await expect(page.getByText("unmapped item 1")).toBeVisible(); await expect(page.getByText("unmapped item 8")).toBeVisible(); @@ -1524,7 +1530,7 @@ test("viewer explains when unmapped items are hidden by filters", async ({ page await page.goto("/stores/100/locations/10/map"); await page.getByRole("button", { name: "Layers" }).click(); - await page.getByLabel("Unmapped").check(); + await page.getByRole("button", { name: "Unmapped" }).click(); await expect(page.getByText("other batteries")).toHaveCount(0); await expect(page.getByText("Unmapped items are hidden by layer filters.")).toBeVisible(); @@ -1575,7 +1581,7 @@ test("viewer marks partial unmapped counts when filters hide some items", async await page.goto("/stores/100/locations/10/map"); await page.getByRole("button", { name: "Layers" }).click(); - await page.getByLabel("Unmapped").check(); + await page.getByRole("button", { name: "Unmapped" }).click(); await expect(page.getByText("visible batteries")).toBeVisible(); await expect(page.getByText("hidden batteries")).toHaveCount(0);