Schaltflächen "Text"

Warum haben Buttons mit nur Icons diesen Text ​?

Ich bin neugierig, welchen Zweck er erfüllt, da er mein Styling für Buttons mit nur Icons durcheinanderbringt :skull_and_crossbones:

3 „Gefällt mir“

Sie können eine Beschreibung von pmusaraj sehen, warum, von diesem PR:

Dies sorgt für eine konsistente Größe von Texteingaben, Dropdowns und Schaltflächen in der gesamten App. Dies ist wichtig, da diese Elemente oft zusammen in Formularen verwendet werden und unterschiedliche berechnete Höhen viele Layoutprobleme verursachen.

Zugehöriger Code:

1 „Gefällt mir“

Es scheint, als gäbe es eine robustere Methode, um denselben Effekt zu erzielen, ohne ZeroWidthSpace zu verwenden.

1 „Gefällt mir“

Du könntest Recht haben! Es ist ein PR von 2021. Es gibt vielleicht eine moderne Methode, um Konsistenz im Jahr 2024+ sicherzustellen.

2 „Gefällt mir“

Ja, wir haben das schon einmal in Betracht gezogen (und werden es wahrscheinlich wieder tun), aber leider wäre etwas so Einfaches wie das Hinzufügen einer Mindesthöhe zu allen Schaltflächen für bestehende Themes störender.

3 „Gefällt mir“

Warum Mindesthöhe? Könnten die Schaltflächen eine Basis-Abstand/Schriftart einschließlich Zeilenhöhe haben, die der Größe von Dropdowns/Eingabefeldern entspricht?

1 „Gefällt mir“

Ich denke, wir arbeiten auf einen Zustand hin, in dem die Dinge standardisierter sind und dies möglich werden könnte, aber die Zeilenhöhe kann je nach Schriftart variieren … daher könnte alles, was wir standardmäßig tun, zu inkonsistenten Höhen führen, sobald ein Theme zu einer anderen Schriftart wechselt.

Der Nullbreiten-Leerzeichen stellt sicher, dass auch bei Änderungen der Zeilenhöhe und der Schriftart Schaltflächen ohne Text ähnliche Verhaltensweisen wie Schaltflächen mit Text aufweisen (mit anderen Worten, die Zeilenhöhe des Nullbreiten-Zeichens beeinflusst die Schaltflächenhöhe genauso wie Schaltflächen mit Text).

3 „Gefällt mir“

Würde eine einheitliche Schriftart über die Elemente hinweg nicht die gleiche Zeilenhöhe verwenden und somit unterschiedliche Zeilenhöhen der Schriftarten verhindern?

1 „Gefällt mir“

Nein, da Buttons ohne Text keine von der Zeilenhöhe beeinflusste Höhe haben, Buttons mit Text jedoch schon, was zu Inkonsistenzen zwischen Buttons mit und ohne Text führt.

Könnte die Höhe des Icons nicht an die Zeilenhöhe der Schriftart gebunden sein? Ich stelle mir eine @function vor, die die Schriftartdetails/Token aufnimmt und die Zeilenhöhe auf die Höhe des Icons anwendet.

1 „Gefällt mir“

Das. Die CSS lh-Einheit wird in modernen Browsern gut unterstützt, sodass die aktuelle Zeilenhöhe auf ein Element angewendet werden kann, ist jetzt ziemlich einfach.

Aber natürlich kenne ich die Komplexität von Änderungen, ohne bestehende Themes zu beschädigen, nicht.

3 „Gefällt mir“