Merge pull request alphagov#1493 from alphagov/change-automatic-main-…

…wrapper-behaviour-to-modifier Add automatic vertical spacing modifier for main wrapper
trexima · Jul 23, 2019 · 7a7d1fa · 7a7d1fa
2 parents 0bce5fc + f68c0c1
commit 7a7d1fa
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -298,13 +298,18 @@ You can now add attributes like classes, rowspan and colspan to table row header
 
 [Pull request #1367: Allow for classes, rowspan, colspan and attributes on row headers](https://github.com/alphagov/govuk-frontend/pull/1367). Thanks to [edwardhorsford](https://github.com/edwardhorsford).
 
-#### Use page wrappers without a modifier
 
-If your page wrapper does not have components above the main section, you no longer need to use the [`govuk-main-wrapper--l` modifier class](https://design-system.service.gov.uk/styles/layout/#exploded-view-of-page-wrappers-without-a-back-link-breadcrumbs-or-phase-banner) to increase the vertical space above the content.
+#### Use page wrapper auto spacing
+
+You can now use the the `.govuk-main-wrapper--auto-spacing` modifier on the main wrapper.
+
+This will apply the correct spacing depending on whether there are any elements (such the back link, breadcrumbs or phase banner components) before the `.govuk-main-wrapper` in the `.govuk-width-container`.
+
+If you need to control the spacing manually, use the `.govuk-main-wrapper--l` modifier instead.
 
 The `govuk-main-wrapper` and `govuk-main-wrapper--l` mixins are now deprecated. [Contact us](https://design-system.service.gov.uk/get-in-touch/) if you need to continue using these mixins.
 
-[Pull request #1371: Simplify main wrapper spacing logic](https://github.com/alphagov/govuk-frontend/pull/1371)
+[Pull request #1493: Add automatic vertical spacing modifier for main wrapper](https://github.com/alphagov/govuk-frontend/pull/1493)
 
 #### GDS Transport now falls back to Arial in Internet Explorer 8 (IE8)
 

diff --git a/app/app.test.js b/app/app.test.js
@@ -210,7 +210,7 @@ describe(`http://localhost:${PORT}`, () => {
         let $ = cheerio.load(res.body)
         const $main = $('main')
 
-        expect($main.attr('class')).toBe('govuk-main-wrapper app-main-class')
+        expect($main.attr('class')).toBe('govuk-main-wrapper govuk-main-wrapper--auto-spacing app-main-class')
         done(err)
       })
     })

diff --git a/app/views/examples/template-custom/index.njk b/app/views/examples/template-custom/index.njk
@@ -73,7 +73,7 @@
   <!-- endblock:header -->
 {% endblock %}
 
-{% set mainClasses = 'app-main-class' %}
+{% set mainClasses = 'govuk-main-wrapper--auto-spacing app-main-class' %}
 
 {% block main %}
   <!-- block:main -->

diff --git a/app/views/layouts/_generic.njk b/app/views/layouts/_generic.njk
@@ -42,6 +42,8 @@
   {{ super() }}
 {% endblock %}
 
+{% set mainClasses = 'govuk-main-wrapper--auto-spacing' %}
+
 {% block bodyEnd %}
   {% if legacy %}
     {% include "partials/legacyJavaScript.njk" %}

diff --git a/src/govuk/objects/_main-wrapper.scss b/src/govuk/objects/_main-wrapper.scss
@@ -53,11 +53,14 @@
     @include govuk-main-wrapper;
   }
 
-  // For most instances of main wrapper, :first-child will give the correct
-  // spacing without the need for the `l` modifier, but it is available in
-  // instances where there may be empty elements that would be difficult to
-  // remove.
-  .govuk-main-wrapper:first-child,
+  // Using the `.govuk-main-wrapper--auto-spacing` modifier should apply the
+  // correct spacing depending on whether there are any elements
+  // (such the back link, breadcrumbs or phase banner components) before the
+  // `.govuk-main-wrapper` in the `govuk-width-container`.
+  //
+  // If you need to control the spacing manually, use the
+  // `govuk-main-wrapper--l` modifier instead.
+  .govuk-main-wrapper--auto-spacing:first-child,
   .govuk-main-wrapper--l {
     @include govuk-main-wrapper--l;
   }