To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.
New features
Use Sass functions to create custom media queries
We've added new Sass functions to help write @media and @container queries, mixins and functions whilst still using GOV.UK Frontend's $govuk-breakpoints setting.
You can create min-width and max-width queries using the govuk-from-breakpoint and govuk-until-breakpoint functions:
.element {
color: red;
@media #{govuk-from-breakpoint(mobile)} and #{govuk-until-breakpoint(desktop)} {
color: blue;
}
}You can get the configured value of a breakpoint using govuk-breakpoint-value:
@function wider-than-tablet($width) {
@return $width > govuk-breakpoint-value(tablet);
}Each of these functions allows for passing a custom breakpoint map. This can be useful if a particular component needs to change layout at different dimensions to the rest of the site and for authoring @container queries.
$component-breakpoints: (
small: 300px,
medium: 500px,
large: 750px
);
.element {
color: red;
@container #{govuk-from-breakpoint(small, $component-breakpoints)} {
color: blue;
}
}We've rewritten the internals of the govuk-media-query mixin to make use of these new functions. The rewritten mixin should work identically and return the same CSS as the previous version, but you may want to make sure that your existing media queries work as expected.
We made these changes in the following pull requests:
Recommended changes
Rename ellipses HTML class in pagination to ellipsis
Within the pagination component, change the govuk-pagination__item--ellipses class to govuk-pagination__item--ellipsis.
We introduced this change in pull request #5882: Rename ellipses html class to ellipsis. Thanks to @frankieroberto for making this change.
Fixes
- #6223: Account for multiple attribute when enhancing a File Input. Thanks to @deberny for reporting this issue.
- #6297: Output deprecation warning if $govuk-show-breakpoints is true
- #6304: Fix long filenames in enhanced file upload not wrapping. Thanks to @wardt7 for reporting this issue.
