Add button group and full width button styles

[colinrotherham]

Description

This PR aligns with GOV.UK Frontend by including:

1. Switch to full width buttons on mobile
2. Add new "button group" styling

The styles for .nhsuk-button-group were initially copied from GOV.UK Frontend:

• govuk-frontend/src/govuk/objects/_button-group.scss

But have now been updated to match NHS App Frontend spacing:

• nhsapp-frontend/src/components/button/_index.scss

From NHS App Frontend Button component research:

Full width buttons

Testing on the NHS App has found that full width buttons are not a problem for users with smaller screens. But we will continue to test if:

• full width buttons are problematic for users with low digital skills
• users don’t actually see them as actionable things to click

Checklist

• Tested against our testing policy (Resolution, Browser & Accessibility)
• Follows our coding standards and style guide
• CHANGELOG entry

[frankieroberto]

We're using gap for the new Header account section, so maybe support is ok for it now? https://github.com/nhsuk/nhsuk-frontend/pull/1058/files#diff-9872b34d22a8af3575af4913b03966d1994a4c9e966fddbaa977458158892ca1R119 cc @paulrobertlloyd

[colinrotherham]

Usual caveat, I copied from GOV.UK Frontend!

Mainly leaving this PR here for all the designers to chip in with their tweaks

[paulrobertlloyd]

We use gap in the header, but not as much as we once did; the navigation used it, but it meant items were bunched up on older versions of Safari locked-to-the-last-support-version-of-iOS. Probably something we’d want to test across a number of different devices.

[frankieroberto]

One factor to consider is the mobile view. In govuk-frontend, buttons go full-width on mobile, and so it makes sense to also vertically stack buttons group at mobile widths.

However NHS frontend does not make buttons full-width on mobile views, so we could continue to allow buttons to be side-by-side in a button group on mobile, however they might not always fit.

Here's how it currently looks at 640 width vs 641:

640 width	641 width

Tricky!

[frankieroberto]

The NHS App team have already added button groups: https://design-system.nhsapp.service.nhs.uk/components/buttons/#grouping-buttons - they also have a nhsapp-button modifier which makes buttons full-width on mobile.

We could consider something similar and have the behaviour opt-in, perhaps via nhsuk-button--full-width-on-mobile or similar?

[paulrobertlloyd]

Please, please, please can we replicate the GOV.UK behaviour and have buttons go full width on mobile by default? (I've been using my button group wrapper as a bit of a hack to enable this)

[frankieroberto]

Please, please, please can we replicate the GOV.UK behaviour and have buttons go full width on mobile by default? (I've been using my button group wrapper as a bit of a hack to enable this)

@paulrobertlloyd Which breakpoint would you pick? 640 has always felt a bit too wide to me, but maybe its fine? 🤷

How about making it opt-in or opt-out? 🤔

[paulrobertlloyd]

Be bold @frankieroberto! < 640px is perfectly fine! (What do they do on the app?)

[frankieroberto]

Be bold @frankieroberto! < 640px is perfectly fine! (What do they do on the app?)

The app has a modifier to make them full-width on mobile: https://github.com/nhsuk/nhsapp-frontend/blob/main/src/components/button/_index.scss#L14-L23 - I think @davidhunter08 and co did some research on it.

[davidhunter08]

In July 2024, the NHS App made all buttons full width by default at < 640px. No usability problems found so far.

Other NHS services use full width buttons, including 111 online and NHS login.

NHS login example

111 online example

[colinrotherham]

This is great to hear, I purposely removed "full width by default" to match what we do now

Shall I push an update to put it back?

1. Full width by default
2. Full width only within button groups

Where 1) would align with the app, 111 online and NHS login's approach

[frankieroberto]

Happy to go with option 1 - full width buttons on mobile. Maybe it doesn't even need an opt-out?

Would we consider it a breaking change though? 🤔

[colinrotherham]

How's this? Just pushed

[paulrobertlloyd]

Yaaaaay!!

[colinrotherham]

Updated to match the spacing in NHS App Frontend

• src/components/button/_index.scss

//cc @davidhunter08

[frankieroberto]

Nice! Looks good to me.

Here's how I'm planning to use it (this is just a quick mockup):

[frankieroberto]

One thing this pull request doesn't currently do is let you add non-linked text next to the button:

Should we support that too? 🤔

[colinrotherham]

Thanks @frankieroberto

Ahh in GOV.UK Frontend .govuk-button-group .govuk-link gets a bottom margin like govuk-body

E.g. You'd want to wrap your "or" text into <span class="nhsuk-body-m">or</span>

But looks like we need to iterate the NHS App spacing a little more for that

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[colinrotherham]

Brilliant, shall we merge this and do testing as part of the pre-release?

Noting that the styles were largely taken from the NHS App