Foundation.mozilla.org: Button visual regressions

[TheoChevalier]

We’re having some visual issues with buttons, which I think are due to https://github.com/mozilla/foundation.mozilla.org/commit/6d9ffd442f14f041c0e4c6f5573d4b8d9e064e2c
@mmmavis any chance we could add this line back, or find a different solution?

Creep-o-meter post-vote screen:

Footer (French), where this used to fit in one line

Footer (Portuguese)

[mmmavis]

@TheoChevalier thanks for filing ticket! We intentionally want long button text to wrap.

Footer, where this used to fit in one line

I'll talk to @sabrinang to see if we want to newsletter sign up button as exception.

Creep-o-meter post-vote screen

What we had before had alignment issue as well

It might be hard to tell but if you look closely, "Facebook" button's right padding is smaller compared to others because this long text doesn't wrap and just continues going in the same line. I haven't checked out the code yet but I'm guessing I might be able to fix this by expanding the container width. Will chat with designers before I do it as I suspect PNI share buttons are violating our style guide.

[mmmavis]

Had a quick check. We might have to alter how the share button group is currently implemented to make sure buttons are always in the same width. Bumping the estimate up to 3.

[Pomax]

For the buttons at least it looks like we'll want to try a white-space: nowrap to see if that solves it? (it looks like it's line-breaking at the whitespace between the icon and label, which we don't want)

[mmmavis]

Yea white-space: nowrap will help get the newsletter signup button to look what we used to have.

PNI share buttons have more issues, some are related to how the share button group was implemented and some are related to the PNI's design and overrides. I have a WIP PR and will chat with @beccaklam to come up with a solution.

[mmmavis]

Talked to @sabrina and we decided to add the nowrap rule back to buttons. This change will be on prod tomorrow.

---

@beccaklam Will need your design input to fix the share button issues. Please see this PR