From: RafiBomb Date: Thu, 2 Feb 2017 23:08:00 +0000 (-0800) Subject: fixes flebox button group bug and adds tests X-Git-Tag: v6.6.2^2~34^2~2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=22f33f072dcbbd33d2dfc03d476a4fc00acafeb6;p=thirdparty%2Ffoundation%2Ffoundation-sites.git fixes flebox button group bug and adds tests --- diff --git a/scss/components/_button-group.scss b/scss/components/_button-group.scss index c1404b5d5..0ebcedeb5 100644 --- a/scss/components/_button-group.scss +++ b/scss/components/_button-group.scss @@ -36,8 +36,13 @@ $buttongroup-radius-on-each: true !default; @if $global-flexbox { display: flex; - flex-wrap: nowrap; + flex-wrap: wrap; align-items: stretch; + flex-grow: 1; + &::before, + &::after { + display: none; + } } @else { font-size: 0; diff --git a/test/visual/flex-grid/button-group.html b/test/visual/flex-grid/button-group.html new file mode 100644 index 000000000..f32d40f7e --- /dev/null +++ b/test/visual/flex-grid/button-group.html @@ -0,0 +1,152 @@ + + + + + + + + + + + + + + +

Flex Button Group

+ +
+ +

This button-group wrapped in the grid should be left aligned and auto button size

+ +
+
+ One + Two + Three +
+
+ +

Should be same as:

+ + +
+ One + Two + Three +
+ +
+ +

This button-group wrapped in the grid should be right aligned and auto button size

+ +
+
+ One + Two + Three +
+
+ +

Should be same as:

+ + +
+ One + Two + Three +
+ +
+ +

This button-group wrapped in the grid should be expanded

+ +
+
+ One + Two + Three +
+
+ +

Should be same as:

+ + +
+ One + Two + Three +
+ +
+ +

This button-group wrapped in the grid should be align-justify

+ +
+
+ One + Two + Three +
+
+ +

Should be same as:

+ +
+ One + Two + Three +
+ +
+ +

This button-group wrapped in the grid should be align-spaced

+ +
+
+ One + Two + Three +
+
+ +

Should be same as:

+ +
+ One + Two + Three +
+ +
+ +

This button-group wrapped in the grid should be align-center

+ +
+
+ One + Two + Three +
+
+ +

Should be same as:

+ +
+ One + Two + Three +
+ + + + + +