Merge pull request #2672 from patrickpatrickpatrick/not-responsive-ov…

…erride-padding-margin

Add static spacing override classes

CHANGELOG.md

@@ -34,6 +34,22 @@ Components that have been updated to support this syntax are:
 
 This was added in [pull request #2734: Update various components to be callable](https://github.com/alphagov/govuk-frontend/pull/2734).
 
+#### Use new override classes to apply static spacing
+
+You can now use static spacing override classes to apply spacing from [the static spacing scale](https://design-system.service.gov.uk/styles/spacing/#static-spacing) to elements of your design.
+
+The new classes start with: `govuk-!-static` followed by either `margin-` or `padding-`, and then a spacing unit number.
+
+To apply spacing in a single direction, include `left-`, `right-`, `top-`, or `bottom-` just before the spacing unit.
+
+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-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 [Patrick Cartlidge](https://github.com/patrickpatrickpatrick) for this contribution.
+
 ### Deprecated features
 
 #### Remove deprecated `govuk-header__navigation--no-service-name` class in the header

src/govuk/overrides/_spacing.scss

@@ -2,6 +2,8 @@
 /// @group overrides
 ////
 
+// stylelint-disable declaration-no-important
+
 /// Directions for spacing
 ///
 /// @type Map
@@ -14,25 +16,27 @@ $_spacing-directions: (
   "left"
 ) !default;
 
-/// Spacing override classes
+/// Generate responsive spacing override classes
 ///
 /// Generate spacing override classes for the given property (e.g. margin)
-/// for each point in the spacing scale.
+/// for each point in the responsive spacing scale.
 ///
 /// @param {String} $property - Property to add spacing to (e.g. 'margin')
 ///
-/// @example scss
-///   .govuk-\!-margin-0 {
-///      margin: 0;
-///   }
+/// @example css
+///  .govuk-\!-margin-4 {
+///    margin: 15px !important;
+///  }
 ///
-///  .govuk-\!-margin-top-1 {
-///     margin-top: [whatever spacing point 1 is...]
-///   }
+///  @media (min-width: 40.0625em) {
+///    .govuk-\!-margin-4 {
+///      margin: 20px !important;
+///    }
+///  }
 ///
 /// @access private
 
-@mixin _govuk-generate-spacing-overrides($property) {
+@mixin _govuk-generate-responsive-spacing-overrides($property) {
   // For each point in the spacing scale (defined in settings), create an
   // override that affects all directions...
   @each $scale-point, $scale-map in $govuk-spacing-responsive-scale {
@@ -52,7 +56,38 @@ $_spacing-directions: (
   }
 }
 
+/// Generate static spacing override classes
+///
+/// Generate spacing override classes for the given property (e.g. margin)
+/// for each point in the non-responsive spacing scale.
+///
+/// @param {String} $property - Property to add spacing to (e.g. 'margin')
+///
+/// @example css
+///   .govuk-\!-static-margin-4 {
+///      margin: 20px !important;
+///   }
+///
+/// @access private
+@mixin _govuk-generate-static-spacing-overrides($property) {
+  @each $spacing-point in map-keys($govuk-spacing-points) {
+    .govuk-\!-#{$property}-static-#{$spacing-point} {
+      #{$property}: govuk-spacing($spacing-point) !important;
+    }
+
+    @each $direction in $_spacing-directions {
+
+      .govuk-\!-#{$property}-#{$direction}-static-#{$spacing-point} {
+        #{$property}-#{$direction}: govuk-spacing($spacing-point) !important;
+      }
+    }
+  }
+}
+
 @include govuk-exports("govuk/overrides/spacing") {
-  @include _govuk-generate-spacing-overrides("margin");
-  @include _govuk-generate-spacing-overrides("padding");
+  @include _govuk-generate-responsive-spacing-overrides("margin");
+  @include _govuk-generate-responsive-spacing-overrides("padding");
+
+  @include _govuk-generate-static-spacing-overrides("margin");
+  @include _govuk-generate-static-spacing-overrides("padding");
 }