DiffFileRow
StableOne changed file in a review, with how much was added and removed, and buttons to keep or reject it.
Also known as changed file, file diff row
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Waiting, kept and rejected
const [s, setS] = useState("pending");
<DiffFileRow path="src/lib/format.ts" added={12} removed={3} state={s} selected
onKeep={() => setS("kept")} onReject={() => setS("rejected")} onReset={() => setS("pending")} />Choose Keep or Reject to see the label. Undo puts the row back.
When to use it
One line per changed file, so people can see the size of each change and decide on the whole file in one step. After a choice the buttons become a labelled result, so the list shows what is settled.
Made of: File icon · File name (folder faded, name bold) · Counts (added, removed) · Keep and Reject buttons, or a result label · Partly kept label (when choices differ) · Undo (optional)
Use it for
- A short list of changed files in a summary, with Keep and Reject for each.
- A file list beside your own display of the changed lines.
- Showing which files are kept, rejected or partly kept after a review.
Not for
- Reviewing the changed lines themselves: use DiffView.
- A file the person attached to a message: use AttachmentChip.
Do and avoid
Do
- Show both counts, even when one is zero.
- Keep the full file path available, since many files share a name.
- Pass onReset if people should be able to change their mind. Without it, decided rows have no Undo.
Avoid
- Don't show the counts with only color. Keep the plus and minus signs.
- Don't hide Reject behind Keep. Show both until a choice is made.
- Don't drop the file name to save space. Shorten the folder part instead.
On a phone
- The file name takes the first line and is cut with an ellipsis, with the Keep and Reject buttons wrapping under it when the row is narrow.
- Tapping the name selects the file, and every button has a 44px tap area on a touch screen.
- The row highlight on hover is only decoration, so selection is shown without hover.
Seen in products
- Cursor has a Review tab with a file list that shows +/- counts and per-file Keep and Reject (from a search snippet plus community threads).
- Windsurf lets you accept or reject proposed modifications.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| pathrequired | string | none | File path. The directory part is muted and the file name is emphasised. |
| addedrequired | number | none | Count of added lines. |
| removedrequired | number | none | Count of removed lines. |
| state | "pending" | "kept" | "rejected" | "partial" | "pending" | Review state. Pending shows the buttons, kept and rejected show a badge, and partial shows a Partly kept badge beside the buttons. DiffView derives partial from the hunks. |
| selected | boolean | none | Marks the row as the file currently shown. Sets aria-current on the name button. |
| onSelect | () => void | none | Called when the name is chosen. |
| onKeep | () => void | none | Called by the Keep button. In DiffView this decides every hunk in the file. |
| onReject | () => void | none | Called by the Reject button. |
| onReset | () => void | none | Adds an Undo button to decided and partly kept rows. |
| labels | { keep, reject, kept, rejected, partial, undo, lines } | none | Replace the button and badge text, and lines(added, removed), the sentence screen readers hear for the counts. |
| className | string | none | Extra classes on the row. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one DiffFileRow switches all of this from its properties panel, across 8 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Status | state | Pending, Kept, Rejected, Partial |
| Selected | selected | On or off |
| Path | path | Any text |
Tokens
Change one of these and every part that uses it follows.
--success-fg--danger-fg--surface-sunken--surface-hover--radius-control--radius-card
Built in
- Keep, Reject and Undo include the file path in their names, so screen readers know which file they act on.
- The selected file is marked as the current one for screen readers.
- A decided file shows an icon and words, not only a color. A partly kept file shows a half-filled icon and the words Partly kept.
- The counts use plus and minus signs as well as color, and screen readers hear them as a sentence, such as "12 lines added, 3 removed".
- After Keep, Reject or Undo, keyboard focus moves to the file name, which now says the new state, such as "Kept".
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide