Teil von #29650 (TopLogic UI on MUI), Richtung 1: Komponenten, die TL fehlen.

Ziel

Ein Auswahlfeld (Referenz oder Aufzählung, einfach) soll als Gruppe von Radio-Buttons dargestellt werden können (MUI-Gegenstück: RadioGroup + FormControlLabel + Radio), bei Mehrfachauswahl entsprechend als Gruppe von Checkboxen (FormGroup + Checkbox).

Heute gibt es Radio-Buttons nur für boolesche Felder (TLBooleanChoice). Für n Optionen stehen die Liste (TLDropdownSelect), Chips (TLOptionChips) und die Segmentleiste (TLSegmentedChoice) zur Verfügung; die in Formularen verbreitete Radio-Liste fehlt.

Anforderungen

• Eine weitere Darstellung radio in DropdownSelectState.Display (siehe #29643), wählbar wie chips und segmented über die Annotation des Attributs bzw. die Feldkonfiguration.
• Anordnung vertikal oder horizontal.
• Leere Auswahl als eigene Option, wenn das Feld nicht verpflichtend ist (emptyOptionLabel).
• Nicht editierbar: nur der gewählte Wert bzw. alle Optionen deaktiviert – einheitlich mit den anderen Darstellungen.
• Tastaturbedienung nach dem WAI-ARIA-Radio-Group-Muster.

Lösung

Radio-/Checkbox-Gruppe

• SelectDisplay.RADIO (radio) ist eine weitere Darstellung eines Auswahlfelds (ReactDropdownSelectControl); wie Chips und Segmente erhält sie die vollständige Optionsliste, sobald sie angezeigt wird.
• Client-Komponente TLChoiceGroup: native Radio-Buttons (Einfachauswahl, gemeinsamer name – die Pfeiltasten verschieben die Auswahl, die Gruppe ist ein Tab-Stopp) bzw. Checkboxen (Mehrfachauswahl) in tl-choice-Labels einer tl-choice-group. Ein nicht verpflichtendes einfaches Feld erhält als erste Option "Kein Wert". Nur lesend: die gewählten Werte wie bei Chips/Segmenten; deaktiviert: alle Eingaben inaktiv.
• Anordnung über das Zustandsfeld orientation: vertikal (Vorgabe) oder horizontal (umbrechende Zeile).

Auswahl der Darstellung

• Feldkonfiguration: <input-control class="com.top_logic.layout.view.form.SelectControlProvider" display="radio" orientation="horizontal"/>. Ein input-control ohne display folgt der Modell-Annotation.
• Modell-Annotationen wie in der klassischen Oberfläche: <reference-display value="radio|radio-inline"/> an Referenzen und <classification-display value="radio|radio-inline|checklist"/> an Aufzählungen werden in der React-Oberfläche als Radio-/Checkbox-Gruppe dargestellt (radio, checklist: untereinander; radio-inline: nebeneinander). Die Feldkonfiguration hat Vorrang vor der Annotation.
• Editierbare Tabellenzellen bleiben – wie in der klassischen Oberfläche – Auswahllisten, auch wenn die Annotation Radio-Buttons verlangt.

Auswahlliste ohne Filter

• Die Auswahlliste kann ohne Filter-Eingabefeld geöffnet werden (Zustandsfeld noFilter, Feldkonfiguration filter="false"). Stattdessen gilt die Typeahead-Bedienung nach WAI-ARIA: getippte Zeichen springen zur ersten Option, deren Beschriftung mit ihnen beginnt (Präfix wird nach 500 ms Pause zurückgesetzt, wiederholtes Tippen desselben Buchstabens wechselt zur nächsten passenden Option); im geschlossenen Feld öffnet ein Buchstabe die Liste.

Boolesche Felder

• Boolesche Felder mit der Darstellung radio bzw. select (BooleanDisplay) sind Auswahlfelder: eine Einfachauswahl zwischen Ja und Nein, bei einem dreiwertigen Feld zusätzlich "Kein Wert". Sie werden über dasselbe Auswahl-Steuerelement dargestellt (radio als einzeilige Radio-Gruppe, select als Auswahlliste ohne Filter); das eigene Steuerelement TLBooleanChoice / ReactBooleanChoiceControl entfällt. Grundlage ist der allgemeine Adapter FixedOptionsFieldModel (ein beliebiges FieldModel als Auswahl unter festen Optionen).

Demo

• tl-demo-react, Demos → Gestaltung: Radio-Gruppe vertikal/horizontal, Checkbox-Gruppe, Auswahlliste ohne Filter.
• tl-demo-react, Daten → Attribute: Attribut priorityRadio mit classification-display radio-inline; tags (checklist) erscheint als Checkbox-Gruppe.