feat(design): every button on its family, the chip primitive, the lint rule (E28 S3b2)

The second half of the button sweep: the remaining hand-rolled buttons in feature components, the design lab and the components/ui composites now stand on Button, IconButton, Pressable, Chip or DragHandle. - Chip + DismissibleChip (filter / token / tag / suggest / ghost, 24px floor, 44 on touch) replace five chip geometries; FilterChipGroup renders Chips; overflow lanes measure a mirror painted by chipClass. - The Plex control row is IconButton's player rung (36, 20px glyph, round, overlay; 44 on touch); the YT modal bar is on the sm rung with pressed cycle toggles and names that survive a folded label. - New variants: IconButton ghost-accent, danger-soft; Button warn on a new state-warn utility. The .btn-{tone} recipes and btnCls are gone. - Fixed on the way: membership rows (collection editor, Plex playlist add) announce checked/mixed; a one-letter tag chip was 21px wide; descriptionLinks moved out of lib/ (it renders components). - local/button-primitive: a raw <button>/<FocusSafeButton> outside the control-primitive files is a lint error (contract-tested, seen red).
2026-09-24 23:03:23 +02:00
parent 86f467bd65
commit 81936e9f56
94 changed files with 1327 additions and 1093 deletions
@@ -0,0 +1,125 @@
+import { forwardRef } from "react";
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import clsx from "clsx";
+import { X } from "lucide-react";
+import { FocusSafeButton } from "./FocusSafeButton";
+import { chipClass, type ChipSize, type ChipVariant } from "./chipStyles";
+
+// The chip family (docs/DESIGN.md "One primitive per button family"): a small rounded-full token that
+// is a filter, an applied narrowing, a tag, or a suggestion. It was hand-painted in five files with
+// five geometries; this is the one. `FilterChipGroup` renders a single-select row of these.
+//
+//   filter — a selectable option (a year, a tag filter, a content type). Toggles with `pressed`: the
+//            `.pill` recipe in index.css paints the solid accent when on. Also the "+N" overflow and
+//            "More…" triggers, which light up while their popover is open (aria-expanded).
+//   token  — an applied narrowing, tinted accent (the `.chip` recipe): it exists because it is on.
+//   tag    — a user's tag, the solid accent (`.chip-solid`). Dense: it sits in table rows.
+//   suggest — dashed accent: a suggestion not yet taken.
+//   ghost  — dashed neutral: the "add a tag" trigger, quiet in every table row until reached for.
+//
+// Nothing goes under 24px (B1, WCAG 2.5.8) and a coarse pointer grows every chip to 44 (A3).
+
+type ChipProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: ChipVariant;
+  size?: ChipSize;
+  /** A filter chip that toggles: aria-pressed, painted solid when on. */
+  pressed?: boolean;
+  /** Leading glyph (a lucide element). */
+  icon?: ReactNode;
+  /** The whole chip removes what it stands for: a trailing × and the removal as its name. */
+  removeLabel?: string;
+};
+
+/** A chip that is itself the control (a toggle, a removal, an accept, a "+N" trigger). */
+export const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
+  {
+    variant = "filter",
+    size = "sm",
+    pressed,
+    icon,
+    removeLabel,
+    type,
+    className,
+    children,
+    ...rest
+  },
+  ref,
+) {
+  return (
+    <FocusSafeButton
+      ref={ref}
+      type={type ?? "button"}
+      aria-pressed={pressed}
+      aria-label={removeLabel}
+      title={removeLabel}
+      className={clsx(chipClass(variant, size), removeLabel && "group pr-1.5", className)}
+      {...rest}
+    >
+      {icon}
+      {children}
+      {removeLabel && (
+        <X className="size-3 opacity-60 group-hover:opacity-100" aria-hidden="true" />
+      )}
+    </FocusSafeButton>
+  );
+});
+
+/** A chip whose label is not the control but which carries its own trailing × (a captured filter in
+ *  a saved view, a suggestion with a dismiss). Two sibling controls at most, never a button in a
+ *  button: `onClick` makes the body one (an accept), `onDismiss` the ×. */
+export function DismissibleChip({
+  variant = "token",
+  size = "sm",
+  icon,
+  children,
+  onClick,
+  bodyLabel,
+  bodyTitle,
+  onDismiss,
+  dismissLabel,
+  className,
+}: {
+  variant?: Exclude<ChipVariant, "filter">;
+  size?: ChipSize;
+  icon?: ReactNode;
+  children: ReactNode;
+  onClick?: () => void;
+  bodyLabel?: string;
+  bodyTitle?: string;
+  onDismiss: () => void;
+  dismissLabel: string;
+  className?: string;
+}) {
+  const body = (
+    <>
+      {icon}
+      <span className="truncate">{children}</span>
+    </>
+  );
+  return (
+    <span className={clsx(chipClass(variant, size), "pr-0.5 min-w-0", className)}>
+      {onClick ? (
+        <FocusSafeButton
+          type="button"
+          onClick={onClick}
+          aria-label={bodyLabel}
+          title={bodyTitle}
+          className="inline-flex min-w-0 items-center gap-1 self-stretch [&>svg]:size-3 [&>svg]:shrink-0"
+        >
+          {body}
+        </FocusSafeButton>
+      ) : (
+        <span className="inline-flex min-w-0 items-center gap-1 [&>svg]:size-3">{body}</span>
+      )}
+      <FocusSafeButton
+        type="button"
+        onClick={onDismiss}
+        aria-label={dismissLabel}
+        title={dismissLabel}
+        className="-my-px grid size-6 shrink-0 place-items-center rounded-full opacity-60 transition hover:opacity-100 hover:bg-accent/20 touch-target"
+      >
+        <X className="size-3" aria-hidden="true" />
+      </FocusSafeButton>
+    </span>
+  );
+}