[Buttons] Wrapping of buttons inside a group

[AllanJard]

This request stems from a bug report in Semantic UI's repo.

Feature Request

I've noticed that when using button groups inside a grid cell, if there are enough buttons (or enough text in them), rather than wrapping to the next line, they will overflow adjoining cells.

Example

The effect of this with can be seen with Fomantic UI in this JSFiddle: https://jsfiddle.net/36x2csbt/ .

Screenshot (if possible)

Possible solution

In the can of "normal" buttons the solution is simply to use:

.ui.buttons {
  flex-wrap: wrap;
}

Example: https://jsfiddle.net/36x2csbt/1/

However, for basic buttons, I don't have quite such a simple solution. basic buttons use an rgba border, and the top / bottom border comes from the container. So wrapping the cells means we need a top / bottom border in order to separate them which complicates the CSS a bit:

.ui.buttons {
  flex-wrap: wrap;
}

.ui.basic.buttons {
  border-bottom: none;
}

.ui.basic.buttons .ui.button {
  border-bottom: 1px solid rgba(34,36,38,.15);
  margin-bottom: -1px;
}

.ui.basic.buttons .ui.button:hover {
  background: transparent !important;
}

But it does appear to be fairly effective: https://jsfiddle.net/36x2csbt/3/ .

[lubber-de]

Implemented by #2217 😊 by new wrapping variant
See your adjusted jsfiddle here https://jsfiddle.net/lubber/p1gxwqv5/2/

Also works with basic just fine now

[AllanJard]

Brilliant - thank you :)