Skip to content

[Snyk] Upgrade govuk-frontend from 5.0.0 to 5.3.0#658

Open
govTechSatish wants to merge 1 commit intomasterfrom
snyk-upgrade-fdaeadeba5871b304ab35bd5159e4128
Open

[Snyk] Upgrade govuk-frontend from 5.0.0 to 5.3.0#658
govTechSatish wants to merge 1 commit intomasterfrom
snyk-upgrade-fdaeadeba5871b304ab35bd5159e4128

Conversation

@govTechSatish
Copy link

@govTechSatish govTechSatish commented Apr 16, 2024

This PR was automatically created by Snyk using the credentials of a real user.


Snyk has created this PR to upgrade govuk-frontend from 5.0.0 to 5.3.0.

ℹ️ Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.

  • The recommended version is 3 versions ahead of your current version.
  • The recommended version was released 21 days ago, on 2024-03-26.
Release notes
Package name: govuk-frontend
  • 5.3.0 - 2024-03-26

    To install this version with npm, run npm install govuk-frontend@5.3.0. You can also find more information about how to stay up to date in our documentation.

    New features

    Use the Password input component to help users accessibly enter passwords

    The Password input component allows users to choose:

    • whether their passwords are visible or not
    • to enter their passwords in plain text

    This helps users use longer and more complex passwords without needing to remember what they've already typed.

    This change was introduced in pull request #4442: Create password input component. Thanks to @ andysellick for the original contribution.

    Recommended changes

    Update the HTML for the Character count component

    We've updated the HTML for the Character count component. The component wrapper data-module="govuk-character-count" and its form group class="govuk-form-group" are now combined as the same <div>. The hint text used as the count message now appears directly after the <textarea>.

    If you're not using Nunjucks macros, then you should:

    • move all classes and attributes from the form group <div> to the component wrapper <div>
    • remove the opening <div> and closing </div> tags used by the form group
    • check the count message is now directly after the <textarea>

    The following example shows some HTML and the difference once it’s updated.

    HTML before:

    <div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="100">
  <div class="govuk-form-group">
    <!-- // Label, hint, error and textarea -->
  </div>
  <!-- // Count message -->
</div>

    HTML after:

    <div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="100">
  <!-- // Label, hint, error, textarea and count message -->
</div>

    Check your changes against the Character count example in the Design System to make sure you’ve correctly implemented them.

    This change was introduced in pull request #4566: Use Character count formGroup as module wrapper.

    Remove redundant role attributes from elements

    We've made minor changes to the HTML of the page template, as well as the header, footer and pagination components.

    You can update your HTML to remove the role attribute from some elements. These include the:

    • main role on the main element in the template
    • banner role on the header element in the Header component
    • contentinfo role on the footer element in the Footer component
    • navigation role on the nav element in the Pagination component

    These roles were present to support legacy browsers, such as older versions of Internet Explorer. GOV.UK Frontend no longer supports these browsers, so you can now remove these roles.

    You do not need to change anything if you're using the Nunjucks versions of the page template or these components,

    This change was introduced in pull request #4854: Remove redundant role attributes.

    Fixes

    We've fixed an upstream issue in the cssnano npm package that caused elements with transparency to render incorrectly in Internet Explorer 11. This affected the pre-compiled CSS files in the GOV.UK Frontend npm package and GitHub releases for versions 5.0, 5.1 and 5.2. This was fixed in:

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

  • 5.2.0 - 2024-02-21

    In this release, we’ve adjusted our responsive type scale, which is available behind a feature flag. The type scale change is to make text easier to read on smaller screens. We’ve also deprecated the useTudorCrown parameter.

    To install this version with npm, run npm install govuk-frontend@5.2.0. You can also find more information about how to stay up to date in our documentation.

    New features

    We've adjusted our responsive type scale

    We've made the following adjustments to our responsive type scale:

    • point 16 now returns 16px across all screen sizes
    • point 19 now returns 19px across all screen sizes
    • point 24 remains as 24px on large screens
    • point 24 now returns 21px on small screens instead of 18px and has a line height 25px instead of 20px
    • point 27 remains as 27px on large screens
    • point 27 now returns 21px on small screens instead of 18px and has a line height 25px instead of 20px
    • point 36 remains as 27px on large screens
    • point 36 now returns 27px on small screens instead of 24px and has a line height 30px instead of 25px

    To enable these changes, set the feature flag variable $govuk-new-typography-scale to true before you import GOV.UK Frontend in your Sass files:

    // application.scss
