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

Release v4.6.0 #3528

Merged
merged 1 commit into from
Apr 20, 2023
Merged
Show file tree
Hide file tree
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
32 changes: 19 additions & 13 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,21 @@

## Unreleased

## 4.6.0 (Feature release)

### New features

#### Updated the appearance of disabled form controls

The disabled state of Text Input, Textarea, Select and File Upload components has been updated to appear consistent across browsers and devices. They also now consistent with the existing disabled styles for Buttons, Checkboxes, and Radios.
We’ve updated the disabled state of Text Input, Textarea, Select and File Upload components so it is consistent across browsers and devices. They’re also now consistent with the existing disabled styles for Buttons, Checkboxes, and Radios.

Disabled form controls appear with their opacity reduced by 50% and with an alternative cursor appearance when hovered over.
Disabled form controls appear at 50% opacity and with an alternative cursor appearance when hovered over.

This was added in [pull request #3187: Add disabled styles for form controls](https://github.com/alphagov/govuk-frontend/pull/3187).

#### Added a top-level `disabled` parameter to form controls

The Nunjucks macros for Text Input, Textarea, Select and File Upload components have been updated to include a top-level `disabled` parameter, making it easier to enable the disabled state for these controls.
We’ve updated the Nunjucks macros for Text Input, Textarea, Select and File Upload components to include a top-level `disabled` parameter. This will make it easier to enable the disabled state for these controls.

```nunjucks
{{ govukInput({
Expand All @@ -33,7 +35,7 @@ This was added in [pull request #3187: Add disabled styles for form controls](ht

#### Configure whether the Accordion remembers and restores sessions

By default, when a user leaves a page, the [Accordion](https://design-system.service.gov.uk/components/accordion/) will remember the layout of expanded and collapsed sections selected by the user. If the user returns to the page, this layout will be restored and override any sections manually set as `expanded` in code.
By default, when a user leaves a page, the [Accordion](https://design-system.service.gov.uk/components/accordion/) will remember the layout of expanded and collapsed sections selected by the user. If the user returns to the page, this layout will be restored and override any sections manually set as expanded in code.

You can now disable this functionality by using the `rememberExpanded` option in the `govukAccordion` Nunjucks macro.

Expand All @@ -43,7 +45,7 @@ This was added in [pull request #3342: Add option to disable sessionState in Acc

#### Added `id` parameter to Buttons

The [Button](https://design-system.service.gov.uk/components/button/) Nunjucks macro has been updated to include an optional `id` parameter.
We’ve updated the [Button](https://design-system.service.gov.uk/components/button/) Nunjucks macro to include an optional `id` parameter.

```nunjucks
{{ govukButton({
Expand All @@ -52,7 +54,9 @@ The [Button](https://design-system.service.gov.uk/components/button/) Nunjucks m
}) }}
```

This was added in [pull request #3344: Adding optional id attribute to button component](https://github.com/alphagov/govuk-frontend/pull/3344). Thanks to [Tom Billington](https://github.com/TomBillingtonUK) for this contribution.
This was added in [pull request #3344: Adding optional ‘id’ attribute to button component](https://github.com/alphagov/govuk-frontend/pull/3344).

Thanks to [Tom Billington](https://github.com/TomBillingtonUK) for this contribution.

#### Added a modifier for text input styles that accept sequences of digits

Expand All @@ -66,25 +70,27 @@ This was added in [pull request #2230: Add extra letter spacing modifier for inp

#### Stop using JavaScript API properties other than the `init` method

We have deprecated all of the JavaScript properties in the API, except for the `init` method for each component. We will make all of the deprecated JavaScript properties private in v5.0.
We have deprecated all of the JavaScript properties in the API, except for the `init` method for each component. We'll make all of the deprecated JavaScript properties private in [our next main release](https://github.com/alphagov/govuk-frontend/milestone/46).

Please [let us know if you're using parts of the API other than the `init` method by filling in this form](https://docs.google.com/forms/d/e/1FAIpQLSfmH2AitMeouXqB0FWC5p5e6y1TSiFCjmJ8DrVuwfmpRGCaWw/viewform?usp=sf_link). We'll use this information when prioritising future additions to the public API.

This was added in [pull request #3499: Deprecate all JavaScript instance properties the except `init` method](https://github.com/alphagov/govuk-frontend/pull/3499).

#### Stop using the `govuk-button--disabled` class on buttons
#### Stop using the `.govuk-button--disabled` class on buttons

We have deprecated the `.govuk-button--disabled` class and will remove it in the next major release.

The `govuk-button--disabled` class is deprecated and will be removed in the next major release.
If a [Button](https://design-system.service.gov.uk/components/button/) uses a `<button>` or `<input>` element, use the disabled HTML attribute instead.

If a [Button](https://design-system.service.gov.uk/components/button/) uses a `<button>` or `<input>` element, use the `disabled` HTML attribute instead. You will not need to make any changes if you're using the `govukButton` Nunjucks macro.
You will not need to make any changes if you're using the `govukButton` Nunjucks macro.

Disabling links that are styled to look like buttons will not be supported by future releases.

This was added in [pull request #3326: Deprecate `govuk-button--disabled` class](https://github.com/alphagov/govuk-frontend/pull/3326).

#### Stop using the deprecated IE8 mixins and settings
#### Stop using the deprecated Internet Explorer 8 mixins and settings

The next major version of GOV.UK Frontend will remove support for Internet Explorer 8 (IE8). In preparation for this, we've deprecated the settings and mixins used when [generating IE8 specific stylesheets](https://frontend.design-system.service.gov.uk/supporting-ie8/#2-generate-an-ie8-specific-stylesheet).
The next main release of GOV.UK Frontend will remove support for Internet Explorer 8 (IE8). In preparation for this, we've deprecated the settings and mixins used when [generating IE8 specific stylesheets](https://frontend.design-system.service.gov.uk/supporting-ie8/#2-generate-an-ie8-specific-stylesheet).

You'll start seeing deprecation warnings if you're:

Expand All @@ -93,7 +99,7 @@ You'll start seeing deprecation warnings if you're:

If you no longer need to support IE8, we recommend you stop generating an IE8 specific stylesheet and remove references to the IE8 mixins from your code.

You can also silence these deprecation warnings by adding `ie8` to the [$govuk-suppressed-warnings](https://frontend.design-system.service.gov.uk/sass-api-reference/#govuk-suppressed-warnings) setting, but once v5.0 has been released you will need to address them as part of the upgrade process.
You can also silence these deprecation warnings by adding `ie8` to the [`$govuk-suppressed-warnings`](https://frontend.design-system.service.gov.uk/sass-api-reference/#govuk-suppressed-warnings) setting, but once we’ve released v5.0 you will need to address them as part of the upgrade process.

### Fixes

Expand Down
2 changes: 1 addition & 1 deletion dist/VERSION.txt
Original file line number Diff line number Diff line change
@@ -1 +1 @@
4.5.0
4.6.0
4 changes: 0 additions & 4 deletions dist/govuk-frontend-4.5.0.min.css

This file was deleted.

1 change: 0 additions & 1 deletion dist/govuk-frontend-4.5.0.min.css.map

This file was deleted.

2 changes: 0 additions & 2 deletions dist/govuk-frontend-4.5.0.min.js

This file was deleted.

1 change: 0 additions & 1 deletion dist/govuk-frontend-4.5.0.min.js.map

This file was deleted.

3 changes: 3 additions & 0 deletions dist/govuk-frontend-4.6.0.min.css

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions dist/govuk-frontend-4.6.0.min.css.map

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions dist/govuk-frontend-4.6.0.min.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions dist/govuk-frontend-4.6.0.min.js.map

Large diffs are not rendered by default.

2 changes: 0 additions & 2 deletions dist/govuk-frontend-ie8-4.5.0.min.css

This file was deleted.

1 change: 0 additions & 1 deletion dist/govuk-frontend-ie8-4.5.0.min.css.map

This file was deleted.

2 changes: 2 additions & 0 deletions dist/govuk-frontend-ie8-4.6.0.min.css

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions dist/govuk-frontend-ie8-4.6.0.min.css.map

Large diffs are not rendered by default.

141 changes: 81 additions & 60 deletions package/govuk-esm/all.mjs
Original file line number Diff line number Diff line change
@@ -1,15 +1,46 @@
import { nodeListForEach } from './common/index.mjs'
import Accordion from './components/accordion/accordion.mjs'
import Button from './components/button/button.mjs'
import CharacterCount from './components/character-count/character-count.mjs'
import Checkboxes from './components/checkboxes/checkboxes.mjs'
import Details from './components/details/details.mjs'
import ErrorSummary from './components/error-summary/error-summary.mjs'
import Header from './components/header/header.mjs'
import NotificationBanner from './components/notification-banner/notification-banner.mjs'
import Radios from './components/radios/radios.mjs'
import SkipLink from './components/skip-link/skip-link.mjs'
import Tabs from './components/tabs/tabs.mjs'
import { version } from './common/govuk-frontend-version.mjs';
export { version } from './common/govuk-frontend-version.mjs';
import { nodeListForEach } from './common/index.mjs';
import Accordion from './components/accordion/accordion.mjs';
export { default as Accordion } from './components/accordion/accordion.mjs';
import Button from './components/button/button.mjs';
export { default as Button } from './components/button/button.mjs';
import CharacterCount from './components/character-count/character-count.mjs';
export { default as CharacterCount } from './components/character-count/character-count.mjs';
import Checkboxes from './components/checkboxes/checkboxes.mjs';
export { default as Checkboxes } from './components/checkboxes/checkboxes.mjs';
import Details from './components/details/details.mjs';
export { default as Details } from './components/details/details.mjs';
import ErrorSummary from './components/error-summary/error-summary.mjs';
export { default as ErrorSummary } from './components/error-summary/error-summary.mjs';
import Header from './components/header/header.mjs';
export { default as Header } from './components/header/header.mjs';
import NotificationBanner from './components/notification-banner/notification-banner.mjs';
export { default as NotificationBanner } from './components/notification-banner/notification-banner.mjs';
import Radios from './components/radios/radios.mjs';
export { default as Radios } from './components/radios/radios.mjs';
import SkipLink from './components/skip-link/skip-link.mjs';
export { default as SkipLink } from './components/skip-link/skip-link.mjs';
import Tabs from './components/tabs/tabs.mjs';
export { default as Tabs } from './components/tabs/tabs.mjs';
import './common/normalise-dataset.mjs';
import './vendor/polyfills/Element/prototype/dataset.mjs';
import './vendor/polyfills/Object/defineProperty.mjs';
import './vendor/polyfills/Element.mjs';
import './vendor/polyfills/Document.mjs';
import './vendor/polyfills/String/prototype/trim.mjs';
import './i18n.mjs';
import './vendor/polyfills/Element/prototype/classList.mjs';
import './vendor/polyfills/DOMTokenList.mjs';
import './vendor/polyfills/Element/prototype/closest.mjs';
import './vendor/polyfills/Element/prototype/matches.mjs';
import './vendor/polyfills/Event.mjs';
import './vendor/polyfills/Window.mjs';
import './vendor/polyfills/Function/prototype/bind.mjs';
import './common/closest-attribute-value.mjs';
import './vendor/polyfills/Date/now.mjs';
import './vendor/polyfills/Element/prototype/nextElementSibling.mjs';
import './vendor/polyfills/Element/prototype/previousElementSibling.mjs';

/**
* Initialise all components
Expand All @@ -20,92 +51,82 @@ import Tabs from './components/tabs/tabs.mjs'
* @param {Config} [config] - Config for all components
*/
function initAll (config) {
config = typeof config !== 'undefined' ? config : {}
config = typeof config !== 'undefined' ? config : {};

// Allow the user to initialise GOV.UK Frontend in only certain sections of the page
// Defaults to the entire document if nothing is set.
var $scope = typeof config.scope !== 'undefined' ? config.scope : document
var $scope = config.scope instanceof HTMLElement ? config.scope : document;

var $accordions = $scope.querySelectorAll('[data-module="govuk-accordion"]')
var $accordions = $scope.querySelectorAll('[data-module="govuk-accordion"]');
nodeListForEach($accordions, function ($accordion) {
new Accordion($accordion, config.accordion).init()
})
new Accordion($accordion, config.accordion).init();
});

var $buttons = $scope.querySelectorAll('[data-module="govuk-button"]')
var $buttons = $scope.querySelectorAll('[data-module="govuk-button"]');
nodeListForEach($buttons, function ($button) {
new Button($button, config.button).init()
})
new Button($button, config.button).init();
});

var $characterCounts = $scope.querySelectorAll('[data-module="govuk-character-count"]')
var $characterCounts = $scope.querySelectorAll('[data-module="govuk-character-count"]');
nodeListForEach($characterCounts, function ($characterCount) {
new CharacterCount($characterCount, config.characterCount).init()
})
new CharacterCount($characterCount, config.characterCount).init();
});

var $checkboxes = $scope.querySelectorAll('[data-module="govuk-checkboxes"]')
var $checkboxes = $scope.querySelectorAll('[data-module="govuk-checkboxes"]');
nodeListForEach($checkboxes, function ($checkbox) {
new Checkboxes($checkbox).init()
})
new Checkboxes($checkbox).init();
});

var $details = $scope.querySelectorAll('[data-module="govuk-details"]')
var $details = $scope.querySelectorAll('[data-module="govuk-details"]');
nodeListForEach($details, function ($detail) {
new Details($detail).init()
})
new Details($detail).init();
});

// Find first error summary module to enhance.
var $errorSummary = $scope.querySelector('[data-module="govuk-error-summary"]')
var $errorSummary = $scope.querySelector('[data-module="govuk-error-summary"]');
if ($errorSummary) {
new ErrorSummary($errorSummary, config.errorSummary).init()
new ErrorSummary($errorSummary, config.errorSummary).init();
}

// Find first header module to enhance.
var $header = $scope.querySelector('[data-module="govuk-header"]')
var $header = $scope.querySelector('[data-module="govuk-header"]');
if ($header) {
new Header($header).init()
new Header($header).init();
}

var $notificationBanners = $scope.querySelectorAll('[data-module="govuk-notification-banner"]')
var $notificationBanners = $scope.querySelectorAll('[data-module="govuk-notification-banner"]');
nodeListForEach($notificationBanners, function ($notificationBanner) {
new NotificationBanner($notificationBanner, config.notificationBanner).init()
})
new NotificationBanner($notificationBanner, config.notificationBanner).init();
});

var $radios = $scope.querySelectorAll('[data-module="govuk-radios"]')
var $radios = $scope.querySelectorAll('[data-module="govuk-radios"]');
nodeListForEach($radios, function ($radio) {
new Radios($radio).init()
})
new Radios($radio).init();
});

// Find first skip link module to enhance.
var $skipLink = $scope.querySelector('[data-module="govuk-skip-link"]')
new SkipLink($skipLink).init()
var $skipLink = $scope.querySelector('[data-module="govuk-skip-link"]');
if ($skipLink) {
new SkipLink($skipLink).init();
}

var $tabs = $scope.querySelectorAll('[data-module="govuk-tabs"]')
var $tabs = $scope.querySelectorAll('[data-module="govuk-tabs"]');
nodeListForEach($tabs, function ($tabs) {
new Tabs($tabs).init()
})
}

export {
initAll,
Accordion,
Button,
Details,
CharacterCount,
Checkboxes,
ErrorSummary,
Header,
NotificationBanner,
Radios,
SkipLink,
Tabs
new Tabs($tabs).init();
});
}

/**
* Config for all components
*
* @typedef {object} Config
* @property {HTMLElement} [scope=document] - Scope to query for components
* @property {Element} [scope=document] - Scope to query for components
* @property {import('./components/accordion/accordion.mjs').AccordionConfig} [accordion] - Accordion config
* @property {import('./components/button/button.mjs').ButtonConfig} [button] - Button config
* @property {import('./components/character-count/character-count.mjs').CharacterCountConfig} [characterCount] - Character Count config
* @property {import('./components/error-summary/error-summary.mjs').ErrorSummaryConfig} [errorSummary] - Error Summary config
* @property {import('./components/notification-banner/notification-banner.mjs').NotificationBannerConfig} [notificationBanner] - Notification Banner config
*/

export { initAll };
//# sourceMappingURL=all.mjs.map
Loading