search

IHK-GfI / lux-components

Other
16 stars 5 forks source link

Stroked rounded Buttons #415

Closed schoflo closed 7 months ago

schoflo commented 8 months ago

Guten Morgen zusammen,

momentan ist es nicht möglich runde Lux-Buttons ohne Hintergrundfarbe zu erstellen. die Eigenschaft luxStroked scheint auch nicht zu funktionieren mit runden Buttons. Ich würde gerne einen runden Button mit Icon erstellen, der eine Outline aber keinen Hintergrund hat. Beispiel dafür gibt es in den Lux Components schon beim Lux-Master-Detail-Ac, dort gibt es einen Button um die Seitenleiste zu minimieren, der exakt so aussieht wie ich es brauche (siehe Screenshot). Außerdem wäre es schön wenn ich die Größe von Buttons mit Icons skalieren könnte, da wir z.B. bei lux-menu das Problem haben, dass die Anwender den Button nicht finden, weil er zu klein ist. Icons selbst, kann man schon schön skalieren, allerdings halt nicht eingebettet in Buttons.

Viele Grüße Florian

image

patrowe commented 7 months ago

Aktzeptanzkriterium: Die Komponente Lux-Button wurde um eine Variante ergänzt. Mit dem gleichzeitigen setzen der beiden Properties luxRounded und luxStroked wird die neue Variante angezeigt. Das Design entspricht der folgenden Vorlage (obere Reihe: bisherige Buttons, untere Reihe die neue Variation) rounded-button (2)

Die Farben entsprechenden denen der eckigen Stroked Buttons. Ausnahme beim default hier ist die Border-Color = App-Border-Color und die Icon-Farbe wird in luxPrimary angezeigt.

patrowe commented 7 months ago

Die Anforderungen wurden umgesetzt.

@DSeifer bitte Testen

patrowe commented 7 months ago

Test

Testvorbedingung

  1. Die Zweige für die Lux-Components und das Lux-Components-Theme auschecken.
  2. Das lux-components-theme lokal bauen und lokal mit den lux-components verlinken.
  3. Das Demo-Programm starten und die Seite für die Buttons öffnen.
  4. Die folgenden Tests müssen sowohl für das Theme-Authentic, als auch für das Theme-Green durchgeführt werden.

Testdurchführung 1. Die Default-Ansicht für die neuen Buttons ist Theme Authentic: example6

Theme Green: image

2. "disabled": unter Konfiguration die Buttons auf Disabled setzen. Zu erwartendes Ergeignis: Theme Authentic: image

Theme Green: image

3. "hover": mit der Maus über die einzelnen Buttons hovern. Zu erwartendes Ergeignis: Theme Authentic: Das Icon des Buttons wird jeweils 2 Stufen heller.

Theme Green: Der Hintergrund des Buttons erscheint in der hellblauen Hover-Farbe.

4. "focus-visible": mit dem Tab-Key durch die Beispiel-Buttons tabben. Zu erwartendes Ereignis: Theme Authentic: image

Theme Green: image

5. "mouse-click": die Buttons einmal anklicken. Zu erwartendes Ereignis: Theme-Authentic: Das Icon des Buttons wird jeweils 2 Stufen dunkler. Theme-Green: Die Buttons erhalten einen Schatten und werden damit optisch erhöht.

DSeifer commented 7 months ago

Unter Windows 10 Enterprise 22H2 (19045.3930) und MacOS 14.3 mit den jeweils aktuellen Browserversionen getestet:

MacOS: Safari -> OK Disabled im Green-Theme ist allerdings komplett grau: image

Windows: Edge -> OK Disabled im Green-Theme ist allerdings komplett grau: image