feat(menu): support descriptions in vertical menu

[prudho]

trafficstars

Description

This PR implements a description in the menu items, which can be right floated or under a text.

Under description can also be displayed in not vertical menu, but right floated no as it looks bloated right now (see screenshots).

Screenshot

Inverted works too:

Description under text works as intended, but not the right floated one. Help is welcome 😃

Closes

#2232

[lubber-de]

@prudho What's the status of this PR? Regarding the issue of a description inside a non vertical item: It seems to be solved when the description node is simply declared after the text node 🙂 , no need to adjust your PR (missing related docs should provide an example to make this clear)

https://jsfiddle.net/lubber/8o5x3syq/

[lubber-de]

If we yould make this the standard config (first text node, then description) also for vertical item, you just need to change "flex-direction" to "column" instead of "column-reverse". Would be more consistent

.ui.menu > .item.vertical {
  display: flex;
  flex-direction: column;
}

See https://jsfiddle.net/lubber/8o5x3syq/2/

[lubber-de]

Ok i think you made it the same way it is done in dropdown menu items (first description, then text). This could be solvable there as well by setting display: flex; to dropdown menu item....BUT that would be a breaking change and people have to adjust the dropdown code, not worth the hassle So we might keep the PR as it is and provide a docs info as suggested in my previous comment

[ko2in]

I suggest to hold this PR for a while. I've already made a change for vertical menu as a flex item in my current branch based on my last PR #1838.

I'm still in progress of fixing merge conflicts since there were too many commits ahead of my PR.