Die Property luxIconsize soll flexibler werden

[patrowe]

Die Iconsize kann bisher nur die Werte 1x, 2x, ...5x annehmen. Dieses erschwert eine flexible Gestaltung der Icons. Mit den neuen Icons und der Version 15 soll diese Propety überarbeitet werden.

Akzeptanzkreterium:

• die Property luxIconsize soll px- und em-Werte annehmen

[patrowe]

Die Anforderungen wurden umgesetzt und Iconsize bei folgenden Komponenten entsprechend überarbeitet: lux-button, lux-menu (menu-item, menu-trigger), lux-tile-ac, lux-input-ac-prefix/-suffix, lux-file-input, lux-file-list, lux-file-upoad, lux-app-header, lux-app-footer, lux-tab, lux-card.

[patrowe]

Test:

Vorbedingungen:

• Jeweils den Branch "Issue_323-luxIconSize_more_versatile" für die LUX-Components und das LUX-Components-Theme herunterladen
• Das Theme lokal bauen und mit den Components lokal verlinken
• Das Demo-Programm starten.
• Die folgenden Tests (bis auf die Header) jeweils für das Theme Authentic und das Theme Green durchführen

Test 1: lux-icon

• Die Demoseite für die Komponente öffnen
• Die einzelnen Werte für die Property "luxIconSize" durchtesten und die Anzeige der Icons vergleichen.

Test 2: lux-button

• Die Demoseite für die Komponente öffnen
• Prüfen, dass die Icons und der Labeltext vertikal zentriert angezeigt werden

Test 3: lux-menu

• Die Demoseite für die Komponente öffnen
• Prüfen, dass die Icons und Labels im Menu zusammen mit dem Trigger-Button vertikal zentriert ausgerichtet sind.
• Die Property luxMenuExtended auf false setzen und des Dropdown-Panel über den Trigger-Button öffnen. Prüfen, dass die Icons und die Labels ausgerichtet angezeigt werden.

Test 4: lux-tile-ac

• Die Demoseite für die Komponente öffnen
• Prüfen, dass die Icons in der Kachel oben rechts in der Ecke ausgerichtet sind.

Test 5: lux-input-ac-suffix/prefix

• Im Demo die Kategorie "Formulare" öffnen, im ersten Reiter "Authentic" das Formular-Feld "Spende" zeigt sowohl im Prefix als auch im Suffix ein Icon an. Prüfen, dass die Icons vertikal zentriert im Textfeld ausgerichtet sind.
• Zur Überprüfung das Textfeld komplett mit Ziffern füllen und die Ausrichtung der Eingabe und der Icons kontrollieren

Test 6: lux-file-input:

• Die Demoseite für die Komponente öffnen
• Prüfen, dass die Icon(-buttons) im Input vertikal zentriert sind

Test 7: lux-file-list:

• Die Demoseite für die Komponente öffnen
• Prüfen, dass die Icons in der Titelzeile und bei den jeweiligen Listen-Elementen, zentriert ausgerichtet sind

Test 8: lux-file-upload:

• Die Demoseite für die Komponente öffnen
• Prüfen, dass die Icons korrekt angezeigt werden

Test 9: lux-app-footer:

• Eine beliebige Demoseite öffnen
• Den Footer der Anwendung betrachten und prüfen, dass die Buttons und Link im Footer vertikal zentriert ausgerichtet sind

Test 10: lux-tabs:

• Die Demoseite für die Tabs öffnen
• Das Dropdown bei LuxIconSize öffnen und die einzelnen Werte durchgehen, dabei die Anzeige der Icons in den Tabs überprüfen.

Test 11: lux-app-header-ac

• Nur für das Theme Authentic
• Eine beliebige Seite in der Demo öffnen
• Prüfen, dass die Buttons im Header vertical zentriert ausgerichte sind.

Test 12: lux-app-header

• Nur für das Theme Green
• Eine beliebige Seite in der Demo öffnen
• Prüfen, dass die Buttons im Header vertical zentriert ausgerichte sind.

Test 13: lux-card

• Die Demoseite für die Komponente öffnen
• Prüfen, dass die beiden Icons im Header der Card mit dem Titel ausgerichtet sind.

[patrowe]

@DSeifer Bitte Testen.

[DSeifer]

Unter Windows 10 Enterprise 21H2 (19044.3086) und MacOS 13.4.1 mit den jeweils aktuellen Browserversionen nachgetestet: MacOS: Safari -> OK Windows: Edge -> OK