💡 Hinweis: Ausrichtung von Kol-Button mit Icon

[cbraehmig]

Beschreibung:

Werden mehrere Buttons in einer Reihe abgebildet, und mindestens eines der Buttons beinhaltet ein Icon (Standard oder Linksplatziert), dann werden die restlichen Buttons aus derselben Reihe um einige Pixel nach unten gedrückt (siehe zweite Reihe des nachfolgenden Bildes):

Reproduktionsbeispiel

https://stackblitz.com/edit/vitejs-vite-4zkq1w?file=src%2FApp.tsx

[deleonio]

Gehen wir nach @cbraehmig.

[sdvg]

Die Baseline wird vom ersten Element im Button definiert, in diesem Fall vom Icon.

[sdvg]

Ich würde erwägen, einfach mit dem Problem zu leben und bei inline-block Elemente bei Bedarf vertical-align händisch zu setzen.

Ich lege trotzdem einmal einen PR mit einem etwas hacky Workaround an. Vielleicht hat ja auch jemand eine bessere Lösung parat.
(Bisher nur gegen develop, 1.7 würde ich nach dem entsprechenden Feedback anlegen.)

[deleonio]

@sdvg - wenn nichts gegen Deine hacky Lösung spricht - funktioniert diese aber recht gut.

Spricht sonst noch etwas dagegen - Du würdest ja erwägen, es von außen handle zu müssen.

[sdvg]

@deleonio Der Gedanke war, dass die Lösung nicht unbedingt notwendig ist. Buttons auf der Baseline platzieren zu müssen scheinen mir ein seltener Fall zu sein und man kann das vertical-align immer selber definieren wo notwendig. Oder eben mit Flex oder Grid arbeiten.

Aber der Workaround scheint mir tatsächlich gut zu funktionieren und ich sehe keine Probleme damit, ihn so umzusetzen.