Compose react-ui primitives instead of raw controls - #217
Merged
Merged
Conversation
Swap hand-rolled <button>/<input type=checkbox>/<textarea>/<table> markup for react-ui's Button, Checkbox, Textarea, and Table family in agent-skills-picker, create-agent-panel, diff-view, and routine-panel. Drop the now-redundant custom textarea CSS in create-agent-panel now that Textarea supplies its own styling.
The primitive swaps in the previous commit cut the ratcheted violation count from 53 to 48; lock in the reduction so it can't silently creep back up.
Textarea's defaults (bg-card, text-sm) don't match what the removed .create-agent-quiet-field > textarea CSS rule set. Preflight already covers resize:vertical and font-family:inherit for every textarea, so only background and font-size needed restoring via className.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
check:react-ui-driftsites:agent-skills-picker.tsx: raw<button>→Button(variant="link"), raw checkbox →Checkbox(labeled row mode)create-agent-panel.tsx: raw<textarea>→Textarea(dropped the now-redundant custom CSS)diff-view.tsx: raw<table>→Table/TableBody/TableRow/TableCell(cancelled the primitive's default row border/hover to preserve the diff's contiguous-block look)routine-panel.tsx: raw<textarea>→TextareaREACT_UI_DRIFT_SNAPSHOTfrom 52 to 48 to lock in the reduction.Left raw, deliberately
apps/web/src/shell/stage-search.tsx— the magnifier-to-inline-palette morph: react-ui'sButtonisn't aforwardRefcomponent, soref={buttonRef}(used to restore focus when the palette closes) may not attach reliably, and the width transition is authored specifically on.stage-search-button. Matches the task's own carve-out.apps/web/src/shell/workbench-list.tsx(3 sites: the stub row, the workbench row, and the row's menu-trigger button) — these are structural, custom-CSS-classed row/hover-reveal controls (shell-ch-row,chat-sidebar-row-menu-trigger), not label-style action buttons. Wrapping them in react-ui'sButton(fixed height,rounded-md,justify-center, forced padding) would fight the row's avatar+meta+badge layout. This matches an existing, accepted pattern elsewhere in the shell (sidebar.tsx'sshell-sidebar-account-btn/shell-sidebar-footer-row,chat-ui/timeline.tsx'schat-hover-ellipsis) — both already exempted from this check only because each file happens to importButtonfor an unrelated action elsewhere, per the allowlist file's own comments.Neither site was added to
REACT_UI_DRIFT_ALLOWLIST(that requires an open ticket, which doesn't exist yet) — the check's ratchet has enough headroom (48 vs. snapshot 48... actually passes exactly at parity) without them, so nothing needed forcing. Recommend an owner decision on whether to formally allowlist these or leave the convention implicit.Test plan
bun run check:react-ui-driftpasses (48 vs. snapshot 48)apps/web:bun run test(build + full suite) — 775 pass, 0 fail across 91 filesapps/web:bun run typecheck— cleanbun run lint— clean (0 errors; pre-existing unrelated warnings only)Do not merge — left for a peer reviewer per the requesting task.