[Label] Right icon should have correct margin when placed after text

[exoego]

Description

This PR is based on Semantic-Org/Semantic-UI#6210 by @w96k.

• Add icon label variation that allows to put an icon without text.
• Add right icon label variation that allows to put an icon in the right side of label with correct margin.
• Add left icon label variation to let delete icon and close icon be placed in left with correct margin for backward-compatibility
• Add hoverable class that makes icon to be used for action, as same style as current close/delete icon have.

Testcase

Before

https://jsfiddle.net/oLc3pqeu/

After

https://jsfiddle.net/y4L7cadb/

Screenshot (when possible)

Normal Label

Ribbon Label

Closes

#222
Semantic-Org/Semantic-UI#6210
Semantic-Org/Semantic-UI#5328
Semantic-Org/Semantic-UI#5446
Semantic-Org/Semantic-UI#5619
Semantic-Org/Semantic-UI#6210

[lubber-de]

• Please rebase your branch to develop
• The new invented code ui icon label and ui right icon label looks fine to me 🙂
• Don't remove the delete and close settings (this will also have impact in multiple selection dropdown), just keep them in addition to your new invented hoverable class to avoid a breaking change
• @deleteMargin has a different size than @iconDistance at least in the default theme: Keep this separated to avoid a breaking change

So i propose to change the PR to the following. Then it's fully backward compatible and not a breaking change anymore. Of course users have to add right icon to their labels where they want to have a right positioned icon, but they don't need to do this for any existing close or delete icons, so it's more an enhancement then

/* Removable and Hoverable label */
.ui.label > .close.icon,
.ui.label > .delete.icon,
.ui.label > .hoverable.icon {
  cursor: pointer;
  font-size: @deleteSize;
  opacity: @deleteOpacity;
  transition: @deleteTransition;
}

/* Backward compatible positioning */
.ui.label:not(.icon) > .close.icon,
.ui.label:not(.icon) > .delete.icon {
  margin: 0 0 0 @deleteMargin;
}

.ui.label > .delete.icon:hover,
.ui.label > .hoverable.icon:hover {
  opacity: 1;
}

/* Label for only an icon */
.ui.icon.label > .icon {
  margin: 0 auto;
}

/* Right Side Icon */
.ui.right.icon.label > .icon {
  margin: 0 0 0 @iconDistance;
}

See here:
https://jsfiddle.net/6Lmh2k9p/

[exoego]

@lubber-de
Thanks for backward-compatibility suggestion!!

However, close/delete icon will have incorrect margin when placed before text like

because of margin defined in

/* Backward compatible positioning */
.ui.label:not(.icon) > .close.icon,
.ui.label:not(.icon) > .delete.icon {
  margin: 0 0 0 @deleteMargin;
}

Do you have idea to fix this and keep backward-compatibility all together?

BTW, there is times icon, as an alias of delete/close icon. So there is a workaround if users want to use x on left.

[lubber-de]

@exoego Having a close/delete to the left of a label was never proposed part of the framework, so although this is a valid visual point, it's not a breaking change, because old used code (if anywhere used by somebody anyway) like

<div class="ui label">
    <i class="delete icon"></i>
  Delete me
</div>

will work/look (as ugly) as before

But it is a valid point. So to make this also work , what about inventing an explicit .ui.left.icon.label (for users who definately want to have those icons also displayed to the left)
adding it accordingly in label.less here:

/* Icon */
.ui.left.icon.label > .icon,
.ui.label > .icon {
  width: auto;
  margin: 0 @iconDistance 0 0;
}

Also in Addition:
Respect the different @deleteMargin, if those icons are used to the left

.ui.label.left.icon > .close.icon,
.ui.label.left.icon > .delete.icon {
  margin: 0 @deleteMargin 0 0;
}

See here: https://jsfiddle.net/6Lmh2k9p/1/

When doing FUI 3.0, we may take a look at it again to simplify the logic (at least getting rid of the separate @deleteMargin or have an additional class for it)

[lubber-de]

What do you think about my comment regarding the support of having close/delete to the left above?

[exoego]

I agree to keep backward compatibility as much as possible during v2.x.

Updated code, PR description, and example in docs(fomantic/Fomantic-UI-Docs#72).

[lubber-de]

LGTM now 🙂 Thanks for your patience

[exoego]

Removed hoverable variation to keep this PR scope small.

Initially I thought hoverable is required to keep delete/close icon style for backward-compatiblity and broaden the style to other icon.
However, it is no longer required for backward-compatibility.

I think that label module should focus on "A label displays content classification" as stated in the docs.
hoverable or such dynamic behavior is good to be implemented in button module.

[lubber-de]

LGTM

[y0hami]

LGTM

[ColinFrick]

LGTM