govuk-frontend - npm Package Versions

published 2.11.0 • 6 years ago

Changelog

2.11.0 (Feature release)

🆕 New features:

Add new secondary and warning button variants

(PR #1207)
Add new govuk-shade and govuk-tint functions for creating shades and tints of colours.

(PR #1207)
Add support for custom row classes on the summary list component (including support for some rows without action links)

(PR #1259)
Ensure fieldset never exceeds max-width

This fix ensures that both WebKit/Blink and Firefox are prevented from expanding their fieldset widths to the content's minimum size.

This was preventing max-width: 100% from being applied to select menus inside a fieldset.

See discussion in "Reset your fieldset" and raised by issue #1264

(PR #1269)

🔧 Fixes:

Add various fixes to the summary list component:
1. Fixes the 1px row height change when borders are removed Padding is now adjusted by 1px instead
2. Fixes the text alignment when the actions column isn't added So the key column always stays at 30% width
(PR #1259)

2.10.0

published 2.10.0 • 6 years ago

Changelog

2.10.0 (Feature release)

🆕 New features:

Add smaller versions of radio buttons and checkboxes

Thanks to @owenm6 for their help and support on this one.

(PR #1125)

🔧 Fixes:

Prevent duplicate checkbox aria-describedby

Addresses an edge case where a checkbox with a hint (but without a fieldset) is output with duplicate aria-describeby attributes. Fixes issue #1248.

Thanks to @colinrotherham for fixing this issue.

(PR #1265)

2.9.0

published 2.9.0 • 6 years ago

Changelog

2.9.0 (Feature release)

🆕 New features:

Add classes to action items in the summary list component

(PR #1233)
Allow initAll to be scoped to a specific part of a page

See "Initialise GOV.UK Frontend in only certain sections of a page" for more information.

(PR #1216)

🔧 Fixes:

Fix tabs bullet point character encoding issue when not enhanced

Thanks Ed Horsford and Steve Sims for their help on this one.

(PR #1247)
Update padding of govuk-main-wrapper

This increases the padding of govuk-main-wrapper (on tablet and above) to be more inline with GOV.UK. When updating, your pages will have 10px more white space above and below the 'main' content area.

(PR #1073)
Remove error-summary dependence on document.onload

(PR #1215)
Ensure font is not loaded twice on slow networks

This is only an issue for users that are using alphagov/govuk_template alongside GOV.UK Frontend.

(PR #1242)

2.8.0

published 2.8.0 • 6 years ago

Changelog

2.8.0 (Feature release)

Considerations for fixed components such as modals

We have been made aware that the change to force scroll bars to appear at all times can change the behaviour of some components such as modals.

If you're using your own components that rely on the overflow state of the document (such as modals) you should make sure you test those components when updating to this version.

🆕 New features:

Enable pattern attribute for input

You can now set the pattern attribute on input fields using the component macros:
```
{{ govukInput({
  name: "example",
  pattern: "[0-9]*"
}) }}
```
As well as pattern, custom attributes can also be added on day/month/year inputs (e.g. data-example) shown below:
```
{{ govukDateInput({
  items: [
    {
      pattern: "[0-9]*",
      attributes: {
        "data-example": "value"
      }
    }
  ]
}) }}
```
(PR #1172)
Prevent horizontal jump as scrollbars appear

As content vertical height grows (e.g. autocomplete results appear), browsers may add scroll bars causing the page to jump horizontally in position.

To avoid this, re-introduce fix from GOV.UK Template: https://github.com/alphagov/govuk-frontend/issues/1204

(PR #1230)
Accommodate camera notches on new devices (iPhone X, Google Pixel 3 etc)

On newer devices with "camera notches", browsers reserve a safe area in landscape orientation (known as pillarboxing) so content isn't obscured.

To avoid this, support has been added for viewport-fit=cover as shown here: https://webkit.org/blog/7929/designing-websites-for-iphone-x/

(PR #1176)
Prefix error messages with a visually hidden "Error:", to make it clearer to users of assistive technologies

(PR #1221)
Prevent accidental multiple submissions of forms

If a user double clicks a submit button in a form, we debounce this event and ignore the second click.

HTML data attribute:
```
<button class="govuk-button" data-prevent-double-click="true">
  Submit
</button>
```
Nunjucks macro:
```
{{ govukButton({
  text: "Submit",
  preventDoubleClick: true
}) }}
```
(PR #1018)

🔧 Fixes:

Ensure that files within the core, objects and overrides layers can be imported individually

Unlike components, the files within these layers did not previously import their dependencies (for example, most of them require the govuk-exports mixin but did not import it).

We've also added tests to ensure that files within these layers can be imported and rendered to CSS without erroring, which should catch this in the future.

Thanks to Alasdair McLeay for originally raising a PR to fix this.

(PR #1235)
Ensure inset component does not misalign nested components

Thanks to Paul Hayes for raising this issue.

(PR #1232)
Improve word wrapping in summary list component

Thanks to Edward Horsford and Lee Kowalkowski for their help on this one.

Also thanks to Malcolm Butler for exploring a previous version of this fix.

(PR #1220)

2.7.0

published 2.7.0 • 6 years ago

Changelog

2.7.0 (Feature release)

🆕 New features:

Added config file for prototype kit.

Added a configuration file for an experimental feature in Prototype kit to allow departments to use their own frontend alongside govuk-frontend

Thanks @matcarey (HMRC) for this contribution

(PR #1102)
Disable incorrect iOS/Edge text size adjustments

To cater for non-responsive websites, iOS and Edge automatically increase font sizes (iOS in landscape, Edge in portrait on HiDPI displays).

Since we have already considered typography at these device sizes, this feature is now turned off.

(PR #1178)

🔧 Fixes:

Fix wrapping of long lines of text in summary list

Thanks to @MoJ-Longbeard for raising the issue.

(PR #1169)

2.6.0

published 2.6.0 • 6 years ago

Changelog

2.6.0 (Feature release)

🆕 New features:

Enable autocomplete attributes for input components.

You can now set the autocomplete attribute on input, date input and textarea components using the component macros.

This was already possible to do with the attributes option but this change highlights the new WCAG 2.1 success criteria Identify Input Purpose which "is to ensure that the purpose of a form input collecting information about the user can be programmatically determined, so that user agents can extract and present this purpose to users using different modalities".

See autofill for the full list of attributes that can be used.

(PR #1146)

🔧 Fixes:

Include Accordion component in global namespace

Accordion component was not exported and was therefore unavailable in global namespace

(PR #1157)
Fix Checkboxes and Radios targeting selectors outside it's scope

Thanks to @andysellick and @bilbof for helping us with this issue.

(PR #1156)
Fixes styling of the accordion component when there is no JavaScript or it has been turned off

Thanks @dankmitchell for reporting this issue (#1130)

(PR #1149)
Remove hover state for accordion sections on mobile

(PR #1148)
Fix container not being centered in IE8

Since the header and the footer component use this container it also fixes centering for these components.

(PR #1147)
Make gutters in the header consistent with the grid

This means that the header will now line up with the grid.

Thanks to @edwardhorsford for raising this issue.

(PR #1144)

2.5.1

published 2.5.1 • 6 years ago

Changelog

2.5.1 (Fix release)

🔧 Fixes:

Update summary list to simplify actions

Only output actions in a list when there's multiple actions.

(PR #1131)

2.5.0

published 2.5.0 • 6 years ago

Changelog

2.5.0 (Feature release)

🆕 New features:

Accordion component 🎉

Contributed by @frankieroberto, as well as @injms, @hannalaakso, @joelanman and others.

The accordion component lets users show and hide sections of related content on a page.

For more information see guidance.

(PR #958)
Add desktop specific grid column widths

This allow you to define different grid behaviour for the tablet and desktop breakpoints. For example, you can make a column two-thirds on desktop but expand to full-width on smaller tablet sized screens.

(PR #1094)
Add summary list component

This component was initially developed to allow us to build the 'check your answers' pattern.

It is mostly the same as in the original pattern with some notable differences:
- On smaller screens it wraps by default
- It's possible to have multiple actions
(PR #1065)

🔧 Fixes:

Update visually hidden class to fix ordering issue in VoiceOver OSX

We have fixed an issue in VoiceOver OSX where using the govuk-visually-hidden class in links would result in the text being announced out of order.

We also now recommend to use aria-label or aria-labelledby where appropriate.

Thanks to @stevenaproctor and the accessibility team at HMRC for letting us know about this issue.

(PR #1109)
Improve rendering in older Internet Explorer

Added a meta tag to ensure that older IE versions always render with the correct rendering engine

(PR #1119)

2.4.1

published 2.4.1 • 6 years ago

Changelog