Release GOV.UK Frontend release v0.0.29-alpha · alphagov/govuk-frontend

We’ve made changes to simplify things for users creating prototypes in response to user research findings. We’ve added features working towards the GOV.UK Design System replacing GOV.UK Elements, GOV.UK Template and GOV.UK Frontend Toolkit.

0.0.29-alpha (Breaking release)

💥 Breaking changes:

Restructure project to enable it to be published as a single package

The new project structure matches our ITCSS inspired layers and is published as a single package as @govuk-frontend/frontend.

You will need to:
- Update your npm dependencies to use @govuk-frontend/frontend
- Update your SCSS import paths to match the new package name and folder structure.
If you're importing everything at once:
```
@import "node_modules/@govuk-frontend/frontend/all";
```
If you're importing individual components:
```
@import "node_modules/@govuk-frontend/frontend/components/button/button";
```
See the main README for up-to-date installation instructions.

(PR #680)

Error Messages and Hints have been moved out Label and Fieldset components.

They are no longer nested within the label or legend.
They are associated with the input or with the fieldset using aria-describedby.

Hint has been made into a new component similar to Error Message.

If you're using markup, you will need to update the old markup:

<label class="govuk-c-label" for="national-insurance-number">
  National Insurance number
  <span class="govuk-c-label__hint">
    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
  </span>
  <span class="govuk-c-error-message">
    Error message goes here
  </span>
</label>
<input class="govuk-c-input govuk-c-input--error" id="national-insurance-number" name="national-insurance-number" type="text">

With the new markup:

<label class="govuk-label" for="national-insurance-number">
  National Insurance number
</label>
<span id="national-insurance-number-hint" class="govuk-hint">
  It’s on your <i>National Insurance card</i>, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
</span>
<span id="national-insurance-number-error" class="govuk-error-message">
  Error message goes here
</span>
<input class="govuk-input govuk-input--error" id="national-insurance-number" name="test-name-3" type="text" aria-describedby="national-insurance-number-hint national-insurance-number-error">

If you're using macros:

The fieldset macro no longer accepts legendHintText or legendHintHtml -
these parameters are now passed to the hint component which accepts text or
html. The date-input, checkboxes and radios components have been updated to
use the new Hint component.

The label macro no longer accepts hintText or hintHtml - these parameters
are now passed to the hint component which accepts text or html. The
file-upload, input, select and textarea components have been updated to use the
new Hint component.

For example, this example macro call for a File Upload component:

{{ govukFileUpload({
  "id": "file-upload",
  "name": "photo",
  "label": {
    "text": "Upload your photo",
    "hintText": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder."
  }
}) }}

would now be:

{{ govukFileUpload({
  "id": "file-upload",
  "name": "photo",
  "label": {
    "text": "Upload your photo"
  },
  "hint": {
    "text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder."
  }
}) }}

For more examples of the new markup and Nunjucks macros see the GOV.UK Design System Question Pages pattern

(PR #681)

The date-input component now sets an explicit group role on the fieldset
to force JAWS 18 to announce the error message and hint.
(PR #681)
The label component macro now accepts an isPageHeading argument which determines
whether the label itself should be wrapped in an h1:
```
<h1 class="govuk-label-wrapper">
  <label class="govuk-label">What is your National Insurance number?</label>
</h1>
```
The .govuk-label-wrapper removes the margins from the heading so that the
presence of the h1 has no effect on the styling of the label.

(PR #684)
Added new modifier classes for labels to allow you to create a label that
visually corresponds to the equivalent heading class (for example, a
.govuk-label--xl will have the same font size and weight as a
.govuk-heading-xl)

(PR #684)
The arguments for a fieldset's legend have been rolled up into an object. For
example, the following macro call:
```
{{ govukFieldset({
  legendText: "What is your date of birth?"
}) }}
```
would now be:
```
{{ govukFieldset({
  legend: {
    text: "What is your date of birth?"
  }
}) }}
```
The legend object can also accept new classes and arguments

Components that use the fieldset component have been updated to reflect these
changes.

(PR #684)
The fieldset component has a new parameter legend.isPageHeading, which defines
whether the legend text should be wrapped in an h1:
```
<legend class="govuk-fieldset__legend">
  <h1 class="govuk-fieldset__heading">Have you changed your name?</h1>
</legend>
```
The .govuk-fieldset__heading class ensures that the <h1> inherits its
properties from the legend, so that the presence of the h1 has no effect on
its styling.

(PR #684)
Added new modifier classes for legends to allow you to create a legend that
visually corresponds to the equivalent heading class (for example, a
.govuk-fieldset__legend--xl will have the same font size and weight as a
.govuk-heading-xl)

(PR #684)
Remove -c -o -h layer prefixes
(PR #644)
In user research and in feedback from Private Beta partners we
learned that users didn't really understand what -o, -c and -h prefixes
stand for or why they're useful.

They also introduced additional cognitive load when composing classes,
having to remember which suffix the classname contains.

If you're using markup, you will need to:
- Remove -o, -c and -h prefixes from class names in your markup
For example, change:
```
<button class="govuk-c-button">Save and continue</button>
```
Into:
```
<button class="govuk-button">Save and continue</button>
```

Simplify grid syntax and introduce grid-row and column mixins.

Based on user research feedback we have simplified the grid classes
to a more consise naming structure.

You will need to:

Change grid class names in your markup

For example, change:

<div class="govuk-o-grid">
  <div class="govuk-o-grid__item govuk-o-grid__item--two-thirds">
    <!-- content -->
  </div>
  <div class="govuk-o-grid__item govuk-o-grid__item--one-third">
    <!-- content -->
  </div>
</div>

Into:

<div class="govuk-grid-row">
  <div class="govuk-grid-column-two-thirds">
    <!-- content -->
  </div>
  <div class="govuk-grid-column-one-third">
    <!-- content -->
  </div>
</div>

We have also introduced two mixins to help generate additional or custom grid styles and widths.

See original pull request for usage.

(PR #665)

🔧 Fixes:

Remove redundant font-family declaration from the button component – this will
also fix an issue where the button uses New Transport when printed instead of
falling back to the print stack as expected.
(PR #650)
Reinstate focus outline for radios and checkboxes on IE8
(PR #670)
Fix section break styles when used with GOV.UK Elements
(PR #682)
Remove -webkit-tap-highlight-color from links (PR #692)
Remove normalize from /dist builds
(PR #699)

🆕 New features:

We're now using ES6 Modules and rollup to distribute our JavaScript. (PR #652)
Checkboxes and Radios conditional reveal
(PR #616)
Vendor-in SassMQ functionality, write tests and remove external dependency
(PR #657)
Focus Error Summary on window load
(PR #671)
Opt-in Global <a> and <p> styles
(PR #658)

Global styles are not included by default.

This is to avoid the risk of these globals conflicting with any pre-existing globals, for example in GOV.UK Elements or GOV.UK Template.

Hovever, we do include them in the GOV.UK Prototype Kit to speed up prototyping.

To include global styles, you can set $govuk-global-styles variable to true.

🏠 Internal:

Remove unused step in travis.yml file
(PR #690)
Update publishing docs (PR #651)
Wrap app.css in conditional comments in review app layout (PR #653)
Fix missing code highlight and remove duplicate layout
(PR #663)
Exclude test related files from dist/ and packages/ copy task
(PR #662)
Add test to check if Sass in packages compiles correctly after the build:packages task
(PR #669)
Disable code syntax highlighting in IE8
(PR #675)
Simplify contents of the dist/ folder
(PR #673)
Added tests to ensure that the settings, helpers and tools layers do not
output CSS.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GOV.UK Frontend release v0.0.29-alpha

0.0.29-alpha (Breaking release)

If you're using markup, you will need to update the old markup: