Add button groups for use in cookie banner

[36degrees]

Add a new button groups object which can be used to group buttons and links together.

Within a button group:

• links are styled to line up visually with the buttons, including being centre-aligned on mobile
• spacing between the buttons and links is handled automatically, including when they wrap across multiple lines

The button group object will then be used to group the 'Accept cookies', 'Reject cookies' and 'View cookies' buttons and links in the cookie banner component.

The button group object uses flexbox and align-items to align the buttons and links along the 'cross axis' – centre-aligning on mobile and aligning rows along the baseline on tablet and above.

align-items is in theory supported in IE11 and above, but our use of autoprefixer means that IE10-compatible flexbox properties are also included, and in testing it works as well in IE10 as it does in IE11.

In browsers that do not support flexbox or align-items the spacing between buttons and links is different (as whitespace between inline blocks is not handled) and they are not aligned along the cross-axis, but the general layout is still applied (see screenshots for IE9, IE8 and iOS 7 for examples).

There's a corresponding PR to add guidance to the Design System here: alphagov/govuk-design-system#1472

Closes #2107

Screenshots

Firefox 84 (macOS)

Safari 14 (macOS)

Chrome 88 (macOS)

Android 11

Edge 87

IE11

IE10

IE10 ('mobile')

IE9

IE8

iOS 7 (Simulated iPhone 5S)

Android 4.4 (Simulated Galaxy S4)

Example of use in the cookie banner

Screen.Recording.2021-01-26.at.09.36.50.mov

[christopherthomasdesign]

Looks good!

The things that stood out to me are:

