Issue #7557 Apply correct styling to hollow button group

Added logic to test for a hollow property within the button-fill variable. If it is present, applies the correct hollow styling to the buttons, even if there is a wrapping color class such as secondary or primary. Also fixes the transparent border being applied to non-stacked and stacked button groups.

diff --git a/scss/components/_button-group.scss b/scss/components/_button-group.scss
index 994b992bd6a5a5367404a3238e39616d6ffb79d3..bb9863b35600cab862694de6ca895027c3a4e651 100644 (file)
--- a/scss/components/_button-group.scss
+++ b/scss/components/_button-group.scss
@@ -66,7 +66,10 @@ $buttongroup-expand-max: 6 !default;
 ) {
   #{$selector} {
     width: 100%;
-    border-#{$global-right}: 0;
+
+    &:not(:last-child) {
+      border-#{$global-right}: $buttongroup-spacing solid;
+    }
   }
 }
 
@@ -96,8 +99,16 @@ $buttongroup-expand-max: 6 !default;
 
     // Colors
     @each $name, $color in $foundation-colors {
-      &.#{$name} #{$buttongroup-child-selector} {
-        @include button-style($color, auto, auto);
+      @if $button-fill != hollow {
+        &.#{$name} #{$buttongroup-child-selector} {
+          @include button-style($color, auto, auto);
+        }
+      }
+      @else {
+        &.#{$name} #{$buttongroup-child-selector} {
+          @include button-hollow;
+          @include button-hollow-style($color);
+        }
       }
     }