Standardise vertical spacing for question meta stuff

Our questions can be as simple as: - question - input Or they can be as complicated as: - question - validation error message - 'optional' tag - question advice - hint - input - hint-underneath Or any combination of these things. Over time, we've accumulated different paddings and margins for each new element (and some elements gain/lose their spacing depending on the element that precedes them). So it's gradually become a bit of a mess, if we're honest. When bringing in the new buttons, @ralph-hawkins pointed out our haphazard vertical spacing, and suggested we come up with a uniform value and then implement it partout. We decided to give the same spacing separatingthe text of vertically-aligned radios and checkboxes to all of our question meta-fields, except on mobile, where the text gets smaller and the large padding becomes too enormous. I've created a SASS partial based on the spacing used for the new selection buttons, and @Extended it in all of our question meta values, killing almost all custom spacing along the way. This makes for a pretty big change to all of our form elements, but the benefits are that we now have a uniform approach that makes our existing questions look cleaner and will allow us too easily add more fields.
Crown-Commercial-Service · Feb 15, 2017 · 41c3f51 · 41c3f51
1 parent 863d37a
commit 41c3f51
Show file tree

Hide file tree

Showing 13 changed files with 84 additions and 57 deletions.
diff --git a/toolkit/scss/_document.scss b/toolkit/scss/_document.scss
@@ -1,8 +1,9 @@
-@import "_colours.scss";
-@import "_typography.scss";
-@import "_not-ie-conditional.scss";
-@import "_shims.scss";
-@import "_css3.scss";
+@import "colours";
+@import "typography";
+@import "not-ie-conditional";
+@import "shims";
+@import "css3";
+@import "forms/questions";
 
 .document-list {
   margin: 0;
@@ -17,10 +18,10 @@
 .document-link {
   @include core-19;
   @include box-sizing(border-box);
-  margin: 5px 0;
-  padding: 10px 0 10px 0;
-  position: relative;
   @include inline-block;
+  @extend %question-meta-spacing;
+
+  position: relative;
   width: 100%; /* Trigger HasLayout on older IEs */
 }
 

diff --git a/toolkit/scss/forms/_combinations.scss b/toolkit/scss/forms/_combinations.scss
@@ -21,6 +21,7 @@ $border-width: $gutter / 6;
 
   span:last-child {
     padding-bottom: 2px;
+    margin-bottom: 0;
   }
 
   .validation-wrapper & {

diff --git a/toolkit/scss/forms/_hint.scss b/toolkit/scss/forms/_hint.scss
@@ -1,17 +1,26 @@
-@import "_colours.scss";
-@import "_typography.scss";
+@import "colours";
+@import "typography";
 @import "shared_scss/_dmspeak.scss";
+@import "questions";
 
 %hint,
 .hint {
   @extend %markdown-description;
   display: block;
-  margin: 0 0 5px 0;
   color: $secondary-text-colour;
   clear: both;
+
+  p:last-child {
+    padding-bottom: 0;
+  }
 }
 
 .hint-underneath {
   @extend %hint;
-  padding-top: 10px;
+
+  padding-top: 18px;
+
+  @include media(tablet) {
+    padding-top: 17px;
+  }
 }
diff --git a/toolkit/scss/forms/_pricing.scss b/toolkit/scss/forms/_pricing.scss
@@ -1,7 +1,7 @@
-@import "_colours.scss";
-@import "_measurements.scss";
-@import "_shims.scss";
-@import "_typography.scss";
+@import "colours";
+@import "measurements";
+@import "shims";
+@import "typography";
 
 @include media($min-width: 959px) {
   .column-two-thirds .pricing {
@@ -11,7 +11,9 @@
 
 .pricing {
 
-  margin-top: $gutter-half;
+  @include media(tablet) {
+    padding-top: 7px;
+  }
 
   .pricing-column {
     position: relative;

diff --git a/toolkit/scss/forms/_questions.scss b/toolkit/scss/forms/_questions.scss
@@ -1,22 +1,40 @@
-@import "_colours";
-@import "_typography.scss";
+@import "colours";
+@import "typography";
 @import "shared_scss/_dmspeak.scss";
 @import "shared_placeholders/_visuallyhidden.scss";
 
+
+// Spacing rules based on those found in govuk elements selection buttons
+// Version: https://github.com/alphagov/govuk_elements/commit/537a4c14641377e7686ccc7586c2632c1008d7dc
+%question-meta-spacing {
+  margin-bottom: $gutter-one-third;
+
+  @include media(tablet) {
+    padding-top: 7px;
+    padding-bottom: 7px;
+  }
+}
+
 .question,
 %question {
   @extend %contain-floats;
   margin: 15px 0 30px 0;
   clear: both;
 
-  .hint {
-    margin-bottom: 0;
-  }
-
   // This preserves the vertical margins set on the .question-headings
   legend {
     height: 100%;
   }
+
+  > span {
+    @extend %question-meta-spacing;
+  }
+
+  .question-heading {
+    @extend %question-meta-spacing;
+
+    padding-top: 0;
+  }
 }
 
 .question-first {
@@ -27,8 +45,8 @@
 .question-heading,
 %question-heading {
   @include heading-24;
+
   font-weight: 700;
-  margin: 0 0 10px 0;
 
   p {
   margin-bottom: 10px;
@@ -39,11 +57,6 @@
   }
 }
 
-.question-heading-with-hint {
-  @extend %question-heading;
-  margin-bottom: 0;
-}
-
 .question-description {
   @include copy-16;
   margin: 0 0 0 0;
@@ -89,27 +102,20 @@
 .question-optional {
   @include core-19;
   display: block;
-  margin-top: 10px;
-  padding-bottom: 10px;
 }
 
 .question-advice {
   @extend %markdown-description;
-  margin-top: 10px;
-  margin-bottom: 10px;
   display: block;
 }
 
-.question-optional + .question-advice {
-  margin-top: 0;
-}
-
 .single-question-page {
+
   .question {
     margin-top: 0;
 
     .question-advice {
-      margin-top: 0;
+      padding-top: 0;
     }
   }
 

diff --git a/toolkit/scss/forms/_selection-buttons.scss b/toolkit/scss/forms/_selection-buttons.scss
@@ -8,19 +8,20 @@
 @import "measurements";
 @import "conditionals";
 @import "typography";
+@import "questions";
 
 // By default, block labels stack vertically
 .selection-button {
 
   @include core-19; /* Specific to Digital Marketplace */
+  @extend %question-meta-spacing;
+
+  padding: (8px $gutter-one-third 9px 50px);
   display: block;
   float: none;
   clear: left;
   position: relative;
 
-  padding: (8px $gutter-one-third 9px 50px);
-  margin-bottom: $gutter-one-third;
-
   cursor: pointer; // Encourage clicking on block labels
 
   // remove 300ms pause on mobile
@@ -29,8 +30,6 @@
 
   @include media(tablet) {
     float: left;
-    padding-top: 7px;
-    padding-bottom: 7px;
     // width: 25%; - Test : check that text within labels will wrap
   }
 

diff --git a/toolkit/scss/forms/_upload.scss b/toolkit/scss/forms/_upload.scss
@@ -1,4 +1,5 @@
-@import "_typography.scss";
+@import "typography";
+@import "questions";
 
 .file-upload-existing-value {
   @include core-19;
@@ -7,5 +8,8 @@
 
 .file-upload-input {
   @include core-19;
-  margin-top: 5px;
+  @extend %question-meta-spacing;
+
+  padding-bottom: 0;
+  margin-bottom: 0;
 }
diff --git a/toolkit/scss/forms/_validation.scss b/toolkit/scss/forms/_validation.scss
@@ -1,6 +1,7 @@
 @import "colours";
 @import "typography";
 @import "shims";
+@import "questions";
 
 .validation-masthead {
 
@@ -41,21 +42,21 @@
   margin: 15px 0 30px 0;
   @extend %contain-floats;
 
-  .question {
+  .question,
+  .question button {
     margin: 0;
   }
 
-  .question-heading,
-  .question-heading-with-hint {
+  .question-heading {
     padding-top: 0;
   }
-
 }
 
 .validation-message {
   @include core-19;
+  @extend %question-meta-spacing;
+
   display: block;
   font-weight: bold;
   color: $red;
-  padding: 5px 0 7px 0;
 }
diff --git a/toolkit/scss/shared_scss/_dmspeak.scss b/toolkit/scss/shared_scss/_dmspeak.scss
@@ -1,5 +1,5 @@
-@import "_typography.scss";
-@import "lists.scss";
+@import "typography";
+@import "lists";
 
 // The following placeholders must be present in your main stylesheet:
 // - shared_placeholders/_dm-typography.scss
@@ -41,6 +41,10 @@
     @include list-spacing($list-margin-top: -10px, $list-item-margin-bottom: 0)
   }
 
+  p:last-child {
+    padding-bottom: 0;
+  }
+
   ul, ol {
     padding-bottom: 10px;
     padding-left: 20px;

diff --git a/toolkit/templates/forms/list-entry.html b/toolkit/templates/forms/list-entry.html
@@ -13,7 +13,7 @@
 {% endif %}
   <fieldset class="question {% if first_question %}first-question{% endif %}" id="{{ id }}">
     <legend>
-      <span class="question-heading {% if hint or question_advice %}question-heading-with-hint{% endif %}">
+      <span class="question-heading">
         {% if question_number %}
           <span class="question-number">
             {{ question_number }}

diff --git a/toolkit/templates/forms/pricing.html b/toolkit/templates/forms/pricing.html
@@ -62,7 +62,7 @@
 {% else %}
   <fieldset class="question first-question" id="{{ name }}">
     <legend>
-      <span class="question-heading{% if hint or question_advice %} question-heading-with-hint{% endif %}">
+      <span class="question-heading">
         {{ question }}
       </span>
       {% if error %}

diff --git a/toolkit/templates/forms/textbox.html b/toolkit/templates/forms/textbox.html
@@ -10,7 +10,7 @@
 {% endif %}
   <div class="question{% if hidden %} js-hidden{% endif %}{% if hidden is defined %} related-information{% endif %}" id="{{ name }}">
     <label for="input-{{ name }}">
-      <span class="question-heading{% if hint or question_advice %}-with-hint{% endif %}">
+      <span class="question-heading">
         {% if question_number %}
           <span class="question-number">
             {{ question_number }}
@@ -28,7 +28,7 @@
       {% endif %}
     </label>
     {% if optional %}
-      <span class="question-optional" style="margin-top: 10px;">
+      <span class="question-optional">
         <strong>Optional</strong>
       </span>
     {% endif %}

diff --git a/toolkit/templates/forms/upload.html b/toolkit/templates/forms/upload.html
@@ -11,7 +11,7 @@
   <div class="question" id="{{ name }}">
     <label for="input-{{ name }}">
       {% if question %}
-        <span class="question-heading{% if hint or question_advice %}-with-hint{% endif %}">
+        <span class="question-heading">
           {% if question_number %}
             <span class="question-number">
               {{ question_number }}