CommitBox

Góra panelu zmian: gałąź, push i pull z licznikami, wiadomość i przycisk commita, z miejscem na narzędzia podpowiedzi i ReasonList, który wyjaśnia proponowaną wiadomość. Spróbuj zatwierdzić krótką wiadomość, aby zobaczyć błąd w linii.

CommitBox
ReasonList

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: CommitBox

Ctrl+Enter or Cmd+Enter commits.

Noc, podgląd: CommitBox

Ctrl+Enter or Cmd+Enter commits.

Wysoki kontrast, podgląd: CommitBox

Ctrl+Enter or Cmd+Enter commits.

UżycieLink do sekcji Użycie

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

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Pole jest nazwaną grupą.
Wiadomość to pole tekstowe z etykietą: Enter dodaje linię, a Ctrl+Enter lub Cmd+Enter zatwierdza.
Błąd oznacza pole jako niepoprawne i jest powiązany przez aria-describedby, więc jest odczytywany razem z polem i zostaje, dopóki wiadomość się nie zmieni.
Push jest odczytywany jako „Push 2”, zajęte przyciski mówią, że trwa oczekiwanie, a ReasonList jest grupą nazwaną swoim tytułem, z prawdziwymi elementami listy i przyciskami dla alternatyw.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.