From e5e4e675f565d29e1dfe10aafd01944d29f1536f Mon Sep 17 00:00:00 2001
From: Alessio <alessio.venturini@and.digital>
Date: Mon, 23 Sep 2024 14:27:13 +0100
Subject: [PATCH] snapshots updated

---
 __snapshots__/layout/_template.spec.js.snap   |  2 +-
 .../70.x.x-to-71.0.0-migration-guide.md       | 53 +++++++++++++++++++
 2 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/__snapshots__/layout/_template.spec.js.snap b/__snapshots__/layout/_template.spec.js.snap
index f6bfb952a5..6bf01a8c9e 100644
--- a/__snapshots__/layout/_template.spec.js.snap
+++ b/__snapshots__/layout/_template.spec.js.snap
@@ -671,7 +671,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
             
     <div class="ons-phase-banner">
         <div class="ons-container">
-            <div class="ons-grid ons-grid-flex ons-grid--gutterless ons-grid-flex--vertical-top ons-grid-flex--no-wrap">
+            <div class="ons-grid ons-grid-flex ons-grid--gutterless ons-grid-flex--vertical-center ons-grid-flex--no-wrap">
                 
                     <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-flex-no-shrink">
                         <strong class="ons-phase-banner__badge">BETA</strong>
diff --git a/migration_guides/70.x.x-to-71.0.0-migration-guide.md b/migration_guides/70.x.x-to-71.0.0-migration-guide.md
index 52dad754fb..ab6fe69168 100644
--- a/migration_guides/70.x.x-to-71.0.0-migration-guide.md
+++ b/migration_guides/70.x.x-to-71.0.0-migration-guide.md
@@ -8,6 +8,59 @@ This document outlines the steps needed to migrate to version 71.0.0 of our Desi
 
 This section will list the changes that will impact more than one component
 
+### **_New sizes introduced for margin and padding utility classes_**
+
+[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3285)
+
+-   **Description of change:** New margin and padding sizes and have been introduced and relevant utility classes have been updated with the new corresponding size
+-   **Reason for change:** As we have changed the size of our `rems` to be `16px` we needed to introduce new sizes to support our updated spacing grid.
+
+-   **Components impacted:**
+
+    -   Any component or layout where you have manually set our margin or padding utility classes.
+
+-   **Migration steps:**
+
+    1. Locate all instances of the utility classes in your codebase.
+    2. Replace old size name with new corresponding size name:
+
+    -   <details>
+        <summary><b>Click for example:</b></summary>
+
+        ```scss
+        //OLD Sizes
+        $sizes: (
+            no: 0,
+            xxs: 0.25rem,
+            xs: 0.5rem,
+            s: 1rem,
+            m: 1.5rem,
+            l: 2rem,
+            xl: 3rem,
+            auto: auto,
+        );
+
+        //NEW Sizes
+        $sizes: (
+            no: 0,
+            4xs: 0.125rem,
+            3xs: 0.25rem,
+            2xs: 0.5rem,
+            xs: 0.75rem,
+            s: 1rem,
+            m: 1.25rem,
+            l: 1.5rem,
+            xl: 2rem,
+            2xl: 2.5rem,
+            3xl: 3rem,
+            4xl: 4rem,
+            5xl: 5rem,
+            auto: auto,
+        );
+        ```
+
+        </details>
+
 ### **_Standardisation of setting heading level across components_**
 
 [**Link to PR**](https://github.com/ONSdigital/design-system/pull/3111)