Fomantic-ui: [label] ribbon basic label had wrong calculated position

[dutrieux]

Description

When a basic ribbon label was used there were slightly mispositioned making it overlap the border

Screenshoot

Actual result

Expected result

Testcase

https://jsfiddle.net/dutrieux/h5oapxfk/9/

Fix

I propose to remove the border of the basic label and use instead a box-shadow: inset, like that all the label will have the same height and fix the wrong calculated position :
https://jsfiddle.net/dutrieux/h5oapxfk/7/
I can do a PR if you want !

Version

2.7.4

[dutrieux]

Wouah my first "good first issue" !!!! 👍

[lubber-de]

@dutrieux While your suggestion seems to work in the specific case, the reason for keep using border is pointing basic label. Using your suggested change will break them (not only by color, but most important for pointer positioning)
See https://jsfiddle.net/j4h6u5fq/

I think the correct fix is to handle basic ribbon label by inventing additional variables to increase the margin by 0.1rem like:

@basicRibbonMargin: 1.1rem;
@basicRibbonOffset: e(%("calc(%d - %d)", -@basicRibbonMargin, @ribbonTriangleSize));
@basicRibbonDistance: e(%("calc(%d + %d)", @basicRibbonMargin, @ribbonTriangleSize));
@basicRightRibbonOffset: e(%("calc(100%% + %d + %d)", @basicRibbonMargin, @ribbonTriangleSize));

See the result here https://jsfiddle.net/j4h6u5fq/1/

[dutrieux]

Ok my solve is not correct, I let's you do the PR but with your fix the position of the delta is not correct :

[lubber-de]

Oh, yes, good (eagle eye) catch 👍🏻
Anyway: I really would like you to prepare a PR. This way you will come across other parts of the framework which probably have to be considered / tested as well (like all the colors or pointer positioning when changing to box shadow)
You will learn a lot about the framework structure and dependencies then. And by doing so, you hopefully get motivated to help us out in even more cases 😊

[dutrieux]

Okay, no problem, I'll do it tonight.

[dutrieux]

Not to easy to have a perfect alignment on Chrome, Firefox and Egde at same time ... I'm trying to find the best solution...

[globophobe]

Edit: Oops, n/m below breaks "ui ribbon label".

I don't know about the delta, but how about reducing border-width from 1.2em to 1.1em?

.ui.ribbon.label:after {
  border-width: 0 1.1em 1.1em 0;
}

.ui[class*="right ribbon"].label:after {
  border-width: 1.1em 1.1em 0 0;
}

https://jsfiddle.net/dqwhftap/

Before:

After:

[dutrieux]

I bow down 👍

[globophobe]

Because of the border, it seems all "basic label" variants are larger by basicBorderWidth.

1. ui basic label
2. ui basic pointing label
3. ui basic tag label
4. ui basic labels
5. ui basic ribbon label (Fixed by https://github.com/fomantic/Fomantic-UI/pull/715)

If this is a problem, maybe their padding could be adjusted as was done for "basic ribbon label".

I'm a little busy the next week or so, @dutrieux can you?

[dutrieux]

Ok I try to make a PR to solve that !