Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add button groups for use in cookie banner #2114

Merged
merged 3 commits into from
Jan 27, 2021
Merged

Add button groups for use in cookie banner #2114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4c17b6d
Add button groups objects
36degrees Jan 22, 2021
e5f50d7
Fix links overflowing their container in IE10/11
36degrees Jan 26, 2021
b650d2d
Update confirm delete example to use button group
36degrees Jan 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 111 additions & 0 deletions app/views/examples/button-groups/index.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
{% extends "layout.njk" %}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah great call, thanks 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done in f85eb47


{% from "back-link/macro.njk" import govukBackLink %}
{% from "button/macro.njk" import govukButton %}

{% block beforeContent %}
{{ govukBackLink({
"href": "/"
}) }}
{% endblock %}

{% block content %}

<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">

<div class="govuk-button-group">
{{ govukButton({
"text": "Accept analytics cookies"
}) }}

{{ govukButton({
"text": "Reject analytics cookies"
}) }}

<a href="#" class="govuk-link govuk-link--align-button">View cookies</a>
</div>

<div class="govuk-button-group">
{{ govukButton({
"text": "Derbyn cwcis dadansoddeg"
}) }}

{{ govukButton({
"text": "Gwrthod cwcis dadansoddeg"
}) }}

<a href="#" class="govuk-link govuk-link--align-button">Gweld cwcis</a>
</div>

<div class="govuk-button-group">
{{ govukButton({
"text": "Accept really important analytics cookies"
}) }}

{{ govukButton({
"text": "Reject really important analytics cookies but not essential cookies"
}) }}

<a href="#" class="govuk-link govuk-link--align-button">View cookies and set preferences to do with whether we can set cookies</a>
</div>

<div class="govuk-button-group">
{{ govukButton({
"text": "Delete account",
"classes": "govuk-button--warning"
}) }}

<a href="#" class="govuk-link govuk-link--muted govuk-link--align-button">Cancel</a>
<a href="#" class="govuk-link govuk-link--muted govuk-link--align-button">Cancel and go back</a>
</div>

<div class="govuk-button-group">
<a href="#" class="govuk-link govuk-link--align-button">Buy it</a>

{{ govukButton({
"text": "Use it"
}) }}

{{ govukButton({
"text": "Break it"
}) }}

<a href="#" class="govuk-link govuk-link--align-button">Fix it</a>
<a href="#" class="govuk-link govuk-link--align-button">Trash it</a>
<a href="#" class="govuk-link govuk-link--align-button">Change it</a>

{{ govukButton({
"text": "Mail it"
}) }}

<a href="#" class="govuk-link govuk-link--align-button">Upgrade it</a>

<a href="#" class="govuk-link govuk-link--align-button">Charge it</a>

{{ govukButton({
"text": "Point it"
}) }}

{{ govukButton({
"text": "Zoom it"
}) }}

{{ govukButton({
"text": "Press it"
}) }}
</div>

<div class="govuk-button-group">
{{ govukButton({
text: "Start now",
href: "#",
isStartButton: true
}) }}

<a href="#" class="govuk-link">Back</a>
</div>

</div>
</div>
{% endblock %}
22 changes: 11 additions & 11 deletions app/views/full-page-examples/confirm-delete/index.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,17 @@
}) }}

<form method="post" novalidate>

{{ govukButton({
text: "Delete account",
classes: "govuk-button--warning govuk-!-margin-right-3"
}) }}

{{ govukButton({
text: "Cancel",
classes: "govuk-button--secondary"
}) }}

<div class="govuk-button-group">
{{ govukButton({
text: "Delete account",
classes: "govuk-button--warning"
}) }}

{{ govukButton({
text: "Cancel",
classes: "govuk-button--secondary"
}) }}
</div>
</form>

</div>
Expand Down
1 change: 1 addition & 0 deletions src/govuk/objects/_all.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import "button-group";
@import "form-group";
@import "grid";
@import "main-wrapper";
Expand Down
78 changes: 78 additions & 0 deletions src/govuk/objects/_button-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
@import "../base";

@include govuk-exports("govuk/objects/button-group") {
// Button groups can be used to group buttons and links together as a group.
//
// 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
.govuk-button-group {
$horizontal-gap: govuk-spacing(3);
$vertical-gap: govuk-spacing(3);

// These need to be kept in sync with the button component's styles
$button-padding: govuk-spacing(2);
$button-shadow-size: $govuk-border-width-form-element;

$link-spacing: govuk-spacing(1);

@include govuk-responsive-margin(6, "bottom", $adjustment: $vertical-gap * -1);

// Flexbox is used to center-align links on mobile, align everything along
// the baseline on tablet and above, and to removes extra whitespace that
// we'd get between the buttons and links because they're inline-blocks.
//
// Ideally we'd use `gap` with flexbox rather than having to do it all with
// margins, but unfortunately the support isn't there (yet) and @supports
// doesn't play nicely with it
// (https://github.com/w3c/csswg-drafts/issues/3559)
display: flex;
flex-direction: column;
align-items: center;

// Give links within the button group the same font-size and line-height
// as buttons.
//
// Because we want the focus state to be tight around the link text, we use
// margins where the buttons would use padding.
.govuk-link {
@include govuk-font($size: 19, $line-height: 19px);
display: inline-block;
// Prevent links overflowing their container in IE10/11 because of bug
// with align-items: center
max-width: 100%;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does setting the max-width do here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

@hannalaakso hannalaakso Jan 26, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

margin-top: $link-spacing;
margin-bottom: $link-spacing + $vertical-gap;
text-align: center;
}

// Reduce the bottom margin to the size of the vertical gap (accommodating
// the button shadow) – the 'lost' margin is moved to the button-group.
.govuk-button {
margin-bottom: $vertical-gap + $button-shadow-size;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

}

// On tablet and above, we also introduce a 'column gap' between the
// buttons and links in each row and left align links
@include govuk-media-query($from: tablet) {
// Cancel out the column gap for the last item in each row
margin-right: ($horizontal-gap * -1);

flex-direction: row;
flex-wrap: wrap;
align-items: baseline;

.govuk-button,
.govuk-link {
margin-right: $horizontal-gap;
}

.govuk-link {
text-align: left;
}
}
}
}