$buttongroup-spacing implemented differently for $global-flexbox true and false

[g12n]

The spacing within a .buttongroup is implemented differently, depending weather the variable $global-flexbox is set false or true.
In a flexbox context, the spacing is implemented by a margin-right
In a non-flexbox context the spacing is implemented by a white border-right

The border-method causes funky results, when $buttongroup-spacing ramped up to values bigger, than the default button-border-width

How can we reproduce this bug?

1. Set the value of $buttongroup-spacing to a high value. e.g. 10px;
2. Change the value of $global-flexbox from false to true and vice versa.
3. Compare the results

What happened?
The Border-Method the color of the top border of the button to leak into the spacing:

The problem of the border-method becomes most visible, when placing a button-group on a colored element, like a top bar. The spacing is running in the body-color:

Source of this Problem

This difference is caused by this code within the button group. Starting at line 51:

     @if $global-flexbox {
        margin-right: $buttongroup-spacing;
      }
      @else {
        border-#{$global-right}: $buttongroup-spacing solid $body-background;
      }    

** Suggestion **

If the border-method is not absolutely necessary for browser compatibility, i suggest to remove the conditional completely and use for both cases the margin-method.

---

This Issue is related to the discussion in issue #8447

[g12n]

The conditinal had been intorduced in this commit 5de0264 by @gakimball on on 13 Jan.

It seems to have collided with this commit 3cda91d by @andycochran on 20 Jan, where he already reworked button groups to not use borders.

[andycochran]

Hmm… Yeah, I fixed this (not for flexbox tho). Button Groups should not use borders for spacing.

[g12n]

It actually works for flexbox. Only the non-flex version still contains the border.

Looks to me like you guys worked on the same code at the same time, and something went boing when the commits merged got merged.

If using margins is the expected behavior, i guess this one should fix it: https://github.com/g12n/foundation-sites/commit/c30a07cea546139c4f0e4bdf1c4f3938fde706d9

[andycochran]

@g12n That PR should fix it.