CommitBox

The top of a changes panel: branch, push and pull with counts, the message and the commit button, with room for suggestion tools and a ReasonList that explains a suggested message. Try committing a short message to see the inline error.

CommitBox
ReasonList

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, CommitBox

Ctrl+Enter or Cmd+Enter commits.

Dark theme, CommitBox

Ctrl+Enter or Cmd+Enter commits.

High contrast theme, CommitBox

Ctrl+Enter or Cmd+Enter commits.

UsageLink to the section Usage

tsx

import { CommitBox, ReasonList } from '@skribly/ui/code'

tsx

<CommitBox label={t('commit.box')} messageLabel={t('commit.message')} hideMessageLabel
  value={message} onChange={setMessage} onCommit={commit} commitLabel={t('commit.do')}
  errorMessage={error} branch={status.branch} branchLabel={t('git.switchBranch')} onBranchPress={openBranches}
  ahead={status.ahead} onPush={push} pushLabel={t('git.push')} syncing={syncing} syncingLabel={t('git.syncing')}
  container={panel} footer={proposal && <ReasonList title={proposal.template} reasons={proposal.reasons}
    alternatives={proposal.alternatives} onPickAlternative={setMessage} />} />

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 box is a named group.
The message is a labelled textarea: Enter adds a line and Ctrl+Enter or Cmd+Enter commits.
An error marks the field invalid and is linked with aria-describedby, so it is read with the field and stays until the message changes.
Push reads as "Push 2", busy buttons say they are pending, and the ReasonList is a group named by its title with real list items and buttons for alternatives.

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