UI: placement of icons inside a button

[hdpero]

I'm not sure if this is defined by style guide and/or designs of SS4 UI, but there are cases (here I'll show one of it, because I can't remember where I saw other occurrences - if I found it I'll definitively describe them) where I found out that icons show on right side of button doesn't have correct margin between it and title.

Like shown on example, when using Elemental Virtual module

icon is on right side of buttons title , and that is caused because of specificity issue and because that button has inside himself <span class="btn__title">Link Existing</span> , and in that way it applies this CSS:

.cms .grid-field .add-existing-autocompleter span {
    float: left;
    display: inline-block;
    vertical-align: top;
}

If we give a little bit more specific selector (that triggers only direct children of its parent .add-existing-autocompleter) like:

.cms .grid-field .add-existing-autocompleter > span {
     ...
}

than this particular issue is resolved (under assumption that all button icons are placed on left side).

Affected versions

All SilverStripe 4 releases , in all browsers

Question: Are button icon is always placed in every situations on left side?

Edit: I'm happy to make a PR if my logic is sound.

[robbieaverill]

cc @clarkepaul

[clarkepaul]

We haven't done any designs specifically with SS4 in mind for this yet, but I can say that we would place the icon on the left as per other actions in the CMS. In a perfect world we would follow the bootstrap conventions for structuring the HTML and reuse of CSS, but that might be too much work?
As per https://getbootstrap.com/docs/4.1/components/input-group/#button-addons

I think if you made minor changes to swap the icon and text with the appropriate spacing between them, it would still be a worthy contribution (even without the bootstrap conventions).

[hdpero]

In a perfect world we would follow the bootstrap conventions for structuring the HTML and reuse of CSS, but that might be too much work?

Yeah, that is a lot of work, especially because HTML / CSS syntax is not DRY and could be much more improved.

I think if you made minor changes to swap the icon and text with the appropriate spacing between them, it would still be a worthy contribution (even without the bootstrap conventions).

My thought exactly. 👍