GOV.UK Frontend release v1.1.0

This release is a feature release, which means that it introduces new features, but there are no breaking changes.

Things to be aware of

This release includes support for defining font sizes with 'rem', which is disabled by default. This will allow the text in your services to scale appropriately when end-users change the font size in their browser. We intend to enable this by default in a future breaking release.

We have updated the panel component so that the heading level can be customised. The default remains an h2, but we will change the default to h1 in a future breaking release. If the panel title is also the title of the page, you should update your use of this component now to use an h1 – if you're using the macro, you can do this by passing headingLevel: 1.

We have fixed a typo in the govuk-visually-hidden-focussable class name. The misspelt classname is still available, but we will remove it in a future breaking release. You may want to replace any instances of govuk-visually-hidden-focussable in your code with govuk-visually-hidden-focusable now to make it easier to upgrade in the future.

We have also removed component examples (for example button.njk) that were used internally and published to npm, please use the 'yaml' component files instead.

Finally thanks to @bevanloon for fixing an issue in the footer component!

Change log

🆕 New features:

• Add govuk-visually-hidden-focusable class

  Adds .govuk-visually-hidden-focusable and deprecates .govuk-visually-hidden-focussable in order to fix the typo in the class name. Please consider updating your code as the next major release will remove the deprecated class.

  (PR #859)

• Allow panel component title heading to be customisable.

  You can now specify a heading level by providing
  headingLevel: <number> parameter. Default is 2.
  (PR #853)

• Update date input component

  Allow the name and id attributes to be passed individually for each input item.

  Rely on classes instead of item names to set the width of input items.

  Add default (day, month, year) date input items if no items are being specified

  (PR #857)

• The typography scale can now be converted from pixels to rem automatically,
  with pixels also being provided as a fallback for older browsers.

  This feature is disabled by default - in order to use it you will need to set
  $govuk-typography-use-rem: true and ensure that $govuk-root-font-size is
  set to the effective size of your root (html) element. For new projects, this
  should be the default of 16px so you don't have to do anything. For projects
  that use alphagov/govuk_template this should be 10px.

  The intention is to enable this by default in the next major version:
  #868

  (PR #858)

🔧 Fixes:

• Remove mistakenly applied 5px bottom margin from radio and checkbox
  labels.
  (PR #883)

• Apply display:block to .govuk-main-wrapper

  In IE11 main element is set to display:inline so padding
  and margins aren't applied.
  (PR #863))

• Line-heights are now converted from pixels to relative 'unit-less' values
  in order to prevent issues when resizing text in the browser.
  (PR #837 and
  PR #848)

• Add bottom margin to Tabs component
  All components (or outer layer components) have a bottom margin
  applied to them so spacing feels automatic.
  (PR #841)

• Update Crown copyright link
  Update the Crown copyright link on the National Archives so
  we don't send users on an unnecessary redirect.
  (PR #824)

• Fixes radio and checkbox labels extending full width of page
  (PR #821)

• Prevent the exclamation mark in the warning text component from being
  selectable, which also excludes it when it is copied as part of a wider body
  of text
  (PR #856)

• Add customised colours handling for warning text

  By adding a border to this component, when a user customises their colour settings
  they will still see a circle even if the background is removed.
  (PR #852)

• Fixes a bug where the phase banner incorrectly uses a font-size of 19px when
  global styles are enabled
  (PR #877)

• Add outlines to Radios and Checkboxes for customised colour users

  Now when a user customises their colours,
  they should see a focus state on both Radios and Checkboxes.
  (PR #854)

• Add outline to tag for customised colour users

  Now when a user customises their colours,
  the tag component still keeps it's meaning.
  (PR #855)

• Define size of table in px rather than em

  This brings the styling of tables inline with rest of GOV.UK Frontend which no longer uses em for measurements.

  This change very slightly increases the padding of table cells on mobile viewport as the use of em meant the font size set in the table was used to calculate padding. padding-top and padding-bottom of cells increase by 1.5px respectively which very slightly increases the height of the table on mobile.

  In the unlikely case that your UI has a dependency on tables being a certain fixed height of mobile viewport, this change might affect you.

  (PR #845)

• Fix header component's reliance on markup whitespace

  We have had issues where the header component can render incorrectly if the markup contains whitespace,
  for example if it has been pretty printed.

  This changes the header component to use float based columns similar to how the grid system works.

  (PR #884)

🏠 Internal:

• Fix Design System url in package READMEs and review app
  (PR #812)

• Update back-link example to show default usage doesn't need
  text parameter
  (PR #819)

• Lowercase component names
  (PR #822)

• Tidy up some package.json fields to help contributors and users
  (PR #827)

• Fix failing Heroku app with Node 10.5.0
  Revert to pinning node version in package json
  (PR #833)

• Format YAML and Nunjucks consistently
  (PR #830)