Merge pull request #1163 from nhsuk/static-spacing

Add static spacing override classes

Author: colinrotherham

CHANGELOG.md

@@ -2,6 +2,24 @@
 
 ## Unreleased
 
+:new: **New features**
+
+#### 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://service-manual.nhs.uk/design-system/styles/spacing#static-spacing) to elements of your design.
+
+The new classes start with: `nhsuk-u-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:
+
+- `nhsuk-u-static-margin-9` will apply a 64px margin to all sides of the element at all screen sizes
+- `nhsuk-u-static-padding-right-5` will apply 32px of padding to the right side of the element at all screen sizes
+- `nhsuk-u-static-margin-0` will remove all margins at all screen sizes
+
+This was added in [pull request #1163: Add static spacing override classes](https://github.com/nhsuk/nhsuk-frontend/pull/1163).
+
 :wastebasket: **Deprecated features**
 
 #### Add nhsuk namespace to Sass mixins and functions

packages/core/utilities/_spacing.scss

@@ -1,5 +1,8 @@
+// stylelint-disable declaration-no-important
+
 @use "../settings" as *;
 @use "../tools" as *;
+@use "sass:map";
 
 ////
 /// Spacing
@@ -13,34 +16,34 @@
 
 $_spacing-directions: ("top", "right", "bottom", "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
-///   .nhsuk-u-margin-0 {
-///      margin: 0;
+/// @example css
+///   .nhsuk-u-margin-4 {
+///     margin: 16px !important;
 ///   }
 ///
-///  .nhsuk-u-margin-top-1 {
-///     margin-top: [whatever spacing point 1 is...]
+///   @media (min-width: 40.0625em) {
+///     .nhsuk-u-margin-4 {
+///       margin: 24px !important;
+///     }
 ///   }
 ///
-/// 1. For each point in the spacing scale (defined in settings), create an
-///    override that affects all directions...
-/// 2. ... and then an override for each individual direction
 
-@mixin _nhsuk-generate-spacing-overrides($property) {
-  // [1]
+@mixin _nhsuk-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 $nhsuk-spacing-responsive-scale {
     .nhsuk-u-#{$property}-#{$scale-point} {
       @include nhsuk-responsive-spacing($scale-point, $property, "all", true);
     }
 
-    // [2]
+    // ... and then an override for each individual direction
     @each $direction in $_spacing-directions {
       .nhsuk-u-#{$property}-#{$direction}-#{$scale-point} {
         @include nhsuk-responsive-spacing($scale-point, $property, $direction, true);
@@ -49,7 +52,37 @@ $_spacing-directions: ("top", "right", "bottom", "left") !default;
   }
 }
 
+/// 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
+///   .nhsuk-u-static-margin-4 {
+///      margin: 24px !important;
+///   }
+///
+
+@mixin _nhsuk-generate-static-spacing-overrides($property) {
+  @each $spacing-point in map.keys($nhsuk-spacing-points) {
+    .nhsuk-u-static-#{$property}-#{$spacing-point} {
+      #{$property}: nhsuk-spacing($spacing-point) !important;
+    }
+
+    @each $direction in $_spacing-directions {
+      .nhsuk-u-static-#{$property}-#{$direction}-#{$spacing-point} {
+        #{$property}-#{$direction}: nhsuk-spacing($spacing-point) !important;
+      }
+    }
+  }
+}
+
 @include nhsuk-exports("nhsuk/core/utilities/spacing") {
-  @include _nhsuk-generate-spacing-overrides("margin");
-  @include _nhsuk-generate-spacing-overrides("padding");
+  @include _nhsuk-generate-responsive-spacing-overrides("margin");
+  @include _nhsuk-generate-responsive-spacing-overrides("padding");
+
+  @include _nhsuk-generate-static-spacing-overrides("margin");
+  @include _nhsuk-generate-static-spacing-overrides("padding");
 }