search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.19k stars 328 forks source link

Decide how to release the crown #4174

Closed christopherthomasdesign closed 1 year ago

christopherthomasdesign commented 1 year ago

What

As part of https://github.com/alphagov/govuk-frontend/issues/4019 we need to work out the best way to release the new crown. For example, what versions of Frontend to release it in, and how the implementation should differ across versions.

This should include any decisions about putting things behind feature flags, if we decide to use them.

Why

So that it's available to as many users as possible as quickly as possible. And it's as easy as possible for services to update it.

Who needs to be involved

Developer, designer

Done when

christopherthomasdesign commented 1 year ago

Notes taken from a scoping session between @christopherthomasdesign, @stevenjmesser and @36degrees.

We believe that changing the crown is a breaking change because it requires a change to the HTML markup in the header, where the current crown is inlined as an SVG.

We're currently working on a new major version of GOV.UK Frontend, v5.0, which includes significant changes to browser support, how users import our JavaScript, our JavaScript API, and the removal of compatibility mode.

The easiest thing would just be to include the change in v5 along with the other breaking changes.

However, in terms of rollout, we would want the highest profile bits of GOV.UK – GOV.UK Publishing (www.gov.uk), One Login – to be able to use the new crown as soon as possible. The higher profile teams tend to have more complex architectures and it will take significant work to apply the other breaking changes in v5.

In order to optimise for a clean rollout of the new crown, we'll release a new v4.x version of GOV.UK Frontend (likely v4.8) which will include the crown change behind a 'feature flag' in the Nunjucks macro options for the header component. Service teams who use our Nunjucks macros would need to enable the new option; those using HTML would need to get the latest version from the Design System; those using other community-owned resources will need to wait for the resource to be updated and the resource would need to provide an equivalent flag for enabling the new crown.

We may also choose to release a new v3.x release with the same flag if we see demand for it.

However, from v5 onwards we believe we only need to support the new crown – aside from avoiding a breaking change we can't think of any reason why a team would opt to use the existing crown.

querkmachine commented 1 year ago

I'm pretty happy with the ideas proposed above: v5 only has the new crown assets, v4 (and any previous versions) have to activate a feature flag.

I have a couple of v4 thoughts that I welcome further comments on:

  1. As the new crown is taller, we probably want some CSS to tweak the crown's size and position. This could be done as a Sass feature flag, however it'll probably be simpler to add a temporary modifier class (e.g. govuk-header__logotype-crown--tudor-crown) that is added by the Nunjucks flag, rather than having two separate feature flags.
  2. Presumably any new classes or parameters we add will need to be immediately marked as deprecated, as we intend to remove them in v5.
  3. I'm not sure of the value of feature flagging the favicon and sharing image changes. Unlike the header crown, these can be replaced one-for-one without any developer intervention, and I wouldn't personally consider altering them to be a breaking change as nothing else should be dependent upon them depicting one particular crown graphic. We could just note the update in the changelog, IMO.
stevenjmesser commented 1 year ago

Downloads of v3.14.0 are comparable to v4.4.1 – see downloads in last 7 days. v3.15.0 might be sensible?

colinrotherham commented 1 year ago

With the pixel height staying the same, could target the crown SVG by width in HTML?

Lets us account for the 4px reduced width via CSS selector:

.govuk-header__logotype-crown[width="36"] {} // St. Edward's crown (36 × 30)
.govuk-header__logotype-crown[width="32"] {} // Tudor crown (32 × 30)

Or "pillarbox" the narrower Tudor crown to the old 36 × 30 viewBox and offset with negative margins?

querkmachine commented 1 year ago

Downloads of v3.14.0 are comparable to v4.4.1 – see downloads in last 7 days. v3.15.0 might be sensible?

@stevenjmesser From a dev-y perspective v3 should be fairly easy to support, as the header code is pretty much unchanged between 3 and 4. The main effort there is probably in the testing and releasing.

querkmachine commented 1 year ago

Based on discussions here and with the team, we seem to have settled on the following intentions:

v5.x

v4.x

v3.x

v2.x and earlier

christopherthomasdesign commented 1 year ago

Thanks for summarising @querkmachine – I'm gonna say we've decided and close this!

querkmachine commented 1 year ago

It has become apparent that there is a risk that we may not be able to roll out the new crown until after v5.0 has been released. This is because of the desire to produce comms about the change simultaneous to the crown's rollout, for which we don't currently have a timescale. This is something we're coordinating with GOV.UK.

We do not want to unnecessarily delay the release of v5.0, particularly if the launch date for the new crown's introduction is still unknown at the time.

In the event that this happens, we may work to this modified plan. It does, unfortunately, require the creation of some assets we wouldn't need otherwise, but creating them would allow us to add the Tudor crown in a v5.x release without introducing breaking changes. The plan for Frontend versions 4.x and earlier would remain unchanged.

v5.0

v5.x (release when Tudor crown is ready to launch)

v6.0

stevenjmesser commented 1 year ago

Thanks for adding the above, @querkmachine, that's great!