$govuk-new-typography-scale: true;
@ import "govuk-frontend/all";

    If your service uses custom elements made using GOV.UK Frontend, test your service against the new typography scale to assess if you need to make any adjustments.

    You can read more on upgrading your service to the new type scale in our upgrade guide.

    This change was introduced in pull request #2421: Adjust the responsive type scale

    Insert custom HTML into component form group wrappers

    You can now insert custom HTML into form group wrappers for all components with form fields.

    govukInput({
  formGroup: {
    beforeInput: {
      html: "example"
    },
    afterInput: {
      html: "example"
    },
  }
})

    This change was introduced in pull request #4567: Add beforeInput(s) and beforeInput(s) options to form groups.

    Deprecated features

    Stop using the useTudorCrown parameter in the Heading component

    The rollout for the revised GOV.UK logo has started and the Tudor crown logo is now shown by default. We’ve deprecated the useTudorCrown parameter and will remove it in the next major release.

    You can now remove the useTudorCrown parameter, along with any other adjustments made to display the Tudor crown logo in your service.

    This change was introduced in pull request #4740: Make Tudor Crown logo the default

    Fixes

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

  • 5.1.0 - 2024-02-05
    Read more
  • 5.0.0 - 2023-12-08
    Read more
from govuk-frontend GitHub release notes
Commit messages
Package name: govuk-frontend
  • 0801b62 Merge pull request #4896 from alphagov/release-5.3.0
  • 05bea72 Release v5.3.0
  • 8dae1da Merge pull request #4889 from alphagov/dependabot/npm_and_yarn/types-e8219633e3
  • f655ff0 Merge pull request #4888 from alphagov/dependabot/npm_and_yarn/test-b842278729
  • c3685e9 Bump the types group with 1 update
  • 2d22c6e Bump the test group with 1 update
  • 2238606 Merge pull request #4894 from alphagov/dependabot/npm_and_yarn/postcss-1a9d4a6feb
  • 15f55d7 Bump the postcss group with 3 updates
  • ad66ea7 Merge pull request #4885 from alphagov/dependabot/npm_and_yarn/lint-0bc2769b6d
  • 58aea13 Merge pull request #4882 from alphagov/dependabot/npm_and_yarn/babel-569e292a9e
  • 7da51f7 Merge pull request #4892 from alphagov/dependabot/npm_and_yarn/html-validate-8.18.0
  • c7cee2d Merge pull request #4893 from alphagov/dependabot/npm_and_yarn/filesize-10.1.1
  • 79b5037 Merge pull request #4886 from alphagov/dependabot/github_actions/dot-github/workflows/actions/install-node/actions/cache-4.0.2
  • d25beeb Merge pull request #4890 from alphagov/dependabot/npm_and_yarn/webpack-dev-server-5.0.4
  • a3b4eef Merge pull request #4883 from alphagov/dependabot/github_actions/dot-github/workflows/actions/build/actions/cache-4.0.2
  • 26a49eb Bump filesize from 10.1.0 to 10.1.1
  • 0d43916 Bump html-validate from 8.15.0 to 8.18.0
  • 547421d Bump webpack-dev-server from 5.0.3 to 5.0.4
  • 56dedaa Merge pull request #4884 from alphagov/dependabot/github_actions/actions/cache-4.0.2
  • 2337c0b Bump actions/cache in /.github/workflows/actions/install-node
  • 0ee0298 Bump the lint group with 5 updates
  • f487ba1 Bump actions/cache from 4.0.1 to 4.0.2
  • 3bd38b9 Bump actions/cache in /.github/workflows/actions/build
  • 3e2dc49 Bump the babel group with 2 updates

Compare

Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.

For more information:

🧐 View latest project report

🛠 Adjust upgrade PR settings

🔕 Ignore this dependency or unsubscribe from future upgrade PRs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@govTechSatish @snyk-bot