Use consistent inset padding across components

[paulrobertlloyd]

Description

Fixes #1735.

Using 24px across the following components across all breakpoints:

• (Care) card
• Contents list
• Error summary
• Expander
• Form group object
• Inset text
• Notification banner
• Pagination
• Tabs (panel)
• Warning callout

File upload (#1556) will need the same values applied, once that is merged.

24px is a size that works well across all different components. It also works for components such as details and pagination where text with left padding can align with the global value, but not if it gets much bigger. While cards have reduced padding, this works better for cards within card groups with many columns.

I’ve added this as a global setting: $nhsuk-inset-size.

Take a look at the updated reference images for comparison.

In #1740 I added a page with components that have inset padding, and in this PR you can see this page with the inset spacing highlighted.

I’ve also aligned the design for mobile tab links to match that of the contents list; we may want to pull this out into a separate PR.

Checklist

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

[anandamaryon1]

Happy with this as it stands @paulrobertlloyd ?

I'm thinking about getting this into v11.

[paulrobertlloyd]

Happy with this as it stands @paulrobertlloyd?

Mostly. But one last thing… shouldn’t the padding for inset text align with that for details content and fields with an error, which share a very similar design?

In which case, this would mean the left padding for inset text would be reduced to 16px.

Before

After

---

Also, should we update the togglable overlay guides on this page so that they also visibly show the 24px inset size too?

[colinrotherham]

Rebased, but a reminder to say the wider spacing (tablet) isn't great for tabs

[anandamaryon1]

Happy with this as it stands @paulrobertlloyd?

Mostly. But one last thing… shouldn’t the padding for inset text align with that for details content and fields with an error, which share a very similar design?

Looking at them together, yes. But, when looked at alone, or alongside other components, I feel 16px is too close for the inset text. With such a heavy blue border the added empty space is needed to make the text not feel cramped, in my opinion. And I feel this trumps consistency with those two specific other components because they are less likely to be used right next to an inset text.

Eg.

16px	24px

Also, should we update the togglable overlay guides on this page so that they also visibly show the 24px inset size too?

Yeah that'd be helpful 👍

--

Rebased, but a reminder to say the wider spacing (tablet) isn't great for tabs

This isn't great is it, thanks @colinrotherham. Maybe it wouldn't be crazy to have the tabs not align, to maximise available space.

For example, 16px, similar to buttons:

[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]

I've rebased this against #1961 and had another go at making pagination comply

We've still got issues with Tabs spacing and I'm still not sure about inset text versus error summary spacing

[colinrotherham]

The narrower error summary spacing looks nice and compact for small form controls though: