Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update v3.9.0 (unreleased) changelog for style #1948

Merged
merged 3 commits into from
Sep 10, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 37 additions & 39 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,81 +1,79 @@
# Changelog

## Unreleased
## 3.9.0 (feature release)

### New features

#### Add prefix and suffix for text input
#### Add a prefix or suffix to a text input component

You can now add a prefix or suffix element to the text input to help users enter things like currencies and measurements.
You can now [use prefixes and suffixes in the text input component](https://design-system.service.gov.uk/components/text-input/#prefixes-and-suffixes) to help users enter things like currencies and measurements.

For example:
This was added in [pull request #1816: Add input prefix and suffix](https://github.com/alphagov/govuk-frontend/pull/1816). Thanks to [@simonwhatley](https://github.com/simonwhatley) and the GOV.UK Coronavirus Services Team.

```javascript
{{ govukInput({
label: {
text: "Amount, in pounds"
},
prefix: {
text: "£"
}
}) }}
```

You shouldn't rely on prefixes or suffixes alone because people who use a screen reader won't see them. You should add any specific type of information you need to the input label or hint text as well.
#### Test if your HTML matches GOV.UK Frontend

This was added in [pull request #1816: Add input prefix and suffix](https://github.com/alphagov/govuk-frontend/pull/1816).
You can now use our test fixtures to [check you're outputting the same HTML that GOV.UK Frontend uses](http://frontend.design-system.service.gov.uk/testing-your-html/).

#### Add HTML test fixtures
You can use our test fixtures to check you're outputting the same HTML that GOV.UK Frontend uses.
This was added in [pull request #1925: Generate fixtures.json files for components on build:package](https://github.com/alphagov/govuk-frontend/pull/1925). Thanks to everyone who fed back on [our test fixtures proposal](https://github.com/alphagov/govuk-frontend/issues/1830#issuecomment-665075842).

This was added in [pull request #1925: Generate fixtures.json files for components on build:package](https://github.com/alphagov/govuk-frontend/pull/1925)
#### Customise navigation in the header component

#### Add new brand colour for The Foreign, Commonwealth and Development Office (FCDO)
If you use the [header component with navigation](https://design-system.service.gov.uk/components/header/#header-with-service-name-and-navigation), you can now:

This was added in [pull request #1918: Add new brand colour for FCDO](https://github.com/alphagov/govuk-frontend/pull/1918).
- customise the section's `aria-label` text
- add navigation items without links

#### Render header navigation item without a link
##### Customise aria-label text

You can now render navigation items using the header macro without wrapping them in a link.
You can use the new:

You can do this by setting `text` or `html` and not setting `href`.
- `navigationLabel` option to set the `aria-label` text for the navigation section
- `menuButtonLabel` option to set the `aria-label` text for the button that hides or shows the navigation section on mobile

For example:

```javascript
{{ govukHeader({
navigation: [
{
html: '<form method="post" action="url.com">
<input type="submit" class="app-logout-button-style" value="Log out" />
</form>'
}
]
navigationLabel: "Custom navigation section aria-label",
menuButtonLabel: "Custom menu button aria-label"
}) }}
```

This was added in [pull request # 1921: Make it possible to exclude link from header navigation item](https://github.com/alphagov/govuk-frontend/pull/1921).
The default labels are now:

- **Navigation menu** for `navigationLabel`
- **Show or hide navigation menu** for `menuButtonLabel`

This was added in pull requests:

- [#1905: Set navigation and mobile menu labels of the header component with new options](https://github.com/alphagov/govuk-frontend/pull/1905)
- [#1943: Change header menu button label](https://github.com/alphagov/govuk-frontend/pull/1943) - thanks to [@domoscargin](https://github.com/domoscargin) for raising this issue

#### Set navigation and mobile menu labels of the header with new options
##### Add navigation items without links

You can now customise the `aria-label` attributes of the navigation and mobile menu of the header component using the new `navigationLabel` and `menuButtonLabel` options.
To add a navigation item without a link, use the `text` or `html` option to add the item but do not use the `href` option.

For example:

```javascript
{{ govukHeader({
navigationLabel: "Custom navigation label",
menuButtonLabel: "Custom menu label"
navigation: [
{
html: "<form method='post' action='url.com'>
<input type='submit' class='app-logout-button-style' value='Log out' />
</form>"
}
]
}) }}
```

This was added in [pull request #1905: Set navigation and mobile menu labels of the header component with new options](https://github.com/alphagov/govuk-frontend/pull/1905).
This was added in [pull request #1921: Make it possible to exclude link from header navigation item](https://github.com/alphagov/govuk-frontend/pull/1921).

### Fixes
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This section appears to be duplicated.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think (?) I just accidentally fixed this when I rebased... let me know if not though!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah wait no sorry, it's still there... I'll fix

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be fixed now - thanks for spotting!


We’ve made fixes to GOV.UK Frontend in the following pull requests:

- [#1943: Change header menu button label](https://github.com/alphagov/govuk-frontend/pull/1943)
- [#1918: Add new brand colour for FCDO](https://github.com/alphagov/govuk-frontend/pull/1918) - thanks to [@deborahchua](https://github.com/deborahchua) for contributing this
- [#1942: Set aria-expanded and aria-hidden attributes on header menu button and menu when page loads](https://github.com/alphagov/govuk-frontend/pull/1942)
- [#1947 Add print styles for the panel component](https://github.com/alphagov/govuk-frontend/pull/1947)

Expand Down