Merge pull request #1271 from alphagov/release-2.10.0

Release v2.10.0

CHANGELOG.md

@@ -28,9 +28,23 @@
 
   ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
 
+## 2.10.0 (Feature release)
+
+🆕 New features:
+
+- Add smaller versions of radio buttons and checkboxes
+
+  Thanks to [@owenm6](https://github.com/owenm6) for their help and support on this one.
+
+  ([PR #1125](https://github.com/alphagov/govuk-frontend/pull/1125))
+
+🔧 Fixes:
+
 - Prevent duplicate checkbox aria-describedby
 
-  Addresses an edge case where a checkbox with a hint (but without a fieldset) is output with duplicate `aria-describeby` attributes. Fixes issue ([PR #1248](https://github.com/alphagov/govuk-frontend/pull/1248))
+  Addresses an edge case where a checkbox with a hint (but without a fieldset) is output with duplicate `aria-describeby` attributes. Fixes issue [#1248](https://github.com/alphagov/govuk-frontend/pull/1248).
+
+  Thanks to [@colinrotherham](https://github.com/colinrotherham) for fixing this issue.
 
   ([PR #1265](https://github.com/alphagov/govuk-frontend/pull/1265))
 

dist/VERSION.txt

@@ -1 +1 @@
-2.9.0
+2.10.0

package/components/checkboxes/_checkboxes.scss

@@ -8,7 +8,10 @@
 @import "../label/label";
 
 @include govuk-exports("govuk/component/checkboxes") {
-  $govuk-checkboxes-size: govuk-spacing(7);
+
+  $govuk-touch-target-size: 44px;
+  $govuk-checkboxes-size: 40px;
+  $govuk-small-checkboxes-size: 24px;
   $govuk-checkboxes-label-padding-left-right: govuk-spacing(3);
 
   .govuk-checkboxes__item {
@@ -20,7 +23,7 @@
     min-height: $govuk-checkboxes-size;
 
     margin-bottom: govuk-spacing(2);
-    padding: 0 0 0 $govuk-checkboxes-size;
+    padding-left: $govuk-checkboxes-size;
 
     clear: left;
   }
@@ -31,25 +34,33 @@
   }
 
   .govuk-checkboxes__input {
-    position: absolute;
-
-    z-index: 1;
-    top: 0;
-    left: 0;
-
-    width: $govuk-checkboxes-size;
-    height: $govuk-checkboxes-size;
+    $input-offset: ($govuk-touch-target-size - $govuk-checkboxes-size) / 2;
 
     cursor: pointer;
 
-    // IE8 doesn’t support pseudoelements, so we don’t want to hide native elements there.
+    // IE8 doesn’t support pseudo-elements, so we don’t want to hide native
+    // elements there.
     @include govuk-not-ie8 {
+      position: absolute;
+
+      z-index: 1;
+      top: $input-offset * -1;
+      left: $input-offset * -1;
+
+      width: $govuk-touch-target-size;
+      height: $govuk-touch-target-size;
       margin: 0;
+
       opacity: 0;
     }
 
-    // add focus outline to input element for IE8
     @include govuk-if-ie8 {
+      margin-top: 10px;
+      margin-right: $govuk-checkboxes-size / -2;
+      margin-left: $govuk-checkboxes-size / -2;
+      float: left;
+
+      // add focus outline to input
       &:focus {
         outline: $govuk-focus-width solid $govuk-focus-colour;
       }
@@ -63,16 +74,11 @@
     cursor: pointer;
     // remove 300ms pause on mobile
     -ms-touch-action: manipulation;
-    touch-action: manipulation;
+        touch-action: manipulation;
   }
 
-  .govuk-checkboxes__hint {
-    display: block;
-    padding-right: $govuk-checkboxes-label-padding-left-right;
-    padding-left: $govuk-checkboxes-label-padding-left-right;
-  }
-
-  .govuk-checkboxes__input + .govuk-checkboxes__label::before {
+  // [ ] Check box
+  .govuk-checkboxes__label::before {
     content: "";
     box-sizing: border-box;
     position: absolute;
@@ -82,11 +88,13 @@
     height: $govuk-checkboxes-size;
     border: $govuk-border-width-form-element solid currentColor;
     background: transparent;
-
-    // padding-bottom: 1px;
   }
 
-  .govuk-checkboxes__input + .govuk-checkboxes__label::after {
+  // ✔ Check mark
+  //
+  // The check mark is a box with a border on the left and bottom side (└──),
+  // rotated 45 degrees
+  .govuk-checkboxes__label::after {
     content: "";
 
     position: absolute;
@@ -111,10 +119,16 @@
     background: transparent;
   }
 
+  .govuk-checkboxes__hint {
+    display: block;
+    padding-right: $govuk-checkboxes-label-padding-left-right;
+    padding-left: $govuk-checkboxes-label-padding-left-right;
+  }
+
   // Focused state
   .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
-    // Since box-shadows are removed when users customise their colours
-    // We set a transparent outline that is shown instead.
+    // Since box-shadows are removed when users customise their colours, we set
+    // a transparent outline that is shown instead.
     // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
     outline: $govuk-focus-width solid transparent;
     outline-offset: $govuk-focus-width;
@@ -136,6 +150,10 @@
     opacity: .5;
   }
 
+  // =========================================================
+  // Conditional reveals
+  // =========================================================
+
   $conditional-border-width: $govuk-border-width-mobile;
   // Calculate the amount of padding needed to keep the border centered against the checkbox.
   $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2);
@@ -158,4 +176,135 @@
       margin-bottom: 0;
     }
   }
+
+  // =========================================================
+  // Small checkboxes
+  // =========================================================
+
+  .govuk-checkboxes--small {
+
+    $input-offset: ($govuk-touch-target-size - $govuk-small-checkboxes-size) / 2;
+    $label-offset: $govuk-touch-target-size - $input-offset;
+
+    .govuk-checkboxes__item {
+      @include govuk-clearfix;
+      min-height: 0;
+      margin-bottom: 0;
+      padding-left: $label-offset;
+      float: left;
+    }
+
+    // Shift the touch target into the left margin so that the visible edge of
+    // the control is aligned
+    //
+    //   ┆What colours do you like?
+    //  ┌┆───┐
+    //  │┆[] │ Purple
+    //  └┆▲──┘
+    //  ▲┆└─ Check box pseudo element, aligned with margin
+    //  └─── Touch target (invisible input), shifted into the margin
+    .govuk-checkboxes__input {
+      @include govuk-not-ie8 {
+        left: $input-offset * -1;
+      }
+
+      @include govuk-if-ie8 {
+        margin-left: $govuk-small-checkboxes-size * -1;
+      }
+    }
+
+    // Adjust the size and position of the label.
+    //
+    // Unlike larger checkboxes, we also have to float the label in order to
+    // 'shrink' it, preventing the hover state from kicking in across the full
+    // width of the parent element.
+    .govuk-checkboxes__label {
+      margin-top: -2px;
+      padding: 13px govuk-spacing(3) 13px 1px;
+      float: left;
+
+      @include govuk-media-query($from: tablet) {
+        padding: 11px govuk-spacing(3) 10px 1px;
+      }
+    }
+
+    // [ ] Check box
+    //
+    // Reduce the size of the check box [1], vertically center it within the
+    // touch target [2]
+    .govuk-checkboxes__label::before {
+      top: $input-offset - $govuk-border-width-form-element; // 2
+      width: $govuk-small-checkboxes-size; // 1
+      height: $govuk-small-checkboxes-size; // 1
+    }
+
+    // ✔ Check mark
+    //
+    // Reduce the size of the check mark and re-align within the checkbox
+    .govuk-checkboxes__label::after {
+      top: 15px;
+      left: 6px;
+      width: 9px;
+      height: 3.5px;
+      border-width: 0 0 3px 3px;
+    }
+
+    // Fix position of hint with small checkboxes
+    //
+    // Do not use hints with small checkboxes – because they're within the input
+    // wrapper they trigger the hover state, but clicking them doesn't actually
+    // activate the control.
+    //
+    // (If you do use them, they won't look completely broken... but seriously,
+    // don't use them)
+    .govuk-checkboxes__hint {
+      padding: 0;
+      clear: both;
+    }
+
+    // Align conditional reveals with small checkboxes
+    .govuk-checkboxes__conditional {
+      $margin-left: ($govuk-small-checkboxes-size / 2) - ($conditional-border-width / 2);
+      margin-left: $margin-left;
+      padding-left: $label-offset - ($margin-left + $conditional-border-width);
+      clear: both;
+    }
+
+    // Hover state for small checkboxes.
+    //
+    // We use a hover state for small checkboxes because the touch target size
+    // is so much larger than their visible size, and so we need to provide
+    // feedback to the user as to which checkbox they will select when their
+    // cursor is outside of the visible area.
+    .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
+      box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
+    }
+
+    // Because we've overridden the border-shadow provided by the focus state,
+    // we need to redefine that too.
+    //
+    // We use two box shadows, one that restores the original focus state [1]
+    // and another that then applies the hover state [2].
+    .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
+      // sass-lint:disable indentation
+      box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour, // 1
+                  0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
+    }
+
+    // For devices that explicitly don't support hover, don't provide a hover
+    // state (e.g. on touch devices like iOS).
+    //
+    // We can't use `@media (hover: hover)` because we wouldn't get the hover
+    // state in browsers that don't support `@media (hover)` (like Internet
+    // Explorer) – so we have to 'undo' the hover state instead.
+    @media (hover: none), (pointer: coarse) {
+      .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
+        box-shadow: initial;
+      }
+
+      .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
+        box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
+      }
+    }
+  }
 }

package/components/checkboxes/template.njk

@@ -54,15 +54,15 @@
     {% set name = item.name if item.name else params.name %}
     {% set conditionalId = "conditional-" + id %}
     {% set hasHint = true if item.hint.text or item.hint.html %}
-    {% set itemHintId = id + '-item-hint' %}
+    {% set itemHintId = id + "-item-hint" if hasHint else "" %}
+    {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
+    {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
     <div class="govuk-checkboxes__item">
       <input class="govuk-checkboxes__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
       {{-" checked" if item.checked }}
       {{-" disabled" if item.disabled }}
-      {#- fieldset is false by default -#}
-      {%- if (not hasFieldset) and ((describedBy | length) > 0) %} aria-describedby="{{ describedBy }}"{% endif -%}
       {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
-      {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
+      {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
       {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
       {{ govukLabel({
         html: item.html,

package/components/fieldset/template.njk

@@ -4,13 +4,13 @@
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {% if params.legend.html or params.legend.text %}
   <legend class="govuk-fieldset__legend {%- if params.legend.classes %} {{ params.legend.classes }}{% endif %}">
-  {%- if params.legend.isPageHeading %}
+  {% if params.legend.isPageHeading %}
     <h1 class="govuk-fieldset__heading">
       {{ params.legend.html | safe if params.legend.html else params.legend.text }}
     </h1>
   {% else %}
     {{ params.legend.html | safe if params.legend.html else params.legend.text }}
-  {% endif -%}
+  {% endif %}
   </legend>
   {% endif %}
 {{ caller() if caller }} {#- if statement allows usage of `call` to be optional -#}