# States

States beschreiben den Zustand einer Komponente und ihre Reaktion auf
Interaktionen. Flow stellt die States für alle Komponenten bereit.

---

# Interaktions-States

Interaktions-States entstehen, wenn Nutzer mit einer Komponente interagieren.
Die Komponenten zeigen sie automatisch an.

## Default

Default ist der Ruhezustand einer Komponente, in dem keine Interaktion
stattfindet. Alle anderen States bauen visuell auf ihm auf.

```tsx
import { Button } from "@mittwald/flow-react-components";

<Button isReadOnly>Button</Button>
```

## Hover

Hover zeigt an, dass sich der Mauszeiger über einem interaktiven Element
befindet. Der State signalisiert, dass das Element bedienbar ist. Auf
Touch-Geräten gibt es keinen Hover, wichtige Informationen dürfen deshalb nie
nur im Hover sichtbar sein.

```tsx
import { Button } from "@mittwald/flow-react-components";

<Button
  isReadOnly
  style={{
    backgroundColor:
      "var(--button--primary-solid-background-color--hover)",
  }}
>
  Button
</Button>
```

## Pressed

Pressed zeigt an, dass ein Element gerade gedrückt wird. Das direkte Feedback
bestätigt dem Nutzer, dass seine Eingabe angekommen ist.

```tsx
import { Button } from "@mittwald/flow-react-components";

<Button
  isReadOnly
  style={{
    backgroundColor:
      "var(--button--primary-solid-background-color--pressed)",
    transform: "scale(0.97)",
  }}
>
  Button
</Button>
```

## Focus

Focus zeigt an, welches Element gerade per Tastatur angesteuert ist. Der
Focus-Ring erscheint nur bei der Bedienung mit der Tastatur und ist für Nutzer,
die ohne Maus navigieren, die wichtigste Orientierung. Der Focus darf deshalb
nie verloren gehen. Mehr dazu findest du unter
[Accessibility](https://flow.mittwald.de/foundations/design/accessibility).

```tsx
import { Button } from "@mittwald/flow-react-components";

<Button
  isReadOnly
  style={{
    outline:
      "var(--focus--outline-width) solid var(--focus--outline-color)",
    outlineOffset: "var(--focus--outline-offset)",
    boxShadow:
      "0 0 0 var(--focus--outline-width) var(--focus--secondary-outline-color)",
  }}
>
  Button
</Button>
```

## Selected

Selected zeigt an, dass eine Option ausgewählt oder aktiv ist. Typische
Komponenten sind [Checkbox](https://flow.mittwald.de/components/form-controls/checkbox),
[RadioGroup](https://flow.mittwald.de/components/form-controls/radio-group) und
[Tabs](https://flow.mittwald.de/components/structure/tabs).

```tsx
import { Checkbox } from "@mittwald/flow-react-components";

<Checkbox defaultSelected isReadOnly>
  Newsletter abonnieren
</Checkbox>
```

---

# Component-States

Diese States werden über Properties gesetzt. Sie beschreiben, ob und wie eine
Komponente bedient werden kann.

## Disabled

Disabled zeigt an, dass ein Element aktuell nicht bedient werden kann. Der Wert
eines deaktivierten Felds wird beim Absenden eines Formulars nicht übermittelt.
Mache aus dem Kontext klar, warum das Element nicht zur Verfügung steht, damit
Nutzer wissen, was sie tun müssen. Neben dem
[Button](https://flow.mittwald.de/components/actions/button) lassen sich auch Eingabefelder wie
[TextField](https://flow.mittwald.de/components/form-controls/text-field) oder
[Checkbox](https://flow.mittwald.de/components/form-controls/checkbox) deaktivieren.

```tsx
import { Button } from "@mittwald/flow-react-components";

<Button isDisabled isReadOnly>
  Button
</Button>
```

## Read-only

Nur mit erkennbarem Kontext verwenden

Ein Read-only-Feld unterscheidet sich optisch nicht von einem bedienbaren
Feld. Aus dem Kontext muss deshalb klar hervorgehen, dass nichts bearbeitet
werden kann, zum Beispiel durch eine als Vorschau gekennzeichnete Ansicht.

Read-only zeigt einen Wert an, der relevant ist, aber nicht geändert werden
kann. Anders als bei Disabled bleibt der Wert gut lesbar, lässt sich markieren
und kopieren und wird mit dem Formular übermittelt. Typische Komponenten sind
[TextField](https://flow.mittwald.de/components/form-controls/text-field),
[Select](https://flow.mittwald.de/components/form-controls/select) und
[Rating](https://flow.mittwald.de/components/form-controls/rating).

```tsx
import {
  Label,
  TextField,
} from "@mittwald/flow-react-components";

<TextField
  isReadOnly
  defaultValue="mein-projekt.example.com"
>
  <Label>Domain</Label>
</TextField>
```

## Invalid

Invalid zeigt an, dass eine Eingabe fehlerhaft ist. Kombiniere den State immer
mit einem `FieldError`, der erklärt, wie Nutzer den Fehler beheben. Wie du gute
Fehlermeldungen formulierst, erfährst du unter
[Fehlermeldungen](https://flow.mittwald.de/foundations/content-guidelines/fehlermeldungen).

```tsx
import {
  FieldError,
  Label,
  TextField,
} from "@mittwald/flow-react-components";

<TextField isInvalid defaultValue="mein-projekt">
  <Label>Domain</Label>
  <FieldError>Gib eine gültige Domain ein.</FieldError>
</TextField>
```

## Required

Required kennzeichnet ein Pflichtfeld, das ausgefüllt werden muss, bevor ein
[Form](https://flow.mittwald.de/components/react-hook-form/form) abgeschickt werden kann. Flow
kennzeichnet dabei nicht die Pflichtfelder, sondern die optionalen: Ihr Label
erhält automatisch den Zusatz „(optional)“.

```tsx
import {
  Label,
  TextField,
} from "@mittwald/flow-react-components";

<TextField isRequired isReadOnly>
  <Label>Projektname</Label>
</TextField>
```

## Indeterminate

Indeterminate zeigt an, dass nur ein Teil der untergeordneten Optionen
ausgewählt ist. Der State kommt vor allem bei einer
[Checkbox](https://flow.mittwald.de/components/form-controls/checkbox) zum Einsatz, die eine
[CheckboxGroup](https://flow.mittwald.de/components/form-controls/checkbox-group) oder die Auswahl in
einer Liste zusammenfasst.

```tsx
import { Checkbox } from "@mittwald/flow-react-components";

<Checkbox isIndeterminate isReadOnly>
  Alle Projekte auswählen
</Checkbox>
```

## Pending, Succeeded und Failed

Diese States geben dem Nutzer Feedback zu einer Aktion, die im Hintergrund
läuft: Pending zeigt an, dass die Aktion läuft, Succeeded, dass sie erfolgreich
abgeschlossen wurde, und Failed, dass sie fehlgeschlagen ist. Steuere die States
über die [Action](https://flow.mittwald.de/components/actions/action)-Komponente. Sie setzt den
passenden State automatisch anhand des Verlaufs der Aktion.

```tsx
import { Button } from "@mittwald/flow-react-components";

<>
  <Button isPending isReadOnly>
    Button
  </Button>
  <Button isSucceeded isReadOnly>
    Button
  </Button>
  <Button isFailed isReadOnly>
    Button
  </Button>
</>
```