fix(design): a user row answers as a whole card — the hover layer under its badges and buttons, a click anywhere opens the account (E28)
The layer was the name button's own and ended at the row's first badge or button. The card now paints the B3 layer under its content (isolate + a new z-under level), the name button's hit layer spans the card, and the actions sit above it.
This commit is contained in:
+6
-1
@@ -100,6 +100,9 @@ style guide.
|
||||
`bg-card` hovers are violations (invisible on a light card). Selected stays the solid accent. The one
|
||||
exception is an edged pill (a chip, a toolbar or form trigger, a segment): its hover is the accent edge
|
||||
(`.pill:hover`, `glass-hover`), which reads on every surface too (owner decision F14).
|
||||
A card that is one row with actions answers as a whole: the layer is the card's, under its badges and
|
||||
buttons, and the row's open button spans the card beneath the actions (a hover that stopped at the first
|
||||
badge read as broken; owner, E28 — `AdminUsers` user rows).
|
||||
- **Tokens as utilities:** the decided values live once in `index.css` — `--hover` / `--press`,
|
||||
`--edge-strong`, `--touch-target`, and the utilities `state-layer`, `state-filled`, `state-danger`,
|
||||
`edge-strong`, `fade-below`, `fade-below-panel`, `fade-above-panel`, `fade-edges-x`. A primitive or a lab
|
||||
@@ -109,7 +112,8 @@ style guide.
|
||||
- **Radius:** chips and segmented controls `rounded-full`; tabs `rounded-lg`. Buttons, icon buttons and
|
||||
form fields `rounded-lg`; toolbar triggers and search a pill (Controls). Surfaces: see Surfaces.
|
||||
- **Layers:** the fixed z-index scale in `index.css` (`base < menu < chrome < paneltab < panel < rail <
|
||||
overlay < popover < tooltip`). No ad-hoc z-index. [maintainability]
|
||||
overlay < popover < tooltip`), plus `under`, a surface's own layer under its content inside its `isolate`.
|
||||
No ad-hoc z-index. [maintainability]
|
||||
|
||||
## Controls — _Decided_ (batches A and B)
|
||||
|
||||
@@ -377,6 +381,7 @@ Wherever there is text, the user can select it and copy it, and no click action
|
||||
| 2026-09-25 | Edges and hovers (F14) | The ≥ 3:1 edge on the field family (fields, the form trigger); labelled pills keep the faint edge and the accent-edge hover | The ≥ 3:1 edge and a state-layer hover on every control | 1.4.11 asks an edge only where nothing else identifies the control; a heavy edge on every chip and tab weighs the whole UI down |
|
||||
| 2026-09-25 | Rating and live (F16) | Own tokens: `--rating` (theme-scoped gold), `--live`/`--live-fg`, `--rating-media`, `--media-chrome`; palette classes lint-refused | Map them to `--warn` / `--danger` | A gold star and a red LIVE are what the eye expects; as warn/danger they would read as a status. The old amber score was 2:1 on light |
|
||||
| 2026-09-25 | Fjord trial (B2 exception) | A fifth scheme, temporary: Midnight's neutrals, Playnite's steel accent (#337599 lifted to #5aa1cb) and steel rules; exit = fold into Midnight or remove | Retune Midnight straight away; borrow only the qualities | The owner wants to live with the calmer palette app-wide before it replaces the default; it breaks "own hue family" on purpose, and only until that call |
|
||||
| 2026-09-25 | Whole-card row (owner) | A card row's B3 layer is the card's `::before` under its content; the open button's hit layer spans the card, the actions sit above it | The name button's own hover, ending at the first badge or button | A row that half-answers the pointer reads as broken; a badge click did nothing |
|
||||
| 2026-09-25 | Badge tones (F29) | `Badge tone` neutral / accent / warn at 6%; light `--warn` #b45309 → #a14a07; edged label spans lint-refused | Keep edged status pills (a private Badge in Users, Settings "Granted", the suggestions count) | Edged = pressable at a glance; amber-700 was 4.58:1 as text and fell under 4.5 on its own tint |
|
||||
| 2026-09-24 | Chip family | One `Chip` (filter / token / tag / suggest / ghost) + `DismissibleChip`; nothing under 24; the lint rule "no raw `<button>` outside ui/" | Five chip geometries in five files | The applied-filter row, the tag cells, the year picker and the saved-view editor each drew their own chip; a one-letter tag was 21px wide |
|
||||
| 2026-09-24 | Button families | `Button` / `IconButton` / `Pressable` / chips / `DragHandle`; `lg` 40 for a hero CTA; pills and a 48 Play on media (from C5) | Every button hand-painted | 268 hand-rolled buttons in 79 files drifted into as many looks; the ladder only holds if every button stands on it |
|
||||
|
||||
@@ -353,7 +353,7 @@ const BOX_PX_MESSAGE =
|
||||
// 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-base, z-menu, z-chrome, z-panel, z-rail, z-overlay, z-popover, z-tooltip), not z-N or z-[…].";
|
||||
"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
|
||||
|
||||
@@ -98,6 +98,24 @@ describe("the last sign-in column (E22 S1)", () => {
|
||||
});
|
||||
});
|
||||
|
||||
// E28 (owner): the hover ended wherever the row's first badge or button began, because the layer was
|
||||
// the name button's own. The card is the row: it paints the layer under its content, and the name
|
||||
// button's hit layer spans the card, under the actions that sit above it.
|
||||
describe("a user row", () => {
|
||||
it("answers as a whole card, with its actions above the card's hit layer", async () => {
|
||||
mount();
|
||||
const open = await screen.findByTitle("users.account.open");
|
||||
const card = open.parentElement!;
|
||||
expect(card.className).toMatch(/(^|\s)isolate(\s|$)/);
|
||||
expect(card.className).toMatch(/(^|\s)hover:before:bg-\(--hover\)(\s|$)/);
|
||||
expect(open.className).toMatch(/(^|\s)after:inset-0(\s|$)/);
|
||||
expect(open.className).not.toMatch(/selectable|hover:/);
|
||||
const actions = [...card.querySelectorAll("button")].filter((b) => b !== open);
|
||||
expect(actions.length).toBeGreaterThan(0);
|
||||
for (const b of actions) expect(b.className).toMatch(/(^|\s)relative(\s|$)/);
|
||||
});
|
||||
});
|
||||
|
||||
describe("a user action that fails", () => {
|
||||
it("says a user who is gone, and refetches the list", async () => {
|
||||
const users = mount();
|
||||
|
||||
@@ -54,6 +54,13 @@ import { SURFACE } from "./ui/surfaces";
|
||||
// (The tab key + a "focus the Access tab" helper live in lib/adminUsersTab so callers can
|
||||
// pre-select the tab without importing this lazy-loaded page — see that file.)
|
||||
|
||||
// A user row's B3 layer (DESIGN.md "State layers"), painted by the card under its content, and the name
|
||||
// button's stretched hit layer over the whole card. Why the row is built so: at the row below.
|
||||
const ROW_LAYER =
|
||||
"relative isolate before:absolute before:inset-0 before:z-under before:rounded-[inherit] before:transition-colors before:content-[''] hover:before:bg-(--hover) has-[[data-row-open]:active]:before:bg-(--press)";
|
||||
const ROW_OPEN =
|
||||
"focus-visible:outline-none after:absolute after:inset-0 after:rounded-xl after:content-[''] focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-accent";
|
||||
|
||||
export default function AdminUsers() {
|
||||
const me = useMe();
|
||||
const { t } = useTranslation();
|
||||
@@ -215,11 +222,20 @@ function UsersRoles({ me }: { me: Me }) {
|
||||
{rows.map((u) => {
|
||||
const self = u.id === me.id;
|
||||
return (
|
||||
<div key={u.id} className={`${SURFACE.card} flex items-center gap-2.5 p-2.5`}>
|
||||
// The whole card is the row, so the whole card answers (owner, E28): the name's button
|
||||
// stretches an invisible layer over the card (`after:inset-0`), so a click on a badge or
|
||||
// a gap opens the account too, and the B3 hover layer is the card's own `::before`, under
|
||||
// the badges and buttons (`isolate` + `z-under`). The actions are `relative`, above the
|
||||
// stretched layer. The hover used to be the name button's own and ended at the first badge.
|
||||
<div
|
||||
key={u.id}
|
||||
className={`${SURFACE.card} ${ROW_LAYER} flex items-center gap-2.5 p-2.5`}
|
||||
>
|
||||
<Pressable
|
||||
data-row-open=""
|
||||
onClick={() => setPanelFor(u)}
|
||||
title={t("users.account.open")}
|
||||
className="selectable cursor-pointer min-w-0 flex-1 rounded-lg -m-1 p-1"
|
||||
className={`min-w-0 flex-1 cursor-pointer ${ROW_OPEN}`}
|
||||
>
|
||||
<div className="text-sm truncate">
|
||||
{displayName(u)}
|
||||
@@ -251,7 +267,7 @@ function UsersRoles({ me }: { me: Me }) {
|
||||
<Button
|
||||
variant="glass"
|
||||
size="xs"
|
||||
className="shrink-0"
|
||||
className="relative shrink-0"
|
||||
onClick={() => onToggle(u)}
|
||||
// Locked (demo / self) is unavailable WITH a reason, the tooltip's: aria-disabled keeps it
|
||||
// focusable so a keyboard user reaches the reason. A pending write is transient.
|
||||
@@ -281,6 +297,7 @@ function UsersRoles({ me }: { me: Me }) {
|
||||
}
|
||||
size="sm"
|
||||
variant={u.is_suspended ? "outline-warn" : "outline"}
|
||||
className="relative"
|
||||
onClick={() => onSuspend(u)}
|
||||
aria-disabled={u.is_demo || self}
|
||||
disabled={pendingIds.has(u.id)}
|
||||
@@ -301,6 +318,7 @@ function UsersRoles({ me }: { me: Me }) {
|
||||
label={t("users.delete.action")}
|
||||
size="sm"
|
||||
variant="outline-danger"
|
||||
className="relative"
|
||||
onClick={() => onDelete(u)}
|
||||
aria-disabled={u.is_demo || self}
|
||||
disabled={pendingIds.has(u.id)}
|
||||
@@ -321,7 +339,7 @@ function UsersRoles({ me }: { me: Me }) {
|
||||
: t("users.roles.lastLoginNone")
|
||||
}
|
||||
>
|
||||
<span className="hidden sm:inline-block w-20 shrink-0 text-right text-2xs text-muted tabular-nums">
|
||||
<span className="relative hidden sm:inline-block w-20 shrink-0 text-right text-2xs text-muted tabular-nums">
|
||||
{u.last_login_at ? relativeTime(u.last_login_at) : "—"}
|
||||
</span>
|
||||
</Tooltip>
|
||||
|
||||
@@ -48,6 +48,9 @@
|
||||
|
||||
--font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||||
|
||||
/* `under` is not an app layer: a surface's own layer painted under its content, inside that surface's
|
||||
`isolate` stacking context (a whole-card row's hover layer, DESIGN.md State layers). */
|
||||
--z-index-under: -1;
|
||||
--z-index-base: 10;
|
||||
--z-index-menu: 20;
|
||||
--z-index-chrome: 30;
|
||||
|
||||
Reference in New Issue
Block a user