milestone 23 s3: convert lib/InlineError.tsx to stylex

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);
 });

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>
 				</>