• left aligning of links on iOS 7 (Simulated iPhone 5S)
• higher baseline of links on IE9 & IE8 (meaning they don't align with the button text)

Those are pretty minor issues tbh and I don't think they'd impact usability much. Are they easily fixable or not?

[36degrees]

Those are pretty minor issues tbh and I don't think they'd impact usability much. Are they easily fixable or not?

Alignment of links on iOS 7 (Simulated iPhone 5S)

In theory this could be an easy fix, but I don't know if we'd want to do it…

Flexbox is only supported on iOS 7 through 8.4 with a -webkit- prefix (https://caniuse.com/flexbox). We use autoprefixer to automatically apply prefixes based on our browserslist which currently includes iOS >= 9 and any browser with > 0.1% marketshare.

If we changed the browserslist to include iOS >= 7 instead autoprefixer would then include the required prefixes to make it display correctly in iOS 7 through 8.4. This would also affect (although hopefully in a positively way) breadcrumbs, start buttons, the footer, input prefixes and suffixes.

For reference, according to https://iosref.com/ios the last iPhone that did not support iOS 9 or above was the iPhone 4 which Apple stopped selling in September 2013.

Stats from visits from iOS to GOV.UK in December:

Major Version	SUM of Users	SUM of Sessions	SUM of Sessions
15 👀	8	19	0.00%
14	20,282,530	43,515,853	81.50%
13	2,633,560	5,639,239	10.56%
12	1,519,371	3,134,580	5.87%
11	113,025	285,591	0.53%
10	203,831	485,339	0.91%
9	120,034	260,733	0.49%
8	4,973	11,973	0.02%
7	4,176	8,780	0.02%
6	1128	2586	0.00%
5	978	2,134	0.00%
4	33	37	0.00%
3	93	241	0.00%
Unknown	35,715	47,012	0.09%
Grand Total	24,919,455	53,394,117	100.00%

If this is something we want to look into further I think we might want to create a separate issue to track this as it affects more than this component.

Diff of changes to package by changing iOS >= 9 to iOS >= 7

diff --git a/package.json b/package.json
index 8b75d4f3..6f7fca5a 100644
--- a/package.json
+++ b/package.json
@@ -90,7 +90,7 @@
     "last 2 Samsung versions",
     "Safari >= 9",
     "ie 8-11",
-    "iOS >= 9"
+    "iOS >= 7"
   ],
   "standard": {
     "globals": [
diff --git a/package/govuk/components/breadcrumbs/_index.scss b/package/govuk/components/breadcrumbs/_index.scss
index 3a4745b4..918e654a 100644
--- a/package/govuk/components/breadcrumbs/_index.scss
+++ b/package/govuk/components/breadcrumbs/_index.scss
@@ -129,6 +129,7 @@
 
       .govuk-breadcrumbs__list {
         display: -webkit-box;
+        display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
       }
diff --git a/package/govuk/components/button/_index.scss b/package/govuk/components/button/_index.scss
index 73cf764d..0ba74b24 100644
--- a/package/govuk/components/button/_index.scss
+++ b/package/govuk/components/button/_index.scss
@@ -239,6 +239,8 @@
 
     display: -webkit-inline-box;
 
+    display: -webkit-inline-flex;
+
     display: -ms-inline-flexbox;
 
     display: inline-flex;
@@ -246,6 +248,8 @@
 
     -webkit-box-pack: center;
 
+    -webkit-justify-content: center;
+
         -ms-flex-pack: center;
 
             justify-content: center;
@@ -258,10 +262,12 @@
       margin-left: govuk-spacing(2);
     }
     vertical-align: middle;
-    -ms-flex-negative: 0;
-        flex-shrink: 0;
-    -ms-flex-item-align: center;
-        align-self: center;
+    -webkit-flex-shrink: 0;
+        -ms-flex-negative: 0;
+            flex-shrink: 0;
+    -webkit-align-self: center;
+        -ms-flex-item-align: center;
+            align-self: center;
   }
 
   @if $govuk-use-legacy-font {
diff --git a/package/govuk/components/footer/_index.scss b/package/govuk/components/footer/_index.scss
index dbb314f7..b0c94772 100644
--- a/package/govuk/components/footer/_index.scss
+++ b/package/govuk/components/footer/_index.scss
@@ -79,16 +79,20 @@
 
   .govuk-footer__meta {
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex; // Support: Flexbox
     margin-right: -$govuk-gutter-half;
     margin-left: -$govuk-gutter-half;
-    -ms-flex-wrap: wrap;
-        flex-wrap: wrap; // Support: Flexbox
+    -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap; // Support: Flexbox
     -webkit-box-align: end;
+    -webkit-align-items: flex-end;
         -ms-flex-align: end;
             align-items: flex-end; // Support: Flexbox
     -webkit-box-pack: center;
+    -webkit-justify-content: center;
         -ms-flex-pack: center;
             justify-content: center; // Support: Flexbox
   }
@@ -101,11 +105,13 @@
 
   .govuk-footer__meta-item--grow {
     -webkit-box-flex: 1;
+    -webkit-flex: 1;
         -ms-flex: 1;
             flex: 1; // Support: Flexbox
     @include govuk-media-query ($until: tablet) {
-      -ms-flex-preferred-size: 320px;
-          flex-basis: 320px; // Support: Flexbox
+      -webkit-flex-basis: 320px;
+          -ms-flex-preferred-size: 320px;
+              flex-basis: 320px; // Support: Flexbox
     }
   }
 
@@ -165,12 +171,14 @@
 
   .govuk-footer__navigation {
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex; // Support: Flexbox
     margin-right: -$govuk-gutter-half;
     margin-left: -$govuk-gutter-half;
-    -ms-flex-wrap: wrap;
-        flex-wrap: wrap; // Support: Flexbox
+    -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap; // Support: Flexbox
   }
 
   .govuk-footer__section {
@@ -181,15 +189,18 @@
     vertical-align: top;
     // Ensure columns take up equal width (typically one-half:one-half)
     -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
         -ms-flex-positive: 1;
             flex-grow: 1; // Support: Flexbox
-    -ms-flex-negative: 1;
-        flex-shrink: 1; // Support: Flexbox
+    -webkit-flex-shrink: 1;
+        -ms-flex-negative: 1;
+            flex-shrink: 1; // Support: Flexbox
     @include govuk-media-query ($until: desktop) {
       // Make sure columns do not drop below 200px in width
       // Will typically result in wrapping, and end up in a single column on smaller screens.
-      -ms-flex-preferred-size: 200px;
-          flex-basis: 200px; // Support: Flexbox
+      -webkit-flex-basis: 200px;
+          -ms-flex-preferred-size: 200px;
+              flex-basis: 200px; // Support: Flexbox
     }
   }
 
@@ -199,6 +210,7 @@
     // To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`.
     .govuk-footer__section:first-child:nth-last-child(2) {
       -webkit-box-flex: 2;
+      -webkit-flex-grow: 2;
           -ms-flex-positive: 2;
               flex-grow: 2; // Support: Flexbox
     }
diff --git a/package/govuk/components/input/_index.scss b/package/govuk/components/input/_index.scss
index 93fe3808..288b3102 100644
--- a/package/govuk/components/input/_index.scss
+++ b/package/govuk/components/input/_index.scss
@@ -95,11 +95,13 @@
 
   .govuk-input__wrapper {
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
 
     .govuk-input {
       -webkit-box-flex: 0;
+      -webkit-flex: 0 1 auto;
           -ms-flex: 0 1 auto;
               flex: 0 1 auto;
     }
@@ -150,6 +152,8 @@
 
     -webkit-box-flex: 0;
 
+    -webkit-flex: 0 0 auto;
+
         -ms-flex: 0 0 auto;
 
             flex: 0 0 auto;
diff --git a/package/govuk/objects/_button-group.scss b/package/govuk/objects/_button-group.scss
index 21c58767..1af99593 100644
--- a/package/govuk/objects/_button-group.scss
+++ b/package/govuk/objects/_button-group.scss
@@ -30,13 +30,16 @@
     // doesn't play nicely with it
     // (https://github.com/w3c/csswg-drafts/issues/3559)
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
         -ms-flex-direction: column;
             flex-direction: column;
     -webkit-box-align: center;
+    -webkit-align-items: center;
         -ms-flex-align: center;
             align-items: center;
 
@@ -70,12 +73,16 @@
 
       -webkit-box-direction: normal;
 
+      -webkit-flex-direction: row;
+
           -ms-flex-direction: row;
 
               flex-direction: row;
-      -ms-flex-wrap: wrap;
-          flex-wrap: wrap;
+      -webkit-flex-wrap: wrap;
+          -ms-flex-wrap: wrap;
+              flex-wrap: wrap;
       -webkit-box-align: baseline;
+      -webkit-align-items: baseline;
           -ms-flex-align: baseline;
               align-items: baseline;
 

Baseline of links in IE8 / IE9

The higher baseline of links on IE9 & IE8 is harder to fix, because those browsers just don't support flexbox at all. We could set the spacing on links within a button group to be the same as buttons, which would make them line up neatly in IE8 and IE9, but that would mean the links would have to have the same 'total height' as buttons which they intentionally don't at the minute.

With different spacing for links and buttons	With consistent spacing for links and buttons

[hannalaakso]

@36degrees This is looking great 🎉 Just left a couple of small comments.

I'll take a look at your comment about iOS7/IE8-9 support.

[hannalaakso]

What does setting the max-width do here?

[36degrees]

IE10 and IE11 have a bug where column flex items set to align-items: center overflow their container – see c98bd68. Setting max-width: 100% stops this from happening.

I split it out as a separate commit so that it would show in a git blame, but could add a comment if we think it warrants it.

[hannalaakso]

Ahh my bad, I missed that. A separate comment might be good so that down the line we could consider removing the rule when we drop support for certain browser combinations.

[hannalaakso]

We could also update could /full-page-examples/confirm-delete to use the new button group.

[36degrees]

Ah great call, thanks 👍

[36degrees]

Done in f85eb47

[hannalaakso]

It might be good to make the bottom margin of links and buttons inside the button group to be consistent with each other, at the moment there's a small difference between them.

We could also consider making the combined bottom margin of the button group to be consistent with govuk-form-group - but that's just a suggestion.

[36degrees]

I think this is probably one for @CharlotteDowns to check, but I think the difference is intentional, based on how we want them to appear on mobile and when they wrap onto multiple lines. On tablet and above, everything should be aligned along the baseline so in theory the vertical margins of links are irrelevant unless they appear on a line by themselves.

The intent is that the combined bottom margin of the group matches the bottom margin on a button – so if there's only a single row of buttons then it should have the exact same spacing as if there was a single button not in a group.

[hannalaakso]

The main reason I mentioned it was that on mobile the button group ends up having a slightly different bottom margin depending on whether the last item is a link or a button.

[CharlotteDowns]

Hey both, we want the link to look equally spaced between the 'visual' bottom of the 'reject' button and the bottom of the banner on mobile view. To follow the 5px baseline grid, I had originally tried to aim for 20px above and 20px below (as I think that was the padding on the banner container, this did mean some odd number margin values to account for the 3px box-shadow). I guess the aim is that the vertical spacing can all be divisible by 5px on all size viewports and that the text is on the same vertical line on sizes greater than mobile.

[hannalaakso]

@36degrees Re: alignment of links on iOS 7, I would be tempted to leave it as it is since it's outside our support matrix and the user experience is still functional. If there was a blocker to user completing an action then we should consider fixing it. Interesting investigation into the potential fix though 👍 Similarly with IE8/9, the user experience is still functional.

[hannalaakso]

Thanks for addressing my comments @36degrees!

[christopherthomasdesign]

Just to reply to Ollie's comment – agree with what you proposed:

• if alignment of links on iOS 7 is an issue that affects more than this component, consider it separately to this
• don't do anything about the baseline weirdness on IE8&9 – I don’t think it really changes the meaning of the links in any big way, just doesn’t look as neat