search

IHK-GfI / lux-components

Other
17 stars 5 forks source link

lux-form-controls: Austausch von Flex-Layout #397

Closed patrowe closed 6 months ago

patrowe commented 6 months ago

Bei den Komponenten im Modul lux-form müssen die Einträge von Flex-Layout durch eigenes CSS ausgetauscht werden.

Dazu gehören die Komponenten: lux-autocomplete-ac, lux-chips, lux-datepicker/datetimepicker, lux-file-list, lux-file-input, lux-input, lux-radio, lux-formcontrol-wrapper

sowie evtl vorhandener Subkomponenten.

Akzeptanzkriterium: Die oben genannten Komponenten verwenden keine Befehle von Flex-Layout. Sofern noch nicht vorhanden, erhält jede Komponente eine eigene Klasse im lux-componentens-theme.

patrowe commented 6 months ago

Die Befehle von Flex-Layout wurden in den oben genannten Dateien ausgetauscht. Aktuell ist eine allgemeine Scss-Datei für alle Formular-Elemente im lux-components-theme vorhanden. Es ist zu prüfen noch zu prüfen, ob diese in dieser Form beibehalten ist, oder ob sie durch einzelne Dateien für die jeweiligen Formular-Elemente ersetzt wird.

patrowe commented 6 months ago

Test

Testvorbereitung

  1. Die angehefteten Zweige für die lux-components und das lux-components-theme auschecken.
  2. Das Theme lokal bauen und mit den Components lokal verlinken
  3. Das Demo starten und die Seite "Baseline" öffnen.

Testdurchführung Screenshot 2024-01-03 141408

  1. Die angezeigten Forumularelemente sollten alle auf einer Höhe ausgerichtet angezeigt werden. (Info: Die Anzahl der Formularelemente innerhalb der Zeile hängt von der Größe des Browserfensters ab)
  2. Den Schalter "Denseformat anzeigen" betätigen. Die Höhe der Formularelemente wird dadurch verringert, die Ausrichtung auf einer Linie soll erhalten bleiben.
  3. Die Dropdowns der folgenden Komponenten öffnen und prüfen, dass sie korrekt unterhalb des Inputs angezeigt werden: Autocomplete, Select, Datepicker. (Info: falls das Elemente an einem Rand des Browserfensters positioniert ist, wird das Panel automatisch anders positioniert, in diesem Fall das Browserfenster vergrößern oder die Seite nach oben scrollen).

Test für die Komponente lux-file-list

  1. Die Demoseite für die File-List öffnen. image (Defaultansicht der File-List)
  2. Auf den oberen Button mit der Mülltonne klicken. Zu erwartendes Ergebnis: image
  3. Auf den oberen Button für den Upload klicken und mindesten zwei Dateien zum Upload auswählen. Oder zwei Dateien per Drag-and-Drop auf die Komponente ziehen. Zu erwartendes Ergebnis: image
patrowe commented 6 months ago

@DSeifer Bitte Testen.

DSeifer commented 6 months ago

Unter Windows 10 Enterprise 22H2 (19045.3803) und MacOS 14.2.1 mit den jeweils aktuellen Browserversionen nachgetestet: MacOS: Safari, Firefox, Chrome -> OK Windows: Edge, Firefox, Chrome -> OK