Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Buttons in an inline button group doesn't align text correctly

See original GitHub issue

Which package is this issue related to?

ffe-buttons

Describe your issue (screenshots welcome!)

When wrapping buttons in an inline button group styled anchor tags doesn’t get vertically aligned text. The problem is only visible if some other button in the button group has text which is wrapped to two lines. The first and the last buttons are actually anchor tags. See supplied HTML.

I don’t know if the same is true for other buttons than secondary, but I would assume it’s at least true for all ffe-buttons.

Note that this issue specifically applies to inline button groups. Non-inline groups works as intended.

What is the expected behavior?

Text should be aligned the same whether it’s an anchor or a button that’s styled…

What is the actual behavior?

…but it’s not 😛

Steps to reproduce

<div class="ffe-button-group ffe-button-group--inline">
    <a class="ffe-button ffe-button--secondary ffe-button--condensed" href="/some-url">
        <span class="ffe-button__label">Endre</span>
        <div aria-hidden="true" aria-label="Vennligst vent" class="ffe-button__spinner"></div>
    </a>
    <button class="ffe-button ffe-button--secondary ffe-button--condensed">
        <span class="ffe-button__label">Stopp</span>
        <div aria-hidden="true" aria-label="Vennligst vent" class="ffe-button__spinner"></div>
    </button>
    <button class="ffe-button ffe-button--secondary ffe-button--condensed">
        <span class="ffe-button__label">Slett</span>
        <div aria-hidden="true" aria-label="Vennligst vent" class="ffe-button__spinner"></div>
    </button>
    <a class="ffe-button ffe-button--secondary ffe-button--condensed" href="/some-other-url">
        <span class="ffe-button__label">Flytt til aksjesparekonto</span>
        <div aria-hidden="true" aria-label="Vennligst vent" class="ffe-button__spinner"></div>
    </a>
</div>