Verschachtelung von Komponenten

[patrickhilker]

Ich frage mich, ob wir uns damit einen Gefallen tun, die Komponenten so merkwürdig ineinander zu verschachteln. Folgendes Beispiel aus der Doku:

import Button from "@mittwald/flow-react-components/Button";
import { IconNotification } from "@mittwald/flow-react-components/Icons";
import CounterBadge from "@mittwald/flow-react-components/CounterBadge";

<Button aria-label="Benachrichtigungen: 7">
  <IconNotification />
  <CounterBadge count={7} />
</Button>

Dazu steht folgender Text:

Da das CounterBadge selbst nicht accessible ist, muss der Wert über das darunterliegende Element vermittelt werden, in diesem Beispiel erhält der Button ein Aria Label, das die Zahl des Counters enthält.

Wenn ich das nicht weiß, vergesse ich das als Entwickler.

Warum kann ich das nicht bspw. so verwenden?

import Button from "@mittwald/flow-react-components/Button";
import { IconNotification } from "@mittwald/flow-react-components/Icons";

<Button aria-label="Benachrichtigungen" counterBadge={7}>
  <IconNotification />
</Button>

Oder vielleicht sogar so:

import Button from "@mittwald/flow-react-components/Button";
import { IconNotification } from "@mittwald/flow-react-components/Icons";

<IconButton label="Benachrichtigung" icon={<IconNotification />} counterBadge={7} />

Damit muss ich mich mit dem Thema an der Stelle gar nicht mehr beschäftigen.

Weiteres Beispiel ist für mich die ActionGroup. Hier bekommen die Buttons scheinbar über die color-Prop (!) des Buttons innerhalb der Komponente eine Bedeutung bzw. davon hängt die Platzierung ab - das finde ich irgendwie merkwürdig. 😄 (Wo ich zustimme: ich sollte als Entwickler die Platzierung [und vielleicht sogar die Farbe?] nicht selbst festlegen können.)

import ActionGroup from "@mittwald/flow-react-components/ActionGroup";
import Button from "@mittwald/flow-react-components/Button";

<ActionGroup>
  <Button color="accent">Organisation erstellen</Button>
  <Button color="secondary" variant="soft">
    Abbrechen
  </Button>
</ActionGroup>

Ich fände es intuitiver, wenn ich die Buttons bspw. über Props (primary, cancel, secondary) in die Komponente reichen müsste. Dann kann die IDE mir anbieten, was ich verwenden kann.

import ActionGroup from "@mittwald/flow-react-components/ActionGroup";
import Button from "@mittwald/flow-react-components/Button";

<ActionGroup
  cancel={<Button>Abbrechen</Button>}
  primary={<Button>Organisation erstellen</Button>}
/>

[mfal]

Danke Patrick für dein Feedback. An dieser Stelle hilft dir die IDE leider nicht weiter, und du musst tatsächlich "wissen" welche Components sich miteinander kombinieren lassen. Hierzu haben wir einen "Kombiniere mit" Abschnitt im Style Guide. Das ist vielleicht noch nicht ganz vollständig. Z.B. gibt es in der Doku zum CounterBadge einen Verweis auf den Button, aber nicht andersherum.

An sich sollten die möglichen Kombinationen aber "logisch" sein. D.h. ein Icon/CounterBadge in einem Button ist leicht zu verstehen und auch zu merken.

Abgesehen von dem Nachteil der Auto-Vervollständigung in der IDE hat der "Component-Ansatz" viele Vorteile, über die wir tatsächlich beim Entwurf von Flow intensiv nachgedacht haben. Hier findest du eine nachträgliche Doku, wie es zu der Entscheidung kam: #1053