From d5c4a8d9784bf5efd3b83281421700de0c5dd805 Mon Sep 17 00:00:00 2001
From: m5r <mokhtar@mial.net>
Date: Wed, 12 Aug 2026 22:19:59 +0200
Subject: [PATCH] milestone 23 s3: convert lib/InlineError.tsx to stylex

---
 web/src/lib/InlineError.test.tsx |  7 ++++++-
 web/src/lib/InlineError.tsx      | 26 +++++++++++++++++++++++---
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/InlineError.test.tsx b/web/src/lib/InlineError.test.tsx
index ad27b75..618e549 100644
--- a/web/src/lib/InlineError.test.tsx
+++ b/web/src/lib/InlineError.test.tsx
@@ -1,5 +1,7 @@
 import { fireEvent, render, screen } from "@testing-library/react";
+import * as stylex from "@stylexjs/stylex";
 import { ApiError } from "@/lib/api";
+import { styles as shared } from "@/ui/styles";
 import InlineError from "./InlineError";
 
 test("no retry button without onRetry", () => {
@@ -13,7 +15,10 @@ test("onRetry renders a focusable retry button that calls back", () => {
 	render(<InlineError error={new ApiError(500, "internal")} onRetry={onRetry} />);
 
 	const button = screen.getByRole("button", { name: "Retry" });
-	expect(button.className).toContain("focus-visible:outline-2");
+	// The accessibility floor: StyleX compiles the ring to opaque class names, so
+	// the check is that every class `focusRing` produces landed on the button.
+	const ring = (stylex.props(shared.focusRing).className ?? "").split(" ");
+	expect(button.className.split(" ")).toEqual(expect.arrayContaining(ring));
 	fireEvent.click(button);
 	expect(onRetry).toHaveBeenCalledTimes(1);
 });
diff --git a/web/src/lib/InlineError.tsx b/web/src/lib/InlineError.tsx
index 04851e2..11989ff 100644
--- a/web/src/lib/InlineError.tsx
+++ b/web/src/lib/InlineError.tsx
@@ -1,6 +1,26 @@
 import { useEffect, useState } from "react";
+import * as stylex from "@stylexjs/stylex";
 import { ApiError } from "@/lib/api";
-import { focusRing } from "@/ui/classes";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+
+const styles = stylex.create({
+	message: {
+		marginTop: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.danger,
+	},
+	retry: {
+		borderStyle: "none",
+		backgroundColor: "transparent",
+		padding: 0,
+		color: "inherit",
+		fontSize: "inherit",
+		fontWeight: 500,
+		textDecorationLine: "underline",
+	},
+});
 
 /**
  * Inline mutation error per ruling 17: 400/409 messages verbatim, 429 with
@@ -36,12 +56,12 @@ export default function InlineError({ error, onRetry }: { error: unknown; onRetr
 	}
 
 	return (
-		<p role="alert" className="mt-2 text-sm text-red-600 dark:text-red-400">
+		<p role="alert" {...stylex.props(styles.message)}>
 			{message}
 			{onRetry !== undefined && (
 				<>
 					{" "}
-					<button type="button" onClick={onRetry} className={`font-medium underline ${focusRing}`}>
+					<button type="button" onClick={onRetry} {...stylex.props(styles.retry, shared.focusRing)}>
 						Retry
 					</button>
 				</>