Fix $buttongroup-spacing

[andycochran]

This PR fixes some issues with button margins.

• closes [Button Group] Stacked  #8586 (.stacked was using borders for $buttongroup-spacing)
• closes [Button Group] margin-bottom #8575 (prevent buttons groups w/ multiple lines being flush against each other)
• appropriately uses rtl/ltr for $buttongroup-spacing
• simplifies the styles

[kball]

I love how much cleaner this ends up being. @brettsmason @JeremyEnglert can one of you try this out and verify it works as described?

[brettsmason]

@andycochran I've had a look at this. The flex grid version works fine from what I can see. However on the expanded buttons the last item is dropping down a line (this seems to be the case on the current docs too).

[andycochran]

@brettsmason I can't seem to replicate the last item wrapping to the next line. Is this happening in a specific browser?

[brettsmason]

@andycochran It was in the latest version of Chrome on Windows 10. I've left the office for the day now so I'll confirm in the morning (I setup some visual tests to confirm everything was OK).

[brettsmason]

@andycochran Sorry it took a while to get back to you. I've just pulled down this again and checked at work, the last item is still dropping down. This happens in Chrome and in Edge. See below (first is this PR, 2nd is live docs).

I haven't had time to see why this is yet, but I'll take another look when I'm home.

[andycochran]

@brettsmason Boo. I bet this is a sub-pixel rounding bug. The calc() on the button width is probably rounding up a pixel. Any ideas?

[brettsmason]

I'll try and have a look over your code tonight if I get time and see if I can think of a solution.

[andycochran]

@brettsmason Maybe negative margin on the last child?

:last-child {
  margin-#{$global-right}: $buttongroup-spacing*-1;
}

[brettsmason]

@andycochran I think I've found the issue finally. Line 83 has this:
@if #{$buttongroup-spacing} == '0' { it should be @if $buttongroup-spacing == '0' {.
Changing the spacing value allowed me to notice the problem.

Take a look, I think thats whats causing the issue anyway...

[andycochran]

@brettsmason We actually don't need that @if. Could you see if this simplified logic helps?

      @for $i from 2 through $buttongroup-expand-max {
        &:first-child:nth-last-child(#{$i}) {
          &, &:first-child:nth-last-child(#{$i}) ~ #{$selector} {
            display: inline-block;
            width: calc(#{percentage(1 / $i)} - #{$buttongroup-spacing});
            margin-#{$global-right}: $buttongroup-spacing;
            &:last-child {
              margin-#{$global-right}: $buttongroup-spacing * -$buttongroup-expand-max;
            }
          }
        }
      }

[brettsmason]

@andycochran I've tested that and it works perfectly. I tried up to 6 buttons with lots of spacing configurations in different browsers and all worked as it should. If you can update the PR and I'll merge it.

Good job!

[andycochran]

@brettsmason Should be good to go.

[brettsmason]

@andycochran great - I've pulled it down to check and all works perfectly.
Looks good to merge!

[DaSchTour]

I think this is the reason for #8780