search

silverstripe / silverstripe-admin

Silverstripe Admin Component
BSD 3-Clause "New" or "Revised" License
25 stars 94 forks source link

UI: placement of icons inside a button #596

Open hdpero opened 6 years ago

hdpero commented 6 years ago

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 button-icon-right-side 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 commented 6 years ago

cc @clarkepaul

clarkepaul commented 6 years ago

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 commented 6 years ago

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. 👍