feat(ion-item-sliding): style icons on top of text in an option button

[manucorporat]

closes #5352

This is the magic css:

ion-item-sliding:not([horizontal]) {
  .button.button-icon-left {
    font-size: 14px;

    .button-inner {
      flex-direction: column;
    }
    ion-icon {
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-bottom: 0.3em;
    }
  }
}

It is very complete and "intelligent":

• If ion-item-sliding has a "horizontal" attribute, we displaying the options horizontally (like it is done currently)
• If button does not have an icon, it doesn't apply the vertical alignment.
• If button only has only an icon, it doesn't apply the vertical alignment.

[adamdbradley]

Looks awesome! So the default would be to put the icons on top of the text, correct?

I think the horizontal attribute could use a different name to be more descriptive, and have the attribute come down an element instead of being on the ion-item-sliding. How about icon-left on ion-item-options?

    <ion-item-sliding #item>
      <ion-item>
        <ion-icon name="mail" item-left></ion-icon>
        One Line w/ Icon, div only text
      </ion-item>
      <ion-item-options icon-left>
        <button primary (click)="archive(item)">
          <ion-icon name="archive"></ion-icon>Archive
        </button>
      </ion-item-options>
    </ion-item-sliding>

What do you think @brandyscarney? How can we make it easy to understand what the attribute does, and lower the selector specificity?

[manucorporat]

@adamdbradley @brandyscarney I agree, "horizontal" is a bad name. #5352 (comment)

So the default would be to put the icons on top of the text, correct?

exactly! but it has to be the default option for .button.button-icon-left otherwise it looks ugly.
Text or icon only, should not use the "icon on the top" css.

How about icon-left on ion-item-options?

I think this attribute is like no-lines of ion-item and ion-list, it can be used one by one <ion-item no-lines> or in the whole list <ion-list no-lines>.
I think this is exactly the same, the most common use case would be "always on top", or "always of the left".

I think it is a good idea to provide the selector in ion-item-options but I think it is even more useful, less verbose and less error-prone to have the attribute on the ion-item-sliding element.

Just my two cents.

[brandyscarney]

Awesome work! The icons on top should definitely be the default. 👍 I agree that the attribute should go on the ion-item-options because it is specific to the option buttons, not the item itself. Seeing <ion-item-sliding icon-left> may confuse people into thinking that if they put an icon inside of it that it would go on the left of the inner ion-item when really it would be completely ignored.

I say we go with the icon-left attribute for now on the ion-item-options.

[adamdbradley]

@brandyscarney yeah that sounds like a plan.

@manucorporat would you be be able to update the PR to use <ion-item-options icon-left>?

[manucorporat]

@brandyscarney @adamdbradley done!