GitFileRow

One changed file with its kind as a letter, the name before the folder and actions for staging or discarding. Pick it for working tree and staged changes; put the rows in a List.

GitFileRow

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, GitFileRow

Staged (2)

QuickOpen.tsxsrc/search

fuzzy.tssrc/search

Changes (4)

notes.mddocs

rows.tsxsrc/codeRenamed from src/code/internal.tsx

SettingsAccountsConnections.tsxpackages/desktop/src/renderer/views/a-really-long-folder-name

scratch.txt

Dark theme, GitFileRow

Staged (2)

QuickOpen.tsxsrc/search

fuzzy.tssrc/search

Changes (4)

notes.mddocs

rows.tsxsrc/codeRenamed from src/code/internal.tsx

SettingsAccountsConnections.tsxpackages/desktop/src/renderer/views/a-really-long-folder-name

scratch.txt

High contrast theme, GitFileRow

Staged (2)

QuickOpen.tsxsrc/search

fuzzy.tssrc/search

Changes (4)

notes.mddocs

rows.tsxsrc/codeRenamed from src/code/internal.tsx

SettingsAccountsConnections.tsxpackages/desktop/src/renderer/views/a-really-long-folder-name

scratch.txt

UsageLink to the section Usage

tsx

import { GitFileRow } from '@skribly/ui/code'

tsx

<List aria-label="Changes" items={files}>
  {(file) => (
    <GitFileRow id={file.path} path={file.path} kind={file.kind} kindLabel={t(`git.${file.kind}`)}
      onAction={() => openDiff(file)}
      actions={<IconButton label={t('git.stage', { path: file.path })} size="sm" onPress={() => stage(file)}><Plus aria-hidden /></IconButton>} />
  )}
</List>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The list is one tab stop: Up and Down move between files, typing jumps to a path, Enter runs onAction and Right reaches the buttons in the row.
The kind is read as a word before the path; the letter on screen is hidden and also differs by shape (a deleted name is struck through).
Hover actions stay in the page and show on focus, on touch screens and in forced colours.

This demo runs through axe in all three themes on every test run. See what the tests check.