Foundation-sites: $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 https://github.com/zurb/foundation-sites/issues/8447

[g12n]

The conditinal had been intorduced in this commit https://github.com/zurb/foundation-sites/commit/5de0264d02d3ba7b1d24da93d6b86a5531109988 by @gakimball on on 13 Jan.

It seems to have collided with this commit https://github.com/zurb/foundation-sites/commit/3cda91d65f3b6a546ce64d08b17b2a211a40d79a 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.