Merge pull request #2770 from alphagov/correct-static-spacing-class

Fix ordering of properties in static spacing override classes

CHANGELOG.md

@@ -2,6 +2,20 @@
 
 ## Unreleased
 
+### Recommended changes
+
+#### Replace deprecated `govuk-!-margin-static` and `govuk-!-padding-static` classes
+
+We've fixed an error in the naming convention of the static spacing override classes we'd introduced in v4.3.0. These classes should start with `govuk-!-static`, and we've now deprecated the incorrect classes.
+
+If you're using the static spacing margin override classes, replace any classes starting with `govuk-!-margin-static` with `govuk-!-static-margin`. For example: `govuk-!-margin-static-2` would become `govuk-!-static-margin-2`.
+
+If you're using the static spacing padding override classes, replace any classes starting with `govuk-!-padding-static` with `govuk-!-static-padding`. For example: `govuk-!-padding-static-2` would become `govuk-!-static-padding-2`.
+
+We've deprecated the `govuk-!-margin-static` and `govuk-!-padding-static` classes, and will remove them in a future major release.
+
+This change was introduced in [pull request #2770: Fix ordering of properties in static spacing override classes](https://github.com/alphagov/govuk-frontend/pull/2770). Thanks to @garrystewart for reporting this issue.
+
 ## 4.3.0 (Feature release)
 
 ### New features
@@ -47,7 +61,7 @@ To apply spacing in a single direction, include `left-`, `right-`, `top-`, or `b
 For example:
 
 -   `govuk-!-static-margin-9` will apply a 60px margin to all sides of the element at all screen sizes
--   `govuk-!-static-padding-right-5` will apply 25px of padding to the right side of the element at all screen sizes    
+-   `govuk-!-static-padding-right-5` will apply 25px of padding to the right side of the element at all screen sizes
 -   `govuk-!-static-margin-0` will remove all margins at all screen sizes
 
 This was added in [pull request #2672: Add static spacing override classes](https://github.com/alphagov/govuk-frontend/pull/2672). Thanks to @patrickpatrickpatrick for this contribution.

src/govuk/overrides/_spacing.scss

@@ -61,6 +61,14 @@ $_spacing-directions: (
 /// Generate spacing override classes for the given property (e.g. margin)
 /// for each point in the non-responsive spacing scale.
 ///
+/// The classes in the format govuk-#{$property}-static-#{$spacing-point}
+/// and govuk-\!-#{$property}-#{$direction}-static-#{$spacing-point} are deprecated.
+/// For example: govuk-!-margin-static-2 or govuk-!-margin-top-static-2
+///
+/// Use classes in the format .govuk-\!-static-#{$property}-#{$spacing-point}
+/// and .govuk-\!-static-#{$property}-#{$direction}-#{$spacing-point} instead.
+/// For example: govuk-!-static-margin-2 or govuk-!-static-margin-top-2
+///
 /// @param {String} $property - Property to add spacing to (e.g. 'margin')
 ///
 /// @example css
@@ -71,13 +79,14 @@ $_spacing-directions: (
 /// @access private
 @mixin _govuk-generate-static-spacing-overrides($property) {
   @each $spacing-point in map-keys($govuk-spacing-points) {
-    .govuk-\!-#{$property}-static-#{$spacing-point} {
+    .govuk-\!-#{$property}-static-#{$spacing-point},
+    .govuk-\!-static-#{$property}-#{$spacing-point} {
       #{$property}: govuk-spacing($spacing-point) !important;
     }
 
     @each $direction in $_spacing-directions {
-
-      .govuk-\!-#{$property}-#{$direction}-static-#{$spacing-point} {
+      .govuk-\!-#{$property}-#{$direction}-static-#{$spacing-point},
+      .govuk-\!-static-#{$property}-#{$direction}-#{$spacing-point} {
         #{$property}-#{$direction}: govuk-spacing($spacing-point) !important;
       }
     }