fix(dropdown): fix menu item text breaking issue

[ko2in]

Description

When the menu item contains too long text, the text doesn't break into the new line when there's no enough space to display in
single line and the text overflows the container.

Even though the text can be forced to break using break-word: break-all, it doesn't look good enough when there is an image representing next to the menu text.

This PR fixes the menu item text breaking problem and also changes the container to flexbox to render the image, text, and the dropdown icon as flexbox items to align better.

Since the menu item has changed to the flexbox model and the dropdown icon and direct children elements of a menu item are appearing as flex items and the float property has no effect on flexbox, and so the float rules and variables for the dropdown icon are removed by this PR.

Testcase

Bug: https://jsfiddle.net/ko2in/3sw01eLz/1/

Fixed: https://jsfiddle.net/ko2in/3sw01eLz/9/

Screenshot

Before:

After:

Closes

#1820

[lubber-de]

This unfortunately breaks 2 usecases i found

• Floating Content https://fomantic-ui.com/modules/dropdown.html#floated-content
• Short menu items (dropdown icon for submenu not to the very right anymore if other menu items are longer)

Testcase

Normal

https://jsfiddle.net/lubber/9yu8wr3v/12/

Your PR

https://jsfiddle.net/lubber/9yu8wr3v/14/

Screenshots

Normal

Your PR

[ko2in]

@lubber-de I've fixed the floated icon issues. Please review again. I've updated the fiddle link (New link: https://jsfiddle.net/ko2in/3sw01eLz/7/) in my description.

There is also a left floated icon which has the right margin 1em, but a default icon without left floated has the right margin .78571429rem. I'm not sure why do they have two different values for margin. I think the left floated variant is not required since it's basically the default style.

[ko2in]

@lubber-de I found a minor issue with icon alignment and description left-margin and fixed it. Here's the fiddle link (https://jsfiddle.net/ko2in/3sw01eLz/9/). You can compare with the previous version (https://jsfiddle.net/ko2in/3sw01eLz/7/).

[lubber-de]

Wow, this looks much better, i am still testing, but it seems you also fixed #1071 by 99%. 👍
Look at this jsfiddle https://jsfiddle.net/lubber/af71eLmr/5/
When running in IE11 / Edge 12 or Safari 12.1/13.1 the submenu arrow for "Submenu 2" is still misaligned while "Submenu 3" is fine now by your PR!)

Do you think you can fix this as well? (Don't worry, if not, i will still approve this PR, as it is much better overall with the flex settings and fixes the original issue and keeps everything else intact as before!)
We can also address this separately if ou dont want to touch this PR anymore, while it's stable

For local IE11 testing here is a standalone file
https://gist.github.com/lubber-de/2a8229f1eea16a9f6a81ed8841385d66

[lubber-de]

Basically LGTM 👍
Very good job!
Please change the little specifity as shown and remove the !important and use a doubled .ui instead (for both right floated selectors)

[lubber-de]

Please remove the !important and add another .ui to the selectors instead to increase specificity

[ko2in]

@lubber-de Please hold for the PR for a moment. I also find some problems with the upward direction menu. I'll look into it and also your issue above and update the PR.

[lubber-de]

@ko2in Did you find a solution for your found upward directon issue? (i didnt came across that, so maybe you can share a jsfiddle to show what's wrong with your PR?)

You dont necessarily have to also fix the arrow icon i mentioned here because that's basicaly not related to your PR / issue

[ko2in]

@lubber-de I did find out the solution for the upward direction menu. But, changing to the flexbox model reflects also some parts which I'm trying to fix. The vertical sidebar menu and accordion inside the menu are also affected by this change. I've fixed almost every issue I've found.

The icon issue you mentioned here doesn't relate to my PR. But, the icon positions are also affected too especially the left and right position and their margins which I'm trying to fix now. The margin inside the flexbox is really a challenge though.

I'll submit the updated PR this weekend if I didn't find anything else with my changes.

[lubber-de]

@ko2in If you still have issues to solve, please convert this PR into Draft

[ko2in]

@lubber-de I've fixed the conflicts with the base branch and merge my PR.

I've tested with all menu examples and various menu instances. Here's my fiddle.

Here is the summary about some additional fixes from my last commit.

Remove icon alignment

The remove icon wasn't aligned in the best position as it was shifted above comparing the text and dropdown icon.

Before

After

Sub-menu position in floating menu item

The sub-menu of dropdown item was not positioned correctly when the dropdown has floating variant. It was overlapping it's menu item.

Before

After

Incorrect rounded corners and shadows of simple dropdown with upward direction

The rounded corners of upward simple dropdown menu should be top-left and top-right and the shadow should be displayed above the menu. That is fixed in this commit.

Before

After

[lubber-de]

Please revert the dist folder changes. They should not be part of the PR

[ko2in]

Please revert the dist folder changes. They should not be part of the PR

These might have received when merging develop branch into my branch. 🤔

[lubber-de]

Please revert the dist folder changes. They should not be part of the PR

These might have received when merging develop branch into my branch. 🤔

Try to rebase, because if the develop branch would have been merged there would not be any changes

[ko2in]

Please revert the dist folder changes. They should not be part of the PR

These might have received when merging develop branch into my branch. thinking

Try to rebase, because if the develop branch would have been merged there would not be any changes

@lubber-de I've done rebasing, but I am not able to push to this branch anymore. So, I created another PR. I'm closing this PR.