From adaa7dc23c20f74c181ed1788104c6cd1689cce3 Mon Sep 17 00:00:00 2001 From: npeter83 Date: Sun, 4 Oct 2026 22:00:56 +0200 Subject: [PATCH] build(eslint): drop the Z_RAW and EDGED_LABEL selectors Both came out of the E28 claim audit (0521149c named z-levels, e13d93a3 static labels as flat Badges) after the audit itself had fixed the sites. No real hit since: 0 matches in every lint run from E28 to E34 (S2/S3 measurement). Each still cost a probe test (zLayer.contract, the edged-label half of hoverAndLink.contract) and a place in the gate snapshot. The design rules stay in DESIGN.md (Tokens: no ad-hoc z-index; Static vs pressable), with a decision-log row saying the selectors went and why. --- docs/DESIGN.md | 1 + frontend/eslint.config.js | 24 ------- frontend/src/design-lab/batchA.tsx | 1 - frontend/src/lib/gates.snapshot.json | 19 +----- .../src/lib/hoverAndLink.contract.test.ts | 34 ---------- frontend/src/lib/zLayer.contract.test.ts | 63 ------------------- 6 files changed, 2 insertions(+), 140 deletions(-) delete mode 100644 frontend/src/lib/zLayer.contract.test.ts diff --git a/docs/DESIGN.md b/docs/DESIGN.md index c4c48b5e..544589fb 100644 --- a/docs/DESIGN.md +++ b/docs/DESIGN.md @@ -705,3 +705,4 @@ of a full-width panel and nothing on the right. | 2026-10-02 | E31 Plex detail second column (refined) | The facts over the key crew beside the text; the keywords, chips that filter like the genres, under the text; the show page gets all three too | All three in the column, as the mockup drew it | At 20 keywords and 12 crew the column ran to twice the text's height (849 vs ~400 px at 133%): a hole under the text instead of beside it | | 2026-10-02 | E31 Plex detail poster and crew | The movie and show poster keeps its 2:3 and grows a rung in a wide hero (w-56 at a 64rem panel); the crew shows its first 6 names and "Show N more" (a list of 8 or fewer shows whole) | Poster stretched to the row; a "More" on the keywords | The row is as tall as the crew column, so the poster drew ~175×590 and cropped; the crew, not the keywords, set the hero's height | | 2026-10-04 | E32 `field` focus skips a mode switch | A form opens on its first field; a control above it that is not a field (the composer's Edit / Preview) is passed over by marking the field `data-initial-focus` | The first text field everywhere | That moved the focus in the download dialog off its profile choice and in the upload dialog off its drop zone; the mark changes only the form that needs it | +| 2026-10-04 | E35 Lint for z-levels and edged labels | Both rules stay; the two eslint selectors (`Z_RAW`, `EDGED_LABEL`) that refused them go | Keep the selectors | 0 hits since the E28 sweep that fixed the sites: a check that never fires costs a probe test and a snapshot each, and the UI review holds both rules | diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js index 58950817..e523075a 100644 --- a/frontend/eslint.config.js +++ b/frontend/eslint.config.js @@ -443,12 +443,6 @@ const BOX_PX_MESSAGE = const GRID_MIN_PX = "/minmax\\([\\d.]+px,/"; const GRID_MIN_PX_MESSAGE = "px-frozen box size doesn't scale with --font-scale: give a grid column's minimum in rem (minmax(9.375rem,1fr)), not minmax(Npx,…)."; -// A stacking order outside the layer scale (DESIGN.md Tokens: `base < menu < chrome < … < tooltip` in -// index.css). A numeric `z-10` equals a level today but doesn't follow it when the scale moves; name it. -const Z_RAW = "/(^|[\\s:])-?z-([1-9]\\d*|\\[[^\\]]+\\])(?![\\w-])/"; -const Z_RAW_MESSAGE = - "z-index off the layer scale: use a named level (z-under, z-base, z-menu, z-chrome, z-panel, z-rail, z-overlay, z-popover, z-tooltip), not z-N or z-[…]."; - // A hover that swaps a colour instead of laying the B3 state layer (DESIGN.md Tokens): `bg-card`, // `bg-border` and `bg-surface` vanish on a light card, an opacity dim reads as "disabled", and // `bg-(--hover)` restates the `state-layer` utility by hand. `group-hover:` (a reveal on a parent's @@ -466,14 +460,6 @@ const PALETTE = const PALETTE_MESSAGE = "a palette colour: use a semantic token (text-rating, bg-live, bg-media-chrome, text-danger, …; DESIGN.md Tokens), not text-amber-500."; -// A static label with an edge (DESIGN.md "Static vs pressable", audit F29): a drawn round with a -// border reads as a chip, is clicked and does nothing. A label that does nothing is ui/Badge (flat). -// A small `rounded` box (a check mark drawn inside a menu row) is a glyph, not a label: only the label -// radii match. -const EDGED_LABEL = "/^(?=.*(^|\\s)rounded-(full|md|lg|xl|2xl)(\\s|$))(?=.*(^|\\s)border(\\s|$))/"; -const EDGED_LABEL_MESSAGE = - "a static label with an edge reads as a pressable chip: use ui/Badge (flat, tonal) for a label that does nothing."; - // A class name split by an interpolation: the text right after `${…}` starts with a variant (`hover:`), // or the interpolation IS the variant and the text goes on with its class (`${NARROW}:w-24`, E28 S3f3). // A clock (`${m}:00`) and a URL (`${u}://`) are not classes. @@ -665,20 +651,10 @@ export default tseslint.config( { selector: `TemplateElement[value.raw=${BOX_PX}]`, message: BOX_PX_MESSAGE }, { selector: `Literal[value=${GRID_MIN_PX}]`, message: GRID_MIN_PX_MESSAGE }, { selector: `TemplateElement[value.raw=${GRID_MIN_PX}]`, message: GRID_MIN_PX_MESSAGE }, - { selector: `Literal[value=${Z_RAW}]`, message: Z_RAW_MESSAGE }, - { selector: `TemplateElement[value.raw=${Z_RAW}]`, message: Z_RAW_MESSAGE }, { selector: `Literal[value=${HOVER_SWAP}]`, message: HOVER_SWAP_MESSAGE }, { selector: `TemplateElement[value.raw=${HOVER_SWAP}]`, message: HOVER_SWAP_MESSAGE }, { selector: `Literal[value=${PALETTE}]`, message: PALETTE_MESSAGE }, { selector: `TemplateElement[value.raw=${PALETTE}]`, message: PALETTE_MESSAGE }, - { - selector: `JSXOpeningElement[name.name='span'] JSXAttribute[name.name='className'] Literal[value=${EDGED_LABEL}]`, - message: EDGED_LABEL_MESSAGE, - }, - { - selector: `JSXOpeningElement[name.name='span'] JSXAttribute[name.name='className'] TemplateElement[value.raw=${EDGED_LABEL}]`, - message: EDGED_LABEL_MESSAGE, - }, ], }, }, diff --git a/frontend/src/design-lab/batchA.tsx b/frontend/src/design-lab/batchA.tsx index 6f455f6f..fc8b6eae 100644 --- a/frontend/src/design-lab/batchA.tsx +++ b/frontend/src/design-lab/batchA.tsx @@ -67,7 +67,6 @@ function TouchRow() { return (
- {/* eslint-disable-next-line no-restricted-syntax -- a drawing of the segmented control, not a label */} Mine Library diff --git a/frontend/src/lib/gates.snapshot.json b/frontend/src/lib/gates.snapshot.json index 4d2419bd..50ab72b5 100644 --- a/frontend/src/lib/gates.snapshot.json +++ b/frontend/src/lib/gates.snapshot.json @@ -870,14 +870,6 @@ "message": "px-frozen box size doesn't scale with --font-scale: give a grid column's minimum in rem (minmax(9.375rem,1fr)), not minmax(Npx,…).", "selector": "TemplateElement[value.raw=/minmax\\([\\d.]+px,/]" }, - { - "message": "z-index off the layer scale: use a named level (z-under, z-base, z-menu, z-chrome, z-panel, z-rail, z-overlay, z-popover, z-tooltip), not z-N or z-[…].", - "selector": "Literal[value=/(^|[\\s:])-?z-([1-9]\\d*|\\[[^\\]]+\\])(?![\\w-])/]" - }, - { - "message": "z-index off the layer scale: use a named level (z-under, z-base, z-menu, z-chrome, z-panel, z-rail, z-overlay, z-popover, z-tooltip), not z-N or z-[…].", - "selector": "TemplateElement[value.raw=/(^|[\\s:])-?z-([1-9]\\d*|\\[[^\\]]+\\])(?![\\w-])/]" - }, { "message": "hover by a colour swap: use the B3 layer (`state-layer`, Pressable `layer`, `state-filled` on a fill), not hover:bg-card / bg-border / opacity-N.", "selector": "Literal[value=/(^|[\\s:])hover:(bg-(card|border|surface|muted)(?![\\w-])|bg-\\(--(hover|press)\\)|opacity-)/]" @@ -893,14 +885,6 @@ { "message": "a palette colour: use a semantic token (text-rating, bg-live, bg-media-chrome, text-danger, …; DESIGN.md Tokens), not text-amber-500.", "selector": "TemplateElement[value.raw=/(^|[\\s:])(text|bg|border|fill|stroke|from|via|to|ring|outline|decoration|divide|caret|shadow)-(red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|slate|gray|zinc|neutral|stone)-\\d/]" - }, - { - "message": "a static label with an edge reads as a pressable chip: use ui/Badge (flat, tonal) for a label that does nothing.", - "selector": "JSXOpeningElement[name.name='span'] JSXAttribute[name.name='className'] Literal[value=/^(?=.*(^|\\s)rounded-(full|md|lg|xl|2xl)(\\s|$))(?=.*(^|\\s)border(\\s|$))/]" - }, - { - "message": "a static label with an edge reads as a pressable chip: use ui/Badge (flat, tonal) for a label that does nothing.", - "selector": "JSXOpeningElement[name.name='span'] JSXAttribute[name.name='className'] TemplateElement[value.raw=/^(?=.*(^|\\s)rounded-(full|md|lg|xl|2xl)(\\s|$))(?=.*(^|\\s)border(\\s|$))/]" } ], "no-self-assign": [2, { "props": true }], @@ -1520,8 +1504,7 @@ "src/lib/useUrlMirror.dom.test.ts", "src/lib/verifyEntry.dom.test.tsx", "src/lib/viewportUnits.contract.test.ts", - "src/lib/vocab.dom.test.ts", - "src/lib/zLayer.contract.test.ts" + "src/lib/vocab.dom.test.ts" ], "lib/api/core.ts": ["src/lib/api/core.ts"], "lib/http.ts": ["src/lib/http.ts"], diff --git a/frontend/src/lib/hoverAndLink.contract.test.ts b/frontend/src/lib/hoverAndLink.contract.test.ts index c222876c..e3b6d24d 100644 --- a/frontend/src/lib/hoverAndLink.contract.test.ts +++ b/frontend/src/lib/hoverAndLink.contract.test.ts @@ -13,7 +13,6 @@ async function messages(source: string, starts: string): Promise { const swaps = (src: string) => messages(src, "hover by a colour swap"); const glyphs = (src: string) => messages(src, "a glyph-only "); const palette = (src: string) => messages(src, "a palette colour"); -const edged = (src: string) => messages(src, "a static label with an edge"); describe("a hover by a colour swap", () => { // Assembled, so this file does not trip the very rule it probes. @@ -74,36 +73,3 @@ describe("a palette colour", () => { expect(await palette(`export const g = "bg-accent text-danger border-border";\n`)).toBe(0); }); }); - -// F29: DESIGN.md "Static vs pressable": a label that does nothing is a flat Badge. A span drawn with a -// rounded edge reads as a chip, gets clicked and does nothing (three sites and a private Badge had it). -describe("a static label with an edge", () => { - const b = "border"; // assembled, as above - - it("is refused, in a plain class and inside clsx", async () => { - const src = [ - 'import clsx from "clsx";', - "export const A = ({ on }: { on: boolean }) => (", - " <>", - ` x`, - ` y`, - " ", - ");", - ].join("\n"); - expect(await edged(src)).toBe(2); - }); - - it("passes a flat tint, an edge on a non-label element, a span with no rounding, a drawn check mark", async () => { - const src = [ - "export const B = () => (", - " <>", - ' x', - `
y
`, - ` z`, - ` ✓`, - " ", - ");", - ].join("\n"); - expect(await edged(src)).toBe(0); - }); -}); diff --git a/frontend/src/lib/zLayer.contract.test.ts b/frontend/src/lib/zLayer.contract.test.ts deleted file mode 100644 index e6c72cf2..00000000 --- a/frontend/src/lib/zLayer.contract.test.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { readFileSync } from "node:fs"; - -import { describe, expect, it } from "vitest"; - -import { eslint } from "./lintProbe.testkit"; - -// The layer-scale rule in eslint.config.js (DESIGN.md Tokens: "No ad-hoc z-index"). A numeric `z-10` -// happened to equal `base` and passed every review; a `no-restricted-syntax` selector that matches -// nothing looks exactly like a clean codebase, so pin that it fires. - -async function refused(source: string): Promise { - const [result] = await eslint.lintText(source, { filePath: "src/components/__probe.tsx" }); - return (result?.messages ?? []).filter((m) => m.message.startsWith("z-index off the layer scale")) - .length; -} - -describe("a z-index off the layer scale", () => { - // Assembled, so this file does not trip the very rule it probes. - const z = (v: string) => `z-${v}`; - - it("is refused as a number, an arbitrary value or a variant, in a string and a template", async () => { - expect(await refused(`export const a = "absolute ${z("10")} top-0";\n`)).toBe(1); - expect(await refused(`export const b = "hover:${z("[5]")}";\n`)).toBe(1); - expect(await refused("export const c = `x ${1} -" + z("20") + "`;\n")).toBe(1); - }); - - it("leaves a named level, z-0 and z-auto alone", async () => { - expect(await refused(`export const d = "${z("base")} ${z("menu")} ${z("tooltip")}";\n`)).toBe( - 0, - ); - expect(await refused(`export const e = "${z("0")} md:${z("auto")}";\n`)).toBe(0); - }); -}); - -// The Plex player's notices (the track-switch OSD, the subtitle notice) sat on `menu` while its settings -// and tracks popovers had no level: a notice drew over the open menu (E28 audit, seen live). A menu is -// above a notice; the info overlay (`menu`, later in the tree) still covers both. -describe("the Plex player's layers", () => { - const src = ["PlexPlayer.tsx", "PlexPlayerSettings.tsx"] - .map((f) => readFileSync(new URL(`../components/${f}`, import.meta.url), "utf8")) - .join("\n"); - const classes = (marker: RegExp) => - [...src.matchAll(/className="([^"]*)"/g)].map((m) => m[1]!).filter((c) => marker.test(c)); - - it("puts every popover on the menu level", () => { - const popovers = classes( - /\bbottom-full\b.*\bbg-media-chrome\b|\bbg-media-chrome\b.*\bbottom-full\b/, - ); - expect(popovers).toHaveLength(1); // the settings panel, which renders inside the player - for (const c of popovers) expect(c).toMatch(/\bz-menu\b/); - // The tracks list and the ⋯ menu are on the popover engine (E28 review D3), which lifts them to - // z-popover — above the player's own z-overlay — and into the fullscreen element. - expect([ - ...src.matchAll(/]*?className=\{`\$\{PLAYER_MENU\}/g), - ]).toHaveLength(2); - }); - - it("keeps the notices a level below", () => { - const notices = classes(/pointer-events-none absolute inset-x-0 bottom-(24|36)\b/); - expect(notices).toHaveLength(2); - for (const c of notices) expect(c).toMatch(/\bz-base\b/); - }); -});