Page MenuHomePhabricator

Natural space between icon and button text is lost in MinervaNeue
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

What happens?:

The space between the languages button's icon and text is missing:

image.png (96×346 px, 6 KB)

What should have happened instead?:

There should be a natural space between the icon and text. This works in the Vector skin:

image.png (98×306 px, 6 KB)

Software version (skip for WMF-hosted wikis like Wikipedia): MinervaNeue skin

This is happening because Minerva contains the following styles in an attempt to resolve this issue around vertical alignment:

.cdx-button {
    display:inline-flex;
    align-items:center;
    justify-content:center
}

Event Timeline

Restricted Application added subscribers: Masumrezarock100, Aklapper. · View Herald Transcript

Change 994200 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] [proof of concept] buttons: Use inline-flex for content

https://gerrit.wikimedia.org/r/994200

One solution here would be to incorporate the flexbox styles current in Minerva into the Button component itself (actually the button.less mixin, and add gap: @spacing-25 to mimic the natural space between inline items. We didn't do this initially because, since any content can appear in the Button's slot, we didn't want to include too many opinionated styles lest we unintentionally mess up some variation of content inside a button.

That said, using gap is a lot less risky than margin, because it does what we want it to do in most or all circumstances - adds space between flex items. I've created a proof-of-concept patch to demonstrate what adding these styles would do to all of our button components.

CCiufo-WMF triaged this task as Medium priority.Mon, Feb 5, 7:18 PM
CCiufo-WMF set the point value for this task to 3.

Change 994200 merged by jenkins-bot:

[design/codex@main] buttons: Use `inline-flex` for content

https://gerrit.wikimedia.org/r/994200

Change 1005171 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] Update Codex from v1.3.2 to v1.3.3

https://gerrit.wikimedia.org/r/1005171

Change 1005171 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.3.2 to v1.3.3

https://gerrit.wikimedia.org/r/1005171