Alpha v7

[wa-rren-dev]

Description

This is a fast-moving and relatively cavalier proposal branch for version 7 of the nhsuk-frontend package. Use at your own risk!

See the branch's changelog for info on what's changing.

Before release

• [ ] Write tests for Tabs
• [ ] Write tests for Character Count

[kevinkuszyk]

@wa-rren-dev do you have an ETA for shipping the final v7, and any idea of milestones along the way?

I'm looking forward to no longer seeing all the SASS errors when we build our app, and I'll also try and keep NHSDigital/nhsuk-react-components in sync if you have a roadmap you can publish.

Thanks, and as always, keep up the good work!

[wa-rren-dev]

Cheers @kevinkuszyk, we don't have a release plan just yet as we're running with a skeleton crew at the moment, but the alpha is an attempt to get some momentum going. The main barrier to getting it released will be the production of the guidelines to go in the service manual for the new components, but if it comes to it we could possibly release a more reliable beta version of v7 with assurances that there won't be any sweeping changes.

[chrimesdev]

@andymantell not sure where is the best place to ask, here or a new issue (since the component isn't actually released) but with the Tabs component ...

1. The background of the Tabs content is white, how come it isn't the NHS grey background (readability etc)? GOV.UK Tabs uses the same colour as the page background (https://www.gov.uk/renew-driving-licence#more-information)

---

2. The alignment of the contents list on mobile is a little off, should this be aligned to the left similar to GOV.UK Tabs?

NHS:

GOVUK:

Nice work getting this component in, we'll be using it on a live service very soon!

[andymantell]

Hi Adam,

1. Good question. It was grey originally and I switched it because it "looked funny" in the demos. But that's not really a great reason, and I do note the govuk one is grey. See before and after below. What do you think, should we put it back to grey? Or maybe make grey the default but have a modifier which gives you white tabs, in case that makes more sense in whatever context people put it in?

Now that I've written all that, I'm leaning towards just making it grey - to match the govuk one as you say. Can I get another opinion @wa-rren-dev ?

2. It should be left aligned - that's a bug in the version you've got there. Have you updated recently? This should have been fixed by 336c98ae3869abc94ffde1222a474f812bfc3f95

[andymantell]

Sorry, the actual commit that fixed the tab alignment was this:

https://github.com/nhsuk/nhsuk-frontend/pull/831/commits/43f4fa5f901568c50619e4d26be48ec6a1158c62#diff-92bf1bf018dd660a48623539ce33dd98f218877144e4f6beb606693c46e8b4fa

[chrimesdev]

Thanks @andymantell I can see what you mean. I think white Cards/Panels (and other colorful components) can often be overused on NHS pages, as they stand out more, so it might convey more importance than the content on the rest of the page. I'll speak to our designer tomorrow and see what he thinks.

If it helps here's a screenshot of a design with the Tabs with a grey and white backgrounds in a real scenario:

Grey (Figma custom styles)

White (NHS.UK V7 styles)

Also thank you for the alignment fix - that worked!

[wa-rren-dev]

Regarding the tab backgrounds - I wouldn't like to make any particular suggestion! It really needs design and UR around it.

That said, my personal preference would be to keep the tabs white. Without the background it can be hard when scanning to see what is part of a tab's content and what is proceeding page content.

Hopefully this sort of thing will be picked up in the forthcoming tabs work that mission team 1 are planning on doing. Have referenced this thread in the assosciated epic.

[chrimesdev]

Thanks @andymantell and @wa-rren-dev! We've just gone live with the Tabs component (https://www.demo.livi.thirdparty.nhs.uk/services/order-a-repeat-prescription/) will let you know how it goes!

[wa-rren-dev]

Thanks @andymantell and @wa-rren-dev! We've just gone live with the Tabs component (https://www.demo.livi.thirdparty.nhs.uk/services/order-a-repeat-prescription/) will let you know how it goes!

Great, any feedback you get do send it back round if you can!

[chrimesdev]

Is the 7.0.0-alpha.2 package ready/safe to be used in production services? Is it being used on any other live services currently?

[wa-rren-dev]

Hi @chrimesdev, not being used on any live services that I'm aware of. Based on the pace of change so far I wouldn't recommend using it in production unless you're happy to pin the alpha version you're using in your dependencies. I really can't imagine anything else breaking at this point but based on the possibility that this alpha might outlive all of us, I wouldn't let it auto install the latest version. We're trying to retain the ability to still make sweeping changes at this